Formatting & styling

components/activelink.tsx

@@ -1,23 +1,31 @@
-import { useRouter } from "next/router"
-import { ReactNode } from "react"
-import Link from "next/link"
-import styled, {css} from "styled-components"
+import { useRouter } from "next/router";
+import { ReactNode } from "react";
+import Link from "next/link";
+import styled, { css } from "styled-components";
 
-const ALink = styled.a<{active?: boolean}>`
+const ALink = styled.a<{ active?: boolean }>`
   border-bottom: 1px solid transparent;
-	${({active}) => active && css`
+  ${({ active }) =>
+    active &&
+    css`
       color: var(--fg) !important;
       /*border-bottom-color: currentColor;*/
     `}
-`
+`;
 
-const ActiveLink = ({children, href}: {children: ReactNode, href: string}) => {
-	const router = useRouter()
+const ActiveLink = ({
+  children,
+  href,
+}: {
+  children: ReactNode;
+  href: string;
+}) => {
+  const router = useRouter();
   return (
     <Link href={href} passHref>
       <ALink active={router.asPath === href}>{children}</ALink>
     </Link>
-	)
-}
+  );
+};
 
-export default ActiveLink
+export default ActiveLink;

components/burgermenu.tsx

@@ -1,6 +1,6 @@
-import styled, {css} from "styled-components"
-import React, {useState} from "react"
-import NavLinks from "./navlinks"
+import styled, { css } from "styled-components";
+import React, { useState } from "react";
+import NavLinks from "./navlinks";
 
 const MenuLine = styled.div`
   width: 1.8rem;
@@ -8,11 +8,11 @@ const MenuLine = styled.div`
   border-radius: 2px;
   background-color: var(--fg);
   &:not(:last-child) {
-		margin-bottom: .4rem;
+    margin-bottom: 0.4rem;
   }
-`
+`;
 
-const BurgerContainer = styled.div<{open: boolean}>`
+const BurgerContainer = styled.div<{ open: boolean }>`
   display: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -21,7 +21,7 @@ const BurgerContainer = styled.div<{open: boolean}>`
   margin-left: auto;
 
   div {
-		transition: .2s;
+    transition: 0.2s;
   }
 
   &:hover {
@@ -38,7 +38,9 @@ const BurgerContainer = styled.div<{open: boolean}>`
     }
   }
 
-	${({open}) => open && css`
+  ${({ open }) =>
+    open &&
+    css`
       position: fixed;
       right: 2rem;
       z-index: 99;
@@ -48,20 +50,20 @@ const BurgerContainer = styled.div<{open: boolean}>`
       }
 
       div:nth-child(1) {
-			transform: rotate(45deg) translate(.2rem, .2rem);
+        transform: rotate(45deg) translate(0.2rem, 0.2rem);
       }
 
       div:nth-child(2) {
-			transform: rotate(-45deg) translate(-.18rem, .2rem);
+        transform: rotate(-45deg) translate(-0.18rem, 0.2rem);
       }
 
       div:last-child {
         display: none;
       }
     `}
-`
+`;
 
-const BNavCont = styled.nav<{show: boolean}>`
+const BNavCont = styled.nav<{ show: boolean }>`
   display: flex;
   opacity: 0;
   backdrop-filter: blur(25px);
@@ -74,7 +76,7 @@ const BNavCont = styled.nav<{show: boolean}>`
   width: 100vw;
   height: 100vh;
   z-index: 2;
-	transition: opacity .2s;
+  transition: opacity 0.2s;
 
   align-items: center;
   justify-content: center;
@@ -91,44 +93,47 @@ const BNavCont = styled.nav<{show: boolean}>`
   }
 
   a:hover {
-		opacity: .4;
+    opacity: 0.4;
   }
 
-
-	${({show}) => show && css`
+  ${({ show }) =>
+    show &&
+    css`
       display: flex;
       opacity: 1;
       pointer-events: unset;
     `}
 
-
   @media screen and (min-width: 960px) {
     display: none;
     position: absolute;
     top: 0;
   }
-`
+`;
 
-const BNav: React.FC<{show: boolean, onClick: () => void}> = ({show, onClick}) => {
+const BNav: React.FC<{ show: boolean; onClick: () => void }> = ({
+  show,
+  onClick,
+}) => {
   return (
     <BNavCont show={show} onClick={onClick}>
       <NavLinks />
     </BNavCont>
-	)
-}
+  );
+};
 
 const Menu = () => {
   const [open, setOpen] = useState(false);
   return (
     <>
-			<BNav show={open} onClick={() => setOpen(false)}/>
+      <BNav show={open} onClick={() => setOpen(false)} />
       <BurgerContainer open={open} onClick={() => setOpen(!open)}>
         <MenuLine />
         <MenuLine />
         <MenuLine />
       </BurgerContainer>
     </>
-	)
-}
+  );
+};
 
-export default Menu
+export default Menu;

components/footer.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 // import Link from "next/link"
 
 const FooterCont = styled.footer`
@@ -9,7 +9,7 @@ const FooterCont = styled.footer`
   padding: 0 1.2rem;
 
   color: var(--fg-faded);
-`
+`;
 
 // const UList = styled.ul`
 // 	display: flex;
@@ -20,7 +20,7 @@ const FooterCont = styled.footer`
 
 export const Spacer = styled.div`
   flex: 1;
-`
+`;
 
 const Footer = () => {
   return (
@@ -29,7 +29,7 @@ const Footer = () => {
         <p>&copy; Copyright {new Date().getFullYear()}</p>
       </FooterCont>
     </>
-	)
-}
+  );
+};
 
-export default Footer
+export default Footer;

components/header.tsx

@@ -1,13 +1,13 @@
-import styled from "styled-components"
-import Nav from "./nav"
-import Link from "next/link"
-import Menu from "./burgermenu"
+import styled from "styled-components";
+import Nav from "./nav";
+import Link from "next/link";
+import Menu from "./burgermenu";
 
 const HeaderCont = styled.header`
   display: flex;
   align-items: center;
   border-bottom: var(--border-size) var(--border-type) var(--border-color);
-	padding: .8rem 2rem;
+  padding: 0.8rem 2rem;
   gap: 2rem;
 
   h1 {
@@ -23,20 +23,21 @@ const HeaderCont = styled.header`
     float: right;
   }
 
-
   @media screen and (max-width: 960px) {
     padding: 1rem 2rem;
   }
-`
+`;
 
 const Header = () => {
   return (
     <HeaderCont>
-			<h1><Link href="/">wych.dev</Link></h1>
+      <h1>
+        <Link href="/">wych.dev</Link>
+      </h1>
       <Nav />
       <Menu />
     </HeaderCont>
-	)
-}
+  );
+};
 
-export default Header
+export default Header;

components/iconlink.tsx

@@ -1,16 +1,28 @@
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import styled from "styled-components"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styled from "styled-components";
 
 const ILink = styled.a`
   font-size: 1.5rem;
-	margin: 0 .4rem;
-`
+  margin: 0 0.4rem;
+`;
 
-const IconLink = ({href, icon, target, rel}: {href: string, icon: IconDefinition, target: string, rel: string}) => {
+const IconLink = ({
+  href,
+  icon,
+  target,
+  rel,
+}: {
+  href: string;
+  icon: IconDefinition;
+  target: string;
+  rel: string;
+}) => {
   return (
-		<ILink href={href} target={target} rel={rel}><FontAwesomeIcon icon={icon}/></ILink>
-	)
-}
+    <ILink href={href} target={target} rel={rel}>
+      <FontAwesomeIcon icon={icon} />
+    </ILink>
+  );
+};
 
-export default IconLink
+export default IconLink;

components/layout.tsx

@@ -1,17 +1,19 @@
-import Header from "./header"
-import Footer from "./footer"
-import {ReactNode} from "react"
-import Head from "next/head"
+import Header from "./header";
+import Footer from "./footer";
+import { ReactNode } from "react";
+import Head from "next/head";
 
-const Layout = ({children}: {children: ReactNode}) => {
-	return (<>
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>wych.dev</title>
       </Head>
       <main>{children}</main>
       <Footer />
-	</>)
-}
+    </>
+  );
+};
 
-export default Layout
+export default Layout;

components/nav.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
-import NavLinks from "./navlinks"
+import styled from "styled-components";
+import NavLinks from "./navlinks";
 
 const NavCont = styled.nav`
   display: flex;
@@ -13,7 +13,7 @@ const NavCont = styled.nav`
   }
 
   a:hover {
-		opacity: .4;
+    opacity: 0.4;
   }
 
   @media screen and (max-width: 960px) {
@@ -21,14 +21,14 @@ const NavCont = styled.nav`
     position: absolute;
     top: 0;
   }
-`
+`;
 
 const Nav = () => {
   return (
     <NavCont>
       <NavLinks />
     </NavCont>
-	)
-}
+  );
+};
 
-export default Nav
+export default Nav;

components/navlinks.tsx

@@ -1,4 +1,4 @@
-import ActiveLink from "./activelink"
+import ActiveLink from "./activelink";
 
 const NavLinks = () => {
   return (
@@ -6,10 +6,14 @@ const NavLinks = () => {
       <ActiveLink href="/">About</ActiveLink>
       <ActiveLink href="/#contact">Contact</ActiveLink>
       <ActiveLink href="/projects">Projects</ActiveLink>
-			<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>
-			<a href="https://git.wych.dev" target="_blank" rel="noreferrer">WychGit</a>
+      <a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">
+        GitHub
+      </a>
+      <a href="https://git.wych.dev" target="_blank" rel="noreferrer">
+        WychGit
+      </a>
     </>
-	)
-}
+  );
+};
 
-export default NavLinks
+export default NavLinks;

components/scrollme.tsx

@@ -1,12 +1,15 @@
-import * as React from "react"
-import { SVGProps } from "react"
+import Link from "next/link";
+import * as React from "react";
+import { SVGProps } from "react";
 
-const ScrollMe = (props: SVGProps<SVGSVGElement>) => (
+const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => (
+  <Link href={props.href}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-    width="1em"
       height="1em"
+      viewBox="0 0 38 23"
       stroke="currentColor"
+      fill="none"
       {...props}
     >
       <path
@@ -16,6 +19,7 @@ const ScrollMe = (props: SVGProps<SVGSVGElement>) => (
         d="m2 2 15.77 17.369a2 2 0 0 0 2.96 0L36.5 2"
       />
     </svg>
-)
+  </Link>
+);
 
-export default ScrollMe
+export default ScrollMe;

package.json

@@ -9,25 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "fontawesome": "^5.6.3",
     "fortawesome": "^0.0.1-security",
-    "next": "12.2.0",
+    "next": "13.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@types/node": "18.0.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
-    "@types/styled-components": "^5.1.25",
-    "eslint": "8.19.0",
-    "eslint-config-next": "12.2.0",
-    "typescript": "4.7.4"
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/styled-components": "^5.1.26",
+    "eslint": "8.32.0",
+    "eslint-config-next": "13.1.2",
+    "typescript": "4.9.4"
   }
 }

pages/_app.tsx

@@ -1,23 +1,23 @@
-import "../styles/globals.css"
-import type { AppProps } from "next/app"
-import type { ReactElement, ReactNode } from "react"
-import type { NextPage } from "next"
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import type { ReactElement, ReactNode } from "react";
+import type { NextPage } from "next";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { config } from "@fortawesome/fontawesome-svg-core";
 config.autoAddCss = false;
 
 export type NextPageWithLayout = NextPage & {
-	getLayout?: (page: ReactElement) => ReactNode
-}
+  getLayout?: (page: ReactElement) => ReactNode;
+};
 
 type AppPropsWithLayout = AppProps & {
-	Component: NextPageWithLayout
-}
+  Component: NextPageWithLayout;
+};
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-	const getLayout = Component.getLayout ?? ((page) => page)
-	return getLayout(<Component {...pageProps}/>)
+  const getLayout = Component.getLayout ?? ((page) => page);
+  return getLayout(<Component {...pageProps} />);
 }
 
-export default MyApp
+export default MyApp;

pages/_document.tsx

@@ -1,8 +1,13 @@
-import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
+import Document, {
+  DocumentContext,
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from "next/document";
 import React from "react";
 import { ServerStyleSheet } from "styled-components";
 
-
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet();
@@ -11,7 +16,8 @@ export default class MyDocument extends Document {
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-					enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
         });
 
       const initialProps = await Document.getInitialProps(ctx);

pages/index.tsx

@@ -1,11 +1,11 @@
-import type {NextPageWithLayout} from "./_app"
-import type { ReactElement } from "react"
-import Layout from "../components/layout"
-import styled from "styled-components"
-import IconLink from "components/iconlink"
-//import ScrollMe from "components/scrollme"
-import {faEnvelope} from "@fortawesome/free-solid-svg-icons"
-import {faGit, faGithub} from "@fortawesome/free-brands-svg-icons"
+import type { NextPageWithLayout } from "./_app";
+import type { ReactElement } from "react";
+import Layout from "../components/layout";
+import styled from "styled-components";
+import IconLink from "components/iconlink";
+import ScrollMe from "components/scrollme";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { faGit, faGithub } from "@fortawesome/free-brands-svg-icons";
 
 export const Section = styled.section`
   display: flex;
@@ -16,7 +16,8 @@ export const Section = styled.section`
   margin: 0 0;
   min-height: 100vh;
 
-	h2, h3 {
+  h2,
+  h3 {
     font-size: 2rem;
     margin: 8px 0;
   }
@@ -31,7 +32,7 @@ export const Section = styled.section`
   }
 
   ul li {
-		margin: .5rem 2.5rem;	
+    margin: 0.5rem 2.5rem;
   }
 
   #img-container {
@@ -45,18 +46,18 @@ export const Section = styled.section`
 
   footer {
     margin-top: 1rem;
-		opacity: .5;
+    opacity: 0.5;
   }
-`
+`;
 
 export const Code = styled.code`
   font-family: monospace;
-	font-size: .9rem;
+  font-size: 0.9rem;
   background-color: var(--bg-emph);
   color: var(--fg-code);
-	border-radius: .4rem;
-	padding: .1rem .4rem;
-`
+  border-radius: 0.4rem;
+  padding: 0.1rem 0.4rem;
+`;
 
 export const CList = styled.ul`
   list-style: none;
@@ -64,11 +65,11 @@ export const CList = styled.ul`
   li {
     margin: 1rem !important;
   }
-`
+`;
 
 export const Nem = styled.span`
   color: var(--fg-faded);
-`
+`;
 
 export const LinkList = styled.div`
   display: flex;
@@ -83,18 +84,18 @@ export const LinkList = styled.div`
   }
 
   a:hover {
-		opacity: .4;
+    opacity: 0.4;
   }
 
   @media screen and (max-width: 960px) {
     word-break: break-word;
   }
-`
+`;
 
 function getAge() {
   let birth = 1050019200;
   let now = Math.floor(Date.now() / 1000);
-	return now-birth;
+  return now - birth;
 }
 
 function secondsToYears(secs: number) {
@@ -106,47 +107,93 @@ const Page: NextPageWithLayout = () => {
     <>
       <Section>
         <h2 id="about">/almqv</h2>
-				<p>I am a {secondsToYears(getAge())} year old <em>Computer Science & Engineering student</em> with a passion for <em>physics</em>, <em>programming</em>, <em>mathematics</em> and anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.</p>
+        <p>
+          I am a {secondsToYears(getAge())} year old{" "}
+          <em>Computer Science & Engineering student</em> with a passion for{" "}
+          <em>physics</em>, <em>programming</em>, <em>mathematics</em> and
+          anything <em>*NIX</em> <Nem>(Linux, UNIX etc)</Nem> related.
+        </p>
         {/*TODO: Add GitHub code frequency/contrib here*/}
-				<p className="topmargin">Most of my projects are open-source, and if you are interested, you can find all of my projects on my <a href="https://git.wych.dev/elal" target="_blank" rel="noreferrer">git-server</a> or <a href="https://github.com/almqv" target="_blank" rel="noreferrer">GitHub</a>.</p> 
-
-				{/*
-				<div className="topmargin" id="img-container">
-					<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=almqv&theme=dark&exclude_repo=hsf,the_auctionhouse,dotfiles,scripts,dmenu,dwmblocks,ewm,machinelearning,adventofcode,python-machinelearning,st,scroll,prog1&layout=compact&count_private=true&hide_border=true&bg_color=1d2021" />
-				</div>
-				  */}
+        <p className="topmargin">
+          Most of my projects are open-source, and if you are interested, you
+          can find all of my projects on my{" "}
+          <a href="https://git.wych.dev/elal" target="_blank" rel="noreferrer">
+            git-server
+          </a>{" "}
+          or{" "}
+          <a href="https://github.com/almqv" target="_blank" rel="noreferrer">
+            GitHub
+          </a>
+          .
+        </p>
 
         <LinkList className="topmargin">
-					<IconLink href="#contact" icon={ faEnvelope } target="_self" rel="noreferrer"/>
+          <IconLink
+            href="#contact"
+            icon={faEnvelope}
+            target="_self"
+            rel="noreferrer"
+          />
           {/*<IconLink href="/projects" icon={ faFolderOpen } target="_self" rel="noreferrer"/>*/}
-					<IconLink href="https://github.com/almqv" icon={ faGithub } target="_blank" rel="noreferrer"/>
-					<IconLink href="https://git.wych.dev/elal" icon={ faGit } target="_blank" rel="noreferrer"/>
+          <IconLink
+            href="https://github.com/almqv"
+            icon={faGithub}
+            target="_blank"
+            rel="noreferrer"
+          />
+          <IconLink
+            href="https://git.wych.dev/elal"
+            icon={faGit}
+            target="_blank"
+            rel="noreferrer"
+          />
         </LinkList>
-
+        {/*<ScrollMe href="#contact" />*/}
       </Section>
 
       <Section>
         <h2 id="contact">Contact</h2>
-				<p>You can contact me through email. And if you prefer it, you can contact me using PGP. Do note that my <em>email address below is encrypted</em> as a precaution against bots et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively you could query for my email with my PGP fingerprint (key-id) on some PGP key server (i.e. the <a href="https://pgp.mit.edu/" target="_blank" rel="noreferrer">MIT</a> or <a href="https://keyserver.ubuntu.com/" target="_blank" rel="noreferrer">Ubuntu</a> key-server).</p>
+        <p>
+          You can contact me through email. And if you prefer it, you can
+          contact me using PGP. Do note that my{" "}
+          <em>email address below is encrypted</em> as a precaution against bots
+          et cetera. <em>Do not worry, it is easy to crack</em>. Alternatively
+          you could query for my email with my PGP fingerprint (key-id) on some
+          PGP key server (i.e. the{" "}
+          <a href="https://pgp.mit.edu/" target="_blank" rel="noreferrer">
+            MIT
+          </a>{" "}
+          or{" "}
+          <a
+            href="https://keyserver.ubuntu.com/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Ubuntu
+          </a>{" "}
+          key-server).
+        </p>
         <CList>
           <li>
-						PGP fingerprint: <Code>68B2 9768 49F0 3C72 38AE B081 E31A 99CE 3E75 A158</Code>
+            PGP fingerprint:{" "}
+            <Code>68B2 9768 49F0 3C72 38AE B081 E31A 99CE 3E75 A158</Code>
           </li>
           <li>
             Email: <Code>cnlueXpkaXZmZ0B0em52eS5wYnoK</Code>
           </li>
           <li>
-						GitHub: <a href="https://github.com/almqv" target="_blank" rel="noreferrer">github.com/almqv</a>
+            GitHub:{" "}
+            <a href="https://github.com/almqv" target="_blank" rel="noreferrer">
+              github.com/almqv
+            </a>
           </li>
         </CList>
-
       </Section>
     </>
-	)
-}
+  );
+};
 
 Page.getLayout = (page: ReactElement) => {
-	return <Layout>{page}</Layout>
-}
-export default Page
-
+  return <Layout>{page}</Layout>;
+};
+export default Page;

pages/projects.tsx

@@ -1,22 +1,28 @@
-import type {NextPageWithLayout} from './_app'
-import type { ReactElement } from 'react'
-import Layout from '../components/layout'
-import { Section } from './index'
-import Link from "next/link"
+import type { NextPageWithLayout } from "./_app";
+import type { ReactElement } from "react";
+import Layout from "../components/layout";
+import { Section } from "./index";
+import Link from "next/link";
 
 const Page: NextPageWithLayout = () => {
   return (
     <>
       <Section>
         <h2>Page under development...</h2>
-				<p>While you wait, why not check out my <a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very own <a href="https://git.wych.dev/elal">git-server</a>?</p>
-				<p>Or you could also <Link href="/">go back</Link> to the home page.</p>
+        <p>
+          While you wait, why not check out my{" "}
+          <a href="https://github.com/E-Almqvist">GitHub</a>? Or perhaps my very
+          own <a href="https://git.wych.dev/elal">git-server</a>?
+        </p>
+        <p>
+          Or you could also <Link href="/">go back</Link> to the home page.
+        </p>
       </Section>
     </>
-	)
-}
+  );
+};
 
 Page.getLayout = (page: ReactElement) => {
-	return <Layout>{page}</Layout>
-}
-export default Page
+  return <Layout>{page}</Layout>;
+};
+export default Page;

styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
 
 :root {
   font-size: 16px;
@@ -8,28 +8,27 @@
   --border-radius: 1rem;
 
   --content-max-width: 850px;
-	--h-uni-padding: .8rem;
-	--v-uni-padding: .2rem;
+  --h-uni-padding: 0.8rem;
+  --v-uni-padding: 0.2rem;
 
-	--fg: #E1DCCE;
+  --fg: #c5c8c6;
   color: var(--fg);
-	/* --fg-emph: #fbebe2; */
-	--fg-emph: #EFE8D7;
-	--fg-faded: #928373;
+  --fg-emph: var(--fg);
+  --fg-faded: #969896;
   --fg-button: var(--fg-faded);
-	--fg-link: #8398AC;
-	--fg-code: #ffbe85;
-	--fg-gold: #fff190;
+  --fg-link: #5b83a6;
+  --fg-code: #de935f;
+  --fg-gold: #f0c674;
   --emph-shadow: 0 0 2px;
 
-	--bg: #181818;
-	--bg-emph: #242424;
-	--trans-time: 200ms;
+  --bg: #16191c;
+  --bg-emph: #212426;
+  --trans-time: 150ms;
 }
 
 * {
   box-sizing: border-box;
-	font-family: "Open Sans", sans-serif;
+  font-family: "Fira Code", monospace;
   padding: 0;
   margin: 0;
 }
@@ -44,7 +43,8 @@ section {
   /* scroll-snap-align: center; */
 }
 
-#__next { /*body*/
+#__next {
+  /*body*/
   display: flex;
   flex-direction: column;
   margin: 0 auto;
@@ -59,16 +59,29 @@ a {
 }
 
 a:hover {
-	opacity: .4;
+  opacity: 0.8;
 }
 
-h1, h2, h3, h4, h5, em {
-	font-weight: normal;
-	color: var(--fg-emph);
+/* h1, */
+/* h2, */
+/* h3, */
+/* h4, */
+/* h5, */
+/* em { */
+/*   font-weight: normal; */
+/*   color: var(--fg-emph); */
+/* } */
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: bold;
 }
 
 p {
-	margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 em {
@@ -76,4 +89,3 @@ em {
   font-style: normal;
   /* text-shadow: var(--emph-shadow) currentColor; */
 }
-