Merge pull request #311 from iamgio/theme/hyperlegible

feat(theme): add hyperlegible layout theme

Author: iamgio

quarkdown-html/src/main/resources/render/theme/components/_code.scss

@@ -80,6 +80,7 @@
     }
 
     .color-preview {
+      margin-left: 0.4em;
       width: 0.5em;
       height: 0.5em;
     }

quarkdown-html/src/main/resources/render/theme/components/_table.scss

@@ -1,5 +1,9 @@
 .quarkdown table:not(pre table) {
-  :is(th, td):not([align]) {
+  th:not([align]) {
+    text-align: var(--qd-table-default-header-alignment);
+  }
+
+  td:not([align]) {
     text-align: var(--qd-table-default-cell-alignment);
   }
 

quarkdown-html/src/main/resources/render/theme/global.scss

@@ -105,6 +105,7 @@
 
   // Tables
   --qd-table-default-cell-alignment: initial; // Text alignment of table cells, if not specified
+  --qd-table-default-header-alignment: var(--qd-table-default-cell-alignment); // Text alignment of table header cells, if not specified
 
   // Quotes
   --qd-quote-type-label-suffix: ": "; // Suffix for localized quote type labels, e.g. Tip, Note, Warning, ...

quarkdown-html/src/main/resources/render/theme/layout/hyperlegible.scss

@@ -0,0 +1,66 @@
+@use "util/progressive-heading-sizes" as *;
+@use "util/progressive-heading-margins" as *;
+@use "util/gh-tables" as *;
+@use "util/minimal-toc" as *;
+//@use "util/docs-navigation" as docs-navigation;
+//@use "util/docs-headings-border" as *;
+@use "../components/util/location-selectors" as location-selectors;
+
+:root {
+  --qd-main-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --qd-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --qd-code-span-font-size: 0.9em;
+  --qd-slides-code-block-font-size: 1.3em;
+  --qd-line-height: 1.75;
+  --qd-table-default-header-alignment: center;
+  --qd-heading-label-suffix: "";
+  --qd-mermaid-node-filter: drop-shadow(1px 2px var(--qd-mermaid-node-border-color));
+}
+
+.quarkdown {
+  @include progressive-heading-sizes($multiplier: 1.2);
+  @include progressive-heading-margins($multiplier: 1.1, $bottomAddition: 0.4em);
+  @include gh-tables;
+  @include minimal-toc;
+  //@include docs-headings-border;
+
+  h4, h5 {
+    font-weight: 600;
+  }
+
+  blockquote {
+    border-left: 2px solid;
+    padding-left: 1.5em;
+
+    &:not([class]) {
+      background-color: transparent !important;
+    }
+
+    &[data-labeled] > :first-child::before {
+      display: block;
+    }
+  }
+
+  .box > header > h4 {
+    gap: 0.4em;
+  }
+
+  .codespan-content {
+    padding: .12rem .35rem;
+    background-color: color-mix(in srgb, currentColor 3%, transparent);
+  }
+
+  #{location-selectors.$location-heading}::before {
+    margin-right: .5em;
+  }
+
+  nav, .nav {
+    ul, ol {
+      ul, ol {
+        border-width: 1px;
+        margin-left: .75em;
+        padding-left: .9em;
+      }
+    }
+  }
+}

quarkdown-html/src/main/resources/render/theme/layout/minimal.scss

@@ -62,7 +62,6 @@
     margin: 0 0.3em;
 
     .color-preview {
-      margin-left: 0.4em;
       border-radius: 3px;
       border: 0.1em solid color-mix(in srgb, currentColor 60%, transparent);
     }

quarkdown-html/src/main/resources/render/theme/layout/util/_gh-tables.scss

@@ -0,0 +1,31 @@
+// GitHub style tables
+@mixin gh-tables {
+  table:not(pre table) {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 100%;
+    overflow: auto;
+
+    th, td {
+      padding: 8px 14px;
+      border: 1px solid color-mix(in srgb, var(--qd-main-color) 20%, transparent) !important;
+    }
+
+    th {
+      font-weight: 600;
+    }
+
+    tr {
+      background-color: var(--qd-background-color);
+
+      &:nth-child(2n) {
+        background-color: color-mix(in srgb, var(--qd-main-color) 2%, transparent);
+      }
+    }
+
+    thead tr {
+      background-color: var(--qd-background-color);
+    }
+  }
+}

quarkdown-html/src/main/resources/render/theme/layout/util/_progressive-heading-margins.scss

@@ -3,52 +3,52 @@
   @return calc($rem-size / var(--h-font-scale, 1.5));
 }
 
-@mixin progressive-heading-margins($bottomAddition: 0) {
+@mixin progressive-heading-margins($multiplier: 1, $bottomAddition: 0) {
   h1 {
-    line-height: derive-size(3.25em);
-    margin-bottom: derive-size(1.625em + $bottomAddition);
+    line-height: derive-size(3.25em * $multiplier);
+    margin-bottom: derive-size(1.625em * $multiplier + $bottomAddition);
   }
 
   h2 {
-    line-height: derive-size(2em);
-    margin-top: derive-size(3em);
+    line-height: derive-size(2em * $multiplier);
+    margin-top: derive-size(3em * $multiplier);
   }
 
   h3 {
-    margin-top: derive-size(2.5em);
+    margin-top: derive-size(2.5em * $multiplier);
   }
 
   h4 {
-    margin-top: derive-size(2em);
+    margin-top: derive-size(2em * $multiplier);
   }
 
   h5 {
-    margin-top: derive-size(1.8em);
+    margin-top: derive-size(1.8em * $multiplier);
   }
 
   h6 {
-    margin-top: derive-size(2.5rem);
+    margin-top: derive-size(2.5rem * $multiplier);
   }
 
   h3, h4, h5, h6 {
-    line-height: derive-size(1.625em);
+    line-height: derive-size(1.625em * $multiplier);
   }
 
   h1 + h2 {
-    margin-top: derive-size(1.625em);
+    margin-top: derive-size(1.625em * $multiplier);
   }
 
   h2 + h3,
   h3 + h4,
   h4 + h5 {
-    margin-top: derive-size(0.8em);
+    margin-top: derive-size(0.8em * $multiplier);
   }
 
   h5 + h6 {
-    margin-top: derive-size(0.8rem);
+    margin-top: derive-size(0.8rem * $multiplier);
   }
 
   h2, h3, h4, h5, h6 {
-    margin-bottom: derive-size(0.8em + $bottomAddition);
+    margin-bottom: derive-size(0.8em * $multiplier + $bottomAddition);
   }
 }