cyberpink/static/style.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;
}
}