update current theming of the website to reflect new logo and colors

_includes/footer.html

@@ -2,7 +2,7 @@
 
     <div class="wrapper">
 
-      <img class="footer-heading" src="{{site.baseurl}}/assets/images/logo-cryostat-3-horizontal.svg">
+      <img class="footer-heading" src="{{site.baseurl}}/assets/images/cryostat_logo_hori_rgb_default.svg">
 
       <div class="footer-col-wrapper">
         <div class="footer-col footer-col-1">

_includes/head.html

@@ -7,4 +7,7 @@
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
   {%- feed_meta -%}
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 </head>

_includes/header.html

@@ -5,7 +5,7 @@
       {%- assign page_paths = site.header_pages | default: default_paths -%}
       {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
       <div class="site-title logo-title">
-        <a href="{{ "/" | relative_url }}"><img src="{{site.baseurl}}/assets/images/logo-cryostat-3-horizontal.svg"></a>
+        <a href="{{ "/" | relative_url }}"><img src="{{site.baseurl}}/assets/images/cryostat_logo_hori_rgb_reverse.svg"></a>
       </div>
       {%- if titles_size > 0 -%}
         <nav class="site-nav">
@@ -19,7 +19,7 @@
           </label>
 
           <div class="trigger">
-              <a class="header-link page-link" href="/get-started/">Get Started</a>
+              <a class="page-link" href="/get-started/">Get Started</a>
               <a class="page-link" href="/guides/">Guides</a>
               <a class="page-link" href="/blog/">Blog</a>
           </div>

_sass/core/colors.scss

@@ -7,49 +7,17 @@ It does not contain the YAML front matter and has no corresponding output file i
 */
 
 // CRYOSTAT COLORS
-$cryostat-blue: #0499C5;
-// RED HAT CORPORATE COLORS
 
-$red: #CC0000;
-$dark-red: #A30000;
-$darker-red: #820000;
-$black : #000000;
-$white : #FFFFFF;
-
-// RED HAT SECONDARY COLORS
-$blue: #004153;
-$light-blue: #A3DBE8;
-$dark-gray: #4C4C4C;
-$light-gray: #DCDCDC;
-
-// RED HAT ACCENT COLORS
-$accent-blue: #00b9E4;
-$accent-purple: #3B0083;
-$accent-yellow: #F0AB00;
-$accent-green: #92D400;
-$accent-teal: #007A87;
-
-
-// RED HAT PRODUCT COLORS
+$cryostat-blue-0: #eff8ff;
+$cryostat-blue-1: #CAE9FF;
+$cryostat-blue-2: #95C9E9;
+$cryostat-blue-3: #5FA8D3;
+$cryostat-blue-4: #1B4965;
 
-$storage-yellow: #f0ab00;
-$storage-orange: #ec7a08;
-$infrastructure-blue: #00b9e4;
-$infrastructure-dark-blue: #0088ce;
-$applicationdev-green: #92d400;
-$applicationdev-dark-green: #3f9c35;
 
-// Other colors 
-$link : #0000EE;
-$link-visited : #551A8B;
-
-$orange: #E37B40;
-$dark-orange: #85372C;
-$yellow: #F0CA4D;
-$dark-yellow: #90792E;
-$teal: #46B29D;
-$dark-blue: #1E2E37;
-$dark-teal: #2A6B5E;
+// Base Colors
+$black : #000000;
+$white : #FFFFFF;
 
 //Grayscale
 $gray-0 : #EFEFEF;
@@ -58,12 +26,14 @@ $gray-2 : #555555;
 $gray-3 : #333333;
 $gray-4 : #222222;
 
-
 // Alternative spelling
 $grey-0 : #EFEFEF;
 $grey-1 : #AAAAAA;
 $grey-2 : #555555;
 $grey-3 : #333333;
 $grey-4 : #222222;
-$dark-grey: #4C4C4C;
-$light-grey: #DCDCDC;
+
+
+// Hyperlink
+$link : #1B4965;
+$link-hover : #5FA8D3;

_sass/core/cryostat.scss

@@ -1,16 +1,51 @@
+h1 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 900;
+  color: $cryostat-blue-4;
 
-.logo-title {
-  width: 100%;
-  max-width: 200px;
 }
 
-.cryostat-header {
-  margin-top: .5em;
-  margin-bottom: .5em;
+h2 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+}
+
+
+h3 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 600;
+}
+
+
+h4 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 500;
+}
+
+
+h5 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+}
+
+
+h6 {
+font-family: 'Montserrat', sans-serif;
+  font-weight: 800;}
+
+p {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
 }
 
-.site-nav {
-  margin-top: .25em;
+label {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+}
+
+.logo-title {
+  width: 100%;
+  max-width: 200px;
 }
 
 .footer-heading {
@@ -22,12 +57,19 @@
 
 .cryostat-heading-1 {
   @extend .page-heading;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 900;
+  color: $cryostat-blue-4;
+
 }
 
 .cryostat-blurb {
   display: inline-block;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 900;
   text-align: center;
   margin-top: 2em;
+  color: $white;
 }
 
 .cryostat-blurb-top {
@@ -38,9 +80,24 @@
 .cryostat-heading-2 {
   padding-bottom: 1em;
   margin-bottom: 2em;
-  border-bottom: 1px solid $grey-0;
+  border-bottom: 1px solid ;
 }
 
+a {
+  color: $link;
+  text-decoration: underline;
+
+ &:visited {
+    color: darken($link, 15%);
+    }
+
+  &:hover, &:active, &:focus {
+    color: $link-hover;
+    } 
+
+}
+
+
 .footer-col-1 {
   width: -webkit-calc(45% - (#{$spacing-unit} / 2));
   width:         calc(45% - (#{$spacing-unit} / 2));
@@ -56,6 +113,19 @@
   width:         calc(40% - (#{$spacing-unit} / 2));
 }
 
+.site-footer {
+  background-color: $cryostat-blue-0;
+  border-top: 1px solid $cryostat-blue-1;
+
+  a {
+    color: $cryostat-blue-4;
+    text-decoration: underline;}
+}
+
+.footer-col-wrapper {
+  color: $cryostat-blue-4;
+}
+
 details {
   padding-top: 0.8em;
   padding-bottom: 0.8em;
@@ -71,14 +141,13 @@ details > figure > a > img {
 }
 
 .page-link {
-  color: $cryostat-blue !important;
   font-size: 1.25em;
 }
 
 .primary-cta-button {
-  color: $cryostat-blue !important;
-  background-color: $white;
-  border: 2px solid $cryostat-blue;
+  color: $cryostat-blue-4 !important;
+  background-color: $cryostat-blue-0;
+  border: 2px solid $cryostat-blue-1;
   font-size: 1.2rem;
   font-weight: 600;
   line-height: 2.5;
@@ -88,15 +157,15 @@ details > figure > a > img {
   display: inline-block;
   white-space: normal;
   &:hover, &:active, &:focus {
-    background-color: $cryostat-blue;
-    border-color: $cryostat-blue;
-    color: $white !important;
+    background-color: $cryostat-blue-4;
+    border-color: $cryostat-blue-4;
+    color: $cryostat-blue-2 !important;
 
   }
   @media screen and (max-width: 768px) {
     font-size: 1rem;
     line-height: 1rem;
-    padding: .75rem 0;
+    padding: .75rem 2rem;
   }
   margin-top: 4em;
   margin-bottom: 4em;
@@ -148,16 +217,9 @@ details > figure > a > img {
   text-align: center;
 }
 
-.back-to-top {
-  color: $white
-}
-
-a {
-  color: $cryostat-blue !important
-}
-
 .cryostat-home {
-  background-image: url(/assets/images/cryostat-background-2.png);
+  background-image: url(/assets/images/cryostat-homehero-bkg.png);
+  background-color: $cryostat-blue-3;
   background-size: 100%;
   background-repeat: no-repeat;
-}
+}

_sass/includes/back-to-top.scss

@@ -1,6 +1,7 @@
 #backToTop {
     display: inline-block;
-    background-color: $cryostat-blue;
+    background-color: $cryostat-blue-3;
+    color: $white;
     width: 50px;
     height: 50px;
     font-size: 2rem;

_sass/includes/header.scss

@@ -0,0 +1,35 @@
+
+.site-header {
+    background-color: $cryostat-blue-4;
+    border-bottom: 1px solid $cryostat-blue-4;
+}
+
+.cryostat-header {
+  margin-top: .5em;
+  margin-bottom: .5em;
+}
+
+.site-nav {
+  margin-top: .25em;
+
+  .page-link {
+  color: $white;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 900;
+  text-decoration: none;
+
+  &:hover, &:active, &:focus {
+    color: $cryostat-blue-2;
+    text-decoration: none;
+    } 
+
+  @media screen and (max-width: 768px) {
+    color: $cryostat-blue-4;
+    font-weight: 400;
+
+    &:hover, &:active, &:focus {
+    color: $cryostat-blue-3;
+    } 
+    }
+  }
+}

assets/css/main.scss

@@ -10,3 +10,4 @@
 
 @import "includes/redhat-footer";
 @import "includes/back-to-top.scss";
+@import "includes/header.scss";