mirror of
https://github.com/tylernguyen/wiki.git
synced 2025-02-05 08:23:14 -06:00
refactor: split non-color part of solarized.css into custom.css
This commit is contained in:
parent
c76da73dec
commit
cac668df73
3 changed files with 179 additions and 142 deletions
143
docs/stylesheets/custom.css
Normal file
143
docs/stylesheets/custom.css
Normal file
|
|
@ -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 */
|
||||
|
|
@ -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,<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue