From 70fb39159f589e5259c395d60a0deaa8512ac389 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Fri, 30 Jul 2021 10:51:44 +0200
Subject: [PATCH] chore: split utility classes

---
 src/scss/_drawing.scss        | 18 +-----------------
 src/scss/_global.scss         | 10 ----------
 src/scss/_utils.scss          |  3 +++
 src/scss/style.scss           |  2 ++
 src/scss/utils/_a11y.scss     |  8 ++++++++
 src/scss/utils/_align.scss    | 14 ++++++++++++++
 src/scss/utils/_colorize.scss |  9 +++++++++
 src/scss/utils/_lists.scss    |  7 +++++++
 src/scss/utils/_sizing.scss   | 35 +++++++++++++++++++++++++++++++++++
 9 files changed, 79 insertions(+), 27 deletions(-)
 create mode 100644 src/scss/_utils.scss
 create mode 100644 src/scss/utils/_a11y.scss
 create mode 100644 src/scss/utils/_align.scss
 create mode 100644 src/scss/utils/_colorize.scss
 create mode 100644 src/scss/utils/_lists.scss
 create mode 100644 src/scss/utils/_sizing.scss

diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss
index b0eb9fa..f284286 100644
--- a/src/scss/_drawing.scss
+++ b/src/scss/_drawing.scss
@@ -13,17 +13,6 @@
 
 @import 'components/previews';
 
-.flex-that {
-  display: flex;
-  justify-content: space-between;
-}
-
-.bg {
-    @each $name, $color in list-colors() {
-        &-#{$name} { @include background-color(get-color($name)); }
-    }
-}
-
 strong.btn-fake {
   @include button($button_large);
   @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
@@ -43,15 +32,10 @@ a.article-nav-link-wrap {
     @include button-color($color-info);
 }
 
-.pigimg, .mb {
+.pigimg {
   padding-bottom:1.5rem;
 }
 
-.screen-reader-text {
-  visibility: collapse;
-  font-size:0;
-}
-
 nav.pagination {
   padding-bottom:1.5rem;
   .nav-links {
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index ca5b9c2..b13c04c 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -21,16 +21,6 @@ $color-header-back: get-color("skyblue");
     margin:auto;
 }
 
-.no-pills {
-    list-style:none;
-}
-
-.align {
-    &-center {text-align: center;}
-    &-left {text-align: left;}
-    &-right {text-align: right;}
-}
-
   /* ------------------ HEADERS ------------------- */
 
 #page-header {
diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss
new file mode 100644
index 0000000..4967096
--- /dev/null
+++ b/src/scss/_utils.scss
@@ -0,0 +1,3 @@
+/* 1. Utils
+** All the utilities class of the stylesheet
+*/
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 5256c58..3ed622a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -21,6 +21,8 @@
 
 @import 'core';
 
+@import 'utils';
+
 @import 'global';
 
 @import 'drawing';
diff --git a/src/scss/utils/_a11y.scss b/src/scss/utils/_a11y.scss
new file mode 100644
index 0000000..e4d5167
--- /dev/null
+++ b/src/scss/utils/_a11y.scss
@@ -0,0 +1,8 @@
+/* 1.0 - Accessibility classes
+ * Some classes to help accessibility
+**/
+
+.screen-reader-text {
+  visibility: collapse;
+  font-size:0;
+}
diff --git a/src/scss/utils/_align.scss b/src/scss/utils/_align.scss
new file mode 100644
index 0000000..e967d6a
--- /dev/null
+++ b/src/scss/utils/_align.scss
@@ -0,0 +1,14 @@
+/* 1.1 - Alignement classes
+ * Handle easily alignement and flexboxes
+**/
+
+.flex-that {
+  display: flex;
+  justify-content: space-between;
+}
+
+.align {
+    &-center {text-align: center;}
+    &-left {text-align: left;}
+    &-right {text-align: right;}
+}
diff --git a/src/scss/utils/_colorize.scss b/src/scss/utils/_colorize.scss
new file mode 100644
index 0000000..ea9f712
--- /dev/null
+++ b/src/scss/utils/_colorize.scss
@@ -0,0 +1,9 @@
+/* 1.2 - Colorization classes
+ * Colorize some aspect of a class
+**/
+
+.bg {
+    @each $name, $color in list-colors() {
+        &-#{$name} { @include background-color(get-color($name)); }
+    }
+}
diff --git a/src/scss/utils/_lists.scss b/src/scss/utils/_lists.scss
new file mode 100644
index 0000000..8d593cf
--- /dev/null
+++ b/src/scss/utils/_lists.scss
@@ -0,0 +1,7 @@
+/* 1.3 - List classes
+ * Handle more easily list
+**/
+
+.no-pills {
+    list-style:none;
+}
diff --git a/src/scss/utils/_sizing.scss b/src/scss/utils/_sizing.scss
new file mode 100644
index 0000000..2291c25
--- /dev/null
+++ b/src/scss/utils/_sizing.scss
@@ -0,0 +1,35 @@
+/* 1.3 - Sizing classes
+ * Handle sizing and margin
+**/
+
+.mb {
+  margin-bottom:$lineheight;
+}
+
+.mr {
+  margin-right:$lineheight;
+}
+
+.ml {
+  margin-left:$lineheight;
+}
+
+.mt {
+  margin-top:$lineheight;
+}
+
+.pb {
+  padding-bottom:$lineheight;
+}
+
+.pr {
+  padding-right:$lineheight;
+}
+
+.pl {
+  padding-left:$lineheight;
+}
+
+.pt {
+  padding-top:$lineheight;
+}