Added Toggle

mattbischoff · Apr 7, 2024 · b6808a2 · b6808a2
1 parent 84d9bf7
commit b6808a2
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 33 deletions.
diff --git a/_config.yml b/_config.yml
@@ -73,8 +73,7 @@ repository: mattbischoff/website
 header:
   title: mb bischoff
   subtitle: <a href="/about/">mb</a> makes <a href="https://lickability.com">apps</a>,
-    <a href="/archive/">words</a>, and <a href="https://absolutelycrushed.com">sounds</a>.<br>
-    Everything is <a href="/under-construction/">under construction</a>.
+    <a href="/archive/">words</a>, and <a href="https://absolutelycrushed.com">sounds</a>. Everything is <a href="/under-construction/">under construction</a>.
 navigation_links:
 - title: Home
   url: "/"

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -6,5 +6,11 @@
       title="Creative Commons Attribution-ShareAlike 4.0 International">
       {{ site.license.text }}
     </a>      
-    </p>    
+    </p>
+
+    <!-- TODO: Make this an include. -->
+    <div class="switch">
+      <label for="switch">▒</label>
+      <input type="checkbox" id="toggle-grid" class="toggle" checked="" />
+    </div>
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
 
   {%- include head.html -%}
 
-  <body>
+  <body class="grid">
     {%- include header.html -%}
 
     <main aria-label="Content">
@@ -13,6 +13,15 @@
     {%- include footer.html -%}
 
     {% include analytics.html %}
+
+    <script>
+      let checkBox = document.querySelector('#toggle-grid');
+      localStorage['show-grid'] ??= true;
+
+      checkBox.checked = localStorage['show-grid'] === 'true';
+
+      checkBox.onchange = () => localStorage.setItem('show-grid', checkBox.checked);
+    </script>
   </body>
 
 </html>
diff --git a/_sass/base/_body.scss b/_sass/base/_body.scss
@@ -2,37 +2,34 @@
 @use 'abstracts/mixins';
 
 body {
-	@include mixins.dot-grid;
+	// @include vr.grid(); Debugging
 	max-width: 65ch;
-	
+
 	margin: 0 auto;
 	@include vr.set($padding: 0 1);
-
-
-	:has(input[name="toggle-grid"]:checked) {
-		@include vr.grid();
-	}
-
-
-	:has(input[name="toggle-grid"]:not(:checked)) {}
 }
 
+body:has(input[id="toggle-grid"]:checked) {
+	@include mixins.dot-grid;
+}
 
 // Make headers one level smaller when they’re in the `main`.
 main {
-h1 {
-	@include vr.set($font-size: 3);
-}
+	h1 {
+		@include vr.set($font-size: 3);
+	}
 
-h2 {
-	@include vr.set($font-size: 2);
-}
+	h2 {
+		@include vr.set($font-size: 2);
+	}
 
-h3 {
-	@include vr.set($font-size: 1);
-}
+	h3 {
+		@include vr.set($font-size: 1);
+	}
 
-h4,h5, h6 {
-	@include vr.set($font-size: 0);
-}
+	h4,
+	h5,
+	h6 {
+		@include vr.set($font-size: 0);
+	}
 }
diff --git a/_sass/components/_toggle.scss b/_sass/components/_toggle.scss
@@ -0,0 +1,73 @@
+@use 'vendors/vertical-rhythm-reset' as vr;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$knob-size: 20px;
+$knob-position: 2px;
+$transition-speed: .2s;
+$box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+$knob-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
+$bg-color-off-light: #c6c6c6;
+$bg-color-on-light: #0072ff;
+$bg-color-off-dark: #555;
+$bg-color-on-dark: #0072ff;
+$bg-color-active-light: #bbb;
+$bg-color-active-dark: #777;
+
+.toggle {
+	margin-bottom: 0 !important; // Override vertical-rhythm-reset.
+
+	position: relative;
+	display: inline-block;
+	width: $switch-width;
+	height: $switch-height;
+	appearance: none;
+	outline: none;
+	background-color: $bg-color-off-light;
+	border-radius: $switch-height;
+	box-shadow: $box-shadow;
+	transition: background-color $transition-speed;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: $bg-color-off-dark;
+	}
+
+	&:after {
+		content: "";
+		position: absolute;
+		top: $knob-position;
+		left: $knob-position;
+		width: $knob-size;
+		height: $knob-size;
+		border-radius: 50%;
+		background-color: #fff;
+		box-shadow: $knob-box-shadow;
+		transition: all $transition-speed;
+	}
+
+	&:active {
+		background-color: $bg-color-active-light;
+
+		@media (prefers-color-scheme: dark) {
+			background-color: $bg-color-active-dark;
+		}
+	}
+
+	&:checked {
+		background-color: $bg-color-on-light;
+
+		@media (prefers-color-scheme: dark) {
+			background-color: $bg-color-on-dark;
+		}
+
+		&:after {
+			transform: translatex($switch-width - $knob-size - $knob-position);
+		}
+	}
+}
+
+.switch {
+	label {
+		@include vr.set($font-size: 2, $margin-right: 0.5, $padding-top: 0.3);
+	}
+}
diff --git a/_sass/layout/footer.scss b/_sass/layout/footer.scss
@@ -2,4 +2,14 @@
 
 footer {
 	@include vr.set($margin-top: 1 0);
-}
+
+	text-transform: lowercase;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.switch {
+		display: inline-flex;
+		align-items: center;
+	}
+}
diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss
@@ -1,12 +1,24 @@
 @use 'vendors/vertical-rhythm-reset' as vr;
 
 header#masthead {
-	@include vr.set($margin: 1 0);
 	text-transform: lowercase;
-
+
+	@include vr.set($margin: 1 0);
+
 	nav {
+		@include vr.set($margin-bottom: 1);
+
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
-}
+
+	h1 {
+		@include vr.set($margin-bottom: 0);
+
+	}
+
+	p {
+		@include vr.set($margin-top: 0);
+	}
+}
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -1,7 +1,5 @@
 // Vendor
 
-@use 'vendors/vertical-rhythm-reset';
-
 // Abstracts
 // 
 @use 'abstracts/variables';
@@ -19,4 +17,7 @@
 // Layout
 
 @use 'layout/header';
-@use 'layout/footer';
+@use 'layout/footer';
+
+
+@use 'components/toggle';