added header to the other pages

techexcellenceio · Jan 19, 2024 · 92ffbbb · 92ffbbb
1 parent 52d3038
commit 92ffbbb
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 69 deletions.
diff --git a/_layouts/company.html b/_layouts/company.html
@@ -4,14 +4,16 @@
     {% include head.html %}
   </head>
   <body>
-    <div class="container-lg px-3 my-5 markdown-body">
+    <header class="s-masthead-2">
+      <div class="container">
+        <img src="/assets/banner-text-1.svg" alt="Tech Excellence"> 
+        <h1>Our Network</h1>
+      </div>
+    </header>
+    <div class="container-lg markdown-body">
 
+        <!-- COMPANIES -->
 
-        <!-- <div id="masthead">
-            {% include masthead.html %}
-        </div> -->
-
-        <!-- MEMBERS -->
         <div class="network">
           {{ content }}
         </div>

diff --git a/_layouts/default-2.html b/_layouts/default-2.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    <header class="s-masthead-2">
+      <div class="container">
+        <img src="/assets/banner-text-1.svg" alt="Tech Excellence"> 
+        <h1>{{ page.title }}</h1>
+      </div>
+    </header>
+    <div class="container-lg markdown-body">
+
+        {{ content }}
+
+        <div id="footer">
+            {% include footer.html %}     
+        </div>
+
+        {% include scripts.html %}
+
+    </div>
+  </body>
+</html>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,6 +8,9 @@
         {% include masthead.html %}
     </div>
     <div class="container-lg markdown-body">
+
+        <!-- HOME -->
+
         {{ content }}
 
         <div id="footer">

diff --git a/_layouts/member.html b/_layouts/member.html
@@ -4,18 +4,18 @@
     {% include head.html %}
   </head>
   <body>
-    <div class="container-lg px-3 my-5 markdown-body">
-
-
-        <!-- <div id="masthead">
-            {% include masthead.html %}
-        </div> -->
+    <header class="s-masthead-2">
+      <div class="container">
+        <img src="/assets/banner-text-1.svg" alt="Tech Excellence"> 
+        <h1>Members</h1>
+      </div>
+    </header>
+    <div class="container-lg markdown-body">
 
         <!-- MEMBERS -->
         <div id="members">
           {{ content }}
         </div>
-
 
         <div id="footer">
             {% include footer.html %}     

diff --git a/_layouts/past-meetups.html b/_layouts/past-meetups.html
@@ -4,11 +4,13 @@
     {% include head.html %}
   </head>
   <body>
-    <div class="container-lg px-3 my-5 markdown-body">
-
-        <!-- <div id="masthead">
-            {% include masthead.html %}
-        </div> -->
+    <header class="s-masthead-2">
+      <div class="container">
+        <img src="/assets/banner-text-1.svg" alt="Tech Excellence"> 
+        <h1>Meetups {{ page.year }} </h1>
+      </div>
+    </header>
+    <div class="container-lg markdown-body">
 
         <!-- SPEAKERS -->
         <div id="speakers">

diff --git a/_scss/_global.scss b/_scss/_global.scss
@@ -44,6 +44,9 @@
     }
 }
 
+.container-fixed-2 {
+    max-width: 800px;
+}
 
 .g-container {
     text-align: left;
@@ -86,12 +89,6 @@
 
 .network {
     .s-container {
-        // margin-top: 1rem;
-        // margin-bottom: 6rem;
-        // @media (max-width: 567px){
-        //     margin-top: 2rem;
-        //     margin-bottom: 6rem;
-        // }
         .row {
             margin-left: -15px;
             margin-right: -15px;
@@ -125,28 +122,7 @@
 
 // -----------------
 
-.s-container-extra {
-    @media (min-width: 567px) and (max-width: 786px){
-    // @include media-breakpoint-only(sm) {
-        margin-bottom: 2.5rem;
-    }
-}
-
-.profile-img {
-    // margin-top: 2.75rem;
-    // margin-bottom: 2.75rem;
-    // @media (max-width: 567px){
-    // // @include media-breakpoint-down(xs){
-    //     margin-left: auto;
-    //     margin-right: auto;
-    //     margin-top: 4rem;
-    //     margin-bottom: 1.5rem;
-    // }
-}
-
-
-
-
+
 .markdown-body img {
     max-width: none;
 }

diff --git a/_scss/_masthead.scss b/_scss/_masthead.scss
@@ -14,6 +14,9 @@
     margin-bottom: 2rem;
     background: radial-gradient(132.55% 86.57% at 80.5% 41.82%, #0A3B4C 0%, #06263A 100%);
     // background: url('/assets/tech_excellence_banner.png?v=2');
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .container {
         padding-right: 36px;
         padding-left: 36px;
@@ -30,12 +33,59 @@
         }
         // background-color: pink;
     }
+}
+
+.s-masthead-2 {
+    @media (max-width: 566px){
+        min-height: 400px;
+    }
+    @media (min-width: 567px) {
+        min-height: 400px;
+    }
+    @media (min-width: 768px) {
+        min-height: 280px;
+    }
+    @media (min-width: 1200px) {
+        min-height: 320px;
+    }
+    margin-bottom: 3rem;
+    background: radial-gradient(132.55% 86.57% at 80.5% 41.82%, #0A3B4C 0%, #06263A 100%);
     display: flex;
     justify-content: center;
     align-items: center;
+    .container {
+        text-align: center;
+        @media (min-width: 768px) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        img {
+            max-width: 200px;
+            @media (min-width: 768px) {
+                max-width: 160px;
+            }
+            @media (min-width: 768px) {
+                max-width: 200px;
+            }
+        }
+        h1 {
+            color: white;
+            padding-top: 48px;
+            font-size: 3rem;
+            @media (min-width: 768px) {
+                padding-top: 0;
+                padding-left: 72px;
+                font-size: 3.25rem;
+            }
+            @media (min-width: 1200px) {
+                font-size: 3.5rem;
+                padding-left: 84px;
+            }
+        }
+    }
 }
 
-
 // .s-masthead picture img,
 // .s-masthead img {
 //     width: 50%;