feat: make document scrollable (#242)

* feat: make document scrollable * fix: advertise support for light and dark mode * chore: add rendering optimization * fix: improve margins
Th3S4mur41 · Aug 20, 2021 · ecf17c4 · ecf17c4
1 parent 4d9955a
commit ecf17c4
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 26 deletions.
diff --git a/src/index.html b/src/index.html
@@ -16,6 +16,7 @@
 		<meta name="description" content="Th3S4mur41's personal website" />
 		<link rel="manifest" href="manifest.webmanifest" />
 		<meta name="application-name" content="Th3S4mur41.me" />
+		<meta name="color-scheme" content="dark light" />
 		<meta name="theme-color" content="#2c2b2b" media="(prefers-color-scheme: dark)" />
 		<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
 		<title>Th3S4mur41</title>
@@ -44,19 +45,24 @@
 		<link rel="icon" href="assets/icons/icon.svg" type="image/svg+xml" />
 	</head>
 	<body>
-		<picture>
+		<picture class="background-container">
 			<source srcset="assets/images/samurai.avif" type="image/avif" />
 			<source srcset="assets/images/samurai.webp" type="image/webp" />
-			<img class="hero-image" src="assets/images/samurai.png" width="856" height="1200" decoding="async" alt="" />
+			<img class="background-image" src="assets/images/samurai.png" width="856" height="1200" decoding="async" alt="" />
 		</picture>
 		<header id="header">
 			<svg class="logo" width="400" height="200">
 				<title>&lt;侍/&gt;</title>
 				<use href="assets/images/logo-monochrome.svg#svg" />
 			</svg>
 			<h1>The Samurai</h1>
+			<picture id="hero-image">
+				<source srcset="assets/images/samurai.avif" type="image/avif" />
+				<source srcset="assets/images/samurai.webp" type="image/webp" />
+				<img class="hero-image" src="assets/images/samurai.png" width="856" height="1200" decoding="async" alt="" />
+			</picture>
 		</header>
-		<main></main>
+		<main id="main"></main>
 		<footer id="footer" class="overlay">
 			<section class="copyright">© {currentYear} Th3S4mur41.me</section>
 			<section class="social">

diff --git a/src/styles/elements/picture.scss b/src/styles/elements/picture.scss
@@ -0,0 +1,3 @@
+picture {
+	animation: appear 1s ease-out;
+}
diff --git a/src/styles/generic/animations.scss b/src/styles/generic/animations.scss
@@ -65,7 +65,14 @@
 }
 
 @keyframes appear {
-	0% {
+	from {
+		opacity: 0;
+	}
+}
+
+@keyframes fade-out {
+	to {
 		opacity: 0;
+		transform: translateY(25vh) scale(3);
 	}
 }
diff --git a/src/styles/generic/events.css b/src/styles/generic/events.css
@@ -0,0 +1,7 @@
+/**
+ * This file must be CSS otherwise, SASS parser would strip start and end value
+ */
+
+@scroll-timeline hero-image-timeline {
+	time-range: 1s; /* stylelint-disable-line property-no-unknown */
+}
diff --git a/src/styles/generic/global.scss b/src/styles/generic/global.scss
@@ -2,12 +2,6 @@
 	font-size: 10px;
 }
 
-html,
-body {
-	height: 100%;
-	overflow: hidden;
-}
-
 body {
 	font-size: var(--default-font-size);
 	font-family: monospace;

diff --git a/src/styles/generic/layout.scss b/src/styles/generic/layout.scss
@@ -1,45 +1,103 @@
+html {
+	// scroll-snap-type: y proximity; // TODO: activate only with content
+}
+
 body {
 	display: grid;
-	grid-template-rows: auto 1fr auto;
+	grid-auto-rows: auto;
 	grid-template-columns: auto;
+	// iOS Workaround: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
+	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 
-.hero-image {
-	grid-row: 2 / -1;
-	grid-column: 1;
-	justify-self: center;
-	align-self: end;
+.background-container {
+	display: flex;
+	justify-content: center;
+	position: fixed;
+	inset-block-end: 0;
+	max-block-size: 100%;
+	max-inline-size: 100%;
+	inline-size: 100%; // necessary for the inner img to adapt
+	margin: auto; // center
 	z-index: -1;
+}
+
+.background-image {
 	max-block-size: 100%;
 	max-inline-size: 100%;
 	block-size: auto;
 	inline-size: auto;
+	object-fit: contain;
+	filter: blur(1px) opacity(0.4) contrast(0.7) brightness(0.8);
+
+	@media (prefers-color-scheme: light) {
+		filter: invert(1) blur(1px) opacity(0.4) contrast(0.7) brightness(1.2);
+	}
+}
+
+#hero-image {
+	display: flex;
+	justify-content: center;
+	max-block-size: 100%;
+	max-inline-size: 100%;
+	inline-size: 100%; // necessary for the inner img to adapt
+	overflow: hidden;
+	z-index: -1; // behind the content
+}
+
+.hero-image {
+	max-block-size: 100%;
+	max-inline-size: 100%;
+	block-size: auto;
+	inline-size: auto;
+	object-fit: contain;
 	filter: invert(1);
-	animation: appear 1s ease-out;
 
 	@media (prefers-color-scheme: light) {
 		filter: none;
 	}
+
+	@supports (animation-timeline: works) {
+		@media (prefers-reduced-motion: no-preference) {
+			animation: 1s linear forwards fade-out;
+			animation-timeline: hero-image-timeline;
+		}
+	}
 }
 
 #header {
 	grid-row: 1;
 	grid-column: 1;
-	display: flex;
+	display: grid;
+	grid-template-columns: auto auto auto auto;
+	grid-template-rows: auto 1fr;
+	min-block-size: 100vh;
+	max-block-size: 100vh;
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
 	gap: 0.5em;
-	margin-block: 1em;
 	color: var(--theme-color);
-	text-shadow: 0.1rem 0.1rem 0.2rem var(--primary-background-color);
+	filter: drop-shadow(0.1rem 0.1rem 0.2rem var(--shadow-color));
+	scroll-snap-align: start;
 
 	> .logo {
 		inline-size: clamp(8rem, 25vw, 20rem);
 		block-size: auto;
+		grid-row: 1;
+		grid-column: 2;
 	}
 	> h1 {
-		margin: 0;
+		margin: 0.2em;
+		grid-row: 1;
+		grid-column: 3;
+		white-space: nowrap;
+	}
+	> #hero-image {
+		grid-row: 1 / span 2;
+		grid-column: 1 / span 4;
+		align-self: end;
+		// z-index: -1;
 	}
 }
 
@@ -50,6 +108,14 @@ main {
 	align-self: center;
 	font-size: clamp(1.6rem, 5vw, 3rem);
 	color: var(--theme-color);
+
+	> section,
+	> article {
+		content-visibility: auto;
+		contain-intrinsic-size: 100vh;
+		min-block-size: 100vh;
+		scroll-snap-align: start;
+	}
 }
 
 #footer {
@@ -62,6 +128,7 @@ main {
 	padding: 1.2rem;
 	text-align: center;
 	font-size: clamp(1.4rem, 1.5vw, 2rem);
+	scroll-snap-align: end;
 
 	> .copyright,
 	> .social {
@@ -78,20 +145,31 @@ main {
 		grid-template-columns: minmax(auto, env(fold-left)) auto;
 	}
 
+	.background-container {
+		max-inline-size: calc(env(fold-left));
+		margin: revert;
+	}
+
 	#header {
 		grid-column: 1 / span 2;
+		grid-template-columns: 1fr env(fold-width) 1fr;
 
 		> .logo {
+			grid-column: 1;
 			flex: 0 0 env(fold-left);
 			/* limit the logo to half the screen size */
 			margin-inline: calc(env(fold-left) / 4);
 			max-inline-size: calc(env(fold-left) / 2);
 		}
 		> h1 {
+			grid-column: 3;
 			flex: 1; /* Fill the right side */
 			margin-inline-start: env(fold-width);
 			text-align: center;
 		}
+		> #hero-image {
+			grid-column: 1;
+		}
 	}
 
 	#footer {

diff --git a/src/styles/generic/reset.scss b/src/styles/generic/reset.scss
@@ -5,8 +5,3 @@ body {
 * {
 	box-sizing: border-box; /* More intuitive for responsive design */
 }
-
-picture {
-	// Requires to set all class to the <img> tag inside
-	display: contents;
-}
diff --git a/src/styles/settings/colors.scss b/src/styles/settings/colors.scss
@@ -1,4 +1,5 @@
 :root {
+	color-scheme: dark light;
 	/**
      * Theme specific colors
      */
@@ -25,6 +26,7 @@
 	--secondary-color: hsl(219 14% 75%);
 	--overlay-color: hsl(0 0% 0% / 0.3);
 	--overlay-fallback-color: hsl(0 0% 0% / 0.9);
+	--shadow-color: hsl(0 0% 100% / 0.3);
 
 	/**
      * Elements
@@ -48,5 +50,6 @@
 		--secondary-color: var(--primary-color);
 		--overlay-color: hsl(0 0% 100% / 0.3);
 		--overlay-fallback-color: hsl(0 0% 100% / 0.8);
+		--shadow-color: hsl(0 0% 0% / 0.5);
 	}
 }
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -16,11 +16,13 @@
 @import 'generic/reset.scss';
 @import 'generic/global.scss';
 @import 'generic/animations.scss';
+@import 'generic/events.css';
 @import 'generic/layout.scss';
 
 /* Elements */
 @import 'elements/a.scss';
 @import 'elements/h.scss';
+@import 'elements/picture.scss';
 @import 'elements/svg.scss';
 
 /* Components */