From a1cabdeaaf3bade1bd0872bcafc52c81f1c31ce8 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Thu, 19 Oct 2023 23:13:30 +0100 Subject: Optimise CSS (#17) * Installs Sass * installs concurrently * Ports CSS to SCSS * Gitignores CSS build output * Moves public/main.css to scss/index.scss * Fixes port to SCSS * Use-ifies base styles * Use-ifies layout styles * Use-ifies modules styles * Use-ifies variables * Use-ifies utils * Moves normalize to scss * Implements a CSS minifying step with CSSO --------- Co-authored-by: Joe Carstairs --- public/css/variables/spacing.css | 47 ---------------------------------------- 1 file changed, 47 deletions(-) delete mode 100644 public/css/variables/spacing.css (limited to 'public/css/variables/spacing.css') diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css deleted file mode 100644 index a4d1d91..0000000 --- a/public/css/variables/spacing.css +++ /dev/null @@ -1,47 +0,0 @@ -:root { - --margin-inline-md: calc(2 * var(--relative-eighth-rem)); - --margin-block-lg: calc(16 * var(--relative-eighth-rem)); - --margin-block-md: calc(10 * var(--relative-eighth-rem)); - --margin-block-sm: calc(5 * var(--relative-eighth-rem)); - - --padding-inline-lg: calc(4 * var(--relative-eighth-rem)); - --padding-inline-md: calc(2 * var(--relative-eighth-rem)); - --padding-inline-sm: calc(1 * var(--relative-eighth-rem)); - --padding-block-lg: calc(12 * var(--relative-eighth-rem)); - --padding-block-md: calc(8 * var(--relative-eighth-rem)); - --padding-block-sm: calc(5 * var(--relative-eighth-rem)); - - --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem)); - --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem)); - - --grid-total-relative-eighth-rem-width: calc( - var(--grid-padding-relative-eighth-rem) * 2 + - var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + - var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1) - ); - --relative-eighth-rem: calc( - var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width) - ); - --width-prose: calc( - var(--grid-column-width) * var(--grid-prose-column-count) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - - --grid-column-width-relative-eighth-rem: 32; - --grid-gutter-width-relative-eighth-rem: 4; - - /*********************************************************** - * Generally, we will use columns to keep things laid out * - * nicely. However, on screens narrower than xs, this gets * - * pretty much impossible. So for those screens, we use a * - * single-column layout taking up 100vw. In effect, this * - * is just default CSS layout plus a wee bit padding. From * - * xs widewards, we use multiple columns on a fixed width. * - ***********************************************************/ - - --grid-total-width: 100vw; - --grid-padding-relative-eighth-rem: 8; - --grid-column-count: 1; - --grid-prose-column-count: 1; -} -- cgit v1.2.3