madness 1.2.5 → 1.3.0

data/app/styles/_anchor.scss

@@ -2,9 +2,17 @@ a {
   color: var(--link-color);
   text-decoration: none;
 
-  &:active, &:hover, &:focus {
-    outline-width: 0;
+  &:hover {
+    color: var(--link-hover-color);
     text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+    border-radius: 3px;
   }
 
   &:not([href]) {
@@ -15,4 +23,4 @@ a {
   &.icon {
     color: inherit;
   }
-}
+}

data/app/styles/_breadcrumbs.scss

@@ -1,9 +1,16 @@
 .breadcrumbs {
   margin-top: 6px;
   border-bottom: 1px solid var(--breadcrumbs-border-color);
+  font-size: 0.9em;
+  color: var(--quiet-color);
 
   a {
     display: inline-block;
-    padding: 7px 0;
+    padding: 8px 0;
+    color: var(--quiet-color);
+
+    &:hover {
+      color: var(--link-color);
+    }
   }
 }

data/app/styles/_code.scss

@@ -1,24 +1,42 @@
+code, pre, kbd {
+  font-family: var(--font-family-monospace);
+}
+
 code {
   background-color: var(--inline-code-bg-color);
-  padding: 0px 8px;
+  color: var(--inline-code-color);
+  padding: 0.15em 0.4em;
   margin: 0;
-  font-size: 90%;
-  border-radius: 3px;
-  display: inline-block;
+  font-size: 87%;
+  border-radius: 6px;
+  font-feature-settings: "calt" 0;
+  white-space: break-spaces;
 }
 
 pre {
   position: relative;
-
+  background-color: var(--code-bg-color);
   border: 1px solid var(--code-border-color);
-  border-radius: 5px;
+  border-radius: 8px;
   overflow-x: auto;
-  padding: 10px;
+  padding: 14px 16px;
+  font-size: 13.5px;
+  line-height: 1.55;
 
   code {
     background-color: transparent;
+    color: inherit;
+    padding: 0;
     display: block;
-    line-height: 1.2;
+    line-height: inherit;
+    font-size: inherit;
     position: relative;
+    border-radius: 0;
   }
 }
+
+// Soften inline-code inside links or headings.
+a code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+  font-size: 0.85em;
+  color: inherit;
+}

data/app/styles/_footnotes.scss

@@ -1,5 +1,34 @@
 .footnotes {
   color: var(--footnotes-color);
   font-size: 85%;
+  border-top: 1px solid var(--hr-color);
+  margin-top: 2em;
+  padding-top: 1em;
+
+  ol {
+    padding-left: 1.5em;
+  }
+
+  li {
+    margin-bottom: 0.5em;
+  }
 }
 
+// Mermaid diagram container. Mermaid emits an inline SVG; centering and
+// breathing room here. The diagram itself themes via mermaid's own dark theme,
+// initialized in the layout view based on data-theme.
+.mermaid {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  padding: 12px;
+  border: 1px solid var(--code-border-color);
+  border-radius: 8px;
+  background-color: transparent;
+  overflow-x: auto;
+
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+}

data/app/styles/_general.scss

@@ -4,14 +4,14 @@
 
 p {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 blockquote {
   color: var(--blockquote-color);
   border-left: 4px solid var(--blockquote-border-color);
   margin: 0;
-  padding: 0 15px;
+  padding: 4px 16px;
 
   &>:first-child {
     margin-top: 0;
@@ -29,6 +29,9 @@ p, blockquote, ul, ol, dl, table, pre {
 
 mark {
   background-color: var(--highlight-color);
+  color: var(--highlight-text-color);
+  padding: 0 0.2em;
+  border-radius: 3px;
 }
 
 .quiet {
@@ -37,4 +40,4 @@ mark {
 
 .float-right {
   float: right;
-}
+}

data/app/styles/_image.scss

@@ -1,5 +1,23 @@
 img {
   border-style: none;
   max-width: 100%;
+  height: auto;
   box-sizing: content-box;
+  border-radius: 6px;
+}
+
+p > img:only-child {
+  display: block;
+  margin: 8px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+:root[data-theme="dark"] p > img:only-child {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) p > img:only-child {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  }
 }

data/app/styles/_keyboard.scss

@@ -6,10 +6,12 @@ kbd {
   box-shadow: inset 0 -1px 0 var(--kbd-shadow-color);
 
   display: inline-block;
-  padding: 6px 8px;
-  font-size: 85%;
-  line-height: 10px;
+  padding: 3px 6px;
+  font-size: 80%;
+  line-height: 1;
   vertical-align: middle;
-  border-radius: 3px;
+  border-radius: 5px;
+  font-weight: 500;
+  font-family: var(--font-family-monospace);
 }
 

data/app/styles/_manifest.scss

@@ -5,7 +5,6 @@
 @import "anchor";
 @import "breadcrumbs";
 @import "code";
-@import "fontello";
 @import "footnotes";
 @import "image";
 @import "keyboard";
@@ -21,4 +20,4 @@
 @import "typography";
 
 // Last
-@import "general";
+@import "general";

data/app/styles/_nav.scss

@@ -9,47 +9,231 @@ nav {
 
   background: var(--sidebar-bg-color);
   border-right: 1px solid var(--sidebar-border-right-color);
+  color: var(--font-color);
 
   height: 100vh;
   width: 300px;
   overflow-y: auto;
   position: fixed;
-
+  font-size: 14px;
   .icon-bar {
     background: var(--sidebar-bg-color);
-    border-bottom: 1px dotted var(--sidebar-border-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
     position: sticky;
     top: 0;
     z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
   }
 
   a.document, span.document, .caption {
-    border-bottom: 1px dotted var(--sidebar-border-color);
-    // &:hover {
-    //   background: #e4e4e4;
-    // }
-
+    border-bottom: 1px solid var(--sidebar-border-color);
     display: block;
-    padding: 5px 20px 5px 30px;
+    padding: 8px 20px 8px 26px;
+    color: var(--font-color);
+    border-left: 3px solid transparent;
+  }
+
+  a.document:hover {
+    background: var(--sidebar-hover-bg-color);
+    color: var(--link-color);
+    border-left-color: var(--link-color);
+  }
+
+  a.document.strong {
+    font-weight: 600;
+  }
+
+  .caption {
+    color: var(--quiet-color);
+    font-size: 12px;
+    font-weight: 500;
+    padding-top: 14px;
+    padding-bottom: 6px;
+    border-bottom: none;
   }
 
   a.icon {
-    display: inline-block;
-    font-size: 1.5em;
-    width: 50%;
-    padding: 3px 20px 3px 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25em;
+    width: 44px;
+    height: 40px;
+    border-radius: 6px;
+    color: var(--font-color);
     &.wide {
-      width: 100%
+      flex: 1;
+    }
+
+    &:hover {
+      background: var(--sidebar-hover-bg-color);
+      color: var(--link-color);
     }
-    // &:hover {
-    //   background: #e4e4e4;
-    // }
+
+    .icon-svg {
+      width: 18px;
+      height: 18px;
+      stroke: currentColor;
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
   }
 
+  .icon-spacer {
+    flex: 1;
+  }
 
   &:after {
     content: "";
     height: 90px;
     display: block;
   }
+
+  // Nested folder tree (details/summary based).
+  details.tree-folder {
+    > summary.tree-summary {
+      list-style: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      border-bottom: 1px solid var(--sidebar-border-color);
+      &::-webkit-details-marker { display: none; }
+
+      &:hover {
+        background: var(--sidebar-hover-bg-color);
+      }
+
+      .tree-chevron {
+        flex: 0 0 18px;
+        width: 18px;
+        height: 18px;
+        margin-left: 8px;
+        position: relative;
+        color: var(--quiet-color);
+        transition: transform 150ms ease;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 6px;
+          height: 6px;
+          border-right: 1.5px solid currentColor;
+          border-bottom: 1.5px solid currentColor;
+          transform: translate(-65%, -50%) rotate(-45deg);
+        }
+      }
+
+      // The .document anchor inside the summary should fill the row but not
+      // re-draw its own bottom border (the summary already has one).
+      > a.document {
+        flex: 1;
+        border-bottom: none;
+        border-left: none;
+        padding-left: 6px;
+      }
+
+      &:hover .tree-chevron {
+        color: var(--link-color);
+      }
+    }
+
+    &[open] > summary.tree-summary .tree-chevron::before {
+      transform: translate(-50%, -65%) rotate(45deg);
+    }
+
+    // Children container — subtle indent + left guide line.
+    .tree-children {
+      margin-left: 18px;
+      border-left: 1px solid var(--sidebar-border-color);
+
+      // Inside children, document rows lose the chunky left-padding so the
+      // hierarchy reads as indented but not crowded.
+      > a.document,
+      > details.tree-folder > summary.tree-summary > a.document {
+        padding-left: 10px;
+      }
+
+      > a.document {
+        padding-left: 16px;
+      }
+    }
+  }
+}
+
+// Theme toggle icon visibility — JS sets data-theme on <html>; CSS uses it to
+// flip which glyph is shown. Falls back to system preference when no choice
+// has been made.
+.theme-toggle, .floating-theme-toggle {
+  .icon-sun  { display: none; }
+  .icon-moon { display: inline-block; }
+}
+
+:root[data-theme="dark"] {
+  .theme-toggle, .floating-theme-toggle {
+    .icon-sun  { display: inline-block; }
+    .icon-moon { display: none; }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .theme-toggle, .floating-theme-toggle {
+      .icon-sun  { display: inline-block; }
+      .icon-moon { display: none; }
+    }
+  }
+}
+
+// Floating fallback toggle — visible when the sidebar isn't, so the toggle is
+// always reachable. On desktop it hides because the sidebar version covers it.
+.floating-theme-toggle {
+  position: fixed;
+  bottom: 18px;
+  right: 18px;
+  z-index: 100;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--sidebar-bg-color);
+  border: 1px solid var(--sidebar-border-color);
+  color: var(--font-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: transform 120ms ease;
+
+  &:hover {
+    background: var(--sidebar-hover-bg-color);
+    transform: translateY(-1px);
+  }
+
+  .icon-svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  @media print {
+    display: none;
+  }
+
+  @include desktop {
+    // On desktop, when a sidebar is present, the sidebar toggle is used.
+    body:has(nav) & {
+      display: none;
+    }
+  }
 }

data/app/styles/_pandoc_code.scss

@@ -1,63 +1,67 @@
+// Pandoc syntax highlighting.
+//
+// Use `bundle exec run css pandoc` to generate update reference CSS.
+
 pre > code.sourceCode { white-space: pre; position: relative; }
 pre > code.sourceCode > span { line-height: 1.25; }
 pre > code.sourceCode > span:empty { height: 1.2em; }
-// .sourceCode { overflow: visible; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
-div.sourceCode { overflow: auto; }
+  div.sourceCode { overflow: auto; }
 }
 @media print {
-pre > code.sourceCode { white-space: pre-wrap; }
-pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
+  pre > code.sourceCode { white-space: pre-wrap; }
+  pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
+}
+pre.numberSource code { counter-reset: source-line 0; }
+pre.numberSource code > span { position: relative; left: -4em; counter-increment: source-line; }
+pre.numberSource code > span > a:first-child::before {
+  content: counter(source-line);
+  position: relative; left: -1em; text-align: right; vertical-align: baseline;
+  border: none; display: inline-block;
+  -webkit-touch-callout: none; -webkit-user-select: none;
+  -khtml-user-select: none; -moz-user-select: none;
+  -ms-user-select: none; user-select: none;
+  padding: 0 4px; width: 4em;
+  color: var(--rouge-line-number);
+}
+pre.numberSource {
+  margin-left: 3em;
+  border-left: 1px solid var(--rouge-line-number);
+  padding-left: 4px;
 }
-pre.numberSource code
-  { counter-reset: source-line 0; }
-pre.numberSource code > span
-  { position: relative; left: -4em; counter-increment: source-line; }
-pre.numberSource code > span > a:first-child::before
-  { content: counter(source-line);
-    position: relative; left: -1em; text-align: right; vertical-align: baseline;
-    border: none; display: inline-block;
-    -webkit-touch-callout: none; -webkit-user-select: none;
-    -khtml-user-select: none; -moz-user-select: none;
-    -ms-user-select: none; user-select: none;
-    padding: 0 4px; width: 4em;
-    color: #aaaaaa;
-  }
-pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
-div.sourceCode
-  {   }
 @media screen {
-pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+  pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
-code span.al { color: #ff0000; font-weight: bold; } /* Alert */
-code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
-code span.at { color: #7d9029; } /* Attribute */
-code span.bn { color: #40a070; } /* BaseN */
-code span.bu { color: #008000; } /* BuiltIn */
-code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
-code span.ch { color: #4070a0; } /* Char */
-code span.cn { color: #880000; } /* Constant */
-code span.co { color: #60a0b0; font-style: italic; } /* Comment */
-code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
-code span.do { color: #ba2121; font-style: italic; } /* Documentation */
-code span.dt { color: #902000; } /* DataType */
-code span.dv { color: #40a070; } /* DecVal */
-code span.er { color: #ff0000; font-weight: bold; } /* Error */
-code span.ex { } /* Extension */
-code span.fl { color: #40a070; } /* Float */
-code span.fu { color: #06287e; } /* Function */
-code span.im { color: #008000; font-weight: bold; } /* Import */
-code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
-code span.kw { color: #007020; font-weight: bold; } /* Keyword */
-code span.op { color: #666666; } /* Operator */
-code span.ot { color: #007020; } /* Other */
-code span.pp { color: #bc7a00; } /* Preprocessor */
-code span.sc { color: #4070a0; } /* SpecialChar */
-code span.ss { color: #bb6688; } /* SpecialString */
-code span.st { color: #4070a0; } /* String */
-code span.va { color: #19177c; } /* Variable */
-code span.vs { color: #4070a0; } /* VerbatimString */
-code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+
+code span.al { color: var(--rouge-error-fg); font-weight: bold; }          /* Alert */
+code span.an { color: var(--rouge-comment); font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: var(--rouge-name-attribute); }                       /* Attribute */
+code span.bn { color: var(--rouge-literal-number); }                       /* BaseN */
+code span.bu { color: var(--rouge-name-builtin); }                         /* BuiltIn */
+code span.cf { color: var(--rouge-keyword); font-weight: bold; }           /* ControlFlow */
+code span.ch { color: var(--rouge-literal-string); }                       /* Char */
+code span.cn { color: var(--rouge-name-constant); }                        /* Constant */
+code span.co { color: var(--rouge-comment); font-style: italic; }          /* Comment */
+code span.cv { color: var(--rouge-comment); font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: var(--rouge-comment); font-style: italic; }          /* Documentation */
+code span.dt { color: var(--rouge-name-class); }                           /* DataType */
+code span.dv { color: var(--rouge-literal-number); }                       /* DecVal */
+code span.er { color: var(--rouge-error-fg); font-weight: bold; }          /* Error */
+code span.ex { }                                                            /* Extension */
+code span.fl { color: var(--rouge-literal-number); }                       /* Float */
+code span.fu { color: var(--rouge-name-function); }                        /* Function */
+code span.im { color: var(--rouge-name-builtin); font-weight: bold; }      /* Import */
+code span.in { color: var(--rouge-comment); font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: var(--rouge-keyword); font-weight: bold; }           /* Keyword */
+code span.op { color: var(--rouge-operator); }                             /* Operator */
+code span.ot { color: var(--rouge-keyword); }                              /* Other */
+code span.pp { color: var(--rouge-name-builtin); }                         /* Preprocessor */
+code span.sc { color: var(--rouge-literal-string); }                       /* SpecialChar */
+code span.ss { color: var(--rouge-literal-string); }                       /* SpecialString */
+code span.st { color: var(--rouge-literal-string); }                       /* String */
+code span.va { color: var(--rouge-name-variable); }                        /* Variable */
+code span.vs { color: var(--rouge-literal-string); }                       /* VerbatimString */
+code span.wa { color: var(--rouge-comment); font-weight: bold; font-style: italic; } /* Warning */