Merge branch 'main' into minikin-patch-1

input-output-hk · Dec 2, 2024 · 65e5ac8 · 65e5ac8
2 parents 6f583a3 + 311466d
commit 65e5ac8
Show file tree

Hide file tree

Showing 15 changed files with 572 additions and 308 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/_includes/layouts/post.jinja b/source/_includes/layouts/post.jinja
@@ -1,38 +1,60 @@
 <!doctype html>
+<html lang="en">
 
-<html lang="en" data-bs-theme="light">
 <head>
   <meta charset="utf-8">
-  <title>{{  title  }}</title>
+  <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">
-
-  <link href="/styles/styles.css" rel="stylesheet">
-  <link href="/styles/post.css" rel="stylesheet">
+  {{ components.favicon() }}
+
+  <link rel="stylesheet" href="/styles/theme.css">
+  <link rel="stylesheet" href="/styles/header.css">
+  <link rel="stylesheet" href="/styles/post.css">
+  <link rel="stylesheet" href="/styles/footer.css">
 </head>
 
 <body>
-  <div id="NavBar">
-    <a href="/" class="title">Catalyst Voices Updates</a>
-  </div>
+  {{ components.header() }}
+
+  <main class="post-container">
+    <article>
+      <header class="post-header">
+        {% if publishDate %}
+        <time class="publish-date" datetime="{{ publishDate }}">
+          PUBLISHED: {{ publishDate }}
+        </time>
+        {% endif %}
 
-  {% if header %}
-  <header style="background-image: url('{{ header }}'); background-repeat: none; background-size: cover;"></header>
-  {% endif %}
+        {# <h1 class="post-title">{{ title }}</h1> #}
 
-  <main>
-  {{  content  }}
+        <div class="post-meta">
+          {# {% if author %}
+          <div class="author">
+            <img src="/images/authors/{{ author | lower | replace(" ", " -") }}.jpg" alt="{{ author }}">
+            <div class="author-info">
+              <div class="name">{{ author }}</div>
+              <div class="role">{{ role | default("Contributor") }}</div>
+            </div>
+          </div> #}
+          {# {% endif %} #}
+          {#
+          <div class="share">
+            <a href="https://twitter.com/share?url={{ url }}" target="_blank">Twitter</a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}" target="_blank">Facebook</a>
+            <a href="https://www.linkedin.com/shareArticle?url={{ url }}" target="_blank">LinkedIn</a>
+          </div> #}
+        </div>
+      </header>
+
+      <div class="post-content">
+        {{ content }}
+      </div>
+    </article>
   </main>
 
-  {{  components.footer()  }}
+  {{ components.footer() }}
 </body>
+
 </html>
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,87 +6,98 @@ 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>
-  <div class="wrapper">
-    <div class="post-list">
-      {% for page in pages.byTag("posts", sortBy="publishDate=desc") %}
-      <article class="post">
-        <!-- Left column with timeline -->
-        <div class="post-meta">
-          <time class="date">
-            {{ page.data['publishDate'] }}
-          </time>
+  {{ components.header() }}
 
-          <h2 class="title">{{ page.data['title'] }}</h2>
+  <div class="main-container">
+    <!-- Hero section -->
+    <header class="hero-section" id="heroSection">
+      <h1 class="hero-title">
+        Catalyst Voices: What's <span class="accent">New</span>
+      </h1>
+      <p class="hero-subtitle">
+        Learn from our experts and read the latest news on our blog.
+      </p>
+    </header>
 
-          {% if page.data['platforms'] %}
-          <div class="platform-tags">
-            {% for platform in page.data['platforms'] %}
-            <span class="platform-tag">{{ platform }}</span>
-            {% endfor %}
-          </div>
-          {% endif %}
-        </div>
+    <!-- Main content -->
+    <div class="wrapper">
+      <div class="post-list">
+        {% if pages and pages.byTag %}
+        {% for page in pages.byTag("posts", sortBy="publishDate=desc") %}
+        <article class="post">
+          <!-- Left column with metadata -->
+          <div class="post-meta">
+            {% if page.data['publishDate'] %}
+            <time class="date" datetime="{{ page.data['publishDate'] }}">
+              {{ page.data['publishDate'] }}
+            </time>
+            {% endif %}
 
-        <!-- Right column with content -->
-        <div class="post-content">
-          {% if page.data['coverImage'] %}
-          <div class="post-media">
-            {% if page.data['isVideo'] %}
-            <video controls playsinline poster="{{ page.data['videoPoster'] }}">
-              <source src="{{ page.data['coverImage'] }}" type="video/mp4">
-              Your browser doesn't support HTML5 video.
-            </video>
-            {% else %}
-            <img src="{{ page.data['coverImage'] }}" alt="{{ page.data['title'] }}" loading="lazy">
+            {% if page.data['title'] %}
+            <h2 class="title">{{ page.data['title'] }}</h2>
             {% endif %}
-          </div>
-          {% endif %}
 
-          {% if page.data['description'] %}
-          <div class="description">
-            <p>{{ page.data['description'] }}</p>
+            {% if page.data['platforms'] %}
+            <div class="platform-tags">
+              {% for platform in page.data['platforms'] %}
+              <span class="platform-tag">{{ platform }}</span>
+              {% endfor %}
+            </div>
+            {% endif %}
           </div>
-          {% endif %}
 
-          <a href="{{ page.data['url'] }}" class="read-more">Read the blog post</a>
-        </div>
-      </article>
-      {% endfor %}
+          <!-- Right column with content -->
+          <div class="post-content">
+            {% if page.data['coverImage'] %}
+            <div class="post-wrapper">
+              <div class="post-media {% if page.data['isVideo'] %}video-container{% endif %}">
+                {% if page.data['isVideo'] %}
+                <div class="video-container">
+                  <video controls playsinline poster="{{ page.data['videoPoster'] }}">
+                    <source src="{{ page.data['coverImage'] }}" type="video/mp4">
+                    Your browser doesn't support HTML5 video.
+                  </video>
+                </div>
+                {% else %}
+                <img src="{{ page.data['coverImage'] }}" alt="{{ page.data['title'] }}" loading="lazy">
+                {% endif %}
+              </div>
+            </div>
+            {% endif %}
+
+            {% if page.data['description'] %}
+            <div class="description">
+              <p>{{ page.data['description'] }}</p>
+            </div>
+            {% endif %}
+
+            {% if page.data['url'] %}
+            <a href="{{ page.data['url'] }}" class="read-more">Read the blog post</a>
+            {% endif %}
+          </div>
+        </article>
+        {% endfor %}
+        {% endif %}
+      </div>
     </div>
   </div>
 
-  <script>
-    document.querySelectorAll('.copy-button').forEach(button => {
-      button.addEventListener('click', () => {
-        const url = window.location.href;
-        navigator.clipboard.writeText(url).then(() => {
-          button.setAttribute('aria-label', 'Link copied!');
-          setTimeout(() => {
-            button.setAttribute('aria-label', 'Copy link to this post');
-          }, 2000);
-        });
-      });
-    });
-  </script>
+  {{ components.footer() }}
 </body>
 
 </html>
diff --git a/source/posts/mve1/sustainable-living.md b/source/posts/mve1/sustainable-living.md
@@ -1,7 +1,7 @@
 ---
 title: Sustainable Living - Simple Steps to Make a Difference
 description:  <video src="https://www.shutterstock.com/shutterstock/videos/3434489259/preview/stock-footage-creative-office-professional-female-programmer-uses-headphones-working-on-desktop-computer.webm"  controls muted> muted</video> Explore practical ways to adopt a sustainable lifestyle and contribute to a healthier planet.
-publishDate: 2024-07-13
+publishDate: 13 Nov 2024
 ---
 
 <video src="https://www.shutterstock.com/shutterstock/videos/3434489259/preview/stock-footage-creative-office-professional-female-programmer-uses-headphones-working-on-desktop-computer.webm"  controls autoplay muted> muted</video>

diff --git a/source/posts/mve2/the-revival-of-vintage-gaming-consoles.md b/source/posts/mve2/the-revival-of-vintage-gaming-consoles.md
@@ -1,7 +1,7 @@
 ---
 title: The Revival of Vintage Gaming Consoles
 description:  <video src="https://www.shutterstock.com/shutterstock/videos/3589664137/preview/stock-footage-hong-kong-china-shoppers-walk-past-a-poster-showcasing-the-apple-vision-pro-apple.webm"  controls muted> muted</video> Exploring the resurgence of interest in vintage gaming consoles and what makes them so appealing today.
-publishDate: 2024-10-10
+publishDate: 10 Nov 2024
 ---
 # The Revival of Vintage Gaming Consoles
 

diff --git a/source/posts/mve3/the-power-of-positive-thinking.md b/source/posts/mve3/the-power-of-positive-thinking.md
@@ -1,7 +1,7 @@
 ---
 title: The Power of Positive Thinking - Transform Your Mindset
 description: <video src="https://www.shutterstock.com/shutterstock/videos/3434489259/preview/stock-footage-creative-office-professional-female-programmer-uses-headphones-working-on-desktop-computer.webm" controls autoplay muted> muted </video> Discover the benefits of positive thinking and learn how to cultivate a more optimistic mindset for a happier life.
-publishDate: 2024-10-14
+publishDate: 14 Nov 2024
 ---
 # The Power of Positive Thinking: Transform Your Mindset
 Positive thinking is more than just a feel-good concept—it has the power to transform your life and enhance your overall well-being. Cultivating a positive mindset can lead to greater happiness, improved health, and better relationships. Let’s explore the benefits of positive thinking and how you can harness its power to improve your life.

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;
+  }
+}