blog

index.css (4570B)

/* BEGIN css/colorscheme.css */
:root {
	/* gruvbox dark */
	--ansi00: #282828;
	--ansi00-hard: #1d2021;
	--ansi00-soft: #32302f;
	--ansi01: #cc241d;
	--ansi02: #98971a;
	--ansi03: #d79921;
	--ansi04: #458588;
	--ansi05: #b16286;
	--ansi06: #689d6a;
	--ansi07: #a89984;
	--ansi08: #928374;
	--ansi09: #fb4934;
	--ansi10: #b8bb26;
	--ansi11: #fabd2f;
	--ansi12: #83a598;
	--ansi13: #d3869b;
	--ansi14: #8ec07c;
	--ansi15: #ebdbb2;
}
@media (prefers-color-scheme: light) {
	:root {
		/* gruvbox light */
		--ansi00: #fbf1c7;
		--ansi00-hard: #f9f5d7;
		--ansi00-soft: #f2e5bc;
		--ansi01: #cc241d;
		--ansi02: #98971a;
		--ansi03: #d79921;
		--ansi04: #458588;
		--ansi05: #b16286;
		--ansi06: #689d6a;
		--ansi07: #7c6f64;
		--ansi08: #928374;
		--ansi09: #9d0006;
		--ansi10: #79740e;
		--ansi11: #b57614;
		--ansi12: #076678;
		--ansi13: #8f3f71;
		--ansi14: #427b58;
		--ansi15: #3c3836;
	}
}
/* END css/colorscheme.css */
/* Because sometimes non-semantic colors happens
 * Like in /notes/vocabulary-jp: Tetris-CC-Sakura-EH.xhtml
 */
font[color=green] { color: var(--ansi10) }
/* elements */
a {
	color: var(--ansi13);
	outline-color: invert;
	outline-color: var(--ansi11);
}
summary { cursor: pointer; } /* for some reason this isn't in webkit */
abbr {
	text-decoration: underline;
	text-decoration: dotted underline;
	text-decoration-color: var(--ansi02);
	cursor: help;
}
body, html {
	background-color: var(--ansi00-hard);
	color: var(--ansi15);
	margin: 0;
	padding: 0;
}
blockquote {
	border-left: 0.1em solid;
	padding-left: 0.5em;
}
code, pre {
	background-color: var(--ansi00);
	color: var(--ansi15);
	font-family: monospace;
}
code { padding: 0 0.25em; }
pre {
	display: table;
	/* pre-wrap is there for legacy reasons as break-spaces is recent */
	white-space: pre-wrap;
	white-space: break-spaces;
	word-break: break-all;
}
.inline-sections article,
.inline-sections section {
	display: inline-table;
}
.box-center h1,
.box-center h2 {
	text-align: center;
}
article, main, .box-center {
	margin: 1.5rem auto;
}
article, body > section, main {
	padding: 0.5rem;
	background-color: var(--ansi00-soft);
	display: table;
	vertical-align: top;
}
article, main, body > section { max-width: 80em; }
article .timestamps { font-size: small; }
section h1, section h2, section h3, section h4, section h5, section h6 {
	margin-block: 0.25em;
}
table {
	border-collapse: collapse;
}
thead {
	position: sticky;
	top: 0;
	color: var(--ansi15);
	background-color: var(--ansi00-hard);
}
td, th {
	border: 2pt solid var(--ansi00-hard);
	padding: 0.25em;
}
tbody tr:nth-child(odd) {
	background-color: var(--ansi00-soft);
}
tbody tr:nth-child(even) {
	background-color: var(--ansi00);
}
thead td, thead th {
	border: none;
}
td.date, th.date {
	/* YYYY-MM-DD -> 10 characters, of roughly the width of '0' */
	min-width: 10ch;
}
rt,rp { font-size: 75%; }
kbd, samp {
	user-select: all;
	user-select: contain;
}
kbd { font-weight: bold; }
/* selectors */
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
	color: var(--ansi03);
}
section { border: 1px dashed transparent; }
section:target { border: 1px dashed var(--ansi03); }
/* classes */
.select-all {
	user-select: all;
}
.warn { border-bottom: 1pt solid var(--ansi01); }
dl.list dt {
	display: list-item;
	list-style-type: disc;
	list-style-position: inside;
}
dl[compact] dt,
dl[compact] dd {
	display: inline;
}
dl[compact] dt { font-weight: bold; }
dl[compact] dd { margin-inline-start: 2em; }
/* break between items */
dl[compact] dt:before {
	content: ' ';
	display: block;
}
img.thumb_inline {
	max-width: 45%;
	object-fit: contain;
	margin: 0.5em;
}
.math {
	font-family: math, "CMU Typewriter Text", "STIX Two Math", "Lucida Math", monospace;
}
.right { float: right; }
/* footnote */
.fn {
	font-size: small;
	vertical-align: super;
}
/* ids */
#bio { clear: both; }
#avatar {
	float: left;
	margin: 1em;
	margin-right: 2em;
}
/* Images/Figures */
figure {
	text-align: center;
	margin: auto;
}
figcaption {
	display: table;
	margin: auto;
}
#art {
	border: none;
	text-align: center;
}
#art img, figure img {
	max-width: 100%;
	max-height: 100%;
	object-fit: scale-down;
}
nav, footer {
	background-color: var(--ansi00);
	color: var(--ansi15);
}
header {
	text-align: center;
	background-color: var(--ansi00);
	color: var(--ansi06);
}
/* navbar */
nav {
	font-size: larger;
	font-weight: bold;
	margin: 0 0 1rem 1rem;
	float: right;
}
nav, .indexlist {
	line-height: 1.5;
}
/* footer */
footer {
	margin-top: 1rem;
	padding: 0.5em 0;
	text-align: center;
	clear: both;
}