refactor: split non-color part of solarized.css into custom.css

docs/stylesheets/custom.css

@@ -0,0 +1,143 @@
+/* NOTE Header: Hide shadow under header */
+.md-header[data-md-state="shadow"],
+.md-header--shadow {
+    box-shadow: none;
+}
+
+/* NOTE Text Highlight: Pad left and right */
+.md-typeset mark {
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+/* LINK https://github.com/squidfunk/mkdocs-material/issues/4964#issuecomment-1718085465 */
+/* SECTION Collapsible Code Blocks */
+.md-typeset .collapse-code {
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 1em
+}
+
+.md-typeset .collapse-code pre,
+.md-typeset .collapse-code .highlighttable {
+    margin-top: 0;
+    margin-bottom: 0
+}
+
+.md-typeset .collapse-code input {
+    display: none
+}
+
+.md-typeset .collapse-code input~.code-footer {
+    width: 100%;
+    margin: 0;
+    padding: .25em .5em .25em 0
+}
+
+[data-md-color-scheme="default"] .highlight span.filename {
+    background: rgba(var(--solarized-green), 0.2);
+}
+
+[data-md-color-scheme="slate"] .highlight span.filename {
+    background: rgba(var(--solarized-cyan), 0.4);
+}
+
+[data-md-color-scheme="default"] .md-typeset .collapse-code input~.code-footer label {
+    position: relative;
+    margin: .05em;
+    padding: .15em .8em;
+    color: var(--md-primary-bg-color);
+    background-color: rgba(var(--solarized-green), 0.6);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    border-radius: .1rem;
+    cursor: pointer;
+    content: ""
+}
+
+[data-md-color-scheme="slate"] .md-typeset .collapse-code input~.code-footer label {
+    position: relative;
+    margin: .05em;
+    padding: .15em .8em;
+    color: var(--md-primary-bg-color);
+    background-color: rgba(var(--solarized-cyan), 0.6);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    border-radius: .1rem;
+    cursor: pointer;
+    content: ""
+}
+
+.md-typeset .collapse-code input~.code-footer label:hover {
+    background-color: var(--md-accent-fg-color)
+}
+
+.md-typeset .collapse-code input~.code-footer label::before {
+    position: absolute;
+    top: .15em;
+    left: .15em;
+    display: block;
+    box-sizing: border-box;
+    width: 1.25em;
+    height: 1.25em;
+    background-color: var(--md-primary-bg-color);
+    background-size: 1.25em;
+    content: ""
+}
+
+.md-typeset .collapse-code input~.code-footer label.expand {
+    display: none
+}
+
+.md-typeset .collapse-code input~.code-footer label.expand::before {
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 21v-2H6.41l4.5-4.5-1.41-1.41-4.5 4.5V14H3v7h7m4.5-10.09 4.5-4.5V10h2V3h-7v2h3.59l-4.5 4.5 1.41 1.41Z"/></svg>');
+    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 21v-2H6.41l4.5-4.5-1.41-1.41-4.5 4.5V14H3v7h7m4.5-10.09 4.5-4.5V10h2V3h-7v2h3.59l-4.5 4.5 1.41 1.41Z"/></svg>')
+}
+
+.md-typeset .collapse-code input~.code-footer label.collapse::before {
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5 3.09 15 7.59V4h-2v7h7V9h-3.59l4.5-4.5-1.41-1.41M4 13v2h3.59l-4.5 4.5 1.41 1.41 4.5-4.5V20h2v-7H4Z"/></svg>');
+    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5 3.09 15 7.59V4h-2v7h7V9h-3.59l4.5-4.5-1.41-1.41M4 13v2h3.59l-4.5 4.5 1.41 1.41 4.5-4.5V20h2v-7H4Z"/></svg>')
+}
+
+.md-typeset .collapse-code input:checked~.code-footer label.expand {
+    display: inline
+}
+
+.md-typeset .collapse-code input:checked~.code-footer label.collapse {
+    display: none
+}
+
+.md-typeset .collapse-code input:checked+div.highlight code,
+.md-typeset .collapse-code input:checked+div.highlight .linenodiv {
+    max-height: 9.375em;
+    overflow: hidden
+}
+
+.md-typeset .collapse-code input:checked~.code-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 2em .5em .5em .8rem;
+    background-image: linear-gradient(to bottom, transparent, var(--md-default-bg-color) 80% 100%)
+}
+
+.md-typeset .tabbed-block>.collapse-code:first-child,
+.md-typeset .tabbed-block>.collapse-code:first-child {
+    margin: 0;
+}
+
+@media screen and (max-width:44.9375em) {
+    .md-typeset>.collapse-code {
+        margin-right: -.8rem;
+        margin-left: -.8rem
+    }
+
+    .md-typeset>.collapse-code label.collapse {
+        left: .8rem
+    }
+}
+/* !SECTION */

docs/stylesheets/solarized.css

@@ -84,10 +84,40 @@
   --md-typeset-mark-color: rgba(var(--solarized-cyan), 0.4);
 }
 
-/* NOTE Header: Hide shadow under header */
+.foreground {
-.md-header[data-md-state="shadow"],
+  color: var(--md-default-fg-color);
-.md-header--shadow {
+}
-  box-shadow: none;
+
+.solarized-yellow {
+  color: #b58900;
+}
+
+.solarized-orange {
+  color: #cb4b16;
+}
+
+.solarized-red {
+  color: #dc322f;
+}
+
+.solarized-magenta {
+  color: #d33682;
+}
+
+.solarized-violet {
+  color: #6c71c4;
+}
+
+.solarized-blue {
+  color: #268bd2;
+}
+
+.solarized-cyan {
+  color: #2aa198;
+}
+
+.solarized-green {
+  color: #859900;
 }
 
 /* ANCHOR Header Recolors */
@@ -180,7 +210,6 @@
 }
 
 /* SECTION Pygments */
-
 .highlight span.filename {
   border-top-left-radius: .3rem;
   border-top-right-radius: .3rem;
@@ -260,11 +289,9 @@
 .highlight .vi { color: rgb(var(--solarized-blue)); } /* Name.Variable.Instance */
 .highlight .w { color: rgb(var(--solarized-base01)); } /* Text.Whitespace */
 .highlight .x { color: rgb(var(--solarized-orange)); } /* Other */
-
 /* !SECTION Pygments */
 
 /* SECTION Admonition */
-
 /* NOTE Classic Admonitions */
 /* LINK https://squidfunk.github.io/mkdocs-material/reference/admonitions/?h=admoni#classic-admonitions */
 .md-typeset .admonition,
@@ -620,136 +647,6 @@
   margin-bottom: 0;
 }
 
-/* ANCHOR Collapsible Code Blocks */
-.md-typeset .collapse-code {
-  position: relative;
-  margin-top: 1em;
-  margin-bottom: 1em
-}
-
-.md-typeset .collapse-code pre,
-.md-typeset .collapse-code .highlighttable {
-  margin-top: 0;
-  margin-bottom: 0
-}
-
-.md-typeset .collapse-code input {
-  display: none
-}
-
-.md-typeset .collapse-code input~.code-footer {
-  width: 100%;
-  margin: 0;
-  padding: .25em .5em .25em 0
-}
-
-[data-md-color-scheme="default"] .highlight span.filename {
-  background: rgba(var(--solarized-green), 0.2);
-}
-
-[data-md-color-scheme="slate"] .highlight span.filename {
-  background: rgba(var(--solarized-cyan), 0.4);
-}
-
-[data-md-color-scheme="default"] .md-typeset .collapse-code input~.code-footer label {
-  position: relative;
-  margin: .05em;
-  padding: .15em .8em;
-  color: var(--md-primary-bg-color);
-  background-color: rgba(var(--solarized-green), 0.6);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  border-radius: .1rem;
-  cursor: pointer;
-  content: ""
-}
-
-[data-md-color-scheme="slate"] .md-typeset .collapse-code input~.code-footer label {
-  position: relative;
-  margin: .05em;
-  padding: .15em .8em;
-  color: var(--md-primary-bg-color);
-  background-color: rgba(var(--solarized-cyan), 0.6);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  border-radius: .1rem;
-  cursor: pointer;
-  content: ""
-}
-
-.md-typeset .collapse-code input~.code-footer label:hover {
-  background-color: var(--md-accent-fg-color)
-}
-
-.md-typeset .collapse-code input~.code-footer label::before {
-  position: absolute;
-  top: .15em;
-  left: .15em;
-  display: block;
-  box-sizing: border-box;
-  width: 1.25em;
-  height: 1.25em;
-  background-color: var(--md-primary-bg-color);
-  background-size: 1.25em;
-  content: ""
-}
-
-.md-typeset .collapse-code input~.code-footer label.expand {
-  display: none
-}
-
-.md-typeset .collapse-code input~.code-footer label.expand::before {
-  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 21v-2H6.41l4.5-4.5-1.41-1.41-4.5 4.5V14H3v7h7m4.5-10.09 4.5-4.5V10h2V3h-7v2h3.59l-4.5 4.5 1.41 1.41Z"/></svg>');
-  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 21v-2H6.41l4.5-4.5-1.41-1.41-4.5 4.5V14H3v7h7m4.5-10.09 4.5-4.5V10h2V3h-7v2h3.59l-4.5 4.5 1.41 1.41Z"/></svg>')
-}
-
-.md-typeset .collapse-code input~.code-footer label.collapse::before {
-  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5 3.09 15 7.59V4h-2v7h7V9h-3.59l4.5-4.5-1.41-1.41M4 13v2h3.59l-4.5 4.5 1.41 1.41 4.5-4.5V20h2v-7H4Z"/></svg>');
-  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5 3.09 15 7.59V4h-2v7h7V9h-3.59l4.5-4.5-1.41-1.41M4 13v2h3.59l-4.5 4.5 1.41 1.41 4.5-4.5V20h2v-7H4Z"/></svg>')
-}
-
-.md-typeset .collapse-code input:checked~.code-footer label.expand {
-  display: inline
-}
-
-.md-typeset .collapse-code input:checked~.code-footer label.collapse {
-  display: none
-}
-
-.md-typeset .collapse-code input:checked+div.highlight code,
-.md-typeset .collapse-code input:checked+div.highlight .linenodiv {
-  max-height: 9.375em;
-  overflow: hidden
-}
-
-.md-typeset .collapse-code input:checked~.code-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  padding: 2em .5em .5em .8rem;
-  background-image: linear-gradient(to bottom, transparent, var(--md-default-bg-color) 80% 100%)
-}
-
-.md-typeset .tabbed-block>.collapse-code:first-child,
-.md-typeset .tabbed-block>.collapse-code:first-child {
-  margin: 0;
-}
-
-@media screen and (max-width:44.9375em) {
-  .md-typeset>.collapse-code {
-    margin-right: -.8rem;
-    margin-left: -.8rem
-  }
-
-  .md-typeset>.collapse-code label.collapse {
-    left: .8rem
-  }
-}
-
 .md-post {
   margin-left: 0;
   margin-bottom: 3em;
@@ -759,8 +656,3 @@
   background: var(--md-primary-fg-color);
   color: black;
 }
-
-.md-typeset mark {
-  padding-left: 4px;
-  padding-right: 4px;
-}

mkdocs.yml

@@ -127,6 +127,7 @@ extra:
 
 extra_css:
   - stylesheets/solarized.css
+  - stylesheets/custom.css
   - stylesheets/fonts.css
   - stylesheets/simpleicons.css
   - https://unpkg.com/katex@0/dist/katex.min.css
@@ -188,6 +189,7 @@ plugins:
       minify_css: true
       css_files:
         - stylesheets/solarized.css
+        - stylesheets/custom.css
         - stylesheets/fonts.css
         - stylesheets/simpleicons.css