Cyberpink theme

cyberpink/static/style.css

@@ -0,0 +1,131 @@
+@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;
+	}
+}