feat: update main page

input-output-hk · Nov 29, 2024 · 851a003 · 851a003
1 parent 53e993b
commit 851a003
Show file tree

Hide file tree

Showing 10 changed files with 290 additions and 303 deletions.
diff --git a/source/_includes/components/favicon.jinja b/source/_includes/components/favicon.jinja
@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+<link rel="manifest" href="/images/favicon/site.webmanifest">
+<link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/images/favicon/favicon.ico">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
diff --git a/source/_includes/components/footer.jinja b/source/_includes/components/footer.jinja
@@ -1,3 +1,5 @@
-<footer>
-  <p>Catalyst Voice © 2025</p>
+<footer class="footer">
+  <div class="footer-content">
+    <p class="copyright">© 2024 Project Catalyst. All rights reserved.</p>
+  </div>
 </footer>
diff --git a/source/_includes/components/header.jinja b/source/_includes/components/header.jinja
@@ -0,0 +1,8 @@
+<!-- Main header -->
+<nav class="top-nav" id="mainNav">
+    <div class="nav-content">
+        <div class="logo">
+            <img src="/images/branding/logo.png" alt="Project Catalyst Logo" class="logo-image">
+        </div>
+    </div>
+</nav>
diff --git a/source/images/branding/logo.png b/source/images/branding/logo.png
diff --git a/source/index.jinja b/source/index.jinja
@@ -6,40 +6,22 @@ title: Catalyst Voices Updates
 
 <head>
   <meta charset="utf-8">
+
   <title>{{ title }}</title>
+
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Latest updates and news from Catalyst Voices">
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/images/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
-  <link rel="shortcut icon" href="/images/favicon/favicon.ico">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
-  <meta name="theme-color" content="#ffffff">
+  {{ components.favicon() }}
 
-  <link rel="stylesheet" href="/styles/styles.css">
+  <link rel="stylesheet" href="/styles/theme.css">
+  <link rel="stylesheet" href="/styles/header.css">
   <link rel="stylesheet" href="/styles/home.css">
+  <link rel="stylesheet" href="/styles/footer.css">
 </head>
 
 <body>
-  <!-- Main header -->
-  <nav class="top-nav" id="mainNav">
-    <div class="nav-content">
-      <div class="logo">
-        <img src="/images/logo.svg" alt="Project Catalyst Logo" class="logo-image">
-      </div>
-    </div>
-  </nav>
-
-  <!-- Sticky header (shows on scroll) -->
-  <nav class="sticky-nav" id="stickyNav">
-    <div class="nav-content">
-      <h1 class="sticky-title">Catalyst Voices: What's <span class="accent">New</span></h1>
-    </div>
-  </nav>
+  {{ components.header() }}
 
   <!-- Hero section -->
   <header class="hero-section" id="heroSection">
@@ -109,34 +91,7 @@ title: Catalyst Voices Updates
     </div>
   </div>
 
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const mainNav = document.getElementById('mainNav');
-      const stickyNav = document.getElementById('stickyNav');
-      const heroSection = document.getElementById('heroSection');
-      let lastScrollTop = 0;
-
-      window.addEventListener('scroll', function () {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const heroBottom = heroSection.offsetTop + heroSection.offsetHeight;
-
-        if (scrollTop >= heroBottom) {
-          mainNav.classList.add('nav-hidden');
-          stickyNav.classList.add('nav-visible');
-        } else {
-          mainNav.classList.remove('nav-hidden');
-          stickyNav.classList.remove('nav-visible');
-        }
-
-        if (scrollTop > lastScrollTop && scrollTop > heroBottom) {
-          stickyNav.classList.add('nav-up');
-        } else {
-          stickyNav.classList.remove('nav-up');
-        }
-        lastScrollTop = scrollTop;
-      });
-    });
-  </script>
+  {{ components.footer() }}
 </body>
 
 </html>
diff --git a/source/styles/footer.sass b/source/styles/footer.sass
@@ -0,0 +1,21 @@
+@use 'theme' as *;
+@use "sass:map";
+
+.footer {
+  width: 100%;
+  padding: 1rem 0;
+  border-top: 1px solid #EAECF0;
+  margin-top: auto;
+  color:white
+
+}
+
+.footer-content {
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.copyright {
+  @include typography("body");
+  color: get-color("text-light");
+}
diff --git a/source/styles/header.sass b/source/styles/header.sass
@@ -0,0 +1,33 @@
+@import 'theme';
+
+// Top Navigation
+.top-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: rgba(white, 0.9);
+  backdrop-filter: blur(8px);
+  padding: map-get($spacing, sm) 0;
+}
+
+.nav-content {
+  align-content: start;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 map-get($spacing, lg);
+  display: flex;
+  justify-content: start;
+  align-items: left;
+}
+
+.logo {
+  display: flex;
+  align-items: left;
+
+  img {
+    height: 40px;
+    width: auto;
+  }
+}