glossary and homepage design

eea · Apr 14, 2020 · 0de6b75 · 0de6b75
1 parent 4c6173b
commit 0de6b75
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 30 deletions.
diff --git a/theme/themes/pastanaga/collections/menu.overrides b/theme/themes/pastanaga/collections/menu.overrides
@@ -116,11 +116,29 @@
       margin-left: 0;
     }
 
+    a {
+      &:hover {
+      color: rgba(white, .5);
+      border-color: transparent;
+      }
+    }
+
     .item {
+      font-weight: 300;
+      font-size: 14px;
+      text-transform: uppercase;
+      color: rgba(white, .8);
       padding-top: @relativeBig;
       margin: 0;
-      text-transform: uppercase;
-      color: white;
+
+      &.active {
+        font-weight: 700;
+        color: white;
+        border-color: transparent;
+        &:hover {
+          color: rgba(white, .8);
+        }
+      }
 
       @media only screen and (min-width: @largestTabletScreen) {
         padding: 1.7em 0 @relativeBig;

diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides
@@ -2,7 +2,6 @@
         Global Overrides
 *******************************/
 
-
 .footerWrapper {
   background-color: @primaryColor !important;
   color           : white;
@@ -19,45 +18,74 @@
     text-decoration: underline;
     font-weight    : bold;
   }
+
+  p {
+    color: white !important;
+  }
 }
 
+#page-document.ui.container{
+  width: 80% !important;
+  margin: 4rem auto !important;
+}
 
 .widthSidebar {
   display: flex;
 
   #page-document.hasSidebar {
     width: 70%;
-    background-color: #f6f6f6;
+    background-color: @lightPrimaryColor;
     padding: 3rem;
+    text-align: left;
   }
   .page-document-sidebar {
     width: 30%;
-    background-color: #7c7c7c;
+    background-color: @lightSecondaryColor;
     display: flex;
     min-height: 100vh;
     .tabs {
       flex-direction: column;
       margin-left: auto;
       display: inline-flex;
       position: relative;
-      margin-right: 1rem;
-      margin-top: 2rem;
+      margin-right: 2rem;
+      margin-top: 4rem;
+      width: 58%;
       a {
-        color: white;
-        font-size: 1.2rem;
+        color: @bodyColor;
+        font-size: 1rem;
+        &.tabs__item {
+        padding-bottom: 2rem;
+          &.tabs__item_active {
+            font-weight: 700;
+            color: @linkColor;
+          }
+        }
       }
     }
   }
+  .hasSidebar{
+    padding-right: 10rem !important;
+    h1.documentFirstHeading {
+      text-align: left;
+    }
+  }
 }
 
 .tabs.section-tabs {
-  display: flex;
-  justify-content: center;
+  width: 78%;
+  margin: 0 auto;
   a {
-    color: #3f3f3f;
-    font-size: 1.2rem;
+    color: @bodyColor;
+    font-size: 18px;
     margin-right: 4rem;
     line-height: 3;
+    padding-bottom: 1rem;
+    &.tabs__item_active {
+      font-weight: 700;
+      color: @primaryColor;
+      border-bottom: 1rem solid @primaryColor;
+    }
   }
 }
 
@@ -66,28 +94,40 @@
   margin: 0;
 }
 
-h1.documentFirstHeading {
+h1.documentFirstHeading{
+  text-align: center;
+}
+
+h1.documentFirstHeading, h2, h3{
   font-size: 36px;
+  color: @primaryColor;
+  font-weight: 700;
   border-bottom: none!important;
   &:before {
     display: none!important;
   }
 }
 
+p {
+
+  color: @bodyColor;
+  font-weight: 300;
+  &.documentDescription{
+    color: @fullBlack;
+  }
+}
+
 .breadcrumbs {
   display: none;
 }
 
-
-
-
 .detailed-link-block {
   display: flex;
   flex-wrap: wrap;
   max-width: 800px;
   margin: 0 auto;
   flex-direction: column;
-} 
+}
 
 
 .detailed-link-block-item-title {
@@ -118,4 +158,4 @@ h1.documentFirstHeading {
     font-size: 16px;
     position: relative;
   }
-}
+}
diff --git a/theme/themes/pastanaga/globals/site.variables b/theme/themes/pastanaga/globals/site.variables
@@ -6,7 +6,7 @@
        Fonts
 --------------------*/
 
-@fontName          : 'Poppins';
+@fontName          : 'Source Sans Pro';
 
 @googleFontSizes   : '300,400,500,700,400italic,700italic';
 
@@ -24,11 +24,19 @@
 /*-------------------
     Brand Colors
 --------------------*/
-@primaryColor        : @darkBlue;
+@primaryColor        : @lightblue;
 
-@secondaryColor      : @brown;
+@secondaryColor      : @darkBlue;
 
-@lightSecondaryColor : @lightGrey;
+@bodyColor           : @bodyGrey;
+
+@darkPrimaryColor    : @darkOrange;
+
+@lightPrimaryColor   : @lightBodyGrey;
+
+@lightSecondaryColor : @lightOrange;
+
+/* @lightSecondaryColor : @lightGrey; */
 
 
 /*--------------
@@ -84,7 +92,7 @@
        Links
 --------------------*/
 
-@linkColor           : @blue;
+@linkColor           : @lighterOrange;
 
 
 /*-------------------
@@ -132,18 +140,29 @@
 @brown            : #826A6A; // Palette: reddishGrey
 @grey             : #68778D; // Palette: blueishGrey
 @black            : #252525; // Palette: darkishGrey
-@darkBlue         : #005384;
+@darkBlue         : #32536B;
+@darkOrange       : #D63D27;
+@darkGreen        : #009590;
 
 /*---  Light Colors  ---*/
 @lightOlive       : #C9EAB1; // Palette: lightSage
 @lightGrey        : #878F93;
+@lightblue        : #4296B2;
+@lightOrange      : #F3EFEE;
+@lighterOrange    : #EC776A;
+@lightBodyGrey    : #F6F6F6;
+@greyBlue         : #6C8BA2;
+
+
 
 /*---   Neutrals  ---*/
 @fullBlack        : #000000;
 @offWhite         : #F9FAFB;
 @darkWhite        : #F3F4F5;
 @midWhite         : #DCDDDE;
 @white            : #FFFFFF;
+@bodyGrey         : #333333;
+
 
 /*--- Colored Backgrounds ---*/
 @redBackground    : #F5C1C1; // Palette: alertError

diff --git a/theme/themes/pastanaga/modules/search.overrides b/theme/themes/pastanaga/modules/search.overrides
@@ -2,7 +2,8 @@
          Theme Overrides
 *******************************/
 .glossary-search {
-    max-width: 964px;
+    //max-width: 964px;
+    width: 80%;
     margin   : 2rem auto;
 
     .searchbox {
@@ -12,15 +13,28 @@
     .input {
         border-radius: 30px;
         height       : 50px;
-        background   : #F6F6F6;
-        padding-left : 1rem;
+        background   : #EDEDED;
+        padding-left : 1.5rem;
+        font-weight: 300;
+        font-size: 18px;
+        color: @bodyColor;
+        /*
+        &:before{
+          font-family: "Font Awesome 5 Free";
+          font-weight: 700;
+          content: "\f007";
+          margin: auto 1rem;
+          color: @secondaryColor;
+        }
+        */
     }
 
     button {
-        background: #008173!important;
+        background: @secondaryColor !important;
         border-radius: 30px;
         padding: 0 2rem!important;
         color: white!important;
+        font-weight: 700;
         margin-left: 1rem;
     }
-}
+}