132 lines
1.9 KiB
CSS
132 lines
1.9 KiB
CSS
|
@import "custom.css";
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--fg:#E60073;
|
||
|
|
}
|
||
|
|
|
||
|
|
::selection{
|
||
|
|
color: black;
|
||
|
|
background-color: var(--fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: black;
|
||
|
|
color: var(--fg);
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 1.2em;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
summary{cursor:pointer;}
|
||
|
|
summary:hover{
|
||
|
|
filter: url(#chroma);
|
||
|
|
color: black;
|
||
|
|
background-color: var(--fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
summary:hover:active{ filter: url(#chromaClick) }
|
||
|
|
|
||
|
|
a{
|
||
|
|
color: var(--fg);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover:active{
|
||
|
|
filter:url(#chromaClick);
|
||
|
|
}
|
||
|
|
|
||
|
|
a::after{ content: ']'; }
|
||
|
|
|
||
|
|
a::before{ content: '['; }
|
||
|
|
|
||
|
|
a:hover{
|
||
|
|
color: black;
|
||
|
|
background-color: var(--fg);
|
||
|
|
position: relative;
|
||
|
|
filter: url(#chroma);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover::selection{
|
||
|
|
background-color: black;
|
||
|
|
color: var(--fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.postImage a::before{ content: none; }
|
||
|
|
.postImage a::after{ content: none; }
|
||
|
|
|
||
|
|
code{
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
img{
|
||
|
|
max-width: 100%;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
figcaption{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
span{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
main{
|
||
|
|
margin: auto;
|
||
|
|
max-width: 80ch;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.anchor{visibility: hidden; text-decoration: none;}
|
||
|
|
h1:target::before,h2:target::before,h3:target::before,h4:target::before,h5:target::before,h6:target::before{content: "> "; }
|
||
|
|
h1:hover>a,h2:hover>a,h3:hover>a,h4:hover>a,h5:hover>a,h6:hover>a{visibility: visible;}
|
||
|
|
h1:target>a,h2:target>a,h3:target>a,h4:target>a,h5:target>a,h6:target>a{color: black; visibility: visible;}
|
||
|
|
:target{color: black; background-color: var(--fg);}
|
||
|
|
|
||
|
|
:target::selection{color: var(--fg); background-color: black;}
|
||
|
|
|
||
|
|
footer{
|
||
|
|
text-align: center;
|
||
|
|
border-top: 1pt solid;
|
||
|
|
margin-top: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer pre{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
table.posts{ width: 100%; }
|
||
|
|
|
||
|
|
.post-content{
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
header a{
|
||
|
|
filter: drop-shadow(0 0 5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(min-width: 81ch){
|
||
|
|
header{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
menu{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
menu a{
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media(max-width: 80ch){
|
||
|
|
header{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
header h1{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
menu{
|
||
|
|
visibility: collapse;
|
||
|
|
}
|
||
|
|
}
|