Create and apply header component (#2002)

* consolidate header component css into container file * remove redundant header css * update page files with new header component class names * remove left over comment * add about page link styling * add about page link styling * final header class names * resolve header spacing issues
hackforla · Aug 6, 2021 · 49f5724 · 49f5724
1 parent a4ef92d
commit 49f5724
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 631 deletions.
diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss
@@ -1,45 +1,25 @@
 /* This page is built using a mobile first method.  Plain tags apply to mobile. Breakpoints below for larger sizes. */
 
-.header-container--about-us {
-    display: flex;
-    justify-content: center;
-    flex-flow: column;
-    padding: 25px 15px 20px 15px;    
-}
+.header-link--about {
+    text-decoration: none;
+    font-weight: 700;
 
-.header-container--about-us h1 {
-  font-weight: 900;
-  margin-bottom: 30px;
+    &:link,
+    &:visited {
+      color: $color-black;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $color-red;
+    }
 }
 
 .donation-gif-box-shadow {
   box-shadow: 0px 8px 16px rgba(0,0,0,0.12);
 }
 
-.header-text--about-us {
-    font-size: 18px;
-    max-width: 500px;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
-
-    a {
-        text-decoration: none;
-        font-weight: 700;
-
-        &:link,
-        &:visited {
-          color: $color-black;
-        }
-
-        &:hover,
-        &:active,
-        &:focus {
-          color: $color-red;
-        }
-      }
-}
-
 // CSS Grid 
 .page-content-container-grid {
   display: grid;
@@ -599,16 +579,6 @@ a.anchor {
 
 // Below tablet - 768px
 @media #{$bp-below-tablet} {
-  .about-header-text-margin{
-    margin-bottom: 36px;
-
-    h1 {
-      margin-bottom: 28px;
-    }
-  }
-  .header-text--about-us {
-    font-size: 16px;
-  }
   .page-content-container-grid {
     margin-top: 0; 
   }
@@ -626,16 +596,6 @@ a.anchor {
 
 //Bigger than desktop - 960px
 @media #{$bp-desktop-up} {
-
-  .header-container--about-us {
-    flex-flow: row;
-    padding: 3rem 1rem 0 1rem;
-  } 
-
-  .about-header-text-margin {
-    margin-right: 100px;
-  }
-
   // The next two tags turn on and off the sticky nav sidebar
   .page-content-container-grid {
     grid-template-columns: 996px auto;

diff --git a/_sass/components/_communities-of-practice.scss b/_sass/components/_communities-of-practice.scss
@@ -1,82 +1,32 @@
-.header--communities {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  background: #fff;
-  height: fit-content;
-  font-family: "Roboto", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  align-items: center;
-  /*This page has a lot more text than the others, so it starts looking weird earlier*/
-  @media #{$bp-below-desktop} {
-    flex-direction: column;
-  }
-
-  .header-text--communities {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    p{
-      font-size: 18px;
-      max-width: 508px;
-      margin-top: 8px;
-      text-align: left;
-      @media #{$bp-below-tablet} {
-        max-width: 300px;
-        font-size: 16px;
-        }
-    }
-    h1 {
-      font-size: 48px;
-      @media #{$bp-below-tablet} {
-        font-size: 40px;
-        margin-bottom: 28px;
-      }
-      @media #{$bp-below-mobile} {
-        font-size: 32px;
-      }
-    }
-  }
-
-  .header-img--communities {
-    max-height: 240px;
-    margin-left: 80px;
-    @media #{$bp-below-desktop} {
-      margin: auto;
-
-    }
-    @media #{$bp-below-tablet} {
-      width:100%;
-    }
-  }
-
-  .header-self-invite--communities {
-    display:flex;
-    align-items: flex-start;
-    max-width: 508px;
-    margin-top: 31px;
-    @media #{$bp-below-tablet} {
-      max-width: 300px;
-      margin-bottom: 30px;
-    }
+.header-self-invite--communities {
+  display:flex;
+  align-items: flex-start;
+  max-width: 508px;
+  margin-top: 31px;
 
-    .alert--communities {
-      font-size: 16px;
-      font-weight: bold;
-      max-width: 450px;
-    }
-  }
   .self-invite-img {
     /*Note "margin-top: 15px" is needed to keep this img aligned with neighboring text*/
     margin-top: 15px;
     margin-right: 27px;
     width: 24px;
     height: 24px;
   }
+
+  .alert--communities {
+    font-size: 16px;
+    font-weight: bold;
+    max-width: 450px;
+    margin-top: 8px;
+    text-align: left;
+  }
+
+  @media #{$bp-below-tablet} {
+    max-width: 300px;
+    margin-bottom: 30px;
+  }
 }
 
+
 .content--communities {
   background: $color-pink;
   display: flex;

diff --git a/_sass/components/_credit-items.scss b/_sass/components/_credit-items.scss
@@ -11,87 +11,6 @@
   font-weight: normal;
 }
 
-.header-container--credits {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-
-  img {
-    max-height: 240px;
-  }
-
-  @media #{$bp-below-tablet}{
-    img {
-      max-height: 170px;
-    }
-  }
-
-  @media #{$bp-below-mobile} {
-    flex-direction: column;
-    align-items: center;
-    padding: 32px;
-  }
-}
-
-.credits-text-margin {
-  display: flex;
-  flex-direction: column;
-  margin-right: 80px;
-  p {
-    font-size: 18px;
-    max-width: 508px;
-    margin-top: 8px;
-    text-align: left;
-  }
-  h1 {
-    font-size: 48px;
-  }
-  @media #{$bp-below-tablet}{
-    h1 {
-      font-size: 2.5rem;
-    }
-  }
-  @media #{$bp-below-mobile} {
-    margin: auto;
-    margin-bottom: 36px;
-    h1 {
-      font-size: 2rem;
-      margin-bottom: 28px;
-    }
-    p {
-      padding: 0px;
-    }
-  }
-}
-
-.header-text {
-  font-size: 26px;
-  display: flex;
-  max-width: 895px;
-  text-align: center;
-  padding: 30px;
-  margin: 12px auto;
-  font-family: "Roboto" sans-serif;
-}
-
-.mobile-image {
-  @media #{$bp-below-mobile} {
-    padding: 0;
-  }
-}
-
-.credit-hero {
-  padding: 33px;
-  margin: 0px auto;
-  display: flex;
-  justify-content: space-evenly;
-
-  @media #{$bp-below-mobile} {
-    flex-direction: column;
-    text-align: -webkit-center;
-  }
-}
-
 .credits-item {
   margin: 15px;
   padding-bottom: 15px;

diff --git a/_sass/components/_join-us.scss b/_sass/components/_join-us.scss
@@ -6,48 +6,6 @@
   min-height: 100vh;
 }
 
-.header-container--join {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4rem 1rem;
-  height: fit-content;
-
-  .join-us-banner-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    h1 {
-      font-size: 24px;
-      padding-bottom: 28px;
-      @media #{$bp-mobile-up} {
-        font-size: 32px;
-      }
-    }
-
-    p {
-      font-size: 18px;
-      max-width: 300px;
-      text-align: left;
-      @media #{$bp-tablet-up} {
-        max-width: 500px;
-      }
-      @media #{$bp-mobile-up} {
-        font-size: 16px;
-        text-align: left;
-      }
-    }
-  }
-
-  img {
-    width: 80%;
-    max-width: 500px;
-    margin: auto;
-    padding-top: 20px;
-  }
-}
-
 .join-us-card-container {
   background: #f7f5f5;
   display: flex;
@@ -141,34 +99,4 @@
 
 /*---------
 | Desktop
------------*/
-
-@media #{$bp-desktop-up} {
-  .header-container--join {
-    flex-direction: row;
-    max-width: 1200px;
-    margin: 37px auto 0;
-
-    .join-us-banner-text {
-      width: 500px;
-      min-width: 300px;
-      margin: auto 5rem auto 8rem;
-
-      h1 {
-        font-size: 48px;
-        padding-bottom: 0;
-      }
-
-      p {
-        font-size: 18px;
-        max-width: 508px;
-      }
-    }
-
-    img {
-      max-width: 385px;
-      margin: auto 1rem auto 0;
-      padding: 0 15px;
-    }
-  }
-}
+-----------*/