From 48099a734b8297063bae26b366b9d52c9a35cc5f Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 25 Jan 2023 09:54:08 +0100
Subject: [PATCH] Rename init dir to mixins.

---
 assets/sass/_init.scss                        | 19 +++---
 .../visually-hidden/_visually-hidden.scss     | 38 ------------
 .../breakpoint/_respond-to.scss               |  5 ++
 .../{init => mixins}/clearfix/_clearfix.scss  |  0
 assets/sass/mixins/flex-calc/_flex-calc.scss  |  4 ++
 .../image-url/_image-url.scss                 |  0
 assets/sass/{init => mixins}/rtl/_rtl.scss    |  0
 assets/sass/mixins/spacing/_spacing.scss      | 58 +++++++++++++++++++
 8 files changed, 75 insertions(+), 49 deletions(-)
 delete mode 100644 assets/sass/init/visually-hidden/_visually-hidden.scss
 rename assets/sass/{init => mixins}/breakpoint/_respond-to.scss (77%)
 rename assets/sass/{init => mixins}/clearfix/_clearfix.scss (100%)
 create mode 100644 assets/sass/mixins/flex-calc/_flex-calc.scss
 rename assets/sass/{init => mixins}/image-url/_image-url.scss (100%)
 rename assets/sass/{init => mixins}/rtl/_rtl.scss (100%)
 create mode 100644 assets/sass/mixins/spacing/_spacing.scss

diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss
index 6b5caea..5bf4baa 100644
--- a/assets/sass/_init.scss
+++ b/assets/sass/_init.scss
@@ -8,15 +8,12 @@
 // Colours and variables.
 @import 'colors';
 @import 'variables';
+@import 'extra';
 
-// Add typey to manage font sizes and margins.
-@import 'typey';
-
-// Custom mixins used on this site.
-@import 'init/breakpoint/respond-to';
-@import 'init/clearfix/clearfix';
-@import 'init/rtl/rtl';
-@import 'init/visually-hidden/visually-hidden';
-
-// Custom functions used on this site.
-@import 'init/image-url/image-url';
+// Mixins and functions.
+@import 'mixins/breakpoint/respond-to';
+@import 'mixins/clearfix/clearfix';
+@import 'mixins/flex-calc/flex-calc';
+@import 'mixins/image-url/image-url';
+@import 'mixins/rtl/rtl';
+@import 'mixins/spacing/spacing';
diff --git a/assets/sass/init/visually-hidden/_visually-hidden.scss b/assets/sass/init/visually-hidden/_visually-hidden.scss
deleted file mode 100644
index e45f9ba..0000000
--- a/assets/sass/init/visually-hidden/_visually-hidden.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// visually-hidden()
-//
-// Make an element visually hidden, but accessible to screen readers, etc.
-// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-@mixin visually-hidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  word-wrap: normal;
-}
-
-// visually-hidden--off()
-//
-// Turns off the visually-hidden effect.
-@mixin visually-hidden--off {
-  position: static !important;
-  clip: auto;
-  height: auto;
-  width: auto;
-  overflow: visible;
-}
-
-// visually-hidden--focusable()
-//
-// Makes an element visually hidden by default, but visible when receiving
-// focus.
-@mixin visually-hidden--focusable {
-  @include visually-hidden;
-
-  &:active,
-  &:focus {
-    @include visually-hidden--off;
-  }
-}
diff --git a/assets/sass/init/breakpoint/_respond-to.scss b/assets/sass/mixins/breakpoint/_respond-to.scss
similarity index 77%
rename from assets/sass/init/breakpoint/_respond-to.scss
rename to assets/sass/mixins/breakpoint/_respond-to.scss
index 663e52c..d6fa8d2 100644
--- a/assets/sass/init/breakpoint/_respond-to.scss
+++ b/assets/sass/mixins/breakpoint/_respond-to.scss
@@ -6,4 +6,9 @@
       @content;
     }
   }
+  @else {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  }
 }
diff --git a/assets/sass/init/clearfix/_clearfix.scss b/assets/sass/mixins/clearfix/_clearfix.scss
similarity index 100%
rename from assets/sass/init/clearfix/_clearfix.scss
rename to assets/sass/mixins/clearfix/_clearfix.scss
diff --git a/assets/sass/mixins/flex-calc/_flex-calc.scss b/assets/sass/mixins/flex-calc/_flex-calc.scss
new file mode 100644
index 0000000..72b574b
--- /dev/null
+++ b/assets/sass/mixins/flex-calc/_flex-calc.scss
@@ -0,0 +1,4 @@
+@mixin flex($c, $x) {
+  flex-basis: calc(100% / #{$c} - #{$x * $base-line-height + 'rem'});
+  flex-grow: 0;
+}
diff --git a/assets/sass/init/image-url/_image-url.scss b/assets/sass/mixins/image-url/_image-url.scss
similarity index 100%
rename from assets/sass/init/image-url/_image-url.scss
rename to assets/sass/mixins/image-url/_image-url.scss
diff --git a/assets/sass/init/rtl/_rtl.scss b/assets/sass/mixins/rtl/_rtl.scss
similarity index 100%
rename from assets/sass/init/rtl/_rtl.scss
rename to assets/sass/mixins/rtl/_rtl.scss
diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss
new file mode 100644
index 0000000..30518a7
--- /dev/null
+++ b/assets/sass/mixins/spacing/_spacing.scss
@@ -0,0 +1,58 @@
+@mixin spacing($property, $spacing) {
+  $converted-list: ();
+
+  @each $x in $spacing {
+    $spacing: #{$x * $base-line-height + 'rem'};
+    $converted-list: join($converted-list, $spacing, $separator: space);
+  }
+
+  #{$property}: $converted-list;
+}
+
+@mixin gap($x) {
+  @include spacing(gap, $x);
+}
+
+@mixin margin($x) {
+  @include spacing(margin, $x);
+}
+@mixin margin-inline($x) {
+  @include spacing(margin-inline, $x);
+}
+@mixin margin-block($x) {
+  @include spacing(margin-block, $x);
+}
+@mixin margin-top($x) {
+  @include spacing(margin-top, $x);
+}
+@mixin margin-bottom($x) {
+  @include spacing(margin-bottom, $x);
+}
+@mixin margin-left($x) {
+  @include spacing(margin-left, $x);
+}
+@mixin margin-right($x) {
+  @include spacing(margin-right, $x);
+}
+
+@mixin padding($x) {
+  @include spacing(padding, $x);
+}
+@mixin padding-inline($x) {
+  @include spacing(padding-inline, $x);
+}
+@mixin padding-block($x) {
+  @include spacing(padding-block, $x);
+}
+@mixin padding-top($x) {
+  @include spacing(padding-top, $x);
+}
+@mixin padding-bottom($x) {
+  @include spacing(padding-bottom, $x);
+}
+@mixin padding-left($x) {
+  @include spacing(padding-left, $x);
+}
+@mixin padding-right($x) {
+  @include spacing(padding-right, $x);
+}