More website loading speed and code improvements

2026-10-03 08:18:13 +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,189 @@
+.carousel {
+	margin-top: calc(80 * var(--variable-px));
+	transform: translate(0);
+
+	.carousel-slide {
+		display: flex;
+		white-space: nowrap;
+		touch-action: pan-y pinch-zoom;
+		cursor: grab;
+
+		img {
+			position: relative;
+			display: inline-block;
+			user-select: none;
+			flex: 0 0 auto;
+			height: auto;
+			padding: 0 20px;
+
+			&:first-child,
+			&:last-child {
+				--fade-factor: Min(calc(var(--over-slide-factor, 0) / 1.5 + 0.5), 1);
+				// Fade to white (combining invert and brightness, see <https://stackoverflow.com/a/78478074/775283>) and desaturate
+				filter: Invert(calc(var(--fade-factor) / 2)) Brightness(calc(1 + var(--fade-factor))) Grayscale(var(--fade-factor));
+			}
+
+			&:first-child {
+				margin-left: -20px;
+			}
+
+			&:last-child {
+				margin-right: -20px;
+			}
+		}
+	}
+
+	&:not(.dragging, .jostling) .carousel-slide img {
+		transition: transform 500ms;
+	}
+
+	.carousel-slide:not(.torn) {
+		overflow: hidden;
+	}
+
+	.carousel-slide.torn {
+		position: fixed;
+		top: 0;
+		z-index: -1;
+		// Torn edge mask
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		-webkit-mask-size: contain;
+		mask-size: contain;
+
+		&.left {
+			padding-left: 160px;
+			margin-left: -160px;
+			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left__2.png");
+			mask-image: url("https://static.graphite.rs/textures/torn-edge-left__2.png");
+			-webkit-mask-position: top left;
+			mask-position: top left;
+		}
+
+		&.right {
+			padding-right: 160px;
+			margin-right: -160px;
+			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right__2.png");
+			mask-image: url("https://static.graphite.rs/textures/torn-edge-right__2.png");
+			-webkit-mask-position: top right;
+			mask-position: top right;
+		}
+	}
+
+	.screenshot-details {
+		display: flex;
+		margin: 20px 0;
+		gap: 20px 40px;
+
+		@media screen and (max-width: 800px) {
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		.carousel-controls {
+			display: flex;
+			align-items: center;
+			flex: 0 0 auto;
+
+			button {
+				outline: none;
+				background: none;
+				border: none;
+				padding: 0;
+				color: inherit;
+				cursor: pointer;
+
+				svg {
+					display: block;
+				}
+
+				+ button {
+					margin-left: 20px;
+				}
+			}
+
+			.direction {
+				fill: currentColor;
+			}
+
+			.dot {
+				width: 16px;
+				height: 16px;
+				box-sizing: border-box;
+				border-radius: 50%;
+				border: 2px solid currentColor;
+
+				&.active {
+					border: none;
+					background: var(--color-crimson);
+				}
+			}
+		}
+
+		.screenshot-description {
+			display: flex;
+			align-items: center;
+			min-height: calc(2em * 1.5);
+
+			p + p {
+				margin: 0;
+			}
+
+			p:not(.active) {
+				display: none;
+			}
+		}
+	}
+
+	&.center {
+		.screenshot-details {
+			justify-content: center;
+		}
+	}
+
+	&.window-size-1 .carousel-slide img {
+		width: 100%;
+	}
+
+	&.window-size-2 .carousel-slide img {
+		width: calc((100% / 2) - 10px);
+		padding: 0 10px;
+
+		&:first-child {
+			margin-left: -10px;
+		}
+
+		&:last-child {
+			margin-right: -10px;
+		}
+	}
+
+	&.window-size-3 .carousel-slide img {
+		width: calc((100% / 3) - 10px * (4 / 3));
+		padding: 0 10px;
+
+		&:first-child {
+			margin-left: -10px;
+		}
+
+		&:last-child {
+			margin-right: -10px;
+		}
+	}
+
+	@media screen and (max-width: 1000px) {
+		margin-left: calc(-1 * var(--page-edge-padding));
+		margin-right: calc(-1 * var(--page-edge-padding));
+
+		.screenshot-details {
+			margin-left: var(--page-edge-padding);
+			margin-right: var(--page-edge-padding);
+		}
+	}
+
+	@media screen and (max-width: /* The value of --max-width-plus-padding: */ 1280px) {
+		.carousel-slide.torn {
+			display: none;
+		}
+	}
+}