From d01e5aa1252ecfbef4b70f8ff8668db9780650e6 Mon Sep 17 00:00:00 2001
From: NathanDuggal <ndugga1001@gmail.com>
Date: Tue, 26 Apr 2022 21:53:46 -0700
Subject: [PATCH] colors and parallax effect in subpages

---
 _includes/header.html      |  2 +-
 _layouts/page.html         |  2 +-
 _sass/team3128/header.scss |  3 ++-
 _sass/team3128/main.scss   | 39 ++++++++++++++++++++++++++++++++++++--
 css/main.scss              | 13 +++++++------
 5 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 74de65d..d56be27 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,5 @@
 <header class="site-header">
-    <div style="display: flex; flex-direction: row; align-items: center; height: 70px; margin: 5px; padding: 0px 4px;">
+    <div style="display: flex; flex-direction: row; align-items: center; height: 70px; margin-bottom: 5px; padding: 0px 4px;">
         <a href="{{ site.baseurl }}/" style="flex: auto 1 0">
             <img style="width: 90px;" src="/assets/header/logo.png" />
             
diff --git a/_layouts/page.html b/_layouts/page.html
index 9bdc3de..987314d 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<img id="pageimage" src="{% if page.headerimage %}{{ page.headerimage }}{% else %}/assets/page_headers/standard.jpeg{% endif %}" />
+<div class="parallax"></div>
 
 {% if page.showtitle != false %}
 <div>
diff --git a/_sass/team3128/header.scss b/_sass/team3128/header.scss
index f8c2b11..3e64f3f 100644
--- a/_sass/team3128/header.scss
+++ b/_sass/team3128/header.scss
@@ -5,7 +5,8 @@
     background: $navy;
     z-index: 999;
 
-    position: relative;
+    position: sticky;
+    top: 0;
 }
 
 .site-nav {
diff --git a/_sass/team3128/main.scss b/_sass/team3128/main.scss
index 2912603..2ab5e21 100644
--- a/_sass/team3128/main.scss
+++ b/_sass/team3128/main.scss
@@ -84,7 +84,7 @@ body {
 }
 
 .button {
-  align: center;
+  text-align: center;
   padding: 6px;
   color:  white;
   font-weight: 600;
@@ -187,7 +187,7 @@ body {
   margin-top: 15px;
   margin-bottom: 15px;
 
-  background: $royal;
+  background: $navy;
 }
 
 
@@ -232,3 +232,38 @@ table {
     display: none;
   }
 }
+
+.parallax {
+  /* The image used */
+  background-image: url("/assets/page_headers/standard.jpeg");
+
+  /* Set a specific height */
+  min-height: 500px;
+
+  /* Create the parallax scrolling effect */
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+@media only screen and (max-width: 1555px) and (min-width: 1100px) {
+  .parallax {
+    min-height: 300px;
+  }
+}
+
+@media only screen and (max-width: 1100px){
+  .parallax {
+    background-size: cover;
+    min-height: 300px;
+  }
+}
+
+// mobile devices only
+@media only screen and (max-width: 1100px) and (min-height: 1000px){
+  .parallax {
+    background-size: cover;
+    background-position: -1400px -200px;
+  }
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index d47e1d2..8be8caf 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -13,13 +13,14 @@ $base-line-height: 1.5;
 
 $spacing-unit: 30px;
 
-$navy:             #1b1464;
-$royal:            #1b347e;
-$light:            #1b3a98;
-$bright:           #2a7ae2;
+$midnight:         #000137;
+$navy:             #02055A;
+$royal:            #02198B;
+$light:            #253DA1;
+$bright:           #B0DBF1;
 
 $text-color:       #111;
-$background:       $navy;
+$background:       $midnight;
 
 $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);
@@ -61,4 +62,4 @@ $on-laptop:        800px;
         "team3128/homepage",
         "team3128/header",
         "team3128/subpages"
-;
+;
\ No newline at end of file