From 869c4b459f40ecb7c9c89c0233dddc8e33b06a0a Mon Sep 17 00:00:00 2001
From: popcor255 <popcor255@gmail.com>
Date: Wed, 6 May 2020 13:04:52 -0400
Subject: [PATCH] =?UTF-8?q?Add=20style=20to=20make=20website=20responsive.?=
 =?UTF-8?q?=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     | 28 ++++++++++++++++++++++++++++
 assets/scss/_variables_project.scss  |  1 +
 layouts/partials/privacy-notice.html |  2 +-
 layouts/shortcodes/blocks/cover.html |  2 +-
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 assets/scss/_styles_project.scss

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
new file mode 100644
index 0000000..7d81387
--- /dev/null
+++ b/assets/scss/_styles_project.scss
@@ -0,0 +1,28 @@
+
+/*
+    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
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index cd49e05..4675a69 100644
--- a/assets/scss/_variables_project.scss
+++ b/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
diff --git a/layouts/partials/privacy-notice.html b/layouts/partials/privacy-notice.html
index 57b8ec1..487cbf4 100644
--- a/layouts/partials/privacy-notice.html
+++ b/layouts/partials/privacy-notice.html
@@ -1,4 +1,4 @@
-<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>
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
index e75cc04..3031b68 100644
--- a/layouts/shortcodes/blocks/cover.html
+++ b/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">
-- 
GitLab