diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css new file mode 100644 index 0000000..c97976c --- /dev/null +++ b/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,'); + mask-image: url('data:image/svg+xml;charset=utf-8,') +} + +.md-typeset .collapse-code input~.code-footer label.collapse::before { + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); + mask-image: url('data:image/svg+xml;charset=utf-8,') +} + +.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 */ diff --git a/docs/stylesheets/solarized.css b/docs/stylesheets/solarized.css index 054ab44..c3bee5e 100644 --- a/docs/stylesheets/solarized.css +++ b/docs/stylesheets/solarized.css @@ -84,10 +84,40 @@ --md-typeset-mark-color: rgba(var(--solarized-cyan), 0.4); } -/* NOTE Header: Hide shadow under header */ -.md-header[data-md-state="shadow"], -.md-header--shadow { - box-shadow: none; +.foreground { + color: var(--md-default-fg-color); +} + +.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,'); - mask-image: url('data:image/svg+xml;charset=utf-8,') -} - -.md-typeset .collapse-code input~.code-footer label.collapse::before { - -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); - mask-image: url('data:image/svg+xml;charset=utf-8,') -} - -.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; -} diff --git a/mkdocs.yml b/mkdocs.yml index caf3293..62c423d 100644 --- a/mkdocs.yml +++ b/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