diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_grid.scss b/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_grid.scss new file mode 100644 index 0000000..61653f4 --- /dev/null +++ b/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; + } + } +} diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss b/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss new file mode 100644 index 0000000..c24967b --- /dev/null +++ b/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss @@ -0,0 +1,2 @@ +@forward "grid"; +@forward "modifiers"; diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_modifiers.scss b/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_modifiers.scss new file mode 100644 index 0000000..a984431 --- /dev/null +++ b/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; + } + } +} diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss b/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss index f77657b..0e4fec9 100644 --- a/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss +++ b/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;}