tweak styling

pages/LayoutBase.tsx

@@ -2,17 +2,16 @@ import { PropsWithChildren } from "react";
 
 import "./style.css";
 
-const Sidebar: React.FC = () => (
-  <span className={"navbar"}>
+const Navbar: React.FC = () => (
+  <span className="navbar">
     <a href="/">Home</a>/<a href="/about">About</a>
   </span>
 );
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <div className="gridOffset">
-    <div className="gridOffsetSide">
-      <Sidebar />
-    </div>
+    <Navbar />
+    <hr />
     {children}
   </div>
 );

pages/about.mdx

@@ -1,4 +1,4 @@
-import Layout from "./Page";
+import Layout from "./LayoutPage";
 export default Layout;
 
 Developer currently living in New York City

pages/index.tsx

@@ -4,6 +4,7 @@ export default function () {
   return (
     <Layout>
       <p>Is this thing on?</p>
+      <a href="/2019/02/the-whole-world">Code</a>
     </Layout>
   );
 }

pages/style.css

@@ -2,12 +2,23 @@
 
 @import "@fontsource/lato";
 @import "@fontsource/jetbrains-mono";
-@import "prism-themes/themes/prism-material-dark";
+
+@import "highlight.js/styles/atom-one-dark.css";
+
+:root {
+  --color-primary: #000;
+  --color-secondary: #777;
+  --color-tertiary: #999;
+  --color-highlight: #f4f4f4;
+
+  --color-primary-highlight: #fff;
+  --color-secondary-highlight: #999;
+}
 
 body {
   font-family: "Lato", sans-serif;
-  font-size: 14pt;
-  line-height: 1.4;
+  font-size: 15pt;
+  line-height: 1.5;
 }
 
 h1,
@@ -20,6 +31,20 @@ h6 {
   margin-bottom: 0;
 }
 
+h3 {
+  color: var(--color-secondary);
+}
+
+h4,
+h5,
+h6 {
+  color: var(--color-tertiary);
+}
+
+a {
+  color: var(--color-secondary);
+}
+
 p,
 ul {
   margin-top: 0.5em;
@@ -30,43 +55,70 @@ pre {
   padding: 1em 0;
 }
 
-code,
-code[class*="language-"] {
+code {
   font-family: "JetBrains Mono", monospace;
+  font-size: 14pt;
+  background-color: var(--color-highlight);
+}
+
+a,
+a > code {
+  text-decoration: dotted;
+  border-color: var(--color-secondary);
+  border-bottom-style: dotted;
+  border-bottom-width: 1px;
+}
+
+a,
+a > code {
+  transition: all ease 0.5s;
+}
+
+a:hover,
+a > code:hover {
+  color: var(--color-primary-highlight);
+  background-color: var(--color-secondary-highlight);
+  border-bottom: none;
 }
 
 .gridOffset {
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 2fr)
-    [main-start] minmax(0, 45em) [main-end]
-    minmax(0, 1fr)
-    [side-start] minmax(0, 3fr) [side-end]
-    minmax(1em, 2fr) [full-end];
+    [main-start] minmax(0, 42em) [main-end]
+    minmax(0, 5fr) [full-end];
 }
 
-.gridOffset > :not(.gridOffsetSide) {
+.gridOffset > * {
   grid-column: main;
 }
 
-.gridOffset > div.remark-highlight,
-.gridOffset > div.remark-highlight > pre {
+.gridOffset hr {
+  display: inherit;
+  grid-column: main;
+  grid-template-columns: inherit;
+  border-style: solid;
+  border-color: var(--color-secondary);
+}
+
+.gridOffset > pre {
   display: inherit;
   grid-column: full;
   grid-template-columns: inherit;
 }
 
-.gridOffset > div.remark-highlight > pre > code {
+.gridOffset > pre > code {
   grid-column: main;
 }
 
-.gridOffsetSide {
-  grid-column: side;
-  margin-top: 1em;
-  margin-bottom: 1em;
+.navbar {
+  text-align: right;
+  margin: 0.5em;
 }
 
-.navbar > * {
+.navbar * {
   margin-left: 0.5em;
   margin-right: 0.5em;
+  text-decoration: none;
+  border-bottom-style: none;
 }