Modified header and footer styling

stakater · Mar 20, 2024 · 51a8094 · 51a8094
1 parent 89bea79
commit 51a8094
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 22 deletions.
diff --git a/resources/partials/footer.html b/resources/partials/footer.html
@@ -15,6 +15,10 @@
         display: flex;
     }
 
+    .jscfs {
+        justify-content: flex-start;
+    }
+
     .jscc {
         justify-content: center;
     }
@@ -44,17 +48,25 @@
         flex: 2;
     }
 
+    .flex-3 {
+        flex: 3;
+    }
+
     .flex-0-8 {
         flex: 0.8;
     }
 
+    .margin-left-1 {
+        margin-left: 1rem;
+    }
+
     .margin-bottom-16 {
         margin-bottom: 1rem;
     }
 
     .footer-content-container {
         width: 100%;
-        margin: 0 5%;
+        margin: 0 14%;
     }
 </style>
 
@@ -259,14 +271,33 @@
             <!-- Copy Rights and Social Media Links -->
             <div class="display-flex jscsb">
                 <!-- Column 1 -->
-                <div class="flex-0-8">
-                    <p class="md-footer-base-content">
-                        <b>
-                            © 2023 Stakater.com
-                        </b>
-                    </p>
+                <div class="flex-3">
+                    <div class="display-flex jscfs items-center">
+                        <div>
+                            <p class="md-footer-base-content">
+                                <b>
+                                    © 2023 Stakater.com
+                                </b>
+                            </p>
+                        </div>
+                        <div class="display-flex margin-left-1">
+                            <a href="https://www.stakater.com/privacy-policy" class="md-footer-base-content">
+                                <b>
+                                    Privacy Policy
+                                </b>
+                            </a>
+                            <p class="vertical-divider">
+                                |
+                            </p>
+                            <a href="https://www.stakater.com/terms-of-use" class="md-footer-base-content">
+                                <b>
+                                    Terms of Use
+                                </b>
+                            </a>
+                        </div>
+                    </div>
                 </div>
-                <div class="display-flex flex-1">
+                <!-- <div class="display-flex flex-1">
                     <div class="display-flex jscc items-center">
                         <a href="https://www.stakater.com/privacy-policy" class="md-footer-base-content">
                             <b>
@@ -282,9 +313,9 @@
                             </b>
                         </a>
                     </div>
-                </div>
-                <div class="flex-1"></div>
-                <div class="flex-1"></div>
+                </div> -->
+                <!-- <div class="flex-1"></div>
+                <div class="flex-1"></div> -->
                 <div class="flex-1">
                     <!-- Social Links -->
                     <div class="display-flex jscsa">

diff --git a/resources/partials/header.html b/resources/partials/header.html
@@ -52,15 +52,6 @@
           {% endif %}
         </div>
         <!-- Topic -->
-        <div class="md-header__topic" data-md-component="header-topic">
-          <span class="md-ellipsis">
-            {% if page.meta and page.meta.title %}
-            {{ page.meta.title }}
-            {% else %}
-            {{ page.title }}
-            {% endif %}
-          </span>
-        </div>
       </div>
     </div>
 
@@ -117,6 +108,7 @@
 
       if (scrollTop > scrollThreshold) {
         header.classList.add('md-header--scroll');
+        header.style.borderBottom = 'none';
         search.style.display = 'none';
         searchResults.style.display = 'none';
         if (colorPaletteToggle) {
@@ -127,6 +119,7 @@
         }
       } else {
         header.classList.remove('md-header--scroll');
+        header.style.borderBottom = '';
         search.style.display = '';
         searchResults.style.display = '';
         if (colorPaletteToggle) {

diff --git a/resources/stylesheets/extra.css b/resources/stylesheets/extra.css
@@ -24,6 +24,13 @@
     .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
         font-weight: 600;
     }
+
+    .md-nav__title {
+        font-size: 0.8rem;
+    }
+    .md-nav__link {
+        font-size: 0.8rem;
+    }
 }
 
 
@@ -70,6 +77,9 @@
         color: #fff;
     }
 
+    .md-header {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+    }
     .md-header__topic{
         display: flex;
         justify-content: center;
@@ -113,6 +123,7 @@
         font-size: 14px; 
         font-weight: 400; 
     }
+
 
     .md-footer{
         background-color: #131414;
@@ -136,7 +147,7 @@
     }
 
     .vertical-divider {
-        margin: 0 3rem; display: flex; align-items: center; cursor: none; color: #fff;
+        margin: 0 1rem; display: flex; align-items: center; cursor: none; color: #fff;
     }
 }
 
@@ -181,6 +192,9 @@
         color: #282523;
     }
 
+    .md-header {
+        border-bottom: 1px solid rgba(23, 25, 28, 0.2);
+    }
     .md-header__topic{
         display: flex;
         justify-content: center;
@@ -223,6 +237,8 @@
         font-weight: 400; 
     }
 
+
+
     .md-footer{
         background-color: white;
         border-top: 1px solid rgba(0, 0, 0, 0.2);
@@ -245,6 +261,6 @@
     }
 
     .vertical-divider {
-        margin: 0 3rem; display: flex; align-items: center; cursor: none; color: black;
+        margin: 0 1rem; display: flex; align-items: center; cursor: none; color: black;
     }
 }