Updated NewFolder

EzequielBruni · Mar 10, 2022 · 0073dce · 0073dce
1 parent ef6fca4
commit 0073dce
Show file tree

Hide file tree

Showing 6 changed files with 303 additions and 213 deletions.
diff --git a/_colors.scss b/_colors.scss
@@ -1,33 +1,69 @@
+
 /* GLOBAL COLOR VARIABLES */
+:root {
+
+    --primary-color: rgb(219,8,138);
+
+    --secondary-color: rgb(117, 19, 79);
+
+    --tertiary-color: rgb(167,218,212);
 
-$primary-color: rgb(219,8,138) !default;
+    --background-color-1: rgb(229, 247, 244);
 
-$secondary-color: desaturate(darken($primary-color, 20%), 20%) !default;
+    --background-color-2: rgb(46,65,72);
 
-$tertiary-color: rgb(167,218,212) !default;
+    --text-color-1: rgb(46,65,72);
 
-$light-background: lighten($tertiary-color, 20%) !default;
+    --text-color-2: rgb(255,255,255);
+
+    --success-color: rgb(18, 194, 62);
+
+    --mildwarning-color: rgb(255, 81, 0);
+
+    --warning-color: rgba(255, 0, 0, 1);
+}
 
-$dark-background: rgb(46,65,72) !default;
+    // The colors for dark-mode users
+    @media (prefers-color-scheme: dark) {
+        :root {
 
-$dark-text: rgb(46,65,72) !default;
+            --primary-color: rgb(245, 84, 183);
 
-$light-text: rgb(255,255,255)  !default;
+            --secondary-color: rgb(150, 22, 101);
+
+            --tertiary-color: rgb(167,218,212);
+
+            --background-color-1: rgb(37, 51, 48);
+
+            --background-color-2: rgb(46,65,72);
 
-$success-color: rgb(18, 194, 62) !default;
+            --body-background-dark: rgb(15, 18, 19);
+
+            --text-color-1: rgb(255,255,255);
+
+            --text-color-2: rgb(172, 202, 197);
+
+            --success-color: rgb(18, 194, 62);
+
+            --mildwarning-color: rgb(255, 81, 0);
+
+            --warning-color: rgb(255, 45, 45);
+        }
 
-$mildwarning-color: rgb(255, 81, 0) !default;
+        body {
+            background: var(--body-background-dark);
+        }
 
-$warning-color: rgba(255, 0, 0, 1) !default;
+    }
 
 // Selection colors
 
 ::-moz-selection { /* Code for Firefox */
-  color: $light-text;
-  background: $secondary-color;
+  color: var(--text-color-2);
+  background: var(--secondary-color);
 }
 
 ::selection {
-  color: $light-text;
-  background: $secondary-color;
+  color: var(--text-color-2);
+  background: var(--secondary-color);
 }
diff --git a/_content-components.scss b/_content-components.scss
@@ -1,41 +1,48 @@
-/* Preformatted Text */
-
-pre {
-  background: $dark-background;
-  color: $light-text;
-  font-size: .9rem;
-  padding: 1rem;
-
-  box-shadow: inset 0px 0px .5em 0px rgba(0,0,0,0.75);
-}
 
 
 /* Code Snippets */
 
 code {
-  font-family: $monospace-font;
+    font-family: var(--monospace-font);
+    background: var(--background-color-1);
+    padding: .3em;
+    font-size: .9em;
+    box-shadow: inset 0px 0px .2em 0px rgba(0,0,0,0.3);
+    border: 1px solid var(--tertiary-color);
 }
 
-pre code {
-  display: block;
-}
+    p code {
+        font-size: var(--small-text);
+    }
+
+/* Preformatted Text and Code */
+
+pre {
+  background: var(--background-color-2);
+  color: var(--text-color-2);
+  font-size: .9rem;
+  padding: 1rem;
+  box-shadow: inset 0px 0px .5em 0px rgba(0,0,0,0.75);
 
-p code {
-  background: $light-background;
-  padding: .3em;
-  font-size: .9em;
-  box-shadow: inset 0px 0px .2em 0px rgba(0,0,0,0.3);
+  code {
+      display: block;
+      background: transparent;
+      border: 0px;
+      box-shadow: none;
+  }
 }
 
 
+
+
 /* IMAGES */
 
 img {
   width: 100%;
 }
 
 .content img {
-  border-left: .5rem solid $tertiary-color;
+  border-left: .5rem solid var(--tertiary-color);
 }
 
 // Focused Images are designed to make pictures stand out a little more
@@ -53,33 +60,31 @@ img {
 // Captioned Images
 
 .content figure {
-  background-color: $dark-background;
-  font-family: $monospace-font;
+  background-color: var(--background-color-2);
+  font-family: var(--monospace-font);
 
   img {
-    border: .5rem solid $dark-background;
+    border: .5rem solid var(--background-color-2);
     border-bottom: 0;
   }
 
   figcaption {
     padding: 0 .5rem .3rem .5rem;
     font-size: .9em;
-    color: $light-text;
+    color: var(--text-color-2);
   }
 }
 
 
 
-
-
 /* ALERT BOXES */
 
 // Some general styles for alert boxes.
 
 .alert {
-  background-color: $light-background;
+  background-color: var(--background-color-1);
   padding: 1rem 1rem 1rem 2.5rem;
-  border-left: .3rem solid $tertiary-color;
+  border-left: .3rem solid var(--tertiary-color);
 
   background-repeat: no-repeat;
   background-position: -1rem -1rem;
@@ -95,48 +100,68 @@ img {
   }
 
   a:hover {
-    color: $dark-background;
+    color: var(--background-color-2);
   }
 
   code {
-    background: $dark-background;
-    color: $light-text;
+    background: var(--background-color-2);
+    color: var(--text-color-2);
   }
 
   &.generalinfo {
-    border-color: $tertiary-color;
+    border-color: var(--tertiary-color);
     @include icon-search-eye;
 
     h3, h4, h5 {
-      color: $tertiary-color;
+      color: var(--text-color-1);
     }
 
   }
 
   &.mild {
-    border-color: $mildwarning-color;
+    border-color: var(--mildwarning-color);
     @include icon-warning-outline;
 
     h3, h4, h5 {
-      color: $mildwarning-color;
+      color: var(--mildwarning-color);
     }
   }
 
   &.success {
-    border-color: $success-color;
+    border-color: var(--success-color);
     @include icon-checkmark-filled;
 
     h3, h4, h5 {
-      color: $success-color;
+      color: var(--success-color);
     }
   }
 
   &.warning {
-    border-color: $warning-color;
+    border-color: var(--warning-color);
     @include icon-warning-filled;
 
     h3, h4, h5 {
-      color: $warning-color;
+      color: var(--warning-color);
     }
   } 
-}
+}
+
+    @media (prefers-color-scheme: dark) {
+        .alert {
+            &.generalinfo {
+                @include icon-search-eye-darkmode;
+            }
+
+            &.mild {
+                @include icon-warning-outline-darkmode;
+            }
+
+            &.success {
+                @include icon-checkmark-filled-darkmode;
+            }
+
+            &.warning {
+                @include icon-warning-filled-darkmode;
+            } 
+        }
+    }
diff --git a/_forms.scss b/_forms.scss
@@ -7,20 +7,20 @@
   margin-bottom: 1.5rem;
 }
 
-// Turn every immediatechild element of the form into its own block-level element
+// Turn every immediate child element of the form into its own block-level element
 
 form.content > *, .content form > * {
   padding: 1rem;
   display: block;
-  border-top: 1px solid $tertiary-color;
+  border-top: 1px solid var(--tertiary-color);
 }
 
 // Basic styles for the most common form elements
 
 input[type=text], input[type=number], input[type=password], input[type=file], textarea, select {
   display: block;
   box-sizing: border-box;
-  font-family: $monospace-font;
+  font-family: var(--monospace-font);
 }
 
 .content > label, .content form > label {
@@ -32,7 +32,7 @@ input[type=text], input[type=number], input[type=password], input[type=file], te
     font-size: .8rem;
     padding: .3rem;
     background: white;
-    border: 1px solid $secondary-color;
+    border: 1px solid var(--secondary-color);
     box-shadow: inset 0px 0px .15em 0px rgba(0,0,0,0.3);
     border-radius: .3rem;
     margin-top: .5rem;
@@ -47,7 +47,7 @@ input[type=text], input[type=number], input[type=password], input[type=file], te
 // Styles for fieldsets, checkboxes, and radio boxes
 
 .content fieldset, .content form fieldset {
-  border-top: 1px solid $tertiary-color;
+  border-top: 1px solid var(--tertiary-color);
 
   legend {
     font-weight: bold;
@@ -59,18 +59,18 @@ input[type=checkbox], input[type=radio] {
   margin-right: .3rem;
 
   & + label {
-    font-family: $monospace-font;
+    font-family: var(--monospace-font);
   }
 }
 
 // Styles for submit and button elements
 
 input[type=submit], button {
-  background-color: $secondary-color;
-  border: 1px solid $dark-background;
-  color: $light-text;
+  background-color: var(--secondary-color);
+  border: 1px solid var(--background-color-2);
+  color: var(--text-color-2);
   border-radius: .3rem;
   font-size: 1em;
   padding: .5em;
-  font-family: $monospace-font;
+  font-family: var(--monospace-font);
 }