Updated the CSS themes

project.el

@@ -197,7 +197,7 @@
                            "<label for=\"l\">light</label>"
                            " / "
                            "<label for=\"d\">dark</label>"
-                           " --- "
+                           " - "
                            ,(format "<a href=\"%s\">mk</a>" mk-path)
                            ,(format "<a href=\"%s\">min</a>" min-path)
                            ,(format "<a href=\"%s\">sci</a>" sci-path)

src/css/min.css

@@ -1,202 +1,69 @@
-/* CSS to be used for HTML Org-mode export
-   Author: Yann Esposito
-*/
-
 /* Fonts */
-body {
+html,body {
     font: 16px/1.4 sans-serif;
     line-height: 1.5em;
+    margin:0;
+    padding:0;
 }
 pre, pre code {
     line-height: 1em;
+    font-size: .8em;
 }
+img { width: 100%; }
+label {color:#b56;}
+label:hover { cursor:pointer; }
 #content,.content {
     max-width: 48em;
     padding: 0 1em;
     margin: 0 auto;
 }
 pre {
+    border: dashed 1px;
+    padding: 1ex;
     max-width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
 }
-figure { margin: 0 1em; }
-img {
-    width: 100%;
-    max-height: 100vh;
-    margin: 1em auto;
-}
-p > img, li > img {
-    max-height: 1em;
-    width: auto;
-    margin: 0;
-    vertical-align: middle;
-}
-table {
-    display: block; /* for overflow to work */
-    max-width: 100%;
-    border-collapse: collapse;
-    border: solid 1px;
-    overflow: scroll;
-}
-td, th {
-    height: 1em;
-    padding: 0 10px;
-    text-align: left;
-    vertical-align: middle;
-    border-right: solid 1px;
-    border-left: solid 1px;
-}
-#labels { margin: 0; }
-.main {padding-top: 1em; }
-/* colors theme */
-:root {
-    color-scheme: light dark; /* support color scheme */
-    --b03:  #222;
-    --b02:  #333;
-    --b01:  #666;
-    --b00:  #777;
-    --b0:   #999;
-    --b1:   #AAA;
-    --b2:   #EEE;
-    --b3:   #FFF;
-    --y: #af8700;
-    --o: #d75f00;
-    --r: #d70000;
-    --m: #af005f;
-    --v: #5f5faf;
-    --b: #0087ff;
-    --c: #00afaf;
-    --g: #5f8700;
-
-    /* default dark */
-    --bg: var(--b03);
-    --fg: var(--b0);
-    --bg2: var(--b02);
-    --fg2: var(--b01);
-    --rfg: var(--b1);
-    --rbg: var(--b02);
-    --bdr: var(--b02);
-    --l-fg: var(--bg);
-    --l-bg: var(--g);
-}
-
-/* Dark themes soften and darken images */
-@media (prefers-color-scheme: dark) {
-   :root {
-       --bg: var(--b03);
-       --fg: var(--b0);
-       --bg2: var(--b02);
-       --fg2: var(--b01);
-       --rfg: var(--b1);
-       --rbg: var(--b02);
-       --bdr: var(--b02);
-       --l-fg: var(--bg);
-       --l-bg: var(--g);
-   }
-  img {
-      filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6);
-  }
-}
 body > input {
     display:none;
 }
-@media (prefers-color-scheme: light) {
+.main {
-    :root {
+    padding-top: 1em;
-        --bg: var(--b3);
+    min-height:calc(100vh - 2.5em);
-        --fg: var(--b00);
+}
-        --bg2: var(--b2);
+:root {
-        --fg2: var(--b1);
+    --b2: #fff;
-        --rfg: var(--b01);
+    --b3: #fffa;
-        --rbg: var(--b2);
+    --y:  #ca2;
-        --bdr: var(--b2);
+    --o:  #a65;
-        --l-fg: var(--bg);
+    --r:  #b56;}
-        --l-bg: var(--o);
+/* --------------------------------------------------------------------------- */
+/* Default color theme */
+/* colors theme */
+/* Dark themes soften and darken images */
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #000;
+        color: #bbb;
     }
+    a { color: #8cf }
+    a:visited { color: #fcf }
     img {
-        filter: sepia(100%) hue-rotate(182deg) saturate(0.6);
+        filter: brightness(0.8);
     }
 }
 
-#d:checked ~ .main, #d:checked ~ #labels {
+/* Manually checked colortheme */
-    --bg: var(--b03);
+#d:checked ~ * {
-    --fg: var(--b0);
+    background: #000;
-    --bg2: var(--b02);
+    color: #bbb;
-    --fg2: var(--b01);
-    --rfg: var(--b1);
-    --rbg: var(--b02);
-    --bdr: var(--b02);
-    --l-fg: var(--bg);
-    --l-bg: var(--g);
 }
+#d:checked ~ * a { color: #8cf; }
+#d:checked ~ * a:visited { color: #fcf; }
 
 /* --------------------------------------------------------------------------- */
 /* Light theme selected */
-#l:checked ~ .main, #l:checked ~ #labels {
+#l:checked ~ * {
-    --bg: var(--b3);
+    background: #FFF;
-    --fg: var(--b00);
+    color: #333;
-    --bg2: var(--b2);
-    --fg2: var(--b1);
-    --rfg: var(--b01);
-    --rbg: var(--b2);
-    --bdr: var(--b2);
-    --l-fg: var(--bg);
-    --l-bg: var(--o);
 }
-
-#labels {
-    background: var(--bg2);
-    color: var(--fg2);
-}
-/* --------------------------------------------------------------------------- */
-/* Default color theme */
-body,.main {
-    background: var(--bg);
-    color: var(--fg);
-    min-height: 100vh;
-}
-a { color: var(--l-bg); }
-
-.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9,
-.org-css-selector, .org-nix-attribute, .org-builtin {
-    color:var(--c);
-}
-
-.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name,
-.org-function-name, .org-diff-changed {
-    color:var(--b);
-}
-
-.org-rainbow-delimiters-depth-3  {
-    color:var(--v);
-}
-
-.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec {
-    color:var(--m);
-}
-.org-rainbow-delimiters-depth-5, .org-diff-removed {
-    color:var(--r);
-}
-.org-rainbow-delimiters-depth-6  {
-    color:var(--o);
-}
-.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header {
-    color:var(--y);
-}
-.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string,
-.org-doc, .org-keyword {
-    color:var(--g);
-}
-
-.org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment,
-.org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3,
-.org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6,
-.org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 {
-    color:var(--fg2);
-}
-
-.org-highlight-number-number     {
-    color:var(--rfg);
-}
-
-

src/css/mk.css

@@ -426,27 +426,6 @@ blockquote:after, .main blockquote:after {
     font-weight: bold;
     font-size: 10px;
 }
-.TODO, .main .TODO {
-    color: var(--r);
-}
-.IN_PROGRESS, .main .IN_PROGRESS {
-    color: var(--y);
-}
-.IN_REVIEW, .main .IN_REVIEW {
-    color: var(--cyan);
-}
-.HOLD, .main .HOLD {
-    color: var(--violet);
-}
-.WAITING, .main .WAITING {
-    color: var(--violet);
-}
-.DONE, .main .DONE {
-    color: var(--g);
-}
-.CANCELED, .main .CANCELED {
-    color: var(--m);
-}
 .notes, .main .notes {
     background: var(--rbg);
     color: var(--rfg);
@@ -454,7 +433,7 @@ blockquote:after, .main blockquote:after {
 /* ---- SYNTAX HIGHLIGHTING ---- */
 .org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9,
 .org-css-selector, .org-nix-attribute, .org-builtin,
-a {
+.IN_REVIEW, a {
     color:var(--c);
 }
 
@@ -463,24 +442,26 @@ a {
     color:var(--b);
 }
 
-.org-rainbow-delimiters-depth-3  {
+.org-rainbow-delimiters-depth-3, .HOLD, .WAITING {
     color:var(--v);
 }
 
-.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec {
+.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec,
+.CANCELED {
     color:var(--m);
 }
-.org-rainbow-delimiters-depth-5, .org-diff-removed {
+.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO {
     color:var(--r);
 }
 .org-rainbow-delimiters-depth-6  {
     color:var(--o);
 }
-.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header {
+.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header,
+.IN_PROGRESS {
     color:var(--y);
 }
 .org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string,
-.org-doc, .org-keyword {
+.org-doc, .org-keyword, .DONE {
     color:var(--g);
 }
 
@@ -491,6 +472,6 @@ a {
     color:var(--fg2);
 }
 
-.org-highlight-number-number     {
+.org-highlight-number-number {
     color:var(--rfg);
 }

src/css/modern.css

@@ -4,8 +4,10 @@
 
 /* Fonts */
 body {
-    font: 14px/1.4 monospace;
+    font-family: "Helvetica Neue", sans-serif;
-    line-height: 16px;
+    font-weight: 300;
+    font-size: 16px/1.6;
+    line-height: 1.5em;
 }
 pre, pre code {
     line-height: 1em;
@@ -91,27 +93,6 @@ sup > a {
 h1,h2,h3,h4,h5,h6 {
     font-size: 1em;
 }
-h1::before {
-    content: "# ";
-}
-h2::before {
-    content: "## ";
-}
-h3::before {
-    content: "### ";
-}
-h4::before {
-    content: "#### ";
-}
-h5::before {
-    content: "##### ";
-}
-h6::before {
-    content: "###### ";
-}
-hr {
-    border: 0;
-}
 #preamble h1 {
     margin-top: 0;
 }
@@ -125,26 +106,11 @@ hr {
 #table-of-contents {
     margin-bottom: 1em;
 }
-#postamble:before, hr:after {
-    text-align: center;
-    content: "-----------------------------------------------------------------------------";
-    display:block;
-    width: 100%;
-    overflow: hidden;
-    opacity: .5;
-    height: 1em;
-}
 pre {
     max-width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
 }
-pre:after,pre:before {
-    content: "~~~~~~~~~";
-    display: block; }
-pre:before {
-    content: "~~~~~~~~~ " attr(class);
-}
 pre code {
     background: none;
 }
@@ -155,13 +121,6 @@ blockquote,#table-of-contents {
     padding-left: 2ch;
     overflow: hidden;
 }
-#table-of-contents:after, blockquote:after {
-    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
-    white-space: pre;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
 nav {
     font-weight: bold;
     display: block;
@@ -243,43 +202,37 @@ figure, .figure {
     --cyan:    #4c8493;
     --green:   #728b5c;
 
-    /* Solaryzed accented colors */
+    --bg: #fff;
-    --bg: var(--base03);
+    --fg: #444;
-    --fg: var(--base0);
+    --bg2: #eee;
-    --bg2: var(--base02);
+    --fg2: #333;
-    --fg2: var(--base01);
+    --rfg: #000;
-    --rfg: var(--base1);
+    --rbg: #eee;
-    --rbg: var(--base02);
+    --bdr: #ddd;
-    --bdr: var(--base02);
     --l-fg: var(--bg);
-    --l-bg: var(--green);
+    --l-bg: var(--magenta);
 }
 
 /* org colors */
 @media (prefers-color-scheme: light) {
     :root {
-        --bg: var(--base3);
+        --bg: #fff;
-        --fg: var(--base00);
+        --fg: #444;
-        --bg2: var(--base2);
+        --bg2: #eee;
-        --fg2: var(--base1);
+        --fg2: #333;
-        --rfg: var(--base01);
+        --rfg: #000;
-        --rbg: var(--base2);
+        --rbg: #eee;
-        --bdr: var(--base2);
+        --bdr: #ddd;
         --l-fg: var(--bg);
-        --l-bg: var(--orange);
+        --l-bg: var(--magenta);
     }
 }
 /* Dark themes soften and darken images */
 @media (prefers-color-scheme: dark) {
   img {
-      filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6);
+      filter: brightness(0.8);
   }
 }
-@media (prefers-color-scheme: light) {
-    img {
-        filter: sepia(100%) hue-rotate(182deg) saturate(0.6);
-    }
-}
 #h {
     float: left;
 }
@@ -293,145 +246,23 @@ figure, .figure {
     font-style: italic;
 }
 
-/* Light themes does not soften and darken images */
-#l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); }
-#s:checked ~ .main img, #m:checked ~ .main img { filter: none; }
-#d:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); }
-#c:checked ~ .main img { filter: brightness(0.8); }
-#x:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); }
-
-#s:checked ~ .main #preamble:after,
-#s:checked ~ .main #postamble:before,
-#c:checked ~ .main #preamble:after,
-#c:checked ~ .main #postamble:before,
-#m:checked ~ .main #preamble:after,
-#m:checked ~ .main #postamble:before
-{
-    display: none;
-}
-/* --------------------------------------------------------------------------- */
-/* Dark theme selected */
-#d:checked ~ .main, #d:checked ~ #labels {
-    --bg: var(--base03);
-    --fg: var(--base0);
-    --bg2: var(--base02);
-    --fg2: var(--base01);
-    --rfg: var(--base1);
-    --rbg: var(--base02);
-    --bdr: var(--base02);
-    --l-fg: var(--bg);
-    --l-bg: var(--green);
-}
-
-/* --------------------------------------------------------------------------- */
-/* Light theme selected */
-#l:checked ~ .main, #l:checked ~ #labels {
-    --bg: var(--base3);
-    --fg: var(--base01);
-    --bg2: var(--base2);
-    --fg2: var(--base00);
-    --rfg: var(--base01);
-    --rbg: var(--base2);
-    --bdr: var(--base2);
-    --l-fg: var(--bg);
-    --l-bg: var(--orange);
-}
-
-/* --------------------------------------------------------------------------- */
-/* Light simple theme selected */
-#c:checked ~ .main, #c:checked ~ #labels,
-#s:checked ~ .main, #s:checked ~ #labels {
-    --bg: #fff;
-    --fg: #333;
-    --bg2: #eee;
-    --fg2: #222;
-    --rfg: #111;
-    --rbg: #eee;
-    --bdr: #CCC;
-    --l-fg: var(--bg);
-    --l-bg: var(--orange);
-    font-family: sans-serif;
-    font-size: 16px;
-    line-height: 1.5em;
-}
-#c:checked ~ #labels .content,
-#s:checked ~ #labels .content,
-#c:checked ~ .main .content,
-#c:checked ~ .main #content,
-#s:checked ~ .main .content,
-#s:checked ~ .main #content {
-    margin: 0 auto;
-}
-
-/* --------------------------------------------------------------------------- */
-/* Dark matrix theme selected */
-#x:checked ~ .main, #x:checked ~ #labels {
-    --bg: #000;
-    --fg: #0b0;
-    --bg2: #040;
-    --fg2: #080;
-    --rfg: #0f0;
-    --rbg: #000;
-    --bdr: #080;
-    --l-fg: #0f0;
-    --l-bg: var(--bg);
-    --yellow:  #0f0;
-    --orange:  #0e0;
-    --red:     #0d0;
-    --magenta: #0f0;
-    --violet:  #0f0;
-    --blue:    #080;
-    --cyan:    #080;
-    --green:   #080;
-    --base03:  #020;
-    --base02:  #030;
-    --base3:   #0f0;
-    --base2:   #0e0;
-    font-family: monospace;
-}
-#x:checked ~ .main code,
-#x:checked ~ .main pre {
-    font-family: monospace;
-}
-
 /* --------------------------------------------------------------------------- */
 /* Light modern theme selected */
-#m:checked ~ .main, #m:checked ~ #labels {
-    --bg: #fff;
-    --fg: #444;
-    --bg2: #eee;
-    --fg2: #333;
-    --rfg: #000;
-    --rbg: #eee;
-    --bdr: #ddd;
-    --l-fg: var(--bg);
-    --l-bg: var(--magenta);
-    font-family: "Helvetica Neue", sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.5em;
-}
 
-#m:checked ~ #labels a {
+#labels a {
     color: #fff;
 }
-#m:checked ~ .main .content,
+.content, #content {
-#m:checked ~ .main #content {
   margin: 0 auto;
 }
-#m:checked ~ .main #table-of-contents:after,
+blockquote {
-#m:checked ~ .main blockquote:after {
-    display: none;
-}
-#m:checked ~ .main blockquote {
     font-family: "Hoefler Text", Georgia, serif;
     font-style: italic;
     font-size: 20px;
     line-height: 30px;
     border-left: solid 10px;
 }
-#m:checked ~ .main h1,
+h1, h2 {
-#m:checked ~ .main h2 {
     font-family: "Hoefler Text", Georgia, serif;
     font-style: italic;
     font-size: 2em;
@@ -440,101 +271,64 @@ figure, .figure {
     color: var(--rfg);
 }
 
-#m:checked ~ .main h3,
+h3, h4, h5, h6 {
-#m:checked ~ .main h4,
-#m:checked ~ .main h5,
-#m:checked ~ .main h6 {
     font-weight: 200;
     font-size: 1.5em;
     line-height: 1.5em;
     margin: 1em 0;
     color: var(--rfg);
 }
-#m:checked ~ .main h4{
+h4{
     font-size: 1.25em;
     line-height: 1.25em;
 }
-#m:checked ~ .main h5,
+h5, h6 {
-#m:checked ~ .main h6 {
     font-size: 1em;
     line-height: 1em;
 }
-#m:checked ~ .main #preamble {
+#preamble {
     border-bottom: solid 1px rgba(0,0,0,0.2);
 }
-#m:checked ~ .main #postamble {
+#postamble {
     border-top: solid 1px rgba(0,0,0,0.2);
 }
-#m:checked ~ .main #preamble h1 {
+#preamble h1 {
     font-size: 4em;
     line-height: 1.5em;
     margin: .5em 0;
 }
-#m:checked ~ .main h1::before,
+pre {
-#m:checked ~ .main h2::before,
-#m:checked ~ .main h3::before,
-#m:checked ~ .main h4::before,
-#m:checked ~ .main h5::before,
-#m:checked ~ .main h6::before {
-    content: "";
-}
-#m:checked ~ .main pre {
     font-size: 14px;
     line-height: 1em;
     border-left: solid 4px var(--fg2);
     padding-left: 1em;
 }
-#m:checked ~ .main pre::before,
+pre::before,
-#m:checked ~ .main pre::after {
+pre::after {
     content: "";
 }
-#m:checked ~ .main #preamble,
+#preamble, #postamble {
-#m:checked ~ .main #postamble {
     background: var(--cyan);
     padding: 1em 0;
 }
-#m:checked ~ .main #preamble {
+#preamble {
   margin-bottom: 2em;
 }
-#m:checked ~ .main #postamble {
+#postamble {
-    margin-top: 2em;
+rgin-top: 2em;
 }
-#m:checked ~ .main #postamble code {
+#postamble code {
-    background: transparent;
+ckground: transparent;
 }
-#m:checked ~ .main #preamble *,
+#preamble *,
-#m:checked ~ .main #postamble * {
+#postamble * {
     color: #fff;
 }
-#m:checked ~ #labels {
+#labels {
     background: var(--cyan);
     color: #fff;
 }
-#m:checked ~ #labels .content {
+#labels .content {
-    margin: 0 auto;
-}
-
-/* --------------------------------------------------------------------------- */
-/* Dark simple theme selected */
-#c:checked ~ .main, #c:checked ~ #labels {
-    --bg: #000;
-    --fg: #ccc;
-    --bg2: #111;
-    --fg2: #ddd;
-    --rfg: #eee;
-    --rbg: #111;
-    --bdr: #333;
-    --link: var(--green);
-}
-#c:checked ~ #labels .content{
-    margin: 0 auto;
-}
-#c:checked ~ .main code,
-#c:checked ~ .main pre {
-    font-family: monospace;
-}
-#c:checked ~ .main .content,
-#c:checked ~ .main #content {
     margin: 0 auto;
 }
 
@@ -639,50 +433,43 @@ blockquote:after, .main blockquote:after {
     font-weight: bold;
     font-size: 10px;
 }
-.TODO, .main .TODO {
-    color: var(--red);
-}
-.IN_PROGRESS, .main .IN_PROGRESS {
-    color: var(--yellow);
-}
-.IN_REVIEW, .main .IN_REVIEW {
-    color: var(--cyan);
-}
-.HOLD, .main .HOLD {
-    color: var(--violet);
-}
-.WAITING, .main .WAITING {
-    color: var(--violet);
-}
-.DONE, .main .DONE {
-    color: var(--green);
-}
-.CANCELED, .main .CANCELED {
-    color: var(--magenta);
-}
 .notes, .main .notes {
     background: var(--rbg);
     color: var(--rfg);
 }
 /* ---- SYNTAX HIGHLIGHTING ---- */
-.org-nix-attribute, .org-builtin {
+.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9,
-    color:var(--cyan);
+.org-css-selector, .org-nix-attribute, .org-builtin,
+.IN_REVIEW, a {
+    color:var(--c);
 }
 
-.org-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword {
+.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name,
-    color:var(--green);
+.org-function-name, .org-diff-changed {
+    color:var(--b);
 }
 
-.org-nix-builtin, .org-variable-name, .org-function-name {
+.org-rainbow-delimiters-depth-3, .HOLD, .WAITING {
-    color:var(--blue);
+    color:var(--v);
 }
 
-.org-type, .org-constant {
+.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec,
-    color:var(--yellow);
+.CANCELED {
+    color:var(--m);
 }
-
+.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO {
-.org-css-selector {
+    color:var(--r);
-    color:var(--cyan);
+}
+.org-rainbow-delimiters-depth-6  {
+    color:var(--o);
+}
+.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header,
+.IN_PROGRESS {
+    color:var(--y);
+}
+.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string,
+.org-doc, .org-keyword, .DONE {
+    color:var(--g);
 }
 
 .org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment,
@@ -692,20 +479,6 @@ blockquote:after, .main blockquote:after {
     color:var(--fg2);
 }
 
-.org-highlight-number-number     {color:var(--rfg);}
+.org-highlight-number-number {
-
+    color:var(--rfg);
-.org-rainbow-delimiters-depth-1  {color:var(--cyan);}
+}
-.org-rainbow-delimiters-depth-2  {color:var(--blue);}
-.org-rainbow-delimiters-depth-3  {color:var(--violet);}
-.org-rainbow-delimiters-depth-4  {color:var(--magenta);}
-.org-rainbow-delimiters-depth-5  {color:var(--red);}
-.org-rainbow-delimiters-depth-6  {color:var(--orange);}
-.org-rainbow-delimiters-depth-7  {color:var(--yellow);}
-.org-rainbow-delimiters-depth-8  {color:var(--green);}
-.org-rainbow-delimiters-depth-9  {color:var(--cyan);}
-
-.org-sh-quoted-exec              {color:var(--magenta);}
-.org-diff-changed                {color:var(--blue);}
-.org-diff-header                 {color:var(--yellow);}
-.org-diff-hunk-header            {color:var(--magenta);}
-.org-diff-removed                {color:var(--red);}

src/css/sci.css

@@ -176,7 +176,7 @@ figure, .figure {
     margin: 1em 0;
 }
 #content,.content {
-    max-width: 46em;
+    max-width: 48em;
     margin: 0 auto;
     padding: 0 1em;
 }
@@ -226,147 +226,6 @@ figure, .figure {
 /* colors theme */
 :root {
     color-scheme: light dark; /* support color scheme */
-    --base03:  #202631;
-    --base02:  #2B313C;
-    --base01:  #656B74;
-    --base00:  #727781;
-    --base0:   #8B919B;
-    --base1:   #989EA8;
-    --base2:   #E5E8ED;
-    --base3:   #F4F7FC;
-    --yellow:  #A98D50;
-    --orange:  #aa6550;
-    --red:     #b85a64;
-    --magenta: #af53b0;
-    --violet:  #846f93;
-    --blue:    #5679a4;
-    --cyan:    #4c8493;
-    --green:   #728b5c;
-
-    /* Solaryzed accented colors */
-    --bg: var(--base03);
-    --fg: var(--base0);
-    --bg2: var(--base02);
-    --fg2: var(--base01);
-    --rfg: var(--base1);
-    --rbg: var(--base02);
-    --bdr: var(--base02);
-    --l-fg: var(--bg);
-    --l-bg: var(--green);
-}
-
-/* org colors */
-@media (prefers-color-scheme: light) {
-    :root {
-        --bg: var(--base3);
-        --fg: var(--base00);
-        --bg2: var(--base2);
-        --fg2: var(--base1);
-        --rfg: var(--base01);
-        --rbg: var(--base2);
-        --bdr: var(--base2);
-        --l-fg: var(--bg);
-        --l-bg: var(--orange);
-    }
-}
-/* Dark themes soften and darken images */
-@media (prefers-color-scheme: dark) {
-  img {
-      filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6);
-  }
-}
-@media (prefers-color-scheme: light) {
-    img {
-        filter: sepia(100%) hue-rotate(182deg) saturate(0.6);
-    }
-}
-#h {
-    float: left;
-}
-#labels {
-    width: 100%;
-    text-align: right;
-    margin-bottom: 1em;
-}
-#labels label {
-    text-decoration: underline;
-    cursor: pointer;
-    font-style: italic;
-}
-
-/* Light themes does not soften and darken images */
-#l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); }
-#s:checked ~ .main img, #m:checked ~ .main img { filter: none; }
-#d:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); }
-#c:checked ~ .main img { filter: brightness(0.8); }
-#x:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); }
-
-#s:checked ~ .main #preamble:after,
-#s:checked ~ .main #postamble:before,
-#c:checked ~ .main #preamble:after,
-#c:checked ~ .main #postamble:before,
-#m:checked ~ .main #preamble:after,
-#m:checked ~ .main #postamble:before
-{
-    display: none;
-}
-/* --------------------------------------------------------------------------- */
-/* Dark theme selected */
-#d:checked ~ .main, #d:checked ~ #labels {
-    --bg: var(--base03);
-    --fg: var(--base0);
-    --bg2: var(--base02);
-    --fg2: var(--base01);
-    --rfg: var(--base1);
-    --rbg: var(--base02);
-    --bdr: var(--base02);
-    --l-fg: var(--bg);
-    --l-bg: var(--green);
-}
-
-/* --------------------------------------------------------------------------- */
-/* Light theme selected */
-#l:checked ~ .main, #l:checked ~ #labels {
-    --bg: var(--base3);
-    --fg: var(--base01);
-    --bg2: var(--base2);
-    --fg2: var(--base00);
-    --rfg: var(--base01);
-    --rbg: var(--base2);
-    --bdr: var(--base2);
-    --l-fg: var(--bg);
-    --l-bg: var(--orange);
-}
-
-/* --------------------------------------------------------------------------- */
-/* Light simple theme selected */
-#c:checked ~ .main, #c:checked ~ #labels,
-#s:checked ~ .main, #s:checked ~ #labels {
-    --bg: #fff;
-    --fg: #333;
-    --bg2: #eee;
-    --fg2: #222;
-    --rfg: #111;
-    --rbg: #eee;
-    --bdr: #CCC;
-    --l-fg: var(--bg);
-    --l-bg: var(--orange);
-    font-family: sans-serif;
-    font-size: 16px;
-    line-height: 1.5em;
-}
-#c:checked ~ #labels .content,
-#s:checked ~ #labels .content,
-#c:checked ~ .main .content,
-#c:checked ~ .main #content,
-#s:checked ~ .main .content,
-#s:checked ~ .main #content {
-    margin: 0 auto;
-}
-
-/* --------------------------------------------------------------------------- */
-/* Dark matrix theme selected */
-#x:checked ~ .main, #x:checked ~ #labels {
     --bg: #000;
     --fg: #0b0;
     --bg2: #040;
@@ -376,167 +235,132 @@ figure, .figure {
     --bdr: #080;
     --l-fg: #0f0;
     --l-bg: var(--bg);
-    --yellow:  #0f0;
+    --y: #0f0;
-    --orange:  #0e0;
+    --o: #0e0;
-    --red:     #0d0;
+    --r: #0d0;
-    --magenta: #0f0;
+    --m: #0f0;
-    --violet:  #0f0;
+    --v: #0f0;
-    --blue:    #080;
+    --b: #080;
-    --cyan:    #080;
+    --c: #080;
-    --green:   #080;
+    --g: #080;
-    --base03:  #020;
+    --b03: #020;
-    --base02:  #030;
+    --b02: #030;
-    --base3:   #0f0;
+    --b3:  #0f0;
-    --base2:   #0e0;
+    --b2:  #0e0;
-    font-family: monospace;
-}
-#x:checked ~ .main code,
-#x:checked ~ .main pre {
-    font-family: monospace;
 }
 
-/* --------------------------------------------------------------------------- */
+/* org colors */
-/* Light modern theme selected */
+@media (prefers-color-scheme: light) {
-#m:checked ~ .main, #m:checked ~ #labels {
+    :root {
+        --y:  #0ff;
+        --o:  #0ee;
+        --r:     #0dd;
+        --m: #0ff;
+        --v:  #0ff;
+        --b:    #088;
+        --c:    #088;
+        --g:   #088;
+
+        --b03:  #022;
+        --b02:  #033;
+        --b3:   #fff;
+        --b2:   #cee;
+
+        --bg: #fff;
+        --fg: #055;
+        --fg2: #044;
+        --bg2: #cff;
+        --rfg: #033;
+        --rbg: #aee;
+        --bdr: #088;
+        --l-fg: #000;
+        --l-bg: var(--bg);
+    }
+}
+/* Dark themes soften and darken images */
+img {
+    filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10);
+}
+@media (prefers-color-scheme: light) {
+    img {
+        filter: brightness(1.3) sepia(100%) hue-rotate(130deg) saturate(2);
+    }
+}
+#h {
+    float: left;
+}
+#labels {
+    width: 100%;
+    text-align: right;
+}
+.main {
+    padding-top: 1em;
+    min-height: calc(100vh - 2.5em);
+}
+#labels label {
+    text-decoration: underline;
+    cursor: pointer;
+    font-style: italic;
+}
+
+/* Light themes does not soften and darken images */
+#l:checked ~ .main img {
+    filter: brightness(1.3) sepia(100%) hue-rotate(130deg) saturate(2);
+}
+
+#d:checked ~ .main img {
+    filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10);
+}
+
+#l:checked ~ * {
+    --y:  #0ff;
+    --o:  #0ee;
+    --r:     #0dd;
+    --m: #0ff;
+    --v:  #0ff;
+    --b:    #088;
+    --c:    #088;
+    --g:   #088;
+
+    --b03:  #022;
+    --b02:  #033;
+    --b3:   #fff;
+    --b2:   #cee;
+
     --bg: #fff;
-    --fg: #444;
+    --fg: #055;
-    --bg2: #eee;
+    --fg2: #044;
-    --fg2: #333;
+    --bg2: #cff;
-    --rfg: #000;
+    --rfg: #033;
-    --rbg: #eee;
+    --rbg: #aee;
-    --bdr: #ddd;
+    --bdr: #088;
-    --l-fg: var(--bg);
+    --l-fg: #000;
-    --l-bg: var(--magenta);
+    --l-bg: var(--bg);
-    font-family: "Helvetica Neue", sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.5em;
 }
-
-#m:checked ~ #labels a {
-    color: #fff;
-}
-#m:checked ~ .main .content,
-#m:checked ~ .main #content {
-  margin: 0 auto;
-}
-#m:checked ~ .main #table-of-contents:after,
-#m:checked ~ .main blockquote:after {
-    display: none;
-}
-#m:checked ~ .main blockquote {
-    font-family: "Hoefler Text", Georgia, serif;
-    font-style: italic;
-    font-size: 20px;
-    line-height: 30px;
-    border-left: solid 10px;
-}
-#m:checked ~ .main h1,
-#m:checked ~ .main h2 {
-    font-family: "Hoefler Text", Georgia, serif;
-    font-style: italic;
-    font-size: 2em;
-    line-height: 1.5em;
-    margin: 1em 0;
-    color: var(--rfg);
-}
-
-#m:checked ~ .main h3,
-#m:checked ~ .main h4,
-#m:checked ~ .main h5,
-#m:checked ~ .main h6 {
-    font-weight: 200;
-    font-size: 1.5em;
-    line-height: 1.5em;
-    margin: 1em 0;
-    color: var(--rfg);
-}
-#m:checked ~ .main h4{
-    font-size: 1.25em;
-    line-height: 1.25em;
-}
-#m:checked ~ .main h5,
-#m:checked ~ .main h6 {
-    font-size: 1em;
-    line-height: 1em;
-}
-#m:checked ~ .main #preamble {
-    border-bottom: solid 1px rgba(0,0,0,0.2);
-}
-#m:checked ~ .main #postamble {
-    border-top: solid 1px rgba(0,0,0,0.2);
-}
-#m:checked ~ .main #preamble h1 {
-    font-size: 4em;
-    line-height: 1.5em;
-    margin: .5em 0;
-}
-#m:checked ~ .main h1::before,
-#m:checked ~ .main h2::before,
-#m:checked ~ .main h3::before,
-#m:checked ~ .main h4::before,
-#m:checked ~ .main h5::before,
-#m:checked ~ .main h6::before {
-    content: "";
-}
-#m:checked ~ .main pre {
-    font-size: 14px;
-    line-height: 1em;
-    border-left: solid 4px var(--fg2);
-    padding-left: 1em;
-}
-#m:checked ~ .main pre::before,
-#m:checked ~ .main pre::after {
-    content: "";
-}
-#m:checked ~ .main #preamble,
-#m:checked ~ .main #postamble {
-    background: var(--cyan);
-    padding: 1em 0;
-}
-#m:checked ~ .main #preamble {
-  margin-bottom: 2em;
-}
-#m:checked ~ .main #postamble {
-    margin-top: 2em;
-}
-#m:checked ~ .main #postamble code {
-    background: transparent;
-}
-#m:checked ~ .main #preamble *,
-#m:checked ~ .main #postamble * {
-    color: #fff;
-}
-#m:checked ~ #labels {
-    background: var(--cyan);
-    color: #fff;
-}
-#m:checked ~ #labels .content {
-    margin: 0 auto;
-}
-
 /* --------------------------------------------------------------------------- */
-/* Dark simple theme selected */
+/* Dark matrix theme selected */
-#c:checked ~ .main, #c:checked ~ #labels {
+#d:checked ~ * {
     --bg: #000;
-    --fg: #ccc;
+    --fg: #0b0;
-    --bg2: #111;
+    --bg2: #040;
-    --fg2: #ddd;
+    --fg2: #080;
-    --rfg: #eee;
+    --rfg: #0f0;
-    --rbg: #111;
+    --rbg: #000;
-    --bdr: #333;
+    --bdr: #080;
-    --link: var(--green);
+    --l-fg: #0f0;
-}
+    --l-bg: var(--bg);
-#c:checked ~ #labels .content{
+    --y: #0f0;
-    margin: 0 auto;
+    --o: #0e0;
-}
+    --r: #0d0;
-#c:checked ~ .main code,
+    --m: #0f0;
-#c:checked ~ .main pre {
+    --v: #0f0;
-    font-family: monospace;
+    --b: #080;
-}
+    --c: #080;
-#c:checked ~ .main .content,
+    --g: #080;
-#c:checked ~ .main #content {
+    --b03: #020;
-    margin: 0 auto;
+    --b02: #030;
+    --b3:  #0f0;
+    --b2:  #0e0;
 }
 
 /* --------------------------------------------------------------------------- */
@@ -544,12 +368,11 @@ figure, .figure {
 body,.main {
     background: var(--bg);
     color: var(--fg);
-    min-height: 100vh;
 }
 ::selection, .main ::selection,
 ::-moz-selection, .main ::-moz-selection {
     color: white;
-    background: var(--blue);
+    background: var(--b);
 }
 a, a:visited,
 .main a, .main a:visited {
@@ -638,50 +461,43 @@ blockquote:after, .main blockquote:after {
     font-weight: bold;
     font-size: 10px;
 }
-.TODO, .main .TODO {
-    color: var(--red);
-}
-.IN_PROGRESS, .main .IN_PROGRESS {
-    color: var(--yellow);
-}
-.IN_REVIEW, .main .IN_REVIEW {
-    color: var(--cyan);
-}
-.HOLD, .main .HOLD {
-    color: var(--violet);
-}
-.WAITING, .main .WAITING {
-    color: var(--violet);
-}
-.DONE, .main .DONE {
-    color: var(--green);
-}
-.CANCELED, .main .CANCELED {
-    color: var(--magenta);
-}
 .notes, .main .notes {
     background: var(--rbg);
     color: var(--rfg);
 }
 /* ---- SYNTAX HIGHLIGHTING ---- */
-.org-nix-attribute, .org-builtin {
+.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9,
-    color:var(--cyan);
+.org-css-selector, .org-nix-attribute, .org-builtin,
+.IN_REVIEW, a {
+    color:var(--c);
 }
 
-.org-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword {
+.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name,
-    color:var(--green);
+.org-function-name, .org-diff-changed {
+    color:var(--b);
 }
 
-.org-nix-builtin, .org-variable-name, .org-function-name {
+.org-rainbow-delimiters-depth-3, .HOLD, .WAITING {
-    color:var(--blue);
+    color:var(--v);
 }
 
-.org-type, .org-constant {
+.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec,
-    color:var(--yellow);
+.CANCELED {
+    color:var(--m);
 }
-
+.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO {
-.org-css-selector {
+    color:var(--r);
-    color:var(--cyan);
+}
+.org-rainbow-delimiters-depth-6  {
+    color:var(--o);
+}
+.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header,
+.IN_PROGRESS {
+    color:var(--y);
+}
+.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string,
+.org-doc, .org-keyword, .DONE {
+    color:var(--g);
 }
 
 .org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment,
@@ -691,20 +507,6 @@ blockquote:after, .main blockquote:after {
     color:var(--fg2);
 }
 
-.org-highlight-number-number     {color:var(--rfg);}
+.org-highlight-number-number {
-
+    color:var(--rfg);
-.org-rainbow-delimiters-depth-1  {color:var(--cyan);}
+}
-.org-rainbow-delimiters-depth-2  {color:var(--blue);}
-.org-rainbow-delimiters-depth-3  {color:var(--violet);}
-.org-rainbow-delimiters-depth-4  {color:var(--magenta);}
-.org-rainbow-delimiters-depth-5  {color:var(--red);}
-.org-rainbow-delimiters-depth-6  {color:var(--orange);}
-.org-rainbow-delimiters-depth-7  {color:var(--yellow);}
-.org-rainbow-delimiters-depth-8  {color:var(--green);}
-.org-rainbow-delimiters-depth-9  {color:var(--cyan);}
-
-.org-sh-quoted-exec              {color:var(--magenta);}
-.org-diff-changed                {color:var(--blue);}
-.org-diff-header                 {color:var(--yellow);}
-.org-diff-hunk-header            {color:var(--magenta);}
-.org-diff-removed                {color:var(--red);}