From ecff203c0d4761b1be00fc606fb66abdc7e450d9 Mon Sep 17 00:00:00 2001 From: Emilia Date: Sun, 2 Oct 2022 15:28:02 -0400 Subject: [PATCH 2/6] Wrap all of base in a mixin This means that it can be used at global scope in other files --- .../css-purgatory/base/scss/base.scss | 117 +++++++++--------- 1 file changed, 60 insertions(+), 57 deletions(-) diff --git a/src/cool-stuff/css-purgatory/base/scss/base.scss b/src/cool-stuff/css-purgatory/base/scss/base.scss index 8ee602b..6df6546 100644 --- a/src/cool-stuff/css-purgatory/base/scss/base.scss +++ b/src/cool-stuff/css-purgatory/base/scss/base.scss @@ -1,3 +1,4 @@ +@mixin reset { /* ----------------- */ /* Custom Properties */ /* ----------------- */ @@ -29,63 +30,6 @@ $ff-serif: serif; $ff-sans-cond: sans-serif; $ff-sans: sans-serif; -/* ----- */ -/* Reset */ -/* ----- */ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -body, h1, h2, h3, h4, h5, h6, p { - margin: 0; -} - -h1, h2, h3, h4, h5, h6, p { - font-weight: 400; -} - -h1, h2, h3 { - line-height: 1.1; -} - -body { - font-family: $ff-sans; - font-size: $fs-400; - color: $color-dark; - background-color: $color-white; - line-height: 1.5; - min-height: 100vh; -} - -main { - margin-left: 1vw; - margin-top: 1vh; -} - -img, picture { - max-width: 100%; - display: block; -} - -input, button, textarea, select { - font: inherit; -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behaviour: auto !important; - } -} - - /* --------------- */ /* Utility Classes */ /* --------------- */ @@ -189,6 +133,65 @@ footer { margin-top: 3vh; } +/* ----- */ +/* Reset */ +/* ----- */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, h1, h2, h3, h4, h5, h6, p { + margin: 0; +} + +h1, h2, h3, h4, h5, h6, p { + font-weight: 400; +} + +h1, h2, h3 { + line-height: 1.1; +} + +body { + font-family: $ff-sans; + font-size: $fs-400; + color: $color-dark; + background-color: $color-white; + line-height: 1.5; + min-height: 100vh; +} + +main { + margin-left: 1vw; + margin-top: 1vh; +} + +img, picture { + max-width: 100%; + display: block; +} + +input, button, textarea, select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behaviour: auto !important; + } +} +} + +@include reset; + /* -------------------- */ /* Non-Reusable Classes */ /* -------------------- */ From 850d0c259c85c3cbeeeb70606a47b5f630b9f97c Mon Sep 17 00:00:00 2001 From: Emilia Date: Sun, 2 Oct 2022 15:30:07 -0400 Subject: [PATCH 3/6] Change "calc()" to idiomatic sass --- .../css-purgatory/base/scss/base.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/cool-stuff/css-purgatory/base/scss/base.scss b/src/cool-stuff/css-purgatory/base/scss/base.scss index 6df6546..3d0f2c6 100644 --- a/src/cool-stuff/css-purgatory/base/scss/base.scss +++ b/src/cool-stuff/css-purgatory/base/scss/base.scss @@ -1,3 +1,4 @@ +@use "sass:math"; @mixin reset { /* ----------------- */ /* Custom Properties */ @@ -17,14 +18,14 @@ $color-white: hsl(0 0% 100%);/* White */ /* font */ /* Sizes divided by 16 so values given in px */ -$fs-900: calc(125rem / 16); -$fs-800: calc(75rem / 16); -$fs-700: calc(56rem / 16); -$fs-600: calc(32rem / 16); -$fs-500: calc(28rem / 16); -$fs-400: calc(24rem / 16); -$fs-300: calc(18rem / 16); -$fs-200: calc(16rem / 16); +$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); $ff-serif: serif; $ff-sans-cond: sans-serif; From 98239c4fd2b953e0ba6de71e5f5c3398a515cddc Mon Sep 17 00:00:00 2001 From: Emilia Date: Sun, 2 Oct 2022 15:34:53 -0400 Subject: [PATCH 4/6] Update comment --- src/cool-stuff/css-purgatory/base/scss/base.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/cool-stuff/css-purgatory/base/scss/base.scss b/src/cool-stuff/css-purgatory/base/scss/base.scss index 3d0f2c6..515ee26 100644 --- a/src/cool-stuff/css-purgatory/base/scss/base.scss +++ b/src/cool-stuff/css-purgatory/base/scss/base.scss @@ -3,11 +3,11 @@ /* ----------------- */ /* Custom Properties */ /* ----------------- */ -/* Many of the prop- - * erties here are - * where the substa- - * ntive changes - * will be made */ +/* + This values are to be overridden + after being injected into + the global scope. +*/ /* colors */ From 336ef6f6e78dbf895d61bcc2880de0e09492c285 Mon Sep 17 00:00:00 2001 From: Emilia Date: Sun, 2 Oct 2022 15:36:24 -0400 Subject: [PATCH 5/6] Stop tracking compiled css --- src/cool-stuff/css-purgatory/base/.gitignore | 1 + .../css-purgatory/base/css/base.css | 227 ------------------ .../css-purgatory/base/css/base.css.map | 1 - 3 files changed, 1 insertion(+), 228 deletions(-) create mode 100644 src/cool-stuff/css-purgatory/base/.gitignore delete mode 100644 src/cool-stuff/css-purgatory/base/css/base.css delete mode 100644 src/cool-stuff/css-purgatory/base/css/base.css.map diff --git a/src/cool-stuff/css-purgatory/base/.gitignore b/src/cool-stuff/css-purgatory/base/.gitignore new file mode 100644 index 0000000..9798131 --- /dev/null +++ b/src/cool-stuff/css-purgatory/base/.gitignore @@ -0,0 +1 @@ +css/ diff --git a/src/cool-stuff/css-purgatory/base/css/base.css b/src/cool-stuff/css-purgatory/base/css/base.css deleted file mode 100644 index 5a831c5..0000000 --- a/src/cool-stuff/css-purgatory/base/css/base.css +++ /dev/null @@ -1,227 +0,0 @@ -/* ----------------- */ -/* Custom Properties */ -/* ----------------- */ -/* Many of the prop- - * erties here are - * where the substa- - * ntive changes - * will be made */ -/* colors */ -/* Black */ -/* Gray */ -/* White */ -/* font */ -/* Sizes divided by 16 so values given in px */ -/* ----- */ -/* Reset */ -/* ----- */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -body, h1, h2, h3, h4, h5, h6, p { - margin: 0; -} - -h1, h2, h3, h4, h5, h6, p { - font-weight: 400; -} - -h1, h2, h3 { - line-height: 1.1; -} - -body { - font-family: sans-serif; - font-size: 1.5rem; - color: hsl(0deg, 0%, 0%); - background-color: hsl(0deg, 0%, 100%); - line-height: 1.5; - min-height: 100vh; -} - -main { - margin-left: 1vw; - margin-top: 1vh; -} - -img, picture { - max-width: 100%; - display: block; -} - -input, button, textarea, select { - font: inherit; -} - -@media (prefers-reduced-motion: reduce) { - *, -*::before, -*::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behaviour: auto !important; - } -} -/* --------------- */ -/* Utility Classes */ -/* --------------- */ -/* Layouts */ -.container { - padding-inline: 4rem; - margin-inline: auto; - max-width: 80rem; -} - -.flex { - display: flex; - gap: 2rem; -} - -.column { - justify-content: center; - align-items: center; - flex-direction: column; - align-content: center; -} - -.row { - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-content: baseline; - max-width: 100%; -} - -.two-columns { - display: grid; - /* Will shrink to one column, never exceed two! - * The `max` in `minmax` asks that the columns - * be no smaller */ - grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr)); - column-gap: 1rem; - justify-content: space-evenly; -} - -.lock-bottom { - position: absolute; - bottom: 0%; -} - -/* Other */ -.hr::after { /* Add fake hr after header */ - content: ""; - position: absolute; - display: block; - clear: both; - width: 100%; - height: 0.15rem; - background-color: black; -} - -/* Color Classes */ -.bg-dark { - background-color: hsl(0deg, 0%, 0%); -} - -.bg-light { - background-color: hsl(0deg, 0%, 50%); -} - -.bg-white { - background-color: hsl(0deg, 0%, 100%); -} - -.text-dark { - color: hsl(0deg, 0%, 0%); -} - -.text-light { - color: hsl(0deg, 0%, 50%); -} - -.text-white { - color: hsl(0deg, 0%, 100%); -} - -/* Font Classes */ -.fs-900 { - font-size: 7.8125rem; -} - -.fs-800 { - font-size: 4.6875rem; -} - -.fs-700 { - font-size: 3.5rem; -} - -.fs-600 { - font-size: 2rem; -} - -.fs-500 { - font-size: 1.75rem; -} - -.fs-400 { - font-size: 1.5rem; -} - -.fs-300 { - font-size: 1.125rem; -} - -.fs-200 { - font-size: 1rem; -} - -.ff-serif { - font-family: serif; -} - -.ff-sans-cond { - font-family: sans-serif; -} - -.ff-sans { - font-family: sans-serif; -} - -.uppercase { - text-transform: uppercase; -} - -.lowercase { - text-transform: lowercase; -} - -/* Semantic Tags and Their Classes */ -header { - margin-bottom: 3vh; -} - -section:not(:last-of-type) { - margin-bottom: 3vh; -} - -footer { - margin-top: 3vh; -} - -/* -------------------- */ -/* Non-Reusable Classes */ -/* -------------------- */ -/* meant for these pages - * only, not to be used - * in practice */ -.colors--block { - padding: 3rem 1rem 1rem; - border: 1px solid black; -} - -/*# sourceMappingURL=base.css.map */ diff --git a/src/cool-stuff/css-purgatory/base/css/base.css.map b/src/cool-stuff/css-purgatory/base/css/base.css.map deleted file mode 100644 index d4395b0..0000000 --- a/src/cool-stuff/css-purgatory/base/css/base.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE0B;AACC;AACA;AAE3B;AAEA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA7CY;EA8CZ,kBA5CY;EA6CZ;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AAAA;AAAA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAEA;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA8Id;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAkJd;AAEA;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAiJT;EAAY,aA/ID;;;AAgJX;EAAgB,aA/ID;;;AAgJf;EAAW,aA/ID;;;AAiJV;EAAa;;;AACb;EAAa;;;AAEb;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AAAA;AAAA;AAIA;EACE;EACA","file":"base.css"} \ No newline at end of file