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