Turned the dot grid back on

mattbischoff · Apr 6, 2024 · 861c25f · 861c25f
1 parent d80a19c
commit 861c25f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -3,7 +3,13 @@
    <i class="cc cc-cc"></i>{{ site.license.copyright }}
     <a
       href="{{ site.license.url }}"
-      title="Creative Commons Attribution-ShareAlike 4.0 International"
-      >{{ site.license.text }}</a>
-  </p>
+      title="Creative Commons Attribution-ShareAlike 4.0 International">
+      {{ site.license.text }}
+    </a>      
+    </p>
+
+  <div class="input-wrap">
+      <input name="toggle-grid" type="checkbox">
+      <label for="toggle-grid">Grid</label>
+    </div>      
 </footer>
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -7,27 +7,31 @@ $text-font-stack: "halyard-text-variable", -apple-system, BlinkMacSystemFont, av
 $display-font-stack: "halyard-display-variable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
 $line-height: 24px;
 
+$color-gridlines: #ccc;
+
 vr.$box-sizing : border-box;
 vr.$font-size : 17px;
 vr.$line-height : 1.4;
-vr.$modular-scale: major-third;
-vr.$grid-color : blue;
+vr.$modular-scale: perfect-fourth;
+vr.$grid-color : $color-gridlines;
 vr.$breakpoints : null;
 
 @include vr.reset();
 
+@mixin dot-grid {
+	background-image: radial-gradient($color-gridlines, 1px, transparent 1px);
+	background-size: $line-height $line-height;
+	background-position-y: math.div($line-height, 2);
+}
+
 /* || General Styles */
 
 :root {
 	font-family: $text-font-stack;
 }
 
 body {
-	// @include vr.grid();
-
-	background-image: radial-gradient(#E2E2E2, 1px, transparent 1px);
-	background-size: $line-height $line-height;
-	background-position-y: math.div($line-height, 2);
+	@include dot-grid;
 
 	max-width: 65ch;
 
@@ -36,20 +40,32 @@ body {
 
 	header {
 		@include vr.set($margin: 1 0);
+		text-transform: lowercase;
 
 		nav {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			text-transform: lowercase;
 		}
 	}
 
 	footer {
-		@include vr.set($margin: 1 0);
+		@include vr.set($margin: 1 0);		
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
 	}
 }
 
+
+body:has(input[name="toggle-grid"]:checked) {
+	@include vr.grid();
+}
+
+
+body:has(input[name="toggle-grid"]:not(:checked)) {}
+
 main {}
 
 
@@ -60,7 +76,6 @@ h3 {
 }
 
 h1 {
-	letter-spacing: -1px;
 	@include vr.set($font-size: 4);
 }
 
@@ -72,10 +87,13 @@ h3 {
 	@include vr.set($font-size: 2);
 }
 
-h4,
+h4 {
+	@include vr.set($font-size: 1);
+}
+
 h5,
 h6 {
-	@include vr.set($font-size: 1);
+	@include vr.set($font-size: 0);
 }
 
 /* || Media */