Add a new colour scheme

resources/style.css

@@ -4,7 +4,6 @@ html, #theme-selector button[data-theme=light] {
     --c-page-bg:      #dfdcd7;
     --c-pane-bg:      #fff;
     --c-text:         #000;
-    --c-paneless:     #000;        /* Text outside panes */
     --c-inverse:      #fff;
     --c-link:         #137;        /* Mostly links */
     --c-emph:         #751;        /* Sidebar links, highlighting */
@@ -17,13 +16,17 @@ html, #theme-selector button[data-theme=light] {
     --c-was-bg:       pink;
     --c-footer-bg:    rgba(0, 0, 0, 0.08);
     --c-dimmer-bg:    #03a;
+    /* "Monotematic" shortcuts */
+    --c-out-text:     var(--c-text);
+    --c-out-link:     var(--c-emph);
+    --c-was-text:     var(--c-text);
+    --c-form-bg:      transparent;
 }
 
 *[data-theme="dark"] {
     --c-page-bg:      #120800;
     --c-pane-bg:      #3c3230;
     --c-text:         #fff;
-    --c-paneless:     #dcc;
     --c-inverse:      #000;
     --c-link:         #fba1ae;
     --c-emph:         #e87182;
@@ -38,6 +41,28 @@ html, #theme-selector button[data-theme=light] {
     --c-dimmer-bg:    #137;
 }
 
+*[data-theme="mixed"] {
+	--c-page-bg: #2f2f2f;
+	--c-pane-bg: #fffbf2;
+	--c-text: #000;
+	--c-out-text: var(--c-pane-bg);
+	--c-inverse: #fff;
+	--c-link: #3a7d64;
+	--c-emph: #365d8e;
+	--c-navbutton-bg: #333;
+	--c-weak: #ccc;
+	--c-separator: #666;
+	--c-img-tint: #8e7b6f;
+	--f-img-tint: contrast(140%) brightness(95%) grayscale(60%) opacity(85%);
+	--c-was-hint: #f2f2f2;
+	--c-was-bg: var(--c-emph);
+        --c-was-text:     #fff;
+	--c-footer-bg: rgba(127, 127, 127, 0.2);
+	--c-dimmer-bg: #477765;
+        --c-out-link:     #ffa380;
+        --c-form-bg:    #fff;
+}
+
 @media (prefers-color-scheme: dark) {
 html:not([data-theme]),
 html[data-theme="auto"],
@@ -45,7 +70,7 @@ html[data-theme=""] {
     --c-page-bg:      #120800;
     --c-pane-bg:      #3c3230;
     --c-text:         #fff;
-    --c-paneless:     #dcc;
+    --c-out-text:     #dcc;
     --c-inverse:      #000;
     --c-link:         #fba1ae;
     --c-emph:         #e87182;
@@ -66,7 +91,7 @@ html, body {
     margin: 0;
     padding: 0;
     font-family: serif;
-    color: var(--c-paneless);
+    color: var(--c-out-text);
     background-color: var(--c-page-bg);
     font-size: 12pt;
     -webkit-text-size-adjust: none;
@@ -110,9 +135,8 @@ a:hover {
 #sidebar > header h1 {
     margin: 0; /* only for tiny */
 }
-#comments .quiz em,
 #sidebar a {
-    color: var(--c-emph);
+    color: var(--c-out-link);
 }
 
 #navbutton {
@@ -165,20 +189,24 @@ a:hover {
     font-size: 92%;
 }
 
+#theme-selector {
+    word-spacing: 200%;
+}
 #theme-selector button {
     display: inline-block;
     cursor: pointer;
     font-size: 0.9rem;
-    width: 1.2rem;
-    height: 1.2rem;
+    line-height: 1.2rem;
+    font-weight: bold;
+    width: 1.4rem;
+    height: 1.4rem;
     background-color: var(--c-pane-bg);
-    border: 0.2rem solid var(--c-link);
     border-radius: 50%;
     position: relative;
     margin-top: 1em;
     opacity: 30%;
     font-family: sans-serif;
-    box-sizing: content-box;
+    box-sizing: border-box;
     padding: 0;
 }
 html:not([data-theme]) #theme-selector button[data-theme="auto"],
@@ -186,43 +214,42 @@ html[data-theme=""] #theme-selector button[data-theme="auto"],
 html[data-theme="auto"] #theme-selector button[data-theme="auto"],
 html[data-theme="light"] #theme-selector button[data-theme="light"],
 html[data-theme="dark"] #theme-selector button[data-theme="dark"],
+html[data-theme="mixed"] #theme-selector button[data-theme="mixed"],
 #theme-selector button:hover,
 #theme-selector button:focus
 {
     opacity: 100%;
 }
-#theme-selector button + button {
-    margin-left: 0.5em;
-}
 #theme-selector button::before,
 #theme-selector button::after {
     content: "";
     display: block;
     position: absolute;
+    box-sizing: border-box;
 }
 #theme-selector button::before {
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
+    top: -0.1rem;
+    left: -0.1rem;
+    width: calc(50% + 0.1rem);
+    height: calc(100% + 0.2rem);
     background-color: var(--c-page-bg);
-    border-radius: 50% 0 0 50%;
+    border-radius: 2rem 0 0 2rem;
 }
 #theme-selector button::after {
     border-radius: 50%;
-    width: 100%;
-    height: 100%;
+    width: calc(100% + 0.4rem);
+    height: calc(100% + 0.4rem);
     border: 0.2rem solid var(--c-link);
     top: -0.2rem;
     left: -0.2rem;
     text-align: center;
-    line-height: 1.2rem;
-    font-weight: bold;
-    color: var(--c-emph);
+    color: var(--c-out-link); /* TODO: show --c-emph as well? */
     content: "•";
 }
 
-#theme-selector button[data-theme='auto'],
+#theme-selector button[data-theme='auto'] {
+    background-color: transparent;
+}
 #theme-selector button[data-theme='auto']::after {
     border-color: var(--c-weak);
     color: var(--c-weak);
@@ -396,7 +423,7 @@ sup.was, sup.was-rich {
 .was::before {
     position: absolute;
     background-color: var(--c-was-bg);
-    color: var(--c-text);
+    color: var(--c-was-text);
     font-size: 0.9rem;
     font-style: initial;
     visibility: hidden;
@@ -574,7 +601,7 @@ figure.float {
     border: 0.1em solid var(--c-link);
     padding: 0.5em;
     margin-top: 0.5em;
-    background-color: transparent;
+    background-color: var(--c-form-bg);
     color: var(--c-text);
     border-radius: 0;
 }
@@ -599,6 +626,9 @@ figure.float {
     color: var(--c-link);
     cursor: pointer;
 }
+#comments .quiz em {
+    color: var(--c-emph);
+}
 
 /* Local navigation (prev/next links) */
 #localnav a {
@@ -787,7 +817,7 @@ figure.float {
         margin-top: 1em;
     }
     .article-meta footer a {
-        color: var(--c-emph);
+        color: var(--c-out-link);
     }
     .article-meta footer li {
         display: block;

templates/nav.tt

+<div>
 <nav id=theme-selector hidden>
     <button tabindex=0 data-theme=auto title='Motiv dle systému'></button>
-    <button tabindex=0 data-theme=light title='Světlý motiv'></button>
-    <button tabindex=0 data-theme=dark title='Tmavý motiv'></button>
+    <button tabindex=0 data-theme=light title='Světlý'></button>
+    <button tabindex=0 data-theme=dark title='Tmavý'></button>
+    <button tabindex=0 data-theme=mixed title='Smíšený'></button>
 </nav>
+<script>document.getElementById('theme-selector').hidden=0;</script>
 <nav id=category-archives>
     <header>Škatulky</header>
     [%- INCLUDE archive a=categories %]
 </nav>
-<nav id=latest-comments>
+</div>
+<nav id=latest-comments class=extended>
     <header>Nové komentáře</header>
-    <menu class=extended>
+    <menu>
         [%- FOREACH c IN comments %]
         <li><div><a href='[% "$root/$c.article/#comment-$c.id" %]'><header>
                 [% c.author %]
@@ -22,9 +26,9 @@
         [%- END %]
     </menu>
 </nav>
-<nav id=latest-articles>
+<nav id=latest-articles class=extended>
     <header>Poslední</header>
-    <menu class=extended>
+    <menu>
         [%- FOREACH a IN latest %]
         <li><div><a href="[% root %]/[% a.id %]"><header>[% a.title %]</header>
             <small><time datetime="[% isostamp(a.published) %]">