web: sidenotes in style

the1lab · Jan 17, 2024 · 8ffe318 · 8ffe318
1 parent ad314fc
commit 8ffe318
Show file tree

Hide file tree

Showing 12 changed files with 322 additions and 159 deletions.
diff --git a/support/shake/app/Shake/Markdown.hs b/support/shake/app/Shake/Markdown.hs
@@ -54,10 +54,6 @@ import Shake.Git
 import HTML.Emit
 
 import Definitions
-import Control.Exception (evaluate)
-import Control.DeepSeq
-import Text.Show.Pretty (ppShow)
-import Text.Printf
 
 readLabMarkdown :: MonadIO m => FilePath -> m Pandoc
 readLabMarkdown fp = liftIO cont where
@@ -200,8 +196,6 @@ buildMarkdown modname input output = do
   let search = query (getHeaders (Text.pack modname)) markdown
 
   (markdown, MarkdownState references dependencies) <- runWriterT (walkM patchBlock markdown)
-  markdown <- liftIO $ evaluate (let x = walk floatNotes markdown in rnf x `seq` x)
-  -- error $ ppShow markdown
   need dependencies
 
   baseUrl <- getBaseUrl
@@ -287,23 +281,6 @@ patchInline _ (Str s)
 
 patchInline _ h = pure h
 
--- | Turn footnotes into sidenotes.
-floatNotes :: Pandoc -> Pandoc
-floatNotes = flip evalState 0 . walkM \case
-  Note blk -> do
-    this <- get
-    put (this + 1)
-    let
-      unwrap (Plain is) = is
-      unwrap (Para is)  = is
-      unwrap b = error $ "Unsupported block type in footnote: " <> ppShow b
-
-      rendered = either (error . show) id . runPure . writeHtml5String def $ Pandoc mempty [Plain (blk >>= unwrap)]
-
-      ref = "<label class=sidenote-number for=\"sn-" <> Text.pack (show this) <> "\"></label><input class=sidenote-toggle type=checkbox id=\"sn-" <> Text.pack (show this) <> "\" />"
-    pure $ Span ("", ["sidenote"], []) [htmlInl ref, Span ("", ["sidenote-content"], []) [htmlInl rendered]]
-  x -> pure x
-
 data MarkdownState = MarkdownState
   { mdReferences :: [Val Text] -- ^ List of references extracted from Pandoc's "reference" div.
   , mdDependencies :: [String] -- ^ Additional files this markdown file depends on.

diff --git a/support/web/css/code.scss b/support/web/css/code.scss
@@ -17,7 +17,6 @@ code, pre, .sourceCode {
   font-family: 'Julia Mono';
   font-size: var(--code-font-size);
   font-weight: 500;
-  clear: both;
 }
 
 div.sourceCode {

diff --git a/support/web/css/default.scss b/support/web/css/default.scss
@@ -10,24 +10,26 @@
 @import "code.scss";
 
 html {
-  min-height: 100%;
   height: 100%;
-  max-width: 100%;
   margin: 0;
 
   background-color: var(--text-bg);
   color:            var(--text-fg);
 }
 
+html, body, main, div#post-toc-container {
+  min-height: 100vh;
+  max-width: 100vw;
+}
+
 :root {
   --serif: "EB Garamond", "Times New Roman", "serif";
   --sans-serif: "Inria Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-size: 1.4rem;
   --code-font-size: calc(0.85 * var(--font-size));
 
-  --content-width:       65%;
-  --sidenote-width:      25em;
-  --sidenote-separation: 3em;
+  --content-width:       50vw;
+  --sidenote-separation: 2em;
 
   &.sans-serif {
     --serif: "";
@@ -219,56 +221,57 @@ table {
   }
 }
 
-span.sidenote {
-  counter-increment: footnote-counter;
+span.sidenote-baseline-mark {
+  width: 0px;
+  vertical-align: baseline;
+  display: inline-block;
+}
 
-  .sidenote-content {
-    position: relative;
-    display: none;
+div.sidenote {
+  position: absolute;
+  right: 0;
 
-    &:before {
-      display: none;
-      content: counter(footnote-counter);
-      font-size: 1.0rem;
-      position: absolute;
-      left: -1.5ex;
-    }
-  }
+  :nth-child(2) { margin-block-start: 0; }
+  :last-child   { margin-block-end: 0; }
 
-  .sidenote-toggle { display: none; }
+  font-size: smaller;
+  line-height: 1.1;
 
-  .sidenote-toggle:checked + .sidenote-content {
-    display: block;
-    float: left;
-    clear: both;
-    margin: 1em 2.5%;
-    width: 95%;
+  width: 100%;
+  text-align: justify;
+  hyphens: auto;
+
+  > span.sidenote-number {
+    position: absolute;
+    top: -1.5em;
+
+    text-align: right;
+    width: 100%;
+
+    border-bottom: 1px dotted black;
   }
 
-  .sidenote-number {
-    display:   inline-block;
+  a.footnote-back { display: none; }
+}
 
-    &:after {
-      content: counter(footnote-counter);
-      font-size: 1.0rem;
+section.footnotes {
+  @include widescreen { display: none; }
+  display: block;
+}
 
-      // Pretend to be a link
-      color: var(--primary);
-      cursor: pointer;
-      text-decoration: underline;
+aside#sidenote-container {
+  @include widescreen { display: block; }
 
-      position: relative;
-      top: -0.2em;
-    }
-  }
+  display: none;
+
+  position: relative;
 }
 
-details {
-  margin-block: 1em;
-  border-left:  5px solid var(--note-bg);
-  padding-left: 1rem;
+// @include widescreen { aside#sidenote-container { display: block; } }
 
-  @include contains-code();
+details {
+  @include left-bordered(var(--note-bg));
+  // @include contains-code();
 
   > summary {
     list-style-type: none;
@@ -434,7 +437,7 @@ div.diagram-container {
   }
 }
 
-article a[href], div#return > a[href], div#top > a[href], aside#toc > div#toc-container ul a[href] {
+main a[href], div#return > a[href], div#top > a[href], aside#toc > div#toc-container ul a[href] {
   color: var(--primary);
   text-decoration: none;
   &:hover {
@@ -562,7 +565,7 @@ input {
   }
 }
 
-@media only screen and (min-width: 95rem) {
+@include widescreen {
   .narrow-only {
     display: none !important;
   }
@@ -573,10 +576,14 @@ input {
     div#post-toc-container {
       display: grid;
 
-      // The 0 minimum is required to avoid overflow, see https://css-tricks.com/preventing-a-grid-blowout/
-      grid-template-columns: 1fr minmax(0, 5fr);
+      grid-template-areas: ". sidebar . content gutter .";
+
+      // The 0 minimum is required to avoid overflow, see
+      // https://css-tricks.com/preventing-a-grid-blowout/
+      grid-template-columns: 0.1fr 1fr 0.1fr minmax(0, 3fr) 1fr 0.2fr;
 
       aside#toc {
+        grid-column: sidebar;
         h3 { @include centered-contents; }
 
         font-family: var(--sans-serif);
@@ -587,17 +594,15 @@ input {
 
         box-sizing: border-box;
         top:    $page-padding;
-        bottom: $page-padding;
 
-        max-height: 90vh;
+        height: calc(100vh - (2 * #{$page-padding}));
 
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         width: 100%;
 
-        margin-right: 1rem;
-        padding-right: 1rem;
+        z-index: 1;
 
         div#toc-container {
           box-sizing: border-box;
@@ -657,13 +662,13 @@ input {
         }
       }
 
-      article > {
-        :not(pre, div.sourceCode) {
-          width: var(--content-width);
-        }
-        ul, ol, dl, details {
-          box-sizing: border-box;
-        }
+      article {
+        grid-column: content;
+      }
+
+      aside#sidenote-container {
+        grid-column: gutter;
+        margin-left: calc(var(--sidenote-separation));
       }
     }
 
@@ -672,35 +677,5 @@ input {
       grid-template-columns: 1fr 1fr;
       gap: 1em;
     }
-
-    padding: 0;
-    padding-bottom: 0.4em;
-  }
-
-  span.sidenote {
-    .sidenote-content:before {
-      display: revert;
-    }
-
-    .sidenote-number:after {
-      color:  var(--text-color);
-      cursor: text;
-      text-decoration: none;
-    }
-
-    .sidenote-toggle:checked + .sidenote-content, .sidenote-toggle:not(:checked) + .sidenote-content {
-      display: block;
-
-      float: right;
-      clear: right;
-
-      // margin-right: -45%;
-      // transform: translateX(120%);
-      margin-right: calc(-1 * (var(--sidenote-width) + var(--sidenote-separation)));
-      width:        var(--sidenote-width);
-
-      text-align: justify;
-      hyphens: auto;
-    }
   }
 }
diff --git a/support/web/css/mixins.scss b/support/web/css/mixins.scss
@@ -1,7 +1,20 @@
+@mixin left-bordered($bg) {
+  position: relative;
+
+  &:before {
+    content: " ";
+    background-color: $bg;
+
+    height: 100%;
+    width: 5px;
+
+    position: absolute;
+    left: calc(-1em - 5px);
+  }
+}
+
 @mixin material($bg) {
-  border-left: 5px solid $bg;
-  padding-left: 1rem;
-  padding-bottom: 0.3em;
+  @include left-bordered($bg);
   box-sizing: border-box;
 
   >:nth-child(2) { margin-block-start: 0; }
@@ -24,13 +37,8 @@
     }
   }
 
-  div.#{$name} {
+  div.#{$name}, details.#{$name} {
     @include material($bg);
-    @include contains-code();
-  }
-
-  details.#{$name} {
-    border-left: 5px solid $bg;
   }
 }
 
@@ -40,16 +48,13 @@
   align-items: center;
 }
 
-@mixin contains-code {
-  pre.Agda, div.sourceCode {
-    /* Undo the indentation so that code stays aligned. */
-    padding-left: 0;
-    border-left:  0;
-    margin-left:  0;
-  }
-}
-
 @mixin monospaced {
   font-family: 'Julia Mono', 'Iosevka', 'Fantasque Sans Mono', 'Roboto Mono', monospace;
   font-weight: 400;
 }
+
+@mixin widescreen {
+  @media only screen and (min-width: $desktop-layout-width) {
+    @content;
+  }
+}
diff --git a/support/web/css/vars.scss b/support/web/css/vars.scss
@@ -105,3 +105,6 @@ $light-button-hover-bg: $zinc-200;
 
 $dark-text-bg: #23272E;
 $dark-text-fg: #ABB2BF;
+
+// "Desktop layout": navigation bar, content, sidenotes.
+$desktop-layout-width: 110rem;
diff --git a/support/web/js/depgraph.tsx b/support/web/js/depgraph.tsx
@@ -431,9 +431,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   addExpand = () => {
     ruler.style.display = "block";
 
-    const expand = <button style="display: inline-block">
-      Maximise network
-    </button>
+    const expand = <button style="">Maximise network</button>;
 
     expand.addEventListener("click", () => {
       ruler.style.display = "none";
@@ -443,7 +441,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
 
     reset();
-    container.appendChild(expand);
+    container.appendChild(<div class="mathpar">{expand}</div>);
   };
 
   addExpand();