1 files changed, 72 insertions, 25 deletions
diff --git a/sass/style.scss b/sass/style.scss
index d4cc71c..50b4bef 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,37 +1,84 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 body {
   width: max-content;
+  max-width: 100%;
+  margin: 0;
+  padding: .25rem 1rem;
+}
+
+header {
+  display: flex;
+  align-items: baseline;
+  gap: 0 1rem;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  margin: 1rem 0;
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+p {
+  max-width: 40em;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  -webkit-hyphens: auto; /* for Safari */
 }
 
 pre {
   padding: 1rem;
   font-size: 1rem;
   overflow: auto;
+
+  // The line numbers already provide some kind of left/right padding
+  [data-lineos] {
+    padding: 1rem 0;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    td {
+      padding: 0;
+
+      // The line number cells
+      :nth-of-type(1) {
+        text-align: center;
+        user-select: none;
+      }
+    }
+  }
+
+  mark {
+    // If you want your highlights to take the full width.
+    display: block;
+    // The default background colour of a mark is bright yellow
+    background-color: rgba(254, 252, 232, 0.9);
+  }
 }
-// The line numbers already provide some kind of left/right padding
-pre[data-linenos] {
-  padding: 1rem 0;
-}
-pre table td {
-  padding: 0;
-}
-// The line number cells
-pre table td:nth-of-type(1) {
-  text-align: center;
-  user-select: none;
-}
-pre mark {
-  // If you want your highlights to take the full width.
-  display: block;
-  // The default background colour of a mark is bright yellow
-  background-color: rgba(254, 252, 232, 0.9);
-}
-pre table {
-  width: 100%;
-  border-collapse: collapse;
+
+ul > li {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: baseline;
+  gap: 0 1rem;
 }
 
-p {
-  max-width: 40em;
-  word-wrap: break-word;
-  text-align: justify;
+nav {
+  p, ul, li {
+    margin: 0;
+    padding: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+  gap: .25rem;
 }