Add FontAwesome and Restructure Theme SASS

4 files changed, 21 insertions, 302 deletions

diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss
index b229109..7c6109a 100644
--- a/sass/themes/_auto.scss
+++ b/sass/themes/_auto.scss
@@ -1,23 +1,17 @@
 :root {
-  // Typography
   // Regular Fonts used by default:
   --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
   // Monospace Fonts used for code:
   --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-  --lh: 1.5; //line-height
-  --lhh: 1.2; //line-height headers
-  --fs: 1rem; //font-size
-  --fw: 400; //font-weight
-  --fh: 700; //font-weight h1-h6
 
   // Colors
-  --f1: #555; //font color 1 bbb ccc
-  --f2: #333; //font color 2 fff eee
+  --f1: #555; //font color 1
+  --f2: #333; //font color 2
 
-  --c1: #fff; //color 1 111
-  --c2: #eee; //color 2 222
-  --c3: #ddd; //color 3 333
-  --c4: #777; //color 4 888
+  --c1: #fff; //color 1
+  --c2: #eee; //color 2
+  --c3: #ddd; //color 3
+  --c4: #777; //color 4
 
   --a1: #c40; //accent color 1 link
   --a2: #e60; //accent color 2 hover,focus
@@ -25,40 +19,6 @@
 
   --cg: #483; //ins green
   --cr: #d33; //del red
-
-  // Spacings
-  --s1: .5rem;
-  --s2: 1rem;
-  --rc: .5rem; //radius corners
-
-  // Borders
-  --br: 0.25rem; //border radius
-  --bw: 0.0625rem; //border width
-  --ow: 0.1875rem; //outline width
-
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --fs: 1rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --fs: 1.04rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --fs: 1.12rem;
-      }
-    }
-  }
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -75,33 +35,3 @@
     --a3: #fb0; //accent color 3 h1-h2 hover,focus
     }
 }
-
-// Responsives spacings
-@if $enable-responsive-spacings {
-  // Sectionning
-  body > header,
-  body > main,
-  body > footer,
-  section {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --s1: .5rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --s1: .6rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --s1: .7rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --s1: .8rem;
-      }
-    }
-  }
-}
diff --git a/sass/themes/_bluelight.scss b/sass/themes/_bluelight.scss
index d53e0f7..1b01b8f 100644
--- a/sass/themes/_bluelight.scss
+++ b/sass/themes/_bluelight.scss
@@ -1,18 +1,14 @@
 :root {
-    // Typography
+    // Regular Fonts used by default:
     --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    // Monospace Fonts used for code:
     --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-    --lh: 1.5; //line-height
-    --lhh: 1.2; //line-height headers
-    --fs: 1rem; //font-size
-    --fw: 400; //font-weight
-    --fh: 700; //font-weight h1-h6
 
     // Colors
-    --f1: #1a1a1a; //font color 1 bbb ccc
-    --f2: #1a2050; //font color 2 fff eee
+    --f1: #1a1a1a; //font color 1
+    --f2: #1a2050; //font color 2
 
-    --c1: #eeeeee; //color 1
+    --c1: #fafafa; //color 1
     --c2: #cae1f0; //color 2
     --c3: #062671; //color 3
     --c4: #03143c; //color 4
@@ -23,75 +19,4 @@
 
     --cg: #483; //ins green
     --cr: #d33; //del red
-
-    // Spacings
-    --s1: .5rem;
-    --s2: 1rem;
-    --rc: .5rem; //radius corners
-
-    // Borders
-    --br: 0.25rem; //border radius
-    --bw: 0.0625rem; //border width
-    --ow: 0.1875rem; //outline width
-
-    // Responsive typography
-    @if $enable-responsive-typography {
-        @if map-get($breakpoints, "sm") {
-            @media (min-width: map-get($breakpoints, "sm")) {
-                --fs: 1rem;
-            }
-        }
-
-        @if map-get($breakpoints, "md") {
-            @media (min-width: map-get($breakpoints, "md")) {
-                --fs: 1.04rem;
-            }
-        }
-
-        @if map-get($breakpoints, "lg") {
-            @media (min-width: map-get($breakpoints, "lg")) {
-                --fs: 1.08rem;
-            }
-        }
-
-        @if map-get($breakpoints, "xl") {
-            @media (min-width: map-get($breakpoints, "xl")) {
-                --fs: 1.12rem;
-            }
-        }
-    }
 }
-
-// Responsives spacings
-@if $enable-responsive-spacings {
-
-    // Sectionning
-    body>header,
-    body>main,
-    body>footer,
-    section {
-        @if map-get($breakpoints, "sm") {
-            @media (min-width: map-get($breakpoints, "sm")) {
-                --s1: .5rem;
-            }
-        }
-
-        @if map-get($breakpoints, "md") {
-            @media (min-width: map-get($breakpoints, "md")) {
-                --s1: .6rem;
-            }
-        }
-
-        @if map-get($breakpoints, "lg") {
-            @media (min-width: map-get($breakpoints, "lg")) {
-                --s1: .7rem;
-            }
-        }
-
-        @if map-get($breakpoints, "xl") {
-            @media (min-width: map-get($breakpoints, "xl")) {
-                --s1: .8rem;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/sass/themes/_dark.scss b/sass/themes/_dark.scss
index 1fef7c3..9c4519b 100644
--- a/sass/themes/_dark.scss
+++ b/sass/themes/_dark.scss
@@ -1,12 +1,8 @@
 :root {
-  // Typography
+  // Regular Fonts used by default:
   --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+  // Monospace Fonts used for code:
   --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-  --lh: 1.5; //line-height
-  --lhh: 1.2; //line-height headers
-  --fs: 1rem; //font-size
-  --fw: 400; //font-weight
-  --fh: 700; //font-weight h1-h6
 
   // Colors
   --f1: #ccc; //font color 1
@@ -23,68 +19,4 @@
 
   --cg: #483; //ins green
   --cr: #d33; //del red
-
-  // Spacings
-  --s1: .5rem;
-  --s2: 1rem;
-  --rc: .5rem; //radius corners
-
-  // Borders
-  --br: 0.25rem; //border radius
-  --bw: 0.0625rem; //border width
-  --ow: 0.1875rem; //outline width
-
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --fs: 1rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --fs: 1.04rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --fs: 1.12rem;
-      }
-    }
-  }
-}
-
-// Responsives spacings
-@if $enable-responsive-spacings {
-  // Sectionning
-  body > header,
-  body > main,
-  body > footer,
-  section {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --s1: .5rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --s1: .6rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --s1: .7rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --s1: .8rem;
-      }
-    }
-  }
 }
diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss
index 1848f4e..0a51439 100644
--- a/sass/themes/_light.scss
+++ b/sass/themes/_light.scss
@@ -1,21 +1,17 @@
 :root {
-  // Typography
+  // Regular Fonts used by default:
   --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+  // Monospace Fonts used for code:
   --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-  --lh: 1.5; //line-height
-  --lhh: 1.2; //line-height headers
-  --fs: 1rem; //font-size
-  --fw: 400; //font-weight
-  --fh: 700; //font-weight h1-h6
 
   // Colors
-  --f1: #555; //font color 1 bbb ccc
-  --f2: #333; //font color 2 fff eee
+  --f1: #555; //font color 1
+  --f2: #333; //font color 2
 
-  --c1: #fff; //color 1 111
-  --c2: #eee; //color 2 222
-  --c3: #ddd; //color 3 333
-  --c4: #777; //color 4 888
+  --c1: #fff; //color 1
+  --c2: #eee; //color 2
+  --c3: #ddd; //color 3
+  --c4: #777; //color 4
 
   --a1: #c40; //accent color 1 link
   --a2: #e60; //accent color 2 hover,focus
@@ -23,68 +19,4 @@
 
   --cg: #483; //ins green
   --cr: #d33; //del red
-
-  // Spacings
-  --s1: .5rem;
-  --s2: 1rem;
-  --rc: .5rem; //radius corners
-
-  // Borders
-  --br: 0.25rem; //border radius
-  --bw: 0.0625rem; //border width
-  --ow: 0.1875rem; //outline width
-
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --fs: 1rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --fs: 1.04rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --fs: 1.12rem;
-      }
-    }
-  }
-}
-
-// Responsives spacings
-@if $enable-responsive-spacings {
-  // Sectionning
-  body > header,
-  body > main,
-  body > footer,
-  section {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --s1: .5rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --s1: .6rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --s1: .7rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --s1: .8rem;
-      }
-    }
-  }
 }