149 lines
4.6 KiB
CSS
149 lines
4.6 KiB
CSS
|
@charset "UTF-8";
|
||
|
|
@import "gruvbox.css";
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: "BQN386";
|
||
|
|
src: url('/fonts/BQN386.ttf');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
:root{
|
||
|
|
scrollbar-color: var(--ansi08) transparent;
|
||
|
|
}
|
||
|
|
:target{border-bottom: 1pt dashed; background-color: var(--ansi00-soft);}
|
||
|
|
::selection{
|
||
|
|
background-color: var(--selection-bg);
|
||
|
|
color: var(--selection-fg);
|
||
|
|
}
|
||
|
|
a:hover::selection{ background-color: var(--ansi03); }
|
||
|
|
html{
|
||
|
|
color: var(--ansi15);
|
||
|
|
background-color: var(--ansi00-hard);
|
||
|
|
}
|
||
|
|
body{ padding: 0; margin: 0; }
|
||
|
|
a:hover:active{ background-color: var(--ansi03); }
|
||
|
|
a{ color: var(--ansi11); }
|
||
|
|
a:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); text-decoration: none;}
|
||
|
|
a:hover > code{ color: var(--ansi00-hard); background-color: var(--ansi11); text-decoration: none;}
|
||
|
|
audio{ width: 100%; display: block; margin-top: 1em; }
|
||
|
|
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{visibility:visible;}
|
||
|
|
main{ margin-left: 12em; margin-right: 1em; padding: 1em; border:1pt solid; margin-bottom: 1em;}
|
||
|
|
main h1{border-bottom: 1pt solid;}
|
||
|
|
main a h1 {border-bottom: transparent 0pt solid;}
|
||
|
|
li::marker{color: var(--ansi05);}
|
||
|
|
menu{
|
||
|
|
height: 100%;
|
||
|
|
padding: 0.5em;
|
||
|
|
float:left;
|
||
|
|
background: var(--ansi00-soft);
|
||
|
|
border-right:solid 1pt;
|
||
|
|
border-bottom: solid 1pt;
|
||
|
|
width: 10em;
|
||
|
|
text-transform: capitalize;
|
||
|
|
margin-top:0;
|
||
|
|
}
|
||
|
|
menu li{list-style: none; list-style-position:outside;}
|
||
|
|
menu a{ display: block;}
|
||
|
|
nav{
|
||
|
|
border-bottom: 1pt solid;
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
summary{cursor:pointer;}
|
||
|
|
summary:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); }
|
||
|
|
footer{text-align:center; border-top:1pt solid; margin-top: 1em;}
|
||
|
|
footer a{text-decoration:none;}
|
||
|
|
footer .mirror{text-align:center; color: var(--ansi11);}
|
||
|
|
code{ background: var(--ansi00); }
|
||
|
|
pre{ overflow-x: auto; background: var(--ansi00); padding: 1em; border-radius: 1em;}
|
||
|
|
blockquote{ background-color: var(--ansi00); padding:0.5em; border-radius:1em;}
|
||
|
|
hr{color: var(--ansi00);}
|
||
|
|
.hyperbowl{ font-style: italic; font-size: 1.2em;}
|
||
|
|
.logo{
|
||
|
|
padding: 5pt 0;
|
||
|
|
margin:0;
|
||
|
|
width:100%;
|
||
|
|
border-bottom: 2pt solid;
|
||
|
|
background-color: var(--ansi00-soft);
|
||
|
|
background: linear-gradient(to right,var(--ansi05),var(--ansi00));
|
||
|
|
}
|
||
|
|
.logo a{ color: var(--ansi00); text-decoration: none; }
|
||
|
|
.logo a:hover{ background-color: var(--ansi03); }
|
||
|
|
.logo img{
|
||
|
|
float:left;
|
||
|
|
max-height:5em;
|
||
|
|
}
|
||
|
|
.about ul{list-style:none;}
|
||
|
|
.about img{height:10em; float:left;}
|
||
|
|
@media (prefers-color-scheme:dark){
|
||
|
|
.about img{filter:invert(.92)}
|
||
|
|
}
|
||
|
|
header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
|
||
|
|
.page-head{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
|
||
|
|
@media (max-width: 800px){
|
||
|
|
main{max-width:100%; margin: 1em;}
|
||
|
|
menu{padding:0; width: 100%; border-right:solid 0pt;}
|
||
|
|
menu a{ padding-left: 1em;}
|
||
|
|
|
||
|
|
.post-content{
|
||
|
|
max-width: 80ch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 80ch){
|
||
|
|
.post-content{ column-count: 1;
|
||
|
|
max-width: 80ch;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 160ch){
|
||
|
|
.post-content{ column-count: 2;
|
||
|
|
max-width: 160ch;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 240ch){
|
||
|
|
.post-content{ column-count: 3;
|
||
|
|
max-width: 240ch;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.post-content{
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.post-content img{
|
||
|
|
max-width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.stickers{ text-align:center; }
|
||
|
|
.gay{
|
||
|
|
background:linear-gradient(-45deg, var(--ansi01), var(--ansi02), var(--ansi03), var(--ansi04), var(--ansi05), var(--ansi06));
|
||
|
|
background-clip: text;
|
||
|
|
background-size:300%;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
animation:gay 8s ease-in-out infinite;
|
||
|
|
-moz-animation: gay 8s ease-in-out infinite;
|
||
|
|
-webkit-animation: gay 8s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
table{ border-spacing:0; border: 1pt solid; padding:1em; margin:1em 0; }
|
||
|
|
td{ border-bottom: 1pt dashed; }
|
||
|
|
.posts{ overflow-x: auto; }
|
||
|
|
.posts p{ text-align: center;}
|
||
|
|
.post-meta{ color: var(--ansi08); border-bottom: 1pt solid var(--ansi15); padding-bottom:.25em; margin-bottom: 1em;}
|
||
|
|
.post-meta a{ text-decoration: none; color: inherit;}
|
||
|
|
.post-meta a:hover{ color: var(--ansi15); background-color: var(--ansi00-hard);}
|
||
|
|
.post-entry-meta{ width: 100%; background-color: var(--ansi00); padding:.5em;}
|
||
|
|
.post-entry-meta table{color: var(--ansi07); margin-bottom: .5em;}
|
||
|
|
.button{padding:.3em;border-radius:.3em;}
|
||
|
|
.pagination__buttons{display:flex; justify-content:center;}
|
||
|
|
.pagination__buttons .next::after{content:" →";}
|
||
|
|
.pagination__buttons .prev::before{content:"← ";}
|
||
|
|
.language-bqn{font-family: "BQN386", monospace;}
|
||
|
|
.language-orca{font-family: "BQN386", monospace;}
|
||
|
|
|
||
|
|
@keyframes gay {
|
||
|
|
0%{background-position: 0px 50%;}
|
||
|
|
50%{background-position: 100% 50%;}
|
||
|
|
10%{background-position: 0px 50%;}
|
||
|
|
}
|