style: Implements nord color scheme

* Lists available colors in the _variables.scss file.
* Adds a _colors.scss file to set the colors.
* Sets the colors.
* Sets the width of container larger, removes header and footer borders,
  to improve display when using different colors.
* Fixes #7.

Co-Authored-by: Igor Milhit <igor@milhit.ch>

assets/scss/_colors.scss

@@ -0,0 +1,42 @@
+/******************
+ * SETTING COLORS *
+ ******************/
+
+html,
+body,
+.main-header > .container,
+.main-footer > .container {
+  background-color: $the-darkiest-polar;
+}
+
+.container {
+  background-color: $darkest-polar;
+  color: $snow-storm-lightest-grey;
+}
+
+a,
+a:hover,
+a:active {
+  color: $frost-green;
+}
+
+a:visited {
+  color: $frost-grey-blue;
+}
+
+.main-header,
+.main-header a,
+.main-footer,
+.main-footer a {
+  color: $snow-storm-lighter-grey;
+}
+
+code,
+pre {
+  background-color: $darker-polar;
+}
+
+figure {
+  background-color: $darkest-polar;
+  box-shadow: 0px 2px 10px 5px $the-darkiest-polar;
+}

assets/scss/_footer.scss

@@ -9,8 +9,6 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  border-top: solid .1em #e1e1e1;
-  padding-top: 1em;
   margin-bottom: 1em;
   }
   li {

assets/scss/_header.scss

@@ -8,9 +8,6 @@
   section {
     display: flex;
     flex-direction: column;
-    // align-items: center;
-    border-bottom: solid .1em #e1e1e1;
-    padding-bottom: 1em;
   }
   header {
     flex-grow: 1;

assets/scss/_layout.scss

@@ -5,8 +5,11 @@
 */
 
 .container {
-  max-width: 35rem; /* 960px */
+  width: 95%;
+  max-width: 46rem;           // 920px
   margin: 0 auto;
+  padding: .5rem;
+  border-radius: .5rem;
 }
 
 body {

assets/scss/_medias.scss

@@ -15,7 +15,6 @@
 }
 
 figure {
-  background-color: lightgrey;
   padding: .4rem;
   border-radius: 5px;
   margin-right: .4rem;

assets/scss/_variables.scss

@@ -1,2 +1,58 @@
+/******************
+ *     FONT       *
+ ******************/
+
 $font-size-base: 1.25rem;
 $font-size-small: 1rem;
+
+/******************
+ *    COLORS      *
+ *                *
+ * Based on Nord  *
+ *  color scheme  *
+ *                *
+ ******************/
+
+$nord0: #2e3440;            // Polar night, darkest grey
+$nord1: #3b4252;            // Polar night, darker grey
+$nord2: #434c5e;            // Polar night, dark grey
+$nord3: #4c566a;            // Polar night, lighter grey
+$nord4: #d8dee9;            // Snow storm, origin, light grey
+$nord5: #e5e9f0;            // Snow storm, brighter light grey
+$nord6: #eceff4;            // Snow storm, the brightest one
+$nord7: #8fbcbb;            // Frost, frozen polar water
+$nord8: #88c0d0;            // Frost, brighter, pure and clear ice
+$nord9: #81a1c1;            // Frost, darker, arctic waters
+$nord10: #5e81ac;           // Frost, darkest, deep arctic ocean
+$nord11: #bf616a;           // Aurora, red
+$nord12: #d08770;           // Aurora, orange
+$nord13: #ebcb8b;           // Aurora, yellow
+$nord14: #a3be8c;           // Aurora, green
+$nord15: #b48ead;           // Aurora, purple
+
+
+// Polar, translated into something easy to remember, hopefully
+$darkest-polar: $nord0;
+$darker-polar: $nord1;
+$dark-polar: $nord2;
+$lighter-polar: $nord3;
+$the-darkiest-polar: darken($darkest-polar, 4%);
+
+// Snow storm, translated into something easy to remember, hopefully
+$snow-storm-light-grey: $nord4;
+$snow-storm-lighter-grey: $nord5;
+$snow-storm-lightest-grey: $nord6;
+
+//Frost, translated into something easy to remember, hopefully
+$frost-green: $nord7;
+$frost-lighter-green: $nord8;
+$frost-grey-blue: $nord9;
+$frost-deep-blue: $nord10;
+
+//Aurora, translated into something easy to remember, hopefully
+$aurora-red: $nord11;
+$aurora-orange: $nord12;
+$aurora-yellow: $nord13;
+$aurora-green: $nord14;
+$aurora-purple: $nord15;
+

assets/scss/main.scss

@@ -5,6 +5,7 @@
 */
 
 @import '_variables.scss';
+@import '_colors.scss';
 @import '_fonts.scss';
 @import '_footer.scss';
 @import '_header.scss';
@@ -21,7 +22,6 @@
 */
 
 code, pre {
-  background-color: lightgrey;
   border-radius: 5px;
   padding: .2rem;
 }