web-blog/css/index.css

/* Fonts */

/* ===== Atkinson Hyperlegible Next ===== */
@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/fonts/Atkinson/Hyperlegible/Next/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}


/* ===== Atkinson Hyperlegible Mono ===== */
@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLight.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraLightItalic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-RegularItalic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/fonts/Atkinson/Hyperlegible/Mono/AtkinsonHyperlegibleMono-ExtraBoldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* Defaults */
:root {
	--font-family: Atkinson Hyperlegible Next, -apple-system, system-ui, sans-serif;
	--font-family-monospace: Atkinson Hyperlegible Mono, Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #333;
	--color-aha-text: #29294f;

	--background-color: #fff8ef;

	--text-color: var(--color-aha-text);
	--text-color-link: #29294f;
	--text-color-link-active: #29294f;
	--text-color-link-visited: #17050F;

	--syntax-tab-size: 2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #e0e0e0;
		--color-gray-50: #C0C0C0;
		--color-gray-90: #dad8d8;

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: #1493fb;
		--text-color-link-active: #6969f7;
		--text-color-link-visited: #a6a6f8;

		--background-color: #15202b;
	}
}


/* Global stylesheet */
* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);
}
html {
	overflow-y: scroll;
}
body {
	max-width: 40em;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img{
  max-width: 100%;
}
img[width][height] {
  height: auto;
}
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}
video,
iframe {
	width: 100%;
	height: auto;
}
iframe {
	aspect-ratio: 16/9;
}

p:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.5;
}

li {
	line-height: 1.5;
}

a[href] {
	color: var(--text-color-link);
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link-active);
}

main,
footer {
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
}

#skip-link {
	text-decoration: none;
	background: var(--background-color);
	color: var(--text-color);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gray-90);
	border-radius: 2px;
}

/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
	position: absolute;
	top: 1rem;
	left: 1rem;
	/* Ensure it is positioned on top of everything else when it is shown */
	z-index: 999;
}

.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}
code {
	word-break: break-all;
}

/* Header */
header {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
}
.home-link {
	flex-grow: 1;
	font-size: 1em; /* 16px /16 */
	font-weight: 700;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Nav */
.nav {
	display: flex;
	gap: .5em 1em;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav a[href][aria-current="page"] {
	text-decoration: underline;
}

/* Posts list */
.postlist {
	counter-reset: start-from var(--postlist-index);
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: 0.8125em; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}