164 lines
2.4 KiB
CSS
164 lines
2.4 KiB
CSS
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
@keyframes blink{ to{ visibility:hidden;} }
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--background: #222;
|
||
|
|
--foreground: #eee;
|
||
|
|
--foreground2: white;
|
||
|
|
--med: #444;
|
||
|
|
--med2: #555;
|
||
|
|
scrollbar-color: #aaa transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme:light){
|
||
|
|
:root{
|
||
|
|
--background: white;
|
||
|
|
--foreground: #222;
|
||
|
|
--foreground2: #444;
|
||
|
|
--med: #ddd;
|
||
|
|
--med2: #bbb;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
h1:target::before,h2:target::before,h3:target::before,h4:target::before,h5:target::before,h6:target::before{content:"> ";}
|
||
|
|
h1:target,h2:target,h3:target,h4:target,h5:target,h6:target{
|
||
|
|
border-bottom: 2pt solid;
|
||
|
|
}
|
||
|
|
:target{
|
||
|
|
background-color: var(--med);
|
||
|
|
}
|
||
|
|
html{
|
||
|
|
color:var(--foreground);
|
||
|
|
background:var(--background);
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
main{
|
||
|
|
margin:auto;
|
||
|
|
padding:1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
header{
|
||
|
|
color:var(--background);
|
||
|
|
background:var(--foreground);
|
||
|
|
}
|
||
|
|
header h1:before{ content:"> ";}
|
||
|
|
header h1:after{ content:"_"; animation: blink 1s steps(2,start) infinite;}
|
||
|
|
header h1 a{ color:inherit; }
|
||
|
|
|
||
|
|
menu a{
|
||
|
|
color: var(--background);
|
||
|
|
}
|
||
|
|
|
||
|
|
menu a:hover{
|
||
|
|
color: var(--foreground);
|
||
|
|
background-color: var(--background);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 170ch) {
|
||
|
|
main{
|
||
|
|
max-width: 163ch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post-content{
|
||
|
|
column-count: 2;
|
||
|
|
column-rule: solid 1pt var(--foreground);
|
||
|
|
column-gap: 3ch;
|
||
|
|
}
|
||
|
|
|
||
|
|
header{
|
||
|
|
display: flex;
|
||
|
|
justify-content:space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu{
|
||
|
|
display:flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
menu a{
|
||
|
|
padding:1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 170ch) {
|
||
|
|
main{
|
||
|
|
max-width: 80ch;
|
||
|
|
}
|
||
|
|
|
||
|
|
header{
|
||
|
|
display: flex;
|
||
|
|
justify-content:space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
menu{
|
||
|
|
display:flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
menu a{
|
||
|
|
padding:1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 80ch) {
|
||
|
|
header{
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
header h1{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
menu{
|
||
|
|
visibility: hidden;
|
||
|
|
height:0;
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
a{
|
||
|
|
color:var(--foreground);
|
||
|
|
}
|
||
|
|
.footnote-ref{text-decoration: none;}
|
||
|
|
.footnote-ref::before{content:"["}
|
||
|
|
.footnote-ref::after{content:"]"}
|
||
|
|
|
||
|
|
a:hover{
|
||
|
|
color:var(--background);
|
||
|
|
background:var(--foreground);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a.anchor{visibility:hidden; text-decoration: none;}
|
||
|
|
h1:hover>a,h2:hover>a,h3:hover>a,h4:hover>a,h5:hover>a,h6:hover>a,h1:hover>a{visibility:visible;}
|
||
|
|
|
||
|
|
pre{
|
||
|
|
padding:.5em;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer{
|
||
|
|
border-top:1pt solid;
|
||
|
|
margin-top:1em;
|
||
|
|
margin-bottom:.5em;
|
||
|
|
padding-top:.5em;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer pre{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.article-head{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.posts table{
|
||
|
|
width: 80%;
|
||
|
|
margin:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote{
|
||
|
|
font-style: italic;
|
||
|
|
}
|