Add font size variables for consistent typography

CHANGELOG.md

@@ -42,11 +42,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **[BREAKING]** Rename `config.extra.nav.links.sublinks` to `config.extra.nav.links.menu`
 - **[BREAKING]** Rename `config.extra.primary_color` and `config.extra.primary_color_dark` config variables to `config.extra.accent_color` and `config.extra.accent_color_dark`.
 - **[BREAKING]** Rename `config.extra.stylesheets` to `config.extra.styles`. Front matter variables are renamed as well.
+- Add font size variables for consistent typography.
 - Allow enabling table of contents on all pages and sections except for the homepage.
 - Allow opening original comment attachment by clicking on it.
 - Allow overriding the `body` block of `base.html.
 - Allow statements on all sections except for the homepage.
-- Change font sizes to [absolute sizes](https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size).
 - Change the way 404 image is resized (#74).
 - Improved CRT style, now looks a lot more like [cool-retro-term](https://github.com/Swordfish90/cool-retro-term).
 - Make comment timestamp more subtle.
@@ -62,7 +62,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Set socials icons as CSS variables and not inline styles.
 - Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
 - Tweak `kbd` styling.
-- Tweak margins instead of relying on `line-height`.
 - Tweak padding of verified instance badge.
 - Use more fitting cursors in some contexts.
 - Use PNG instead of GIF for comments QR code to reduce download size.

content/tricks/index.md

@@ -109,27 +109,6 @@ h6 {
 
 h1 {
     font-weight: 900;
-    font-size: 3rem;
-}
-
-h2 {
-    font-size: 2.5rem;
-}
-
-h3 {
-    font-size: 2rem;
-}
-
-h4 {
-    font-size: 1.5rem;
-}
-
-h5 {
-    font-size: 1rem;
-}
-
-h6 {
-    font-size: 0.75rem;
 }
 ```
 

sass/_article-list.scss

@@ -30,6 +30,7 @@
 
 		h3 {
 			margin: 0;
+			line-height: 1;
 
 			a:hover::after {
 				transform: none;

sass/_buttons.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	align-items: baseline;
 	margin-block-start: 4rem;
 }
 
@@ -21,10 +22,11 @@ button.inline-button {
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
 	background-color: var(--fg-muted-1);
-	padding: 0.5rem 1rem;
+	padding: 0.75rem 1rem;
 	color: var(--fg-muted-5);
 	font-weight: bold;
-	font-size: smaller;
+	font-size: var(--font-size-small);
+	line-height: 1;
 
 	&:hover {
 		background-color: var(--fg-muted-2);

sass/_code.scss

@@ -12,7 +12,7 @@ code:not(pre code) {
 	background-color: var(--fg-muted-1);
 	padding: 0.125rem 0.375rem;
 	color: var(--red-fg);
-	font-size: smaller;
+	font-size: var(--font-size-small-em);
 }
 
 pre {

sass/_comments.scss

@@ -64,7 +64,7 @@
 			margin-block-start: 0;
 			color: var(--fg-muted-4);
 			font-weight: bold;
-			font-size: x-large;
+			font-size: var(--font-size-x-large);
 			text-align: center;
 		}
 
@@ -123,9 +123,10 @@
 					box-shadow: var(--edge-highlight);
 					border-radius: 999px;
 					background-color: var(--fg-muted-1);
-					padding: 0.25rem 0.75rem;
+					padding: 0.375rem 0.75rem;
 					color: var(--fg-muted-5);
-					font-size: smaller;
+					font-size: var(--font-size-small);
+					line-height: 1;
 					text-decoration: none;
 
 					&:hover {
@@ -192,8 +193,8 @@
 				box-shadow: var(--edge-highlight);
 				border-radius: var(--rounded-corner-small);
 				background-color: var(--accent-color-alpha);
-				padding: 0.125rem 0.375rem;
+				padding: 0.25rem 0.375rem;
-				line-height: normal;
+				line-height: 1;
 				text-decoration: none;
 
 				&:hover {
@@ -220,7 +221,7 @@
 			time {
 				grid-area: time;
 				margin-block-start: 0.5rem;
-				font-size: smaller;
+				font-size: var(--font-size-small);
 
 				a {
 					color: var(--fg-muted-5);

sass/_footer.scss

@@ -120,7 +120,8 @@
 		box-shadow: var(--edge-highlight);
 		border-radius: var(--rounded-corner-small);
 		background-color: var(--accent-color-alpha);
-		padding: 0.125rem 0.375rem;
+		padding: 0.25rem 0.375rem;
+		line-height: 1;
 		text-decoration: none;
 
 		&:hover {

sass/_nav.scss

@@ -146,8 +146,8 @@
 		}
 
 		.circle {
-			padding: 0.5rem 0.625rem;
+			padding: 0.625rem 0.625rem;
-			line-height: normal;
+			line-height: 0;
 
 			&::before {
 				display: none;
@@ -168,7 +168,7 @@
 			border: none;
 			border-radius: 999px;
 			background-color: transparent;
-			font-size: 1rem;
+			font-size: var(--font-size-medium);
 		}
 
 		details {
@@ -314,7 +314,7 @@
 		padding: 0.5rem 0.75rem;
 		width: 100%;
 		color: inherit;
-		font-size: 1rem;
+		font-size: var(--font-size-medium);
 
 		&::placeholder {
 			opacity: 1;

sass/_statements.scss

@@ -2,7 +2,7 @@
 	margin: 1rem 0;
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
-	padding: 0.75rem 1rem;
+	padding: 1rem;
 
 	:last-child {
 		margin-block-end: 0;
@@ -21,7 +21,8 @@
 	}
 
 	.big {
-		font-size: x-large;
+		font-size: var(--font-size-x-large);
+		line-height: 1;
 
 		.icon {
 			margin-inline-end: 0.375rem;

sass/_tags.scss

@@ -22,9 +22,10 @@
 		box-shadow: var(--edge-highlight);
 		border-radius: 999px;
 		background-color: var(--fg-muted-1);
-		padding: 0.2031rem 0.75rem;
+		padding: 0.375rem 0.75rem;
 		color: var(--fg-muted-5);
-		font-size: small;
+		font-size: var(--font-size-small);
+		line-height: 1;
 		text-decoration: none;
 		white-space: nowrap;
 
@@ -47,8 +48,8 @@
 			display: inline-block;
 			padding-inline-start: 0.75rem;
 			padding-inline-end: 0.5rem;
-			padding-block-start: 0.2031rem;
+			padding-block-start: 0.375rem;
-			padding-block-end: 0.2031rem;
+			padding-block-end: 0.375rem;
 		}
 
 		.count {
@@ -58,8 +59,8 @@
 			background-color: var(--fg-muted-1);
 			padding-inline-start: 0.5rem;
 			padding-inline-end: 0.625rem;
-			padding-block-start: 0.2031rem;
+			padding-block-start: 0.375rem;
-			padding-block-end: 0.2031rem;
+			padding-block-end: 0.375rem;
 
 			font-variant-numeric: tabular-nums;
 

sass/_typography.scss

@@ -8,37 +8,38 @@ h6 {
 	text-wrap: balance;
 	margin: 2rem 0 1rem;
 	font-weight: lighter;
+	line-height: 1;
 	font-family: var(--font-antique);
 	letter-spacing: -0.05em;
 }
 
 h1 {
-	font-size: 2.5rem;
+	font-size: var(--font-size-xxx-large);
 }
 
 h2 {
-	font-size: 2rem;
+	font-size: var(--font-size-xx-large);
 }
 
 h3 {
-	font-size: 1.5rem;
+	font-size: var(--font-size-x-large);
 }
 
 h4 {
-	font-size: 1.25rem;
+	font-size: var(--font-size-large);
 }
 
 h5 {
-	font-size: 1rem;
+	font-size: var(--font-size-medium);
 }
 
 h6 {
-	font-size: 0.75rem;
+	font-size: var(--font-size-small);
 }
 
 small {
 	color: var(--fg-muted-5);
-	font-size: smaller;
+	font-size: var(--font-size-small-em);
 }
 
 abbr[title] {
@@ -50,7 +51,7 @@ abbr[title] {
 
 figcaption {
 	color: var(--fg-muted-4);
-	font-size: smaller;
+	font-size: var(--font-size-small-em);
 	text-align: center;
 }
 
@@ -94,7 +95,7 @@ ins {
 samp {
 	background-color: var(--fg-muted-1);
 	color: var(--fg-muted-5);
-	font-size: smaller;
+	font-size: var(--font-size-small-em);
 }
 
 q {
@@ -151,7 +152,7 @@ kbd {
 	border-radius: var(--rounded-corner-small);
 	background-color: var(--fg-muted-1);
 	padding: 0.125rem 0.375rem;
-	font-size: smaller;
+	font-size: var(--font-size-small-em);
 
 	// Small nice thingy, keys can be pressed!
 	&:active {
@@ -183,7 +184,7 @@ hr {
 		top: -1.75rem;
 		content: "☙❧";
 		color: var(--fg-muted-4);
-		font-size: 2rem;
+		font-size: var(--font-size-xx-large);
 
 		// An ugly hack to fix mirroring in rtl
 		:root[dir*="rtl"] & {

sass/_variables.scss

@@ -15,7 +15,7 @@
 }
 
 @include theme-variables using ($theme) {
-	@if $theme == "dark" {
+	@if $theme =="dark" {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
 		--fg-color: rgb(255 255 255);
@@ -60,22 +60,35 @@
 		--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
 		--yellow-fg: rgb(156 110 3);
 
-		// VARIABLES
+		// CONTAINERS
-		--active: scale(0.9);
-		--blur: saturate(180%) blur(0.75rem);
-		--color-opacity: 0.1;
 		--container-width: 720px;
-		--dim-opacity: 0.8;
+
-		--disabled-opacity: 0.6;
+		// CORNERS
-		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
-		--hover: scale(1.1);
 		--rounded-corner-small: 0.5rem;
 		--rounded-corner: 0.75rem;
-		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
+
-		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
+		// FILTERS
-		--transition-long: 0.8s;
+		--blur: saturate(180%) blur(0.75rem);
-		--transition-longer: 0.4s;
+
-		--transition: 0.2s;
+		// FONT SIZES
+		--font-size-xx-small: 0.625rem;
+		--font-size-x-small: 0.75rem;
+		--font-size-small: 0.875rem;
+		--font-size-medium: 1rem;
+		--font-size-large: 1.25rem;
+		--font-size-x-large: 1.5rem;
+		--font-size-xx-large: 2rem;
+		--font-size-xxx-large: 3rem;
+
+		// FONT SIZES (RELATIVE)
+		--font-size-xx-small-em: 0.625em;
+		--font-size-x-small-em: 0.75em;
+		--font-size-small-em: 0.875em;
+		--font-size-medium-em: 1em;
+		--font-size-large-em: 1.25em;
+		--font-size-x-large-em: 1.5em;
+		--font-size-xx-large-em: 2em;
+		--font-size-xxx-large-em: 3em;
 
 		// FONTS
 		--font-system-ui: system-ui, sans-serif;
@@ -94,5 +107,24 @@
 		--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
 		--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
 		--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+		// OPACITY
+		--disabled-opacity: 0.6;
+		--dim-opacity: 0.8;
+		--color-opacity: 0.1;
+
+		// SHADOWS
+		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
+		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
+		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
+
+		// STATES
+		--hover: scale(1.1);
+		--active: scale(0.9);
+
+		// TRANSITIONS
+		--transition-long: 0.8s;
+		--transition-longer: 0.4s;
+		--transition: 0.2s;
 	}
 }