Demo styles.

zachleat · Nov 17, 2023 · 6d35c5a · 6d35c5a
1 parent b766b27
commit 6d35c5a
Showing 1 changed file with 19 additions and 15 deletions.
diff --git a/demo.html b/demo.html
@@ -6,6 +6,19 @@
 		<meta name="description" content="">
 		<title>Herald of the Dog</title>
     <link rel="stylesheet" href="herald.css">
+		<script>
+		// the current banner CTA URL, we inject this from a JSON data file
+		let currentKey = "https://www.zachleat.com/";
+		// sessionStorage with save-type="session"
+		// localStorage with no save-type
+		let storageKey = sessionStorage.getItem("banner--cta-url");
+
+		if(storageKey === currentKey) {
+			document.documentElement.classList.add("banner--hide");
+		}
+		</script>
+		<script type="module" src="herald.js"></script>
+
 		<style>
 		body {
 			margin: 0;
@@ -18,13 +31,15 @@
 		/* Banner theme */
 		.demo-banner {
 			display: flex;
-			justify-content: space-between;
+			gap: 1em;
 			background: #222 linear-gradient(-72deg, #555, #222);
 			font-size: 0.875em; /* 14px /16 */
 			/* Please don’t use position: absolute or sticky */
 		}
 		.demo-banner a[href] {
+			flex-grow: 1;
 			display: block;
+			text-align: center;
 			padding: 0.7142857142857em; /* 10px /14 */
 		}
 		.demo-banner,
@@ -45,25 +60,14 @@
 			}
 		}
 		</style>
-		<script>
-		// the current banner CTA URL, we inject this from a JSON data file
-		let currentKey = "https://www.zachleat.com/";
-		// sessionStorage with save-type="session"
-		// localStorage with no save-type
-		let storageKey = sessionStorage.getItem("banner--cta-url");
-
-		if(storageKey === currentKey) {
-			document.documentElement.classList.add("banner--hide");
-		}
-		</script>
-		<script type="module" src="herald.js"></script>
 	</head>
 	<body>
 		<announcement-banner class="demo-banner" save-type="session">
-			<a href="https://www.zachleat.com/">Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability.</a>
-			<button type="button" data-banner-close class="demo-banner-close">❌ Close</button>
+			<a href="https://www.zachleat.com/">This is the banner text.</a>
+			<button type="button" data-banner-close class="demo-banner-close">× Close</button>
 		</announcement-banner>
 
 		<p>This is some other content.</p>
+		<p><button onclick="localStorage.removeItem('banner--cta-url'); sessionStorage.removeItem('banner--cta-url'); window.location.reload()">Reset any persisted state</button> <button onclick="document.querySelector('style').disabled = !document.querySelector('style').disabled">Toggle the demo styles</button></p>
 	</body>
 </html>