Grid layouts

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_grid.scss

@@ -0,0 +1,74 @@
+@use "sass:list";
+@use "../variables" as *;
+
+%grid {
+  display: grid;
+}
+
+@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) {
+  @debug "mixin top: #{$top}";
+  @extend %grid;
+  grid-template-rows: $top 1fr $bottom;
+  grid-template-columns: $left 1fr $right;
+  grid-template-areas:
+    "nw n ne"
+    "w center e"
+    "sw s se";
+}
+
+/* Classes */
+%offset-grid {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+
+  div {
+    justify-self: center;
+    grid-area: center;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    h1, h2, h3 {
+      display: inline-block;
+      width: min-content;
+    }
+  }
+}
+
+// Grid Offset Hell
+$offset-amt: 0.33fr;
+@each $dir in [top, bottom, left, right] {
+  $dir_adj: "";
+  @if $dir {
+    $dir_adj: "--#{$dir}";
+  }
+
+  @each $size, $size_val in (null: 1fr, wide: 0.8fr, narrow: 1.2fr)  {
+    $size_adj: "";
+    @if $size {
+      $size_adj: "--#{$size}";
+    }
+    .offset-grid#{$dir_adj}#{$size_adj} {
+      $-l: [1fr, 1fr, 1fr, 1fr];
+      @if $dir == top {
+        $-l: [$offset-amt, 1fr, $size_val, $size_val];
+      } @else if $dir == bottom {
+        $-l: [1fr, $offset-amt, $size_val, $size_val];
+      } @else if $dir == left {
+        $-l: [$size_val, $size_val, $offset-amt, 1fr];
+      } @else if $dir == right {
+        $-l: [$size_val, $size_val, 1fr, $offset-amt];
+      }
+      @debug "list: #{$-l}";
+      @debug list.nth($-l, 1);
+      @include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
+                               $left: list.nth($-l,3), $right: list.nth($-l,4));
+
+      @extend %offset-grid;
+    }
+  }
+}

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss

@@ -0,0 +1,2 @@
+@forward "grid";
+@forward "modifiers";

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_modifiers.scss

@@ -0,0 +1,20 @@
+.fullsize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+
+  height: 100vh !important;
+  width: 100vw !important;
+}
+
+$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin);
+
+@each $size, $dist in $gap-sizes {
+  @each $dir in [top, bottom, left, right] {
+    .gap-#{$size}-#{$dir} {
+      margin-#{$dir}: $dist;
+    }
+  }
+}

src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss

@@ -7,6 +7,7 @@
 // Global Variables
 @use "variables" as *;
 @use "components";
+@use "layouts";
 
 .fs-900 { font-size: $fs-900; font-weight: 400;}
 .fs-800 { font-size: $fs-800; font-weight: 300;}