Header and Footer Cleanups (#105)

Problem ======= Various small layout issues addressed (one of a few PRs for this sort of stuff) Closes #101 Closes #104 Closes #86 Part of #87 Solution ======== - Fix font issue with Bold - Remove dead styles - Fix content margins to handle the left nav buttons with centering - Fix the previous/next buttons on mobile - Add a margin to the footer to fix the footer border from hitting the side nav (slight design break)
frequency-chain · Nov 13, 2024 · 5a4685e · 5a4685e
1 parent d30bc11
commit 5a4685e
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "lint": "npm run lint:md && npm run lint:spellcheck"
   },
   "devDependencies": {
-    "@frequency-chain/style-guide": "^0.1.13",
+    "@frequency-chain/style-guide": "^0.1.16",
     "remark": "^15.0.1",
     "remark-cli": "^12.0.1",
     "remark-lint": "^10.0.0",

diff --git a/theme/css/general.css b/theme/css/general.css
@@ -155,15 +155,7 @@ h6:target::before {
 
 .content {
   overflow-y: auto;
-  padding: 30px 15px;
-  padding-bottom: 50px;
-  min-height: 75vh;
-}
-
-@media screen and (max-width: 400px) {
-  .content {
-    padding: 0 2px;
-  }
+  min-height: 100vh;
 }
 
 .content main {

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
@@ -69,22 +69,6 @@
     @apply opacity-100;
     transform: translate3d(0, 0, 0);
   }
-
-  /*  Form common styles*/
-  .form-item-label {
-    @apply sm w-full max-w-[388px] py-[5px] font-bold;
-  }
-
-  .form-item-description {
-    @apply sm text-gray2;
-  }
-
-  .form-error {
-    @apply sm font-bold text-error;
-  }
-  .card-shadow {
-    box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 25%);
-  }
 }
 
 @layer base {
@@ -97,6 +81,11 @@
     margin: 0.67em 0;
   }
 
+  /* Reset the margins for the first header in the contents */
+  .content h1:first-of-type {
+    margin-top: 0;
+  }
+
   h2,
   .h2 {
     @apply text-h2 leading-h2;
@@ -142,9 +131,3 @@
     margin: 2.33em 0;
   }
 }
-
-/* Reset the margins for the first header in the contents */
-
-.content h1:first-of-type {
-  margin-top: 0;
-}
diff --git a/theme/fonts/Poppins-Bold.eot b/theme/fonts/Poppins-Bold.eot
diff --git a/theme/fonts/Poppins-Bold.woff b/theme/fonts/Poppins-Bold.woff
diff --git a/theme/fonts/Poppins-Bold.woff2 b/theme/fonts/Poppins-Bold.woff2
diff --git a/theme/fonts/fonts.css b/theme/fonts/fonts.css
@@ -15,6 +15,17 @@
     url("../fonts/Newake-Font-Regular.svg#filename") format("svg");
 }
 
+@font-face {
+  font-family: "Poppins";
+  src: url("../fonts/Poppins-Regular.eot");
+  src:
+    url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
+    url("../fonts/Poppins-Regular.woff2") format("woff2"),
+    url("../fonts/Poppins-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "Poppins";
   src: url("../fonts/Poppins-Italic.eot");
@@ -28,23 +39,22 @@
 
 @font-face {
   font-family: "Poppins";
-  src: url("../fonts/Poppins-SemiBold.eot");
+  src: url("../fonts/Poppins-Bold.eot");
   src:
-    url("../fonts/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"),
-    url("../fonts/Poppins-SemiBold.woff2") format("woff2"),
-    url("../fonts/Poppins-SemiBold.woff") format("woff");
-  font-weight: 600;
+    url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
+    url("../fonts/Poppins-Bold.woff2") format("woff2"),
+    url("../fonts/Poppins-Bold.woff") format("woff");
+  font-weight: 700;
   font-style: normal;
-}
 
 @font-face {
   font-family: "Poppins";
-  src: url("../fonts/Poppins-Regular.eot");
+  src: url("../fonts/Poppins-SemiBold.eot");
   src:
-    url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
-    url("../fonts/Poppins-Regular.woff2") format("woff2"),
-    url("../fonts/Poppins-Regular.woff") format("woff");
-  font-weight: normal;
+    url("../fonts/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"),
+    url("../fonts/Poppins-SemiBold.woff2") format("woff2"),
+    url("../fonts/Poppins-SemiBold.woff") format("woff");
+  font-weight: 600;
   font-style: normal;
 }
 

diff --git a/theme/header.hbs b/theme/header.hbs
@@ -1,5 +1,5 @@
 <header id="header" class="bg-white header-shadow flex h-[85px] font-title sticky left-0 top-0 w-full z-10">
-	<div class="m-auto flex h-[85px] w-full max-w-screen-lg items-stretch justify-around sm:px-f20 md:px-f32">
+	<div class="m-auto flex h-[85px] w-full max-w-screen-lg items-stretch justify-around px-f20 md:px-f32">
 		<a href="https://www.frequency.xyz/" target="_blank" class="flex w-[146px] items-center text-teal md:w-[200px]">
 			<svg viewBox="0 0 257 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
@@ -21,6 +21,9 @@
 			<a href="https://www.frequency.xyz/#developers" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
 			 Developers
 			</a>
+			<a href="https://www.frequency.xyz/#ecosystem" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
+			 Ecosystem
+			</a>
 			<a href="https://www.frequency.xyz/#contact" target="_blank" class="h6 underline-on-nav-hover border-color hidden content-center px-2 text-navy transition-all duration-1000 after:bg-teal lg:block">
 			 Contact
 			</a>
@@ -71,6 +74,7 @@
 				<a href="https://www.frequency.xyz/#about" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">About</a>
 				<a href="https://www.frequency.xyz/#user" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">User</a>
 				<a href="https://www.frequency.xyz/#developers" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">Developers</a>
+				<a href="https://www.frequency.xyz/#ecosystem" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">Ecosystem</a>
 				<a href="https://www.frequency.xyz/#contact" target="_blank" class="h4 underline-on-hover font-bold after:bg-white">Contact</a>
 				<a class="pointer-events-auto block" target="_self" href="/">
 					<button class="rounded-full px-f24 py-f8 text-center transition-all bg-teal text-navy hover:bg-tealDark hover:text-black hover:shadow-md w-full mt-f24 max-w-[360px] md:hidden" target="_self">

diff --git a/theme/index.hbs b/theme/index.hbs
@@ -202,21 +202,21 @@
                 });
             </script>
 
-            <div id="content" class="content">
+            <div id="content" class="content pt-8 pb-32 pl-[6px] pr-[45px]">
                 <main>
                     {{{ content }}}
                 </main>
 
-                <nav class="nav-wrapper" aria-label="Page navigation">
+                <nav class="nav-wrapper p-6" aria-label="Page navigation">
                     <!-- Mobile navigation buttons -->
                     {{#previous}}
-                        <a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter: {{title}}" aria-keyshortcuts="Left">
+                        <a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous mb-6 w-full md:w-auto" title="Previous chapter" aria-label="Previous chapter: {{title}}" aria-keyshortcuts="Left">
                             <i class="fa fa-angle-left"></i> {{title}}
                         </a>
                     {{/previous}}
 
                     {{#next}}
-                        <a rel="next" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter: {{title}}" aria-keyshortcuts="Right">
+                        <a rel="next" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next mb-6 w-full md:w-auto" title="Next chapter" aria-label="Next chapter: {{title}}" aria-keyshortcuts="Right">
                             {{title}} <i class="fa fa-angle-right"></i>
                         </a>
                     {{/next}}
@@ -227,7 +227,7 @@
         </div>
 
         <!-- Custom Footer Start -->
-        <footer id="footer" class="bg-white px-6 md:px-[10%] max-w-[100vw]">
+        <footer id="footer" class="bg-white pt-6 px-6 md:px-[10%] max-w-[100vw]">
           <div class="sm md:md flex flex-col items-center gap-f16 border-t-[2px] border-current text-black py-f48 md:gap-f48">
             <a class="w-[146px] md:w-[257px]" href="https://www.frequency.xyz" target="_blank">
                 <svg viewBox="0 0 257 36" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -237,7 +237,7 @@
                   />
                 </svg>
               </a>
-              <aside class="flex flex-col items-center space-y-4 leading-none md:flex-row md:space-x-4 md:space-y-0">
+              <aside class="flex flex-col items-center text-center space-y-4 leading-none md:flex-row md:space-x-4 md:space-y-0">
                 <div>
                   © 2024 Frequency Network Foundation. <span class="md:hidden">All Rights Reserved</span>
                 </div>