vugo/static/style.css

@charset "UTF-8";
@import "gruvbox.css";

:root{
	scrollbar-color: var(--ansi00-soft) var(--ansi00-hard);
}
:target{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{ color: var(--ansi11); }
a:hover{ 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,h1: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);}
nav{height: 100%;padding: 0.5em; float:left; background: var(--ansi00-soft); border-right:solid 1pt; border-bottom: solid 1pt; width: 10em;}
nav li{list-style: none; list-style-position:outside;}
nav a{ display: block;}
nav{text-transform: capitalize;}
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-soft); }
pre{ overflow-x: auto; background: var(--ansi00-soft); padding: 1em;  border-radius: 1em;}
.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 (min-width: 1200px){
	.post-content{ column-count: 2; }
}
@media (max-width: 800px){
	main{max-width:100%; margin: 1em;}
	nav{padding:0; width: 100%; border-right:solid 0pt;}
	nav a{ padding-left: 1em;}
}
.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;
}
.post-meta{margin-bottom: .5em; border-bottom: solid 1pt;}
.on-list{color: var(--ansi07);}
.post-meta{color:  var(--ansi07); display:flex; justify-content: space-between; }
.post-tags a{text-decoration:none; color:inherit;}
.post-tags a:hover{text-decoration:none; color:var(--ansi15); background:inherit;}
.button{padding:.3em;border-radius:.3em;}
.pagination__buttons{display:flex; justify-content:center;}
.pagination__buttons .next::after{content:" →";}
.pagination__buttons .prev::before{content:"← ";}

@keyframes gay {
	0%{background-position: 0px 50%;}
	50%{background-position: 100% 50%;}
	10%{background-position: 0px 50%;}
}