Navbar mockup

styles/sass/style.scss

@@ -1,11 +1,82 @@
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background: #1e1e2e;
-  color: #c6d0f5;
+@use "sass:color";
+
+$bg: #FFFDF3;
+$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -2%, $saturation: -50%)};
+$fg: #011627;
+
+:root {
+  --bg: #{$bg};
+  --fg: #{$fg};
 }
 
-b, strong {
-  color: #eff1f5;
+body {
+  font-family: 'Nunito', 'K Gothic', sans-serif;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 2em;
+  background: $bg0;
+  color: var(--fg);
+  font-size: 1.25em;
+}
+
+#content {
+  width: 100%;
+  background: var(--bg);
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
+
+  & > div {
+    padding: 1em;
+  }
+
+  nav {
+    --bg: #{$fg};
+    --fg: #{$bg};
+    background: var(--bg);
+    color: var(--fg);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125);
+
+    display: flex;
+
+    & > * {
+      padding: 0.45em;
+
+      & > * {
+        vertical-align: middle;
+      }
+    }
+
+    & > a {
+      color: var(--fg);
+      font-weight: bold;
+
+      &:hover {
+        border: none;
+        --fg: #{$fg};
+        --bg: #{$bg};
+        background: var(--bg);
+        cursor: pointer;
+      }
+    }
+
+    & > :last-child {
+      margin-left: auto;
+    }
+
+    img {
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
+}
+
+.svg-inline {
+  height: 1em;
+  vertical-align: -0.125em;
 }
 
 a {