More website loading speed and code improvements

2026-10-05 16:38:12 +08:00 · 2025-01-08 20:49:42 -08:00
parent 68e6bec9b5
commit ae2637e08e
44 changed files with 833 additions and 898 deletions
@@ -0,0 +1,109 @@
+:not(.diptych, .triptych) > :is(.block, .diptych, .triptych) + :is(.block, .diptych, .triptych) {
+	margin-top: calc(120 * var(--variable-px));
+}
+
+.feature-box-narrow,
+.feature-box-outer {
+	padding: calc(80 * var(--variable-px));
+	background-image: url("https://static.graphite.rs/textures/noise.png");
+	background-blend-mode: overlay;
+	background-position: center;
+}
+
+:where(h1, h2, h3, h4, p) + .feature-box-narrow {
+	margin-top: calc(40 * var(--variable-px));
+}
+
+.feature-box-full-image {
+	width: calc(100% + 2 * 80 * var(--variable-px));
+	height: auto;
+	margin-left: calc(-80 * var(--variable-px));
+	margin-top: calc(-80 * var(--variable-px));
+	margin-bottom: calc(40 * var(--variable-px));
+	display: block;
+}
+
+.feature-box-outer {
+	@media screen and (max-width: 1000px) {
+		&.feature-box-outer {
+			margin-left: calc(-1 * var(--page-edge-padding));
+			margin-right: calc(-1 * var(--page-edge-padding));
+			padding-left: var(--page-edge-padding);
+			padding-right: var(--page-edge-padding);
+		}
+	}
+
+	&.feature-box-outer {
+		max-width: unset;
+	}
+
+	.feature-box-inner {
+		max-width: var(--max-width);
+		margin: 0 auto;
+	}
+}
+
+h1.feature-box-header.feature-box-header {
+	&,
+	& a {
+		font-family: "Inter", sans-serif;
+		line-height: 1.5;
+		font-weight: 800;
+		text-transform: uppercase;
+		font-size: calc(1rem * 14 / 9);
+	}
+
+	span {
+		white-space: pre;
+	}
+
+	~ hr {
+		margin-top: 20px;
+		margin-bottom: 40px;
+
+		+ p {
+			margin-top: 0;
+		}
+	}
+}
+
+.diptych,
+.triptych {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(80 * var(--variable-px));
+
+	.block {
+		flex: 1 1 0;
+	}
+
+	img[alt=""] {
+		display: block;
+
+		&::after {
+			content: "";
+			display: block;
+			width: 100%;
+			height: 240px;
+			background: var(--color-crimson);
+		}
+	}
+}
+
+.diptych .block {
+	min-width: 320px;
+}
+
+.triptych .block {
+	min-width: 280px;
+}
+
+@media screen and (max-width: 520px) {
+	.diptych .block {
+		min-width: 200px;
+	}
+
+	.triptych .block {
+		min-width: 280px;
+	}
+}