site/assets/main.css

/*
 * Mostly based on simplecss.org
 * Also based on cssbed, forgot which theme exactly, might be bamboo or
 * "evenbettermotherfucking"
 *
 * Inspirations:
 * - seirdy.one
 * - kevq.uk
 * - smol.pub
 * - drewdevault.com
 * - gregoryhammond.ca
 */

:root {
	--base-fontsize: 1rem;

	/* Major third scale progression - see https://type-scale.com/ */
	--header-scale: 1.25;
	/* I don't want h1, h2, and h3 to be too big */
	--header-scale-minor: 1.1;

	/* Line height is set to the "Golden ratio" for optimal legibility */
	--line-height: 1.618;

	--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--bg: #fff;
	--accent-bg: #f7f4fb;
	--accent-bg-light: #f2f2f2;
    --code-bg: #f2f2f2;
	--text: #0a0a0a;
	--text-light: #787878;
	--non-text-light: #95aac0;

	--border: #bbb;
	--border-light: var(--border);
	--accent: #5c659b;
	--accent-light: #7890c1;
	--code: #d81b60;
	--preformatted: #444;
	--marked: #ffdd33;
	--disabled: #efefef;

	--shadow-color: #fff;

	--link: #3c63e8;
	--link-hover: #93aaf9;
	--link-visited: #6971a0;

	--link-alt: var(--link);

	/* My theme stuff */
	--theme-purple: #3d4573;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #232326;
		--accent-bg: #44475a;
		--accent-bg-light: #303035;
		--code-bg: #3e3e4b;
		--text: #eee;
		--text-light: #cecece;
		--non-text-light: #999fbf;

		--border: #aaa;
		--border-light: #565656;
		--accent: #8be9fd;
		--accent-light: #ece1a1;
		--code: #f06292;
		--preformatted: #ccc;
		--disabled: #111;

		--shadow-color: #36373b;
        --theme-purple: #af9dea;

        --link: #cddfff;
        --link-hover: #8c9cba;
        --link-visited: #c3b1ff;
        /* Why doesn't the dracula pink look better? #ff79c6 */
        --link-alt: var(--accent-light);
	}

	img:not(.pfp), video {
		opacity: .6;
	}
}

body {
	background-color: var(--bg);
	color: var(--text);
    /* Some users don't even bother to make their default sans-serif readable
     * in their browser settings, so I help them.
     * But... that's barely an excuse for me to use a big font-stack, I know */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* font-family: Roboto, sans-serif; */
	font-size: var(--base-fontsize);
	line-height: var(--line-height);

	margin: auto;
}

main, #after-content {
	padding: 0 5%;
}
footer {
    margin: 0 5%;
}

h1 .pfp {
    height: 2.5rem;
    vertical-align: text-top;
}

nav .pfp {
    height: 1.7rem;
    vertical-align: middle;
}


.pfp {
    border: 1px solid var(--border);
    border-radius: .35em;
}

.pfp-name {
	text-decoration: none;
	/* color: var(--theme-purple); */
	padding-left: 6px;
	padding-top: 0;
}
nav .pfp-name {
	/* color: var(--accent-light); /1* Consistency with other nav items *1/ */
    /* To have the icon and the text (.pfp-text) align */
	display: table;
}
nav .pfp-text {
    /* TODO: Hardcoded alignment is ugly. Please find a better fix */
    vertical-align: top;
    padding-left: 0.5rem;
    padding-top: 0.1rem;
    font-size: 1.1rem;
    display: inline-block;
}

/* Homepage stuff */
.blink {
    opacity: 0;
    color: var(--text-light);
    animation: blinker 1s step-start 5;
}
@keyframes blinker {
    50% {
        opacity: 100%;
    }
}

/* Differentiating between normal content links and meta content links */
.meta a, .post-meta a, footer a, #after-content a {
	text-decoration: none;
    @media (prefers-color-scheme: dark) {
        color: var(--link-alt);
    }
}
.meta a:hover, .post-meta a:hover, footer a:hover, #after-content a:hover {
    color: var(--accent-light);
    text-decoration: underline;
    @media (prefers-color-scheme: dark) {
        opacity: .75;
    }
}

nav a {
	text-decoration: none;
	color: var(--link-alt);
}

/* To have the left nav item (homepage) and right items (other pages) display
 * on same line */
nav strong > a {
    margin-top: 1rem;
    font-weight: 650;
    padding-bottom: 0;
}
nav strong > a, nav ul li {
    margin-right: 1.5rem;
}

nav {
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 4rem;
    padding: 1rem 0.3rem;
    padding-top: 1.5rem;
    font-weight: 500;
}
@media (min-width: 601px) {
    nav ul {
        float: right;
    }
}
@media (max-width: 600px) {
    /* Center-aligned nav on mobile */
    nav {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    nav a .pfp-name {
        color: var(--text);
    }
}

nav .selected {
    border-bottom: 2.5px solid;
}

/********************************************************************
 * Idea from seirdy.one to have unstyled unordered-list nav
 * Step 1 to making the single-line nav: remove the bullet padding. */
nav ul, nav a {
	padding: 0;
	padding-bottom: 0.5rem;
}
/* Step 2: remove bullets and make elements inline.
 * Also: bump up the line-height and margins to increase space between
 * tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS pixels
 * between tap targets. */
nav ul li, nav strong > a {
	display: inline-block;
}
/* END borrowed code from seirdy.one
 ********************************************************************/


blockquote {
	margin-left: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--text-light);
	opacity: .9;
}

table {
	border-collapse: collapse;
	width: 100%;
}
table caption {
	font-weight: bold;
	margin-bottom: .5rem;
}
td,
th {
	border: 1px solid var(--border-light);
	text-align: left;
	padding: .5rem;
}
th:empty {
    visibility: hidden;
}
th {
	background: var(--accent-bg-light);
	font-weight: bold;
}

/* No thanks */
/* tr:nth-child(even) { */
/* 	/1* Set every other cell slightly darker. Improves readability. *1/ */
/* 	background: var(--accent-bg); */
/* } */

main, #after-content {
    /* For better reading experience.
     * I don't want paragraphs to be too narrow, it looks ugly; Though I don't
     * want them to be too wide, either. Reading experience is important:
     * https://en.wikipedia.org/wiki/Eye_movement_in_reading */
	max-width: 45rem;

	margin: auto;
	margin-bottom: 4rem;
}
footer {
	text-align: center;
	font-size: .9rem;
	color: var(--text-light);
	padding: 1rem 0 1rem 0;
}
footer a {
    padding-left: .5rem;
    padding-right: .5rem;
}
header p {
	text-align: left;
}
header pre {
	margin-bottom: 2rem;
	max-width:auto;
}

/* Use mono font for code like elements */
code,
pre,
pre span,
kbd,
samp {
	font-family: var(--mono-font);
	font-size: 98%;
}

/* Inline code snips hopefully */
:not(pre)>code, :not(pre)>samp, kbd {
    background-color: var(--code-bg);
    border: 1px solid var(--border-light);
    /* border-radius: 6px; */
    padding: .01em .1em;
}

kbd {
	color: var(--preformatted);
	border: 1px solid var(--preformatted);
	border-bottom: 3px solid var(--preformatted);
	border-radius: 5px;
	padding: .1rem;
}

/* This would be overridden by chroma if the page wants highlighting */
pre {
	padding: .8rem 1rem;
	max-width: 100%;
	overflow: auto;
	color: var(--preformatted);
	background: var(--accent-bg-light);
	border: 1px solid var(--border-light);
	border-radius: 0;
}

/* Fix embedded code within pre */
pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0;

	tab-size: 4;
}

.post-date {
	margin-right: 1.5rem;
}

a {
    /* border-bottom: 1px solid var(--accent); */
    color: var(--link);
}
a:visited {
    color: var(--link-visited);
}
/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
nav a:visited {
    color: var(--link-alt);
}
.post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
    color: var(--link-alt);
}
main a:hover {
	opacity: .75;
}
nav a#home:hover {
	opacity: .75;
}
a:focus, form:focus {
    outline: 1px solid var(--border);
	text-decoration: none;
}
nav a:focus {
    outline: none;
}

/* nav a:not(nav strong > a):not(nav ul li:last-child a):hover { */
/* 	border-bottom: 2.5px solid; */
/* } */
nav li a:hover {
	border-bottom: 2.5px solid;
}

header {top: 1px;}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Misc body elements */
hr {
	color: var(--border-light);
	border-color: var(--border-light);
	border-style: solid;
	border-width: 1px;
	margin: 1rem auto;
}

mark {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--marked);
}

main img, main video {
	max-width: 100%;
	border-radius: 5px;
}

figure {
	margin: 0;
}

figcaption {
	font-size: .9rem;
	color: var(--text-light);
	text-align: center;
	margin-bottom: 1rem;
}

a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border: none;
	border-radius: 5px;
	background: var(--accent);
	font-size: 1rem;
	color: var(--bg);
	padding: .7rem .9rem;
	margin: .5rem 0;
	transition: .4s;
}

a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: default;
	opacity: .5;
	cursor: not-allowed;
}

input:disabled,
textarea:disabled {
	cursor: not-allowed;
	background: var(--disabled);
}

input[type="range"] {
	padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
	cursor: help;
}

button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
	opacity: .8;
}

/* Format the expanding box */
details {
	padding: .6rem 1rem;
	border: 2px solid var(--border-light);
	/* border-radius: 5px; */
	margin-bottom: 1rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
}

details[open] {
	padding-bottom: .75rem;
}

details[open] summary {
	margin-bottom: .5rem;
}

details[open]>*:last-child {
	margin-bottom: 0;
}

/* Format headers */
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 1.1rem;
}
h1 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
	margin-top: calc(var(--line-height) * 1.3rem);
}

h2 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
	margin-top: calc(var(--line-height) * 1.1rem);
}

h3 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
}

h4 {
	font-size: calc(var(--base-fontsize) * var(--header-scale));
}

h5 {
	font-size: var(--base-fontsize);
}

h6 {
	font-size: calc(var(--base-fontsize) / var(--header-scale));
}

a.anchor {
    text-decoration: none;
    color: var(--non-text-light);
    padding-right: .2rem;
}

a.anchor:hover {
    text-decoration: underline;
}

#post-header h1 {
	margin-bottom: 0.4rem;
}
#post-header {
	margin-bottom: 2rem;
}
.post-meta, .meta, footer, #after-content, .post-description {
	font-size: .9rem;
	color: var(--text-light);
}

small {
    font-size: .8rem;
    color: var(--text-light);
}

#after-content {
    /* TODO: check if the #after-content block has any content before adding the
     * section in _default/baseof.html  */
	margin-top: 2rem;
}

ul li {
    /* Fix sizing of tap target when i's a list of links */
    margin-bottom: 0.5rem;
}

ul.post-list {
    list-style: none;
    padding-left: 0;
}
.post-list h3, .post-list h2 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
}
.post-list p {
    margin-top: 0;
    margin-bottom: 0;
}
.post-list .desc {
    margin-top: 0.5rem;
}

.chroma .lntable pre {
    border: 0;
    padding: 0;
}
.chroma .lntable {
    border: 1px solid var(--border);
    padding: .01em .1em;
}