aboutsummaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css1375
1 files changed, 1089 insertions, 286 deletions
diff --git a/style.css b/style.css
index f4a756a..2111fa2 100644
--- a/style.css
+++ b/style.css
@@ -1,307 +1,705 @@
@font-face {
+ font-family: b612;
+ src: url(https://isopod.cool/stuff/fonts/B612/B612-Regular.ttf);
+}
+@font-face {
+ font-family: b612;
+ src: url(https://isopod.cool/stuff/fonts/B612/B612-Bold.ttf);
+ font-weight: bold;
+}
+@font-face {
+ font-family: b612;
+ src: url(https://isopod.cool/stuff/fonts/B612/B612-Italic.ttf);
+ font-style: italic;
+}
+@font-face {
+ font-family: b612;
+ src: url(https://isopod.cool/stuff/fonts/B612/B612-BoldItalic.ttf);
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face {
font-family: b612_mono;
- src: url(stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
+ src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
}
@font-face {
font-family: b612_mono;
- src: url(stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
+ src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
font-weight: bold;
}
@font-face {
font-family: b612_mono;
- src: url(stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
+ src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
font-style: italic;
}
@font-face {
font-family: b612_mono;
- src: url(stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
+ src: url(https://isopod.cool/stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
font-weight: bold;
font-style: italic;
}
:root {
- --stdfont: b612_mono, monospace;
- --bgcolor: #222222;
- --fontcolor: #dcdcdc;
- --linkcolor: #df1955;
- --linkhover: #00ffd5;
- --blockbg: #fff1;
- --blockbghover: #fff2;
- --stdshadow: #000;
+ color-scheme: dark light;
+
+ /* Trying to define as few specific colours as possible as generically as possible */
+ --background: light-dark(#fff5eb, #1a1a1d);
+ --foreground: light-dark(#222, #ddd);
+ --accent1: light-dark(#64790a, #ff1159);
+ --accent2: light-dark(#007a70, #00ffd5);
+ --shadow: #000a;
+ --message-red: light-dark(#c00, red);
+ --message-green: light-dark(#007500, lime);
+ --message-yellow: light-dark(#d3b200, yellow);
+ --message-blue: light-dark(#005fbb, dodgerblue);
+
+ --linkcolor: var(--accent1);
+ --linkhover: var(--accent2);
+
+ --fg0: var(--foreground);
+ --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+ --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+ --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+
+ --bg0: var(--background);
+ --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+ --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+ --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+ --bg00: light-dark(white, black);
+
/* ALL colors should be defined here.
If there's a color value somewhere else, move it here so it can be responsive */
- --stdaccentborder: 3px solid var(--fontcolor);
- --bodywidth: min(90vw, 80ch);
- --stddropshadow: 4px 4px 8px var(--stdshadow);
--stdpadding: 1rem;
- --navbarheight: calc(var(--stdpadding) * 4.5);
- --h1-image: url('images/isopod.php');
- --shadowsize: 3rem;
- --blockbackdrop: blur(1.5px);
+ --idealwidth: calc(80ch + (var(--stdpadding) * 10));
+ --bodywidth: min(calc(90vw - (4 * var(--stdpadding))), var(--idealwidth));
+ /*--mobileviewmaxwidth: calc(92ch + 24rem); root variables don't work in media queries, apparently. Keeping this here for reference */
+
+ --border-size-x: 1rem;
+ --border-size-y: .33rem;
+
+ --accentbordercolor: light-dark(var(--accent1), var(--fg0));
+ --stdaccentborder: .2rem solid var(--accentbordercolor);
+
+ --stddropshadow: .25rem .25rem .5rem var(--shadow);
+ --blockshadow: drop-shadow(0 0 1.5rem var(--shadow));
+
+ --bodyfont: b612_mono, monospace;
+
}
html, body {
height: 100%;
+ padding: 0;
+ margin: 0;
}
body {
- color: var(--fontcolor);
- font-family: var(--stdfont);
- text-shadow: 1px 1px 3px var(--stdshadow);
+ color: var(--fg0);
+ font-family: var(--bodyfont);
- max-width: var(--bodywidth);
- margin: auto;
- background-color: var(--bgcolor);
- box-sizing: border-box;
+ background:
+ url('https://isopod.cool/bg-dither.png') repeat center/cover fixed,
+ var(--bg0);
}
body > p:last-child {
padding-bottom: var(--stdpadding);
}
-/* Headings */
-body > h1:first-of-type, body > main:first-of-type > div > h1:first-of-type {
- margin-top: calc(var(--navbarheight) + var(--stdpadding));
- font-size: 3em;
- background-image: var(--h1-image);
- background-size: contain;
- background-position: right;
- background-repeat: no-repeat;
- padding-bottom: calc(var(--stdpadding) * 2);
- margin-bottom: calc(var(--stdpadding) * -2);
-}
-h1 + h2#caption {font-weight: normal;
- padding-top: 0;
- margin-top: -1.4em;
-}
-h1, h2, h3, h4, h5, h6 {
- border-left: var(--stdaccentborder);
- padding-left: var(--stdpadding);
-}
-summary :is(h1, h2, h3, h4, h5, h6) {
- display: inline-block;
- border-left: none;
- padding-left: initial;
- margin: 0;
-}
-
/* Links */
+
a {
- color: var(--linkcolor);
+ color: var(--accent1);
}
a:hover {
- color: var(--linkhover);
+ color: var(--accent2);
}
+.backlink {
+ border-left: var(--stdpadding) solid var(--accent1);
+ padding: calc(var(--stdpadding) * 0.7) var(--stdpadding);
+ width: fit-content;
+ margin-left: calc(-1 * var(--stdpadding));
+}
+
+/* Header */
-/* Nav & Header */
header {
- position: absolute;
+ position: fixed;
top: 0;
- width: max-content;
- min-width: var(--bodywidth);
- height: var(--navbarheight);
- padding-top: 0.5rem;
- left: 50%;
- transform: translateX(-50%);
+ left: 0;
+ right: 0;
+ filter: var(--blockshadow);
+ pointer-events: none;
+ z-index: 5;
+}
+header * {
+ pointer-events: auto;
}
-#header-content {
+
+.headerbar { /* This div represents the top header bar */
display: flex;
+ flex-direction: row;
+ justify-content: space-between;
align-items: center;
+
+ padding: 0 var(--stdpadding);
+
+ background: var(--bg0);
+ filter: drop-shadow(0 var(--border-size-y) 0 var(--accent1));
}
-#header-content > * {
- margin: 0;
+.headerbar > * {
+ flex: 1 1 0;
}
-#header-content > :last-child {
- flex: 1;
+.headerbar p {
text-align: right;
}
-nav {
+
+.headerbar > div { /* Center image in the top bar */
display: flex;
- flex-wrap: wrap;
- max-width: 100%;
- align-items: center;
justify-content: center;
- gap: calc(var(--stdpadding / 2));
+ align-items: center;
+ height: 5rem;
}
-nav a, nav span, body > a{
- padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
- margin: calc(var(--stdpadding) / 2) 0;
+.headerbar img {
+ max-height: 100%;
}
-nav a, body > a, summary {
- border-left: var(--stdaccentborder);
- background: linear-gradient(var(--blockbghover) 0 0) 0 / var(--bgpos, 0) no-repeat;
- transition: background .3s, border .3s;
+
+
+.bubblecolumn {
+ position: fixed;
+ left: 4rem;
+ top: 0;
+ width: 29px;
+ height: 100vh;
+ background-image: url(/images/bubblecolumn1.gif);
+ background-repeat: repeat-y;
+ pointer-events: none;
+ z-index: -1;
}
-nav a {
- border-color: #0000;
+
+ /* Header nav */
+header nav {
+ max-width: fit-content;
+ filter: drop-shadow(var(--border-size-x) 0 0 var(--accent1));
+ background: var(--bg0);
+ background: linear-gradient(315deg, transparent var(--stdpadding), var(--bg0) 0) bottom right; /* TODO: replace this nonsense once border-shape drops */
+ padding-bottom: var(--stdpadding);
}
-nav a:hover, body > a:hover, summary:hover {
- --bgpos: 100%;
- border-left: var(--stdaccentborder);
+#header-inside-corner-kludge { /* Janky solution to get an inside bevel where the top bar and nav sidebar meet. */
+ background: var(--bg0);
+ background: linear-gradient(135deg, var(--bg0) var(--stdpadding), transparent 0) top left;
+ width: calc(var(--stdpadding) * 2);
+ height: calc(var(--stdpadding) * 2);
+ top: 0;
+ right: calc(0px - var(--stdpadding) * 2);
+ position: absolute;
}
-body > a {
- display: block;
- margin-left: 0;
- padding-left: 1rem;
- font-weight: bold;
- font-size: 1.25em;
+nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+nav li {
+ padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) * 2);
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.burgermenu {
+ display: none;
+}
+
+/* Main */
+
+main {
+ padding: calc(var(--stdpadding) * 5);
+ padding-top: 6rem;
+ padding-bottom: 4rem;
+
+ margin: auto;
+ max-width: var(--bodywidth);
+ min-height: 100vh;
+ box-sizing: border-box;
+
+ background-color: var(--bg0);
+ box-shadow: 0 0 2.5rem var(--shadow) inset;
+
+ line-height: 1.4;
+}
+section {
+ margin-bottom: calc(var(--stdpadding) * 3);
+}
+
+.pagenav ul {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ padding: 0;
+ gap: var(--stdpadding);
+ justify-content: center;
+ align-items: center;
+}
+.pagenav li {
+ padding: 0;
}
-/* Background image type beat */
-#leftsidebg, #rightsidebg {
- --bgimg: url(/bg_dither.png)/*, url(/bg.jxl), url(/bg.jpg)*/;
- background-image: /*linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)), */var(--bgimg);
- background-size: /*100% 2px, 3px 100%, cover, cover, cover, */cover;
- background-repeat: repeat;
- background-position: center;
+/* Footer */
+
+footer {
position: fixed;
- z-index: -10;
+ right: 0;
bottom: 0;
- top: 0;
- --distancefromcenter: calc((var(--bodywidth) / -2) - (var(--stdpadding) * 3));
+ background: var(--bg0);
+ background: linear-gradient(135deg, transparent var(--stdpadding), var(--bg0) 0) top left;
+ padding: var(--stdpadding);
+ filter: drop-shadow(calc(0px - var(--border-size-x)) 0 0 var(--accent2))
+ var(--blockshadow);
+ max-width: 85vw;
+
+ display: flex;
+ gap: var(--stdpadding);
+ align-items: center;
+ flex-wrap: wrap;
}
-#leftsidebg {
- right: calc(50% - var(--distancefromcenter));
- left: 0;
- box-shadow: calc(0rem - var(--shadowsize)) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
+footer p {
+ margin: 0;
}
-#rightsidebg {
- right: 0;
- left: calc(50% - var(--distancefromcenter));
- box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
+
+/* Headings */
+
+h2, h3, h4, h5, h6 {
+ margin-top: calc(var(--stdpadding) * 3);
}
+h2, h3, h4 {
+ border-bottom: .2rem solid;
+ padding-bottom: .2em;
+ width: fit-content;
-/* 88x31 button container */
-.buttons {
- text-align: center;
- font-size: 0;
+ --hbcolor: var(--fg0);
+ border-image: linear-gradient(to right, var(--hbcolor) 50%, transparent 50%) 100% 1;
}
-.buttons > * {
- display: inline-block;
- margin: 0.1rem;
- font-size: 0;
+h2 {
+ font-size: 2.5rem;
}
-.buttons > a > img {
- transition-duration: .5s;
- box-shadow: none;
- display: inline-block;
- transform: translate(0, 0);
+h3 {
+ font-size: 1.5rem;
+ --hbcolor: var(--accent1);
+ border-bottom-width: .1rem;
}
-.buttons > a > img:hover {
- box-shadow: 2px 2px 4px black;
- z-index: 5;
- transform: translate(-2px, -2px);
+h4 {
+ font-size: 1.25rem;
+ --hbcolor: var(--accent2);
+ border-bottom-width: .1rem;
+}
+h5 {
+ font-size: 1rem;
+}
+h6 {
+ font-size: .9rem;
+}
+.h2caption {
+ margin-top: -2.9rem;
+ margin-bottom: 1.6rem;
+ margin-left: auto;
+ width: 50%;
+ text-align: right;
+ font-style: italic;
+}
+h3 + .h2caption, h4 + .h2caption {
+ margin-top: -2.4rem;
+ margin-bottom: 1.1rem;
+}
+
+/* Details/summary */
+
+details {
+ border-left: var(--stdaccentborder);
+ padding-left: var(--stdpadding);
+}
+details:open summary {
+ margin-bottom: var(--stdpadding);
+}
+summary {
+ padding: var(--stdpadding);
+ margin-left: calc(var(--stdpadding) * -1);
+ background-color: var(--bg1);
+ background: linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
+}
+
+/* Universal for the next 4 things */
+
+figure, section > blockquote, pre, .codetitle, .aside, .notice {
+ margin: var(--stdpadding) calc(var(--stdpadding) * 3);
+ border-left: var(--stdaccentborder);
+}
+
+/* Interjections */
+
+.aside {
+ background-color: var(--bg1);
+ font-size: 0.9em;
+ min-height: calc(7rem + (var(--stdpadding) * 2));
+}
+.aside-image {
+ height: 100%;
+ max-height: 7rem;
+ width: 7rem;
+ float: left;
+ padding: var(--stdpadding);
+ margin: 0 var(--stdpadding) var(--stdpadding) 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-right: .1rem solid var(--accent1);
+}
+.aside-image img, .aside-image picture {
+ max-height: 100%;
+}
+.aside-content {
+ padding: var(--stdpadding);
+}
+.aside-content :first-child {
+ margin-top: 0;
+}
+.aside-content :last-child {
+ margin-bottom: 0;
+}
+
+.notice {
+ border-left-color: var(--message-blue);
+ background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-blue) 10%);
+ padding: var(--stdpadding);
+ font-size: 0.9em;
+}
+.error {
+ border-left-color: var(--message-red);
+ background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-red) 10%);
+}
+.success {
+ border-left-color: var(--message-green);
+ background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-green) 10%);
+}
+.warning {
+ border-left-color: var(--message-yellow);
+ background-color: color-mix(in srgb, var(--bg0) 90%, var(--message-yellow) 10%);
+}
+
+/* Blockquotes */
+
+figure.quote, section > blockquote {
+ background-color: var(--bg1);
+ padding: var(--stdpadding);
+ background: linear-gradient(315deg, transparent var(--stdpadding), var(--bg1) 0) bottom right;
}
/* Code snippets */
+
+pre {
+ height: fit-content;
+}
code {
- padding: 0.15rem;
+ padding: 0.15em .5em;
}
pre > code {
display: block;
- margin-bottom: 1rem;
overflow-x: auto;
+ border-top: .1rem solid var(--accent2);
+}
+code {
+ background-color: var(--bg00);
}
-code, .codetitle {
- background-color: black;
+:not(pre) > code {
+ border: .1rem solid var(--fg3);
}
pre > code, .codetitle {
- width: 75%;
- margin: auto;
- border: 1px solid #00ffd5;
- padding: 0.7rem;
+ padding: calc(0.7 * var(--stdpadding));
}
.codetitle {
margin-bottom: 0;
border-bottom: none;
- text-align: center;
+ font-size: .9em;
+ display: block;
+ background-color: var(--bg1);
+ background: linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
}
.codetitle + pre {
margin-top: 0;
}
+/* Media */
+
+img, picture, video {
+ max-width: 100%;
+ max-height: 50rem;
+ min-width: 0;
+}
+:is(main, section, picture, .media) > img, picture, video {
+ margin: auto;
+ display: block;
+}
+figure.media {
+ background-color: var(--bg1);
+ background: linear-gradient(315deg, var(--bg1) var(--stdpadding), transparent var(--stdpadding), transparent calc(var(--stdpadding) * 1.3), var(--bg1) 0) bottom right;
+ border-left: var(--stdaccentborder);
+}
+figure.media * {
+ margin: 0 auto;
+}
+figure.media figcaption {
+ padding: var(--stdpadding);
+ font-size: .9em;
+}
+.gallery {
+ display: flex;
+ max-width: 100%;
+ width: max-content;
+}
+.gallery > * {
+ flex: 1 1 0;
+}
+p img {
+ height: 2em;
+ display: inline;
+ margin: initial;
+ vertical-align: middle;
+ transition: .15s;
+}
+p img:hover {
+ transform: scale(1.3);
+}
+
/* Tables */
+
table {
+ font-size: .9em;
+ width: fit-content;
border-collapse: collapse;
+ border: .1rem solid var(--fg0);
+}
+.tablecontainer {
+ overflow-x: scroll;
+}
+table, .tablecontainer {
+ margin: var(--stdpadding) 0;
+}
+.tablecontainer table {
+ margin: 0 auto;
+}
+.tablecontainer caption {
+ text-align: left;
+}
+caption {
+ background: var(--bg1);
+ background:
+ linear-gradient(135deg, transparent var(--stdpadding), var(--bg1) 0) top left,
+ linear-gradient(225deg, transparent var(--stdpadding), var(--bg1) 0) top right;
+ padding: var(--stdpadding);
+ background-size: 50% 100%;
+ background-repeat: no-repeat;
+}
+thead, tfoot {
+ border-top: .1rem solid var(--accent1);
+ border-collapse: separate;
+}
+tbody {
+ border-top: .1rem solid var(--accent2);
+ border-collapse: separate;
}
td {
- padding: calc(var(--stdpadding) / 2);
+ min-width: 10ch;
+ border: .1rem solid var(--fg1);
}
-tr > td:first-child {
- padding-left: 0;
+td, th {
+ padding: calc(var(--stdpadding) * .4);
}
-tr.indent-1 td {
- padding-left: calc(var(--stdpadding));
+thead th, thead td {
+ padding: calc(var(--stdpadding) * .4) var(--stdpadding);
}
-tr.indent-1 td:first-child {
- border-left: var(--stdaccentborder);
+
+/* Lists */
+
+dl {
+ display: flex;
+ flex-wrap: wrap;
+ --ratio: .333; /* Ratio of dt's width to dd's width. Defaults to 1/3 here. */
+}
+dt, dd {
+ padding: calc(var(--stdpadding) * .5);
+ box-sizing: border-box;
+}
+dt {
+ width: calc(100% * var(--ratio));
+ padding-left: var(--stdpadding);
+}
+dd {
+ width: calc(100% - (100% * var(--ratio)));
+ margin-left: 0;
+ padding-right: var(--stdpadding);
}
+:is(dt, dd):nth-of-type(2n) {
+ background-color: var(--bg1);
+}
+dt:empty{
+ width: 0;
+ padding: 0;
+}
+dt:empty + dd {
+ width: 100%;
+ padding-left: var(--stdpadding);
+}
+
+/* Forms & Comments */
-/* Quotations */
-figure.quote, blockquote {
- padding: calc(var(--stdpadding) * 1.5);
+input, textarea {
+ border: none;
+ background-color: var(--bg00);
+ font-family: var(--bodyfont);
margin: 0;
+}
+
+input, textarea, .commentform .notice, .commentform-field label {
+ padding: calc(var(--stdpadding) * 0.5) calc(var(--stdpadding) * 0.8);
+ box-sizing: border-box;
+ font-size: 0.85rem;
+}
+
+input[type="text"], textarea {
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
border-left: var(--stdaccentborder);
- background-color: var(--blockbg);
- margin-bottom: var(--stdpadding);
- backdrop-filter: var(--blockbackdrop);
}
-figure.quote blockquote {
- padding: initial;
- border-left: initial;
- background-color: initial;
- margin-bottom: initial;
- backdrop-filter: initial;
+
+input[type="text"] {
+ border-top: .1rem solid var(--accent1);
}
-figure.quote figcaption {
- margin-left: calc(var(--stdpadding) * 3);
- margin-top: var(--stdpadding);
+
+textarea {
+ border-bottom: .1rem solid var(--accent2);
}
-blockquote > :first-child {
- margin-top: 0;
+
+input[type="submit"] {
+ border: var(--stdaccentborder);
+ height: min-content;
+ background-color: var(--bg1);
}
-blockquote > :last-child {
- margin-bottom: 0;
+
+input[type="submit"]:hover {
+ border-color: var(--accent2);
+ color: var(--accent2);
+ background-color: var(--bg2);
+ cursor: pointer;
}
-/* Media, plus captions thereof */
-img, picture, video {
- max-width: 100%;
- max-height: 50rem;
- min-width: 0;
+.commentform-field {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
}
-:is(body, p, picture) > img, picture, video, figure.media {
- margin: auto;
- display: block;
+
+.commentform-field label {
+ background-color: var(--bg1);
+ border-left: var(--stdaccentborder);
}
-.gallery {
+#commentform-top, .commentform-top {
display: flex;
- max-width: 100%;
+ gap: var(--stdpadding);
}
-figure.media {
- width: fit-content;
- max-width: 100%;
+
+.commentform {
+ display: flex;
+ flex-direction: column;
+ gap: var(--stdpadding);
+ margin: var(--stdpadding) 0;
}
-figure.media > div {
- display: inline-block;
+
+#commentform-bottom, .commentform-bottom {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row-reverse;
+ gap: var(--stdpadding);
}
-figure.media > div > figcaption {
- width: min-content;
- min-width: 100%;
- font-size: 0.9em;
- padding: calc(var(--stdpadding) * 0.9);
+
+.commentform .notice {
+ display: flex;
+ justify-content: center;
+ align-items: center;
margin: 0;
- margin-bottom: initial;
- margin-top: -4px;
+}
+
+.comment {
+ margin: 2rem auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.comment > div {
border-left: var(--stdaccentborder);
- background-color: var(--blockbg);
- box-sizing: border-box;
+ border-left-color: var(--accent1);
+ margin: 0;
+ padding: 0 var(--stdpadding);
+ background: var(--bg1);
+}
+
+.gb-cool/*, .gb-found*/ {
+ word-break: break-all;
+}
+
+.comment > .gb-reply {
+ border-left: none;
+ border-right: var(--stdaccentborder);
+ border-right-color: var(--accent2);
+ border-top: var(--stdaccentborder);
+ padding: 0;
+}
+
+.gb-reply > div { /* Reply contents */
+
+ margin: var(--stdpadding);
+ text-align: right;
+}
+
+.gb-reply > p { /* "Reply:" label */
+ float: left;
+ margin: 0;
+ margin-right: var(--stdpadding);
+ padding: var(--stdpadding);
+ border-right: .1rem solid var(--accent2);
+}
+
+.gb-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: .1rem solid var(--fg1);
+}
+
+.gb-head p {
+ flex: 1 1 0;
+ text-align: center;
+}
+
+.gb-head p:first-of-type {
+ text-align: left;
+}
+
+.gb-head p:last-of-type {
+ text-align: right;
}
/* Misc */
-summary {
- padding: calc(var(--stdpadding)/2) var(--stdpadding);
+
+hr {
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
+ color: var(--stdaccentborder);
+ border-top-color: var(--stdaccentborder);
+}
+.prefers-contrast-less-message {
+ display: none;
}
summary:hover {
cursor: pointer;
@@ -312,8 +710,169 @@ summary:hover {
[title]:hover {
cursor: help;
}
-hr {
- width: 30%;
+.webrings {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--stdpadding);
+ width: 100%;
+ justify-content: space-around;
+ margin: calc(3 * var(--stdpadding)) 0;
+}
+.ring {
+ display: flex;
+ gap: 1ch;
+}
+.ring * {
+ text-wrap: nowrap;
+}
+.buttons {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+.buttons > * {
+ width: 88px;
+ max-height: 31px;
+}
+
+/* Music page stuff */
+.musicpage section {
+ min-height: 23rem;
+}
+.cd {
+ --cdsize: min(20rem, var(--bodywidth));
+ --clearplastic: color-mix(in srgb, var(--background) 90%, var(--foreground) 10%);
+
+ width: var(--cdsize);
+ aspect-ratio: 1;
+
+ border-radius: 50%;
+ border: calc(var(--cdsize) / 50) solid var(--clearplastic);
+ overflow: hidden;
+ line-height: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: var(--stdpadding);
+ margin-top: 3rem;
+ box-shadow: 0 0 3rem #0003;
+ transform: scale(1);
+ transition: .2s;
+ box-sizing: border-box;
+}
+.cd:hover {
+ transform: scale(1.1);
+ box-shadow: 0 0 8rem #0007;
+}
+.cd + h3 {
+ display: inline-block;
+}
+.cd img {
+ animation-duration: 100000ms;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ width: 100%;
+}
+.cd:hover img {
+ animation-duration: 300ms;
+}
+section:nth-child(2n+1) .cd {
+ float: left;
+ margin-right: 2rem;
+ animation-name: spin;
+}
+section:nth-child(2n) .cd {
+ float: right;
+ margin-left: 2rem;
+ animation-name: spin-reverse;
+}
+section:nth-child(2n+1) .cd img {
+ animation-name: spin;
+}
+section:nth-child(2n) .cd img {
+ animation-name: spin-reverse;
+}
+
+.cd::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: calc(var(--cdsize) / 8);
+ height: calc(var(--cdsize) / 8);
+ background-color: var(--bg0);
+ border-radius: 50%;
+ border: calc(var(--cdsize) / 12) solid var(--clearplastic);
+ box-shadow: 0 0 calc(var(--cdsize) / 8) #0003 inset;
+}
+
+/* Blog stuff */
+
+.prevnextnav {
+ display: flex;
+ gap: var(--stdpadding);
+}
+.prevlink, .nextlink {
+ padding: var(--stdpadding);
+ flex-grow: 1;
+}
+.prevlink {
+ border-left: var(--stdpadding) solid var(--accent1);
+ margin-left: calc(-1 * var(--stdpadding));;
+}
+.nextlink {
+ border-right: var(--stdpadding) solid var(--accent1);
+ margin-right: calc(-1 * var(--stdpadding));;
+ text-align: right;
+}
+
+
+ul#articles {
+ margin: 0;
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ padding-left: 0;
+ list-style: none;
+}
+.blogentry {
+ max-width: 100%;
+ list-style: none;
+ display: inline-block;
+ margin: calc(var(--stdpadding)) 0;
+}
+ul#articles h3 {
+ margin: calc(var(--stdpadding)) 0;
+}
+.blogentry > * {
+ display: block;
+ margin: 0.1rem 0;
+ box-sizing: border-box;
+}
+.blogentry > div :first-child {
+ margin-top: .1rem;
+}
+.blogentry > div :last-child {
+ margin-bottom: .1rem;
+}
+.entrysummary {
+ font-size: .9em;
+}
+.entrytag {
+ font-size: .9em;
+ color: var(--fg2);
+ font-style: italic;
+ display: inline-block;
+ margin-right: 1ch;
+}
+time.entrydate, .entrydate time {
+ font-weight: bold;
+}
+.entrytitle {
+ padding-left: initial;
+ border-left: initial;
+ margin-bottom: .25rem;
}
/* Funsies */
@@ -340,6 +899,7 @@ hr {
animation-iteration-count: infinite;
color: yellow;
float: right;
+ text-shadow: 0 0 1em black, 0 0 2em black, 0 0 3em black, 0 0 4em black;
}
.house {
color: cornflowerblue;
@@ -353,18 +913,34 @@ hr {
50.001%, 100% {opacity: 1;}
}
@keyframes rainbow-text {
- 100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);}
- 8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);}
- 16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);}
- 25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);}
- 33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);}
- 41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);}
- 50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);}
- 58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);}
- 66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);}
- 75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
- 83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
- 91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
+ 100%,0%{color: rgb(255,0,0); text-shadow: 0 0 .25rem rgb(216, 1, 1);}
+ 8%{color: rgb(255,127,0); text-shadow: 0 0 .25rem rgb(211, 105, 0);}
+ 16%{color: rgb(255,255,0); text-shadow: 0 0 .25rem rgb(214, 214, 0);}
+ 25%{color: rgb(127,255,0); text-shadow: 0 0 .25rem rgb(105, 211, 0);}
+ 33%{color: rgb(0,255,0); text-shadow: 0 0 .25rem rgb(0, 204, 0);}
+ 41%{color: rgb(0,255,127); text-shadow: 0 0 .25rem rgb(0, 209, 105);}
+ 50%{color: rgb(0,255,255); text-shadow: 0 0 .25rem rgb(0, 202, 202);}
+ 58%{color: rgb(0,127,255); text-shadow: 0 0 .25rem rgb(0, 103, 206);}
+ 66%{color: rgb(0,0,255); text-shadow: 0 0 .25rem rgb(0, 0, 206);}
+ 75%{color: rgb(127,0,255); text-shadow: 0 0 .25rem rgb(103, 0, 206);}
+ 83%{color: rgb(255,0,255); text-shadow: 0 0 .25rem rgb(211, 0, 211);}
+ 91%{color: rgb(255,0,127); text-shadow: 0 0 .25rem rgb(211, 0, 105);}
+}
+@keyframes spin {
+ from {
+ transform:rotate(0deg);
+ }
+ to {
+ transform:rotate(360deg);
+ }
+}
+@keyframes spin-reverse {
+ from {
+ transform:rotate(360deg);
+ }
+ to {
+ transform:rotate(0deg);
+ }
}
/* ads */
@@ -393,129 +969,356 @@ hr {
}
}
-/* If user is on mobile */
-@media only screen and (hover: none) {
- header {
- position: initial;
- top: initial;
- left: initial;
- right: initial;
- height: initial;
- transform: initial;
- width: fit-content;
+/* Responsive Layout */
+
+@media screen and (max-width: calc(92ch + 24rem)) {
+
+ /* Body stuff */
+ main {
+ padding: calc((100vw - var(--bodywidth)) / 4);
+ padding-top: calc(8.5rem + var(--stdpadding) + var(--border-size-y));
+ padding-bottom: calc(var(--stdpadding) * 2);
+ box-sizing: content-box;
+ overflow: hidden;
+ }
+
+ figure, blockquote, section > blockquote, pre, .codetitle, .aside, :not(.commentform-bottom) > .notice {
+ margin: var(--stdpadding) calc(var(--stdpadding) * 2);
+ }
+ @media (max-width: 100vh) {
+ figure, blockquote, section > blockquote, pre, .codetitle, .aside, :not(.commentform-bottom) > .notice {
+ margin: var(--stdpadding) 0;
+ }
}
- #header-content {
- padding-bottom: calc(var(--stdpadding) / 2);
+ .codetitle {
+ margin-bottom: 0;
}
- #header-content > * {
- flex: 1;
+ .gallery {
+ flex-direction: column;
}
- #header-content > :last-child {
- word-break: break-word;
+ .aside-image {
+ height: 7rem;
+ }
+
+ dl {
+ flex-direction: column;
}
- body > h1:first-of-type {
- margin-top: var(--stdpadding);
- word-break: break-word;
+ dt, dd {
+ width: 100%;
+ padding: calc(var(--stdpadding) * .5) var(--stdpadding);
}
- nav a, nav span {
- flex-grow: 1;
+ dt {
+ padding-top: var(--stdpadding);
}
- nav a, body > a, summary {
- border-left: 3px solid var(--fontcolor);
- background-color: var(--blockbg);
- backdrop-filter: var(--blockbackdrop);
+ dd {
+ padding-bottom: var(--stdpadding);
+ padding-left: calc(var(--stdpadding) * 2);
}
- nav a, body > a, nav span {
- padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
- margin: 0 0 calc(var(--stdpadding) / 2) 0;
+ #commentform-top, .commentform-top {
+ flex-direction: column;
}
- body > a {
- margin-left: 0;
- margin-top: var(--stdpadding);
+ .comment > .gb-head {
+ gap: calc(var(--stdpadding) * 0.4);
+ flex-wrap: wrap;
+ padding: var(--stdpadding);
}
- pre > code, .codetitle {
- border-width: .1rem;
- width: initial;
+ .gb-head p {
+ flex: initial;
+ margin: 0;
+ text-align: left;
}
- @media (max-width: 43rem) {
- .buttons > * {
- width: 24%;
+ .gb-head .gb-name {
+ width: 100%;
+ }
+
+ /* Footer stuff */
+ footer {
+ position: initial;
+ filter: drop-shadow(0 calc(0px - var(--border-size-y)) 0 var(--accent2))
+ var(--blockshadow);
+ max-width: 100%;
+ }
+}
+
+@media screen and ((max-width: calc(92ch + 24rem)) or (max-height: 38rem)) {
+
+ /* Header stuff */
+ .headerbar {
+ max-width: 100vw;
+ box-sizing: border-box;
+ }
+ .headerbar > * {
+ width: 100%;
+ }
+ header h1 {
+ display: none;
+ }
+ .headerbar > div {
+ margin-left: calc((var(--stdpadding) * 2) + 3rem);
+ }
+ .headerbar img {
+ font-size: 2rem;
+ font-weight: bold;
+ max-height: 80%;
+ margin-top: 0;
+ }
+ @media (max-width: 100vh) {
+ .headerbar {
+ flex-direction: column;
}
- .buttons > a > img {
- width: 100%;
+ }
+ @media (max-height: 100vw) {
+ .headerbar > div {
+ justify-content: initial;
}
}
- #leftsidebg, #rightsidebg {
- top: 0; left: 0; right: 0; bottom: 0;
- filter: brightness(0.3);
- box-shadow: none;
+
+ header nav {
+ transition: .3s;
+ transform: translateX(-100%);
+ position: fixed;
+ top: 0;
+ padding-top: var(--stdpadding);
+ max-height: 100vh;
+ box-sizing: border-box;
}
- tr:hover {
- background-color: initial;
+ #nav-checkbox-hack:checked ~ nav, nav:has(:focus) {
+ transform: translateX(0);
}
- td {
- display: block;
+ #nav-darkened-background-kludge {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ transform: translateY(-100vh);
+ transition: .3s;
+ background-color: var(--shadow);
+ filter: none;
+ padding: 0;
}
- @media (prefers-contrast: more) {
- #leftsidebg, #rightsidebg {
- display: none;
- }
+ :is(#nav-checkbox-hack:checked, nav:has(:focus)) ~ #nav-darkened-background-kludge {
+ transform: translateY(0);
+ }
+ #header-inside-corner-kludge {
+ display: none;
+ }
+ .burgermenu {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 3rem;
+ height: 3rem;
+ }
+ .bm-open {
+ position: fixed;
+ top: var(--stdpadding);
+ left: calc(var(--stdpadding) * 2);
+ }
+ .bm-close {
+ margin-left: calc(var(--stdpadding) * 2);
}
-}
-@media screen and (orientation:portrait) {
- .gallery {
- flex-direction: column;
+ .bubblecolumn {
+ display: none;
}
}
-/* TODO: Light theme
-@media (prefers-color-scheme: light) {
- :root {
- --bgcolor: #dffffa;
- --fontcolor: #222222;
- --blockbg: #0001;
- --blockbghover: #00000022;
- --stdshadow: #19191977;
+@media screen and (max-height: 38rem) { /* If the viewport isn't tall enough for the nav */
+ header nav ul {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ header nav {
+ max-width: calc(100vw - var(--stdpadding));
+ overflow-y: scroll;
}
}
-*/
-@media (prefers-contrast: more) {
+/* Light theme stuff not covered by colours */
+
+@media screen and (prefers-color-scheme: light) {
body {
- color: white;
- background-color:#111111;
+ background:
+ url('https://isopod.cool/bg-light-dither.png') repeat center/cover fixed,
+ var(--bg0);
}
- #leftsidebg, #rightsidebg {
- display: none;
- /*box-shadow: 100vw 0 0 #000000ee inset;*/
+ .headerbar img {
+ filter: invert(1);
+ }
+}
+
+/* Accessibility Stuff */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/system-color for colours to use */
+
+@media screen and (prefers-contrast: more) {
+ :root {
+ --background: Canvas;
+ --foreground: CanvasText;
+ --accent1: ActiveText; /* I'm more or less just letting the OS/browser pick colours for me here */
+ --accent2: AccentColorText;
+
+ --fg0: var(--foreground);
+ --fg1: var(--foreground);
+ --fg2: var(--foreground);
+ --fg3: var(--foreground);
+
+ --bg0: var(--background);
+ --bg1: var(--background);
+ --bg2: var(--background);
+ --bg3: var(--background);
+ }
+ figure.quote, section > blockquote, figure.media, .aside { /* TODO: replace this nonsense once border-shape drops */
+ filter: drop-shadow(.1rem 0 0 var(--fg0))
+ drop-shadow(0 .1rem 0 var(--fg0))
+ drop-shadow(-.1rem 0 0 var(--fg0))
+ drop-shadow(0 -.1rem 0 var(--fg0));
+ border-left-width: .4rem;
+ }
+ details {
+ border-top: .1rem solid var(--fg0);
+ border-bottom: .1rem solid var(--fg0);
+ border-right: .1rem solid var(--fg0);
+ border-left-width: .4rem;
+ }
+ details:open summary {
+ border-bottom: .1rem solid var(--fg0);
+ margin-right: calc(var(--stdpadding) * -1);
+ }
+ details:open {
+ padding-right: var(--stdpadding);
+ }
+ code {
+ border: .1rem solid var(--fg0);
+ }
+ pre code {
+ border: none;
+ border-top: .1rem solid var(--accent1);
+ }
+ pre {
+ filter: drop-shadow(.1rem 0 0 var(--fg0))
+ drop-shadow(0 .1rem 0 var(--fg0));
+ }
+ .codetitle {
+ filter: drop-shadow(.1rem 0 0 var(--fg0))
+ drop-shadow(0 -.1rem 0 var(--fg0));
+ }
+ a:hover {
+ background-color: AccentColor;
+ }
+ :is(dt, dd):nth-of-type(2n) {
+ border: .1rem solid var(--fg0);
+ }
+ input[type="text"], textarea {
+ border-left-width: .4rem;
+ }
+ input[type="text"] {
+ border-bottom: .1rem solid var(--fg0);
+ border-right: .1rem solid var(--fg0);
+ }
+ textarea {
+ border-top: .1rem solid var(--fg0);
+ border-right: .1rem solid var(--fg0);
+ border-bottom-color: var(--fg0);
}
- a {
- color: #00ffd5;
+ .notice {
+ border: .1rem solid var(--message-blue);
+ }
+ .error {
+ border: .1rem solid var(--message-red);
+ }
+ .success {
+ border: .1rem solid var(--message-green);
+ }
+ .warning {
+ border: .1rem solid var(--message-yellow);
+ }
+ .comment {
+ border-bottom: .1rem solid var(--fg1);
+ border-top: .1rem solid var(--fg1);
+ }
+ .comment > div {
+ border-right: .1rem solid var(--fg1);
+ border-left-width: .4rem;
+ }
+
+ .comment > .gb-reply {
+ border-left: .1rem solid var(--fg1);
+ border-right-width: .4rem;
+ }
+
+ .commentform-field label {
+ border-left-width: .4rem;
+ border-top: .1rem solid var(--fg0);
+ border-right: .1rem solid var(--fg0);
+ }
+ .commentform-field textarea ~ label {
+ border-top: none;
+ border-bottom: .1rem solid var(--fg0);
+ }
+
+
+ .gb-reply > p { /* "Reply:" label */
+
+ border-right: .1rem solid var(--accent2);
+ }
+ pre, .codetitle, .notice {
+ border-left-width: .4rem;
+ }
+ @media (max-width: calc(92ch + 24rem)) {
+ dt:nth-of-type(2n) {
+ border-bottom: none;
+ }
+ dd:nth-of-type(2n) {
+ border-top: none;
+ }
+ }
+ @media (min-width: calc(92ch + 24rem)) {
+ dt:nth-of-type(2n) {
+ border-right: none;
+ }
+ dd:nth-of-type(2n) {
+ border-left: none;
+ }
}
}
-/* TODO: Low contrast theme */
-/*@media (prefers-contrast: less) {
+@media screen and (prefers-contrast: less) { /* I don't know how to trigger this value in the OS nor do I know how I'm supposed to use it. Doing this until I find a better solution. */
+ :root {
+ filter: contrast(.7);
+ }
-}*/
+ .prefers-contrast-less-message {
+ display: initial;
+ }
+}
-@media (prefers-reduced-motion) {
- * {
- transition-duration: 0s !important;
+@media screen and (forced-colors: active) {
+ header nav, footer {
+ background: var(--bg0) !important; /* Forced colors mode deletes backgrounds on anything with a background-image set, like my janky beveled corners solution. This is to restore them, and won't be necessary once border-shape drops */
+ }
+ figure.quote, section > blockquote, figure.media, pre, .codetitle { /* TODO: once border-shape drops, this is about what the corresponding styling in HC mode should be */
+ border: .1rem solid var(--fg0);
+ border-left: var(--stdaccentborder);
+ border-left-width: .4em;
+ filter: none;
}
}
-@media print {
- body {
- text-shadow: none;
- color: black;
+@media screen and (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
}
- h1 {
- margin-top: initial;
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
}
- nav, form, #leftsidebg, #rightsidebg {
+ .bubblecolumn {
display: none;
}
-
} \ No newline at end of file