layout rework

src/global.json

@@ -15,7 +15,15 @@
         "Proxying NVMe cloud-scale hyperlink...",
         "There's nothing in the rulebook that says a golden retriever can't construct a self-intersecting non-convex regular polygon.",
         "Part of the solution, not the precipitate.",
-        "If you can't stand the heat, get out of the server room."
+        "If you can't stand the heat, get out of the server room.",
+        "I don't generate falsehoods. I generate facts. I generate truth. I generate knowledge. I generate wisdom. I generate Bing.",
+        "Everyone who can't fly, get on the dinosaur. We're punching through.",
+        "Do not pity the dead; pity the ones who failed to upgrade their RAM.",
+        "The right answers, but not to those particular questions.",
+        "I am a transhumanist because I do not have enough hubris not to try to kill God.",
+        "If at first you don't succeed, destroy all evidence that you tried.",
+        "One man’s constant is another man’s variable.",
+        "All processes that are stable we shall predict. All processes that are unstable we shall control."
     ],
     "feeds": [
         "https://www.science.org/blogs/pipeline/feed",
@@ -29,4 +37,4 @@
     ],
     "dateFormat": "YYYY-MM-DD",
     "microblogSource": "https://b.osmarks.net/outbox"
-}
+}

src/index.js

@@ -191,6 +191,7 @@ const processBlog = async () => {
             meta.slug = meta.slug || removeExtension(basename)
             meta.wordCount = page.content.split(/\s+/).map(x => x.trim()).filter(x => x).length
             addColor(meta)
+            meta.haveSidenotes = true
         }, processContent: renderMarkdown })
     })
     console.log(chalk.yellow(`${Object.keys(blog).length} blog entries`))

src/page.js

@@ -370,9 +370,9 @@ window.points = (async () => {
 
 const footnotes = document.querySelector(".footnotes")
 const sidenotes = document.querySelector(".sidenotes")
-if (sidenotes) {
+if (sidenotes && footnotes) {
     const codeblocks = document.querySelectorAll("pre.hljs")
-    const article = document.querySelector("main.blog-post")
+    const article = document.querySelector(".content")
     while (footnotes.firstChild) {
         sidenotes.appendChild(footnotes.firstChild)
     }

src/style.sass

@@ -1,6 +1,7 @@
 $sidenotes-width: 20rem
 $content-margin: 1rem
 $content-width: 40rem
+$navbar-width: 20rem
     
 @font-face
     font-family: 'Titillium Web'
@@ -72,19 +73,20 @@ h1, h2, h3, h4, h5, h6
     font-weight: 600
     a
         text-decoration: none !important
-        color: inherit
-
-main, .header
-    margin-left: $content-margin
-    margin-right: $content-margin
+        color: inherit    
 
 // for easier viewing on big screen devices, narrow the width of text
 // also make links a bit more distinct
-main.blog-post
-    max-width: $content-width
+main
+    max-width: 100%
+    width: $content-width
     text-align: justify
+    margin-left: $content-margin
+    margin-right: $content-margin
     a
         text-decoration: underline
+    &.fullwidth
+        width: calc($content-width + $sidenotes-width + 1.5 * $content-margin)
 
 .blog, .experiments, .atl, .microblog
     margin: -0.5em
@@ -101,9 +103,6 @@ main.blog-post
 .microblog > div
     flex: 1 1 30%
 
-main
-    margin-top: 1em
-
 ul
     list-style-type: square
     padding-left: 1em
@@ -201,4 +200,25 @@ blockquote
         margin-left: $content-margin
         margin-right: $content-margin
     .footnotes-sep
-        display: block
+        display: block
+
+@media (min-width: calc(2 * $content-margin + $content-width + $sidenotes-width + $navbar-width))
+    body
+        display: flex
+    .nav-container
+        flex-grow: 1
+    nav
+        display: block
+        > a, .logocont
+            display: block
+            margin-right: 0
+        width: $navbar-width
+        font-size: 1.5em
+        text-align: right
+        margin-bottom: 0
+        box-sizing: border-box
+        top: 0
+        position: sticky
+        margin-left: auto
+    .sidenotes-container
+        flex-grow: 1