initial commit

tutsplus · Feb 28, 2024 · 2f85fb7 · 2f85fb7
commit 2f85fb7
Show file tree

Hide file tree

Showing 5 changed files with 409 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+### Comparing Different Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)
+
+In this tutorial, we'll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS units.
+
+Click on the buttons and check the demo from a mobile device to see the different behavior of these units.
+
+**Available on Tuts+ Spring 2024**
diff --git a/index.html b/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Testing the new dynamic CSS units</title>
+		<link rel="stylesheet" href="main.css" />
+	</head>
+	<body>
+		<main>
+			<section class="hero">
+				<div>
+					<h1>Testing the new dynamic CSS units</h1>
+					<div>
+						<button class="active" type="button">vh</button>
+						<button type="button">dvh</button>
+						<button type="button">lvh</button>
+						<button type="button">svh</button>
+					</div>
+					<a href="sticky.html">Example with sticky header</a>
+				</div>
+			</section>
+			<section class="text">
+				<div class="container">
+					<h2>Heading</h2>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+						Etiam ac tincidunt est, quis ultricies eros. Phasellus
+						at pellentesque ipsum. Suspendisse tempor sodales
+						pretium. Etiam fringilla mauris non iaculis ultrices.
+						Nullam ac ligula ex. Aliquam erat volutpat. Proin
+						aliquam risus massa, non egestas elit ultrices quis.
+						Cras laoreet nulla eget nibh feugiat ultricies congue
+						nec mi. Vestibulum a metus ut libero aliquet porta.
+						Phasellus a lobortis erat. Praesent laoreet dolor vel
+						odio laoreet, eu cursus libero hendrerit. Nunc
+						consectetur lacus id risus lacinia finibus. Curabitur
+						ornare sagittis metus in rutrum.
+					</p>
+
+					<p>
+						Phasellus eu tristique mauris. Nulla facilisi. Sed
+						tellus diam, vehicula ut bibendum id, egestas eu ante.
+						Etiam eu porta quam, sit amet viverra odio. Donec cursus
+						leo massa, eu laoreet lectus auctor sed. Suspendisse
+						lacinia imperdiet maximus. Fusce malesuada rutrum dolor
+						in maximus. Phasellus vitae metus in orci lacinia
+						tristique. In hac habitasse platea dictumst. Donec
+						tincidunt purus sit amet nisl cursus aliquet. Nunc lorem
+						mi, pulvinar non lectus at, ornare luctus ipsum. Class
+						aptent taciti sociosqu ad litora torquent per conubia
+						nostra, per inceptos himenaeos.
+					</p>
+
+					<p>
+						Donec cursus sollicitudin lorem, ac porttitor ante.
+						Nullam nunc tortor, luctus nec feugiat ac, euismod vel
+						ligula. Nullam at velit tortor. Vestibulum blandit
+						euismod dolor. Morbi ultricies elementum tellus, a
+						facilisis felis fermentum sed. Quisque molestie eleifend
+						dolor et sollicitudin. Nullam luctus ante id turpis
+						blandit consequat. Morbi lobortis, mi at fermentum
+						sodales, turpis nisl sollicitudin urna, a tempus nisi
+						dolor vitae massa. Vivamus egestas ut diam at efficitur.
+						Donec a eros in turpis venenatis finibus vitae id dui.
+						Nam blandit, dolor at accumsan pretium, urna erat
+						ullamcorper mauris, in semper diam purus sed tellus. Sed
+						molestie tellus est, ac feugiat lacus vehicula ut.
+						Vestibulum ante ipsum primis in faucibus orci luctus et
+						ultrices posuere cubilia curae; Praesent id finibus
+						quam, eget ultrices risus. Morbi vel lacus vel metus
+						molestie elementum id et magna. Aliquam bibendum leo a
+						ipsum blandit, quis ornare nisl sagittis.
+					</p>
+
+					<p>
+						Vivamus nec tortor semper, gravida mauris ac, interdum
+						sem. Vestibulum ante ipsum primis in faucibus orci
+						luctus et ultrices posuere cubilia curae; Praesent at
+						nibh porttitor, congue justo vel, tincidunt libero.
+						Aliquam eros augue, tincidunt sed massa tempus, sodales
+						pellentesque lectus. Etiam fringilla lorem porta mi
+						cursus tincidunt. Ut nisl magna, placerat eget mattis
+						quis, dignissim ut metus. Quisque tempor leo ut nisl
+						faucibus, a maximus arcu rutrum. Sed in purus quis odio
+						tempor euismod in at lacus. Ut vel ultricies magna.
+						Nulla sed venenatis nibh, ornare consectetur tellus.
+						Aliquam auctor mauris velit, at feugiat ligula accumsan
+						elementum. Ut efficitur consequat feugiat. Curabitur
+						suscipit vestibulum nisl, eu congue sem aliquet vitae.
+						Duis vulputate et sem sit amet rutrum. Aenean a
+						porttitor felis, sed volutpat augue. Quisque finibus
+						porta tristique.
+					</p>
+
+					<p>
+						In vel nunc eget lacus lacinia malesuada eget sit amet
+						nisl. Sed libero nisi, malesuada in arcu ac, elementum
+						porttitor diam. Phasellus lacinia egestas congue. Proin
+						eleifend euismod risus fermentum ullamcorper. Nam
+						condimentum odio id tellus sollicitudin luctus eu
+						finibus lacus. Integer sed nisi a nisi rhoncus pharetra
+						quis eget quam. Class aptent taciti sociosqu ad litora
+						torquent per conubia nostra, per inceptos himenaeos.
+						Quisque eget erat bibendum, commodo felis eget, egestas
+						dui.
+					</p>
+				</div>
+			</section>
+			<div class="toolbar">
+				<a href="" title="Mail me">
+					<svg
+						width="30"
+						height="30"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+					>
+						<path
+							d="M24 21h-24v-18h24v18zm-23-16.477v15.477h22v-15.477l-10.999 10-11.001-10zm21.089-.523h-20.176l10.088 9.171 10.088-9.171z"
+						/>
+					</svg>
+				</a>
+				<a href="" title="Phone me">
+					<svg
+						width="30"
+						height="30"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+					>
+						<path
+							d="M8.26 1.289l-1.564.772c-5.793 3.02 2.798 20.944 9.31 20.944.46 0 .904-.094 1.317-.284l1.542-.755-2.898-5.594-1.54.754c-.181.087-.384.134-.597.134-2.561 0-6.841-8.204-4.241-9.596l1.546-.763-2.875-5.612zm7.746 22.711c-5.68 0-12.221-11.114-12.221-17.832 0-2.419.833-4.146 2.457-4.992l2.382-1.176 3.857 7.347-2.437 1.201c-1.439.772 2.409 8.424 3.956 7.68l2.399-1.179 3.816 7.36s-2.36 1.162-2.476 1.215c-.547.251-1.129.376-1.733.376"
+						/>
+					</svg>
+				</a>
+			</div>
+		</main>
+		<script src="main.js"></script>
+	</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,102 @@
+:root {
+	--light-yellow: #fdfcdc;
+	--light-orange: #fed9b7;
+	--header-height: 80px;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font: 20px/1.5 sans-serif;
+}
+
+.container {
+	max-width: 1200px;
+	padding: 0 15px;
+	margin: 0 auto;
+}
+
+a {
+	color: inherit;
+}
+
+.site-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	height: var(--header-height);
+	background: var(--light-orange);
+}
+
+.hero {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: var(--unit, 100vh);
+	padding: 15px;
+	text-align: center;
+	background-image: url(https://assets.codepen.io/162656/man-walking.jpg);
+}
+
+.hero h1,
+.hero button {
+	background: var(--light-yellow);
+}
+
+.hero h1 {
+	font-size: 3rem;
+	line-height: 1;
+	padding: 10px;
+	margin: 0 0 20px;
+}
+
+.hero button {
+	font-size: 100%;
+	color: inherit;
+	cursor: pointer;
+	width: 70px;
+	aspect-ratio: 2;
+	border: none;
+	border-radius: 5px;
+	transition: background 0.25s;
+}
+
+.hero button:hover,
+.hero button.active {
+	background: var(--light-orange);
+}
+
+.hero a {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+.text {
+	padding: 50px 0;
+}
+
+.toolbar {
+	position: fixed;
+	bottom: 5vh;
+	right: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+
+	a {
+		display: flex;
+		text-decoration: none;
+	}
+}
+
+/*STICKY*/
+.sticky {
+	.hero {
+		height: var(--unit, calc(100vh - var(--header-height)));
+	}
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,13 @@
+const hero = document.querySelector(".hero");
+const btns = document.querySelectorAll("button");
+const headerHeight = document.body.classList.contains("sticky") ? 80 : 0;
+for (const btn of btns) {
+	btn.addEventListener("click", function () {
+		document.querySelector("button.active").classList.remove("active");
+		this.classList.add("active");
+		hero.style.setProperty(
+			"--unit",
+			`calc(100${this.textContent} - ${headerHeight}px)`
+		);
+	});
+}