Add style to make website responsive. 🎨

Move styles from _variables to _styles_project so it easier to maintain styles. Privacy notice banner was offset was not visible when site was docked to partial view. This allows a user to view the privacy notice properly. Add styling to takton banner hero logo. Logo breaks flow. Chaning the css to fix this issue. Added var to scss to increase readability.

assets/scss/_styles_project.scss

+
+/*
+    Styling for privacy notice watermark in privacy-notice.html
+*/
+#privacy-notice {
+    background-color: rgba(84, 73, 75, 0.9); 
+    position: fixed; 
+    bottom: 0%; 
+    right: 0%; 
+    width: 500px; 
+    min-height: 10rem;
+    box-shadow: -8px -8px 8px 0 rgba(0, 0, 0, 0.3), 2px -6px 20px 0 rgba(0, 0, 0, 0.2); 
+    z-index: 1;
+}
+
+/* 
+    Styling for mobile:
+*/
+@media only screen and (max-width: $mobile-width) {
+    #banner-hero-logo {
+        display: none
+    }
+
+    #privacy-notice {
+        width: 100vw;
+    }
+    
+}
\ No newline at end of file

assets/scss/_variables_project.scss

@@ -8,3 +8,4 @@ $td-fonts-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxyge
 $td-enable-google-fonts: false;
 $light: #929292 !default;
 $dark: #333 !default;
+$mobile-width: 767px;
\ No newline at end of file

layouts/partials/privacy-notice.html

-<div id="privacy-notice" style="background-color: rgba(84, 73, 75, 0.9); position: fixed; bottom: 40px; right: 0%; width: 60%; min-height: 160px; box-shadow: -8px -8px 8px 0 rgba(0, 0, 0, 0.3), 2px -6px 20px 0 rgba(0, 0, 0, 0.2);">
+<div id="privacy-notice">
     <div class="row ml-4 mt-3 mb-3">
       <div class="col-11">
         <p class="h5 text-white">This website uses cookies</p>

layouts/shortcodes/blocks/cover.html

@@ -25,7 +25,7 @@
 {{ end }}
 <section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
   <div class="container td-overlay__inner">
-    <img class="hero-logo" src="images/tekton-horizontal-color.png">
+    <img id="banner-hero-logo" class="hero-logo" src="images/tekton-horizontal-color.png">
     <div class="row">
       <div class="col-6">
         <div class="text-left">