From 4579c37b6413830127832636f64549db99aca8aa Mon Sep 17 00:00:00 2001 From: Emilia Date: Sun, 2 Oct 2022 19:26:20 -0400 Subject: [PATCH] Move rules into separate files I suffered so much to make this work. In order to get global variables to work, they make you suffer. I absolutely loathe this solution. --- .../css-purgatory/waltuh/scss/_variables.scss | 34 +++++++ .../css-purgatory/waltuh/scss/base.scss | 39 ++++---- .../waltuh/scss/components/_header.scss | 0 .../waltuh/scss/components/_index.scss | 3 + .../waltuh/scss/components/_marks.scss | 39 ++++++++ .../waltuh/scss/components/_overlay.scss | 16 ++++ .../css-purgatory/waltuh/scss/waltuh.scss | 89 +------------------ 7 files changed, 115 insertions(+), 105 deletions(-) create mode 100644 src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss create mode 100644 src/cool-stuff/css-purgatory/waltuh/scss/components/_header.scss create mode 100644 src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss create mode 100644 src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss create mode 100644 src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss b/src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss new file mode 100644 index 0000000..7e64d31 --- /dev/null +++ b/src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss @@ -0,0 +1,34 @@ +@use "sass:color"; +@use "sass:math"; + +$-color-white: hsl(280 30% 80%); +$-color-dark: color.adjust($-color-white, $lightness: -50%); +$-color-light: hsl(190 80% 30%); +$-ff-serif: ["Inconsolata", monospace]; +$-ff-sans: ["Jost", sans-serif]; +$-fs-900: math.div(100rem, 16); + +@forward "base" with ( + $color-white: $-color-white, + $color-dark: $-color-dark, + $color-light: $-color-light, + $ff-serif: $-ff-serif, + $ff-sans: $-ff-sans, + $fs-900: $-fs-900 +); + +@font-face { + font-family: "Inconsolata"; + src: url("fonts/Inconsolata.ttf"); + + font-display: swap; + font-variation-settings: "wdth" 85; +} + +@font-face { + font-family: "Jost"; + src: url("fonts/Jost.ttf"); + + font-display: swap; +} + diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/base.scss b/src/cool-stuff/css-purgatory/waltuh/scss/base.scss index 9119e5e..f8b2045 100644 --- a/src/cool-stuff/css-purgatory/waltuh/scss/base.scss +++ b/src/cool-stuff/css-purgatory/waltuh/scss/base.scss @@ -1,3 +1,8 @@ +// +// +// Do Not Change This File! +// +// @use "sass:math"; /* ----------------- */ /* Custom Properties */ @@ -10,27 +15,26 @@ /* colors */ -$color-dark: hsl(0 0% 0%); /* Black */ -$color-light: hsl(0 0% 50%); /* Gray */ -$color-white: hsl(0 0% 100%);/* White */ +$color-dark: hsl(0 0% 0%) !default; /* Black */ +$color-light: hsl(0 0% 50%) !default; /* Gray */ +$color-white: hsl(0 0% 100%) !default;/* White */ /* font */ /* Sizes divided by 16 so values given in px */ -$fs-900: math.div(125rem, 16); -$fs-800: math.div(75rem, 16); -$fs-700: math.div(56rem, 16); -$fs-600: math.div(32rem, 16); -$fs-500: math.div(28rem, 16); -$fs-400: math.div(24rem, 16); -$fs-300: math.div(18rem, 16); -$fs-200: math.div(16rem, 16); +$fs-900: math.div(125rem, 16) !default; +$fs-800: math.div(75rem, 16) !default; +$fs-700: math.div(56rem, 16) !default; +$fs-600: math.div(32rem, 16) !default; +$fs-500: math.div(28rem, 16) !default; +$fs-400: math.div(24rem, 16) !default; +$fs-300: math.div(18rem, 16) !default; +$fs-200: math.div(16rem, 16) !default; -$ff-serif: serif; -$ff-sans-cond: sans-serif; -$ff-sans: sans-serif; +$ff-serif: serif !default; +$ff-sans-cond: sans-serif !default; +$ff-sans: sans-serif !default; -@mixin utility{ /* --------------- */ /* Utility Classes */ /* --------------- */ @@ -133,9 +137,7 @@ section:not(:last-of-type) { footer { margin-top: 3vh; } -} -@mixin reset { /* ----- */ /* Reset */ /* ----- */ @@ -159,6 +161,7 @@ h1, h2, h3 { } body { + @debug "In base.body, #{$color-dark}"; font-family: $ff-sans; font-size: $fs-400; color: $color-dark; @@ -199,8 +202,6 @@ input, button, textarea, select { } } -} - /* -------------------- */ /* Non-Reusable Classes */ /* -------------------- */ diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/components/_header.scss b/src/cool-stuff/css-purgatory/waltuh/scss/components/_header.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss b/src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss new file mode 100644 index 0000000..c2faa97 --- /dev/null +++ b/src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss @@ -0,0 +1,3 @@ +@forward "header"; +@forward "overlay"; +@forward "marks"; diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss b/src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss new file mode 100644 index 0000000..1e45a62 --- /dev/null +++ b/src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss @@ -0,0 +1,39 @@ +@use "sass:math"; +@use "sass:color"; +@use "../variables" as *; + + +@keyframes waltuh-gradient-anim { + $r: 6em; + $pd: math.div(2*math.$pi,10); + from { + background-position: 6em 0em; + } + @for $i from 1 through 9 { + #{$i*10}% { + background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd); + } + } + to { + background-position: 6em 0em; + } +} +@keyframes wipeIn { + from { clip-path: inset(0 100% 0 0); } + to { clip-path: inset(0 0 0 0); } +} + +mark.waltuh-gradient { + font-weight: 600; + + color: transparent; + $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%); + $grad2: color.adjust($grad1, $lightness: +30%); + background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white); + background-size: 30vmin 30vmin; + background-clip: text; + + animation: waltuh-gradient-anim 12s linear infinite, + wipeIn 0.25s ease-in; + +} diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss b/src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss new file mode 100644 index 0000000..656cec6 --- /dev/null +++ b/src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss @@ -0,0 +1,16 @@ +@keyframes overlay-breathe { + from {opacity: 0.04;} + to {opacity: 0.12;} +} +#overlay { + width: 100%; + height: 100vh; + position: fixed; + + opacity: 0.10; + z-index: 1; + background-image: url('https://ilia.moe/img/noise.gif'); + background-size: 25%; + + animation: overlay-breathe 4s ease infinite alternate; +} diff --git a/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss b/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss index 80ff409..f77657b 100644 --- a/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss +++ b/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss @@ -1,38 +1,12 @@ -@use "sass:color"; -@use "sass:math"; -@use "base" as *; - /* ------ */ /* */ /* Waltuh */ /* */ /* ------ */ -/* Initial Variable Resets */ - -$color-white: hsl(280 30% 80%); -$color-dark: color.adjust($color-white, $lightness: -50%); -$color-light: hsl(190 80% 30%); - -@font-face { - font-family: "Inconsolata"; - src: url("fonts/Inconsolata.ttf"); - - font-display: swap; - font-variation-settings: "wdth" 85; -} - -@font-face { - font-family: "Jost"; - src: url("fonts/Jost.ttf"); - - font-display: swap; -} - -$ff-serif: "Inconsolata", monospace; -$ff-sans: "Jost", sans-serif; -$fs-900: math.div(100rem, 16); -@debug "ff-serif is #{$ff-serif}"; +// Global Variables +@use "variables" as *; +@use "components"; .fs-900 { font-size: $fs-900; font-weight: 400;} .fs-800 { font-size: $fs-800; font-weight: 300;} @@ -40,60 +14,3 @@ $fs-900: math.div(100rem, 16); .fs-600 { font-size: $fs-600; font-weight: 300;} .fs-500 { font-size: $fs-500; font-weight: 200;} .fs-400 { font-size: $fs-400; font-weight: 200;} - -/* --- */ - -@include utility; -@include reset; - -@keyframes waltuh-gradient-anim { - $r: 6em; - $pd: math.div(2*math.$pi,10); - from { - background-position: 6em 0em; - } - @for $i from 1 through 9 { - #{$i*10}% { - background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd); - } - } - to { - background-position: 6em 0em; - } -} -@keyframes wipeIn { - from { clip-path: inset(0 100% 0 0); } - to { clip-path: inset(0 0 0 0); } -} - -.waltuh-gradient { - font-weight: 600; - - color: transparent; - $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%); - $grad2: color.adjust($grad1, $lightness: +30%); - background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white); - background-size: 30vmin 30vmin; - background-clip: text; - - animation: waltuh-gradient-anim 12s linear infinite, - wipeIn 0.25s ease-in; - -} - -@keyframes overlay-breathe { - from {opacity: 0.04;} - to {opacity: 0.12;} -} -#overlay { - width: 100%; - height: 100vh; - position: fixed; - - opacity: 0.10; - z-index: 1; - background-image: url('https://ilia.moe/img/noise.gif'); - background-size: 25%; - - animation: overlay-breathe 4s ease infinite alternate; -}