From e3176fc692211f664786d1e494bcebe1e272742a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 29 Jan 2023 03:02:05 +0000 Subject: [PATCH] styling --- src/components/LogoUnit/index.tsx | 6 ++- src/components/Networks/NetworkLink.tsx | 2 +- src/components/ThemeSwitch/Item.module.css | 37 ++++++++++++++ src/components/ThemeSwitch/Item.tsx | 20 ++++++++ src/components/ThemeSwitch/index.module.css | 55 +++++++-------------- src/components/ThemeSwitch/index.tsx | 36 +++++--------- src/styles/_variables.css | 4 +- 7 files changed, 94 insertions(+), 66 deletions(-) create mode 100644 src/components/ThemeSwitch/Item.module.css create mode 100644 src/components/ThemeSwitch/Item.tsx diff --git a/src/components/LogoUnit/index.tsx b/src/components/LogoUnit/index.tsx index 8f2f1f3..5424420 100644 --- a/src/components/LogoUnit/index.tsx +++ b/src/components/LogoUnit/index.tsx @@ -13,6 +13,8 @@ export default function LogoUnit({ small }: Props) { const { pathname } = router const isHome = pathname === '/' + const H = small ? 'h2' : 'h1' + return ( -

+ {resume.basics.name.toLowerCase()} -

+

{resume.basics.label.toLowerCase()}

diff --git a/src/components/Networks/NetworkLink.tsx b/src/components/Networks/NetworkLink.tsx index 52959d2..39a6af0 100644 --- a/src/components/Networks/NetworkLink.tsx +++ b/src/components/Networks/NetworkLink.tsx @@ -1,6 +1,6 @@ import Icon from '../Icon' import styles from './index.module.css' -import { LazyMotion, m, domAnimation, useReducedMotion } from 'framer-motion' +import { LazyMotion, m, domAnimation } from 'framer-motion' import { moveInTop } from '../Transitions' export const NetworkLink = ({ name, url }: { name: string; url: string }) => { diff --git a/src/components/ThemeSwitch/Item.module.css b/src/components/ThemeSwitch/Item.module.css new file mode 100644 index 0000000..fe1dae0 --- /dev/null +++ b/src/components/ThemeSwitch/Item.module.css @@ -0,0 +1,37 @@ +.item { + font-size: var(--font-size-small); + color: var(--text-color); + position: relative; + padding: calc(var(--spacer) / 4) var(--spacer); + user-select: none; + border-radius: calc(var(--border-radius) / 1.25); + display: flex; + align-items: center; + text-transform: capitalize; +} + +.item[data-highlighted] { + outline: none; + background-color: var(--text-color); + color: var(--body-background-color); + cursor: default; +} + +.item span { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.itemIndicator { + position: absolute; + left: 0; + width: var(--spacer); + display: inline-flex; + align-items: center; + justify-content: center; +} + +.itemIcon { + margin-right: calc(var(--spacer) / 4); +} diff --git a/src/components/ThemeSwitch/Item.tsx b/src/components/ThemeSwitch/Item.tsx new file mode 100644 index 0000000..a18de89 --- /dev/null +++ b/src/components/ThemeSwitch/Item.tsx @@ -0,0 +1,20 @@ +import Icon from '../Icon' +import * as Select from '@radix-ui/react-select' +import { getIconName } from './index' +import styles from './Item.module.css' + +export function Item({ theme }: { theme: string }) { + return ( + + + + + + + + + + {theme} + + ) +} diff --git a/src/components/ThemeSwitch/index.module.css b/src/components/ThemeSwitch/index.module.css index 4d022e0..c52816a 100644 --- a/src/components/ThemeSwitch/index.module.css +++ b/src/components/ThemeSwitch/index.module.css @@ -39,50 +39,22 @@ } .content { - overflow: hidden; padding: calc(var(--spacer) / 3); background-color: var(--box-background-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); + border: 1px solid var(--text-color-dimmed); + animation-duration: 0.2s; + animation-timing-function: var(--easing); + will-change: transform, opacity; } -.item { - font-size: var(--font-size-small); - color: var(--text-color); - position: relative; - padding: calc(var(--spacer) / 8) var(--spacer); - padding-left: var(--spacer); - padding-right: var(--spacer); - user-select: none; - border-radius: calc(var(--border-radius) / 1.5); - display: flex; - align-items: center; +.content[data-state='open'] { + animation-name: slideUpAndFade; } -.item[data-highlighted] { - outline: none; - background-color: var(--text-color); - color: var(--body-background-color); - cursor: default; -} - -.item span { - display: inline-flex; - align-items: center; - justify-content: center; -} - -.itemIndicator { - position: absolute; - left: 0; - width: var(--spacer); - display: inline-flex; - align-items: center; - justify-content: center; -} - -.itemIcon { - margin-right: calc(var(--spacer) / 4); +.arrow { + fill: var(--text-color-dimmed); } @media print { @@ -90,3 +62,14 @@ display: none; } } + +@keyframes slideUpAndFade { + from { + opacity: 0; + transform: translateY(1rem); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/components/ThemeSwitch/index.tsx b/src/components/ThemeSwitch/index.tsx index 57bb504..bffb2c6 100644 --- a/src/components/ThemeSwitch/index.tsx +++ b/src/components/ThemeSwitch/index.tsx @@ -1,11 +1,12 @@ -import styles from './index.module.css' -import Head from 'next/head' -import { useTheme } from 'next-themes' -import { useState, useEffect } from 'react' -import * as Select from '@radix-ui/react-select' import Icon from '../Icon' +import styles from './index.module.css' +import * as Select from '@radix-ui/react-select' +import { useTheme } from 'next-themes' +import Head from 'next/head' +import { useState, useEffect } from 'react' +import { Item } from './Item' -function getIconName(theme: string) { +export function getIconName(theme: string) { return theme === 'light' ? 'Sun' : theme === 'dark' ? 'Moon' : 'Monitor' } @@ -46,26 +47,11 @@ export default function ThemeSwitch() { + - {themes.map((theme) => ( - - - - - - - - - - - {theme} - - - ))} + {themes + .map((theme) => ) + .reverse()} diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 6ae6555..440a34f 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -12,7 +12,7 @@ /* Backgrounds */ --body-background-color: var(--brand-light); - --box-background-color: rgba(255, 255, 255, 0.4); + --box-background-color: #f0f5f8; /* Text Colors */ --text-color: var(--brand-grey); @@ -64,7 +64,7 @@ .dark { --body-background-color: #161a1b; - --box-background-color: rgba(255, 255, 255, 0.03); + --box-background-color: #1d2122; --box-shadow: 0 1.3px 5.4px rgba(0, 7, 8, 0.6); /* --box-shadow: 0 1.3px 5.4px rgba(0, 7, 8, 0.6), 0 4.5px 18.1px rgba(0, 7, 8, 0.4), 0 20px 81px rgba(0, 7, 8, 0.1); */