styling

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 (
     <Link
       className={`${styles.logounit} ${small ? styles.small : null}`}
@@ -20,9 +22,9 @@ export default function LogoUnit({ small }: Props) {
       aria-current={isHome ? 'page' : null}
     >
       <Logo className={styles.logo} />
-      <h1 className={`p-name ${styles.title}`}>
+      <H className={`p-name ${styles.title}`}>
         {resume.basics.name.toLowerCase()}
-      </h1>
+      </H>
       <p className={`p-job-title ${styles.description}`}>
         {resume.basics.label.toLowerCase()}
       </p>

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 }) => {

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);
+}

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 (
+    <Select.Item value={theme} className={styles.item}>
+      <Select.ItemIndicator className={styles.itemIndicator}>
+        <Icon name="Check" />
+      </Select.ItemIndicator>
+
+      <Select.Icon className={styles.itemIcon}>
+        <Icon name={getIconName(theme)} />
+      </Select.Icon>
+
+      <Select.ItemText className={styles.itemText}>{theme}</Select.ItemText>
+    </Select.Item>
+  )
+}

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);
+  }
+}

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() {
 
             <Select.Portal>
               <Select.Content className={styles.content} position="popper">
+                <Select.Arrow className={styles.arrow} width={14} height={7} />
                 <Select.Viewport className={styles.viewport}>
-                  {themes.map((theme) => (
-                    <Select.Item
-                      key={theme}
-                      value={theme}
-                      className={styles.item}
-                    >
-                      <Select.ItemIndicator className={styles.itemIndicator}>
-                        <Icon name="Check" />
-                      </Select.ItemIndicator>
-
-                      <Select.Icon className={styles.itemIcon}>
-                        <Icon name={getIconName(theme)} />
-                      </Select.Icon>
-
-                      <Select.ItemText className={styles.itemText}>
-                        {theme}
-                      </Select.ItemText>
-                    </Select.Item>
-                  ))}
+                  {themes
+                    .map((theme) => <Item key={theme} theme={theme}></Item>)
+                    .reverse()}
                 </Select.Viewport>
               </Select.Content>
             </Select.Portal>

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); */