Multiple improvements to visuals

assets/js/videos.js

@@ -1,30 +1,28 @@
 export default {
   init () {
     document.addEventListener('DOMContentLoaded', () => {
-      // Get all "dropdown" elements
-      const $tabs = Array.prototype.slice.call(document.querySelectorAll('#video-container div.tabs li'), 0);
-      const $contents = Array.prototype.slice.call(document.querySelectorAll('#video-container div[id*="-content"]'))
-
-      // Add a click event on each of them
+      const $tabs = Array.prototype.slice.call(document.querySelectorAll('#video-container .video-tab'), 0);
+      const $contents = Array.prototype.slice.call(document.querySelectorAll('#video-container div[id$="-content"]'));
+
       $tabs.forEach( el => {
         el.addEventListener('click', () => {
-    
+
           $tabs.forEach( tab => {
             tab.classList.remove('is-active');
           });
           $contents.forEach( content => {
-            if (content.id === `${el.children[0].id}-content`) {
-              content.style.display = 'flex';
+            if (content.id === `${el.id}-content`) {
+              content.style.display = 'block';
             } else {
               content.style.display = 'none';
             }
           });
-    
-          el.classList.toggle('is-active');
-          
+
+          el.classList.add('is-active');
+
         });
       });
-    
+
     });
   }
 }

assets/scss/_bulma_custom.scss

@@ -2,7 +2,7 @@
 // See https://bulma.io/documentation/customize/with-node-sass/
 
 // Import fonts
-@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
 
 // Set your brand colors
 $nerves-blue-light: #42a7c6;
@@ -25,6 +25,12 @@ $family-san-serif: 'Montserrat', BlinkMacSystemFont, -apple-system, 'Segoe UI',
   'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 $family-primary: $family-san-serif;
 
+// Typography weight hierarchy
+$body-size: 18px;
+$body-weight: $weight-light;
+$title-weight: $weight-bold;
+$subtitle-weight: $weight-medium;
+
 @import '../../node_modules/bulma/sass/base/_all';
 @import '../../node_modules/bulma/sass/elements/_all';
 @import '../../node_modules/bulma/sass/form/_all';
@@ -36,4 +42,23 @@ $family-primary: $family-san-serif;
 // make the cards have equal height
 .card {
   height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    background: $nerves-blue-light;
+    transform: scaleX(0.4);
+    transform-origin: left;
+    transition: transform 0.2s ease;
+  }
+
+  &:hover::before {
+    transform: scaleX(1);
+  }
 }

assets/scss/main.scss

@@ -12,3 +12,191 @@ body {
 main {
   min-height: 50vh;
 }
+
+.button,
+.navbar-item {
+  font-weight: 500;
+}
+
+.button {
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
+  }
+}
+
+.hero-blurb {
+  @media screen and (min-width: 769px) {
+    max-width: 60%;
+  }
+}
+
+.hero-cta {
+  @media screen and (max-width: 768px) {
+    display: block;
+    width: 100%;
+  }
+}
+
+.hero-gradient {
+  background: linear-gradient(135deg, rgba(51, 100, 126, 1) 0%, rgba(66, 167, 198, 0.85) 100%);
+}
+
+footer {
+  border-top: 3px solid $nerves-blue-light;
+}
+
+.cta-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6em;
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin-top: 1rem;
+}
+
+.cta-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8em;
+  height: 1.8em;
+  border-radius: 50%;
+  border: 2px solid $nerves-blue-light;
+  font-size: 1em;
+  color: $nerves-blue-light;
+  transition: background 0.2s ease, color 0.2s ease;
+
+  .cta-link:hover & {
+    background: $nerves-blue-light;
+    color: white;
+  }
+}
+
+// Video tabs
+.video-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.video-tab {
+  padding: 0.5rem 1.2rem;
+  border-radius: 6px;
+  font-weight: 500;
+  color: $nerves-blue-dark;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: $nerves-blue-light;
+    color: $nerves-blue-light;
+  }
+
+  &.is-active {
+    background: $nerves-blue-dark;
+    color: white;
+    border-color: $nerves-blue-dark;
+  }
+}
+
+// Featured video
+.video-featured {
+  margin-bottom: 1.5rem;
+}
+
+.video-featured-inner {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.video-featured-thumb {
+  position: relative;
+  flex: 0 0 60%;
+  border-radius: 8px;
+  overflow: hidden;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    flex: none;
+    width: 100%;
+  }
+}
+
+.video-play-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .video-featured-inner:hover & {
+    opacity: 1;
+  }
+}
+
+.video-play-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  color: $nerves-blue-dark;
+  font-size: 1.5rem;
+  padding-left: 0.2rem;
+}
+
+.video-featured-info {
+  flex: 1;
+
+  .cta-link {
+    color: $nerves-blue-light;
+  }
+}
+
+.video-duration {
+  display: inline-block;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: $nerves-blue-dark;
+  background: rgba($nerves-blue-light, 0.15);
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  margin-top: 0.25rem;
+}
+
+// Video grid cards
+.video-card {
+  border-radius: 8px;
+
+  .card-image {
+    overflow: hidden;
+    border-radius: 8px 8px 0 0;
+  }
+
+  .card-content {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+  }
+}

layouts/404.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <!-- https://gohugo.io/templates/404/ -->
-<section class="hero is-primary">
+<section class="hero is-primary hero-gradient">
   <div class="hero-body">
     <p class="title">{{ .Title }}</p>
   </div>

layouts/_default/taxonomy.html

@@ -4,7 +4,7 @@
   Example URL: /tags/case/
 */}}
 
-<section class="hero is-primary">
+<section class="hero is-primary hero-gradient">
   <div class="hero-body">
     <p class="title">Tag: {{.Title}}</p>
   </div>

layouts/articles/section.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section class="hero is-primary">
+<section class="hero is-primary hero-gradient">
   <div class="hero-body">
     <p class="title">Articles</p>
     <p class="subtitle">A cultivation of community driven articles</p>

layouts/code/single.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
 
-<header class="hero is-primary is-medium">
+<header class="hero is-primary is-medium hero-gradient">
   <div class="hero-body">
     <p class="title is-2 mb-4">Explore the project</p>
-    <p class="is-size-5 mb-6" style="max-width:60%" >
+    <p class="is-size-5 mb-6 hero-blurb">
       Nerves is spread over many repositories for focus on limited scopes.
     </p>
     {{ range .Params.project_map }}

layouts/community/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<header class="hero is-primary is-medium">
+<header class="hero is-primary is-medium hero-gradient">
   <div class="hero-body">
     <p class="title is-2 mb-4">Nerves ❤️ Community</p>
     <p class="is-size-5">

layouts/home.html

@@ -2,16 +2,16 @@
 
 <header class="hero is-primary is-medium"
   style="background-image:url(img/smart-city.svg);background-repeat:no-repeat;background-position:100%">
-  <div class="hero-body" style="background:rgba(51,100,126,0.8)">
+  <div class="hero-body" style="background:linear-gradient(135deg, rgba(51,100,126,0.9) 0%, rgba(66,167,198,0.8) 100%)">
     <div class="container">
       <p class="title is-2 mb-4">{{ .Params.Tagline }}</p>
-      <p class="is-size-5 mb-6" style="max-width:60%" >
+      <p class="is-size-5 mb-6 hero-blurb">
         {{ .Params.aboutNerves | markdownify }}
       </p>
-      <a href="#getting_started" class="button is-primary is-light is-large mb-2 mr-2">
+      <a href="#getting_started" class="button is-primary is-light is-large mb-2 mr-2 hero-cta">
         Get started
       </a>
-      <a href="#features" class="button is-primary is-light is-large mb-2">
+      <a href="#features" class="button is-primary is-light is-large mb-2 hero-cta">
         Features
       </a>
     </div>
@@ -25,18 +25,12 @@
         {{ with .examples }}
         <div class="column">
           <div class="content">
-            <center>
-              <h3 class="title is-3">{{ $el.name }}</h3>
-            </center>
+            <h3 class="title is-3 has-text-centered">{{ $el.name }}</h3>
             {{ $el.description }}
-            <div class="column">
-              <span class="icon-text">
-                <span><a href="{{ $el.link }}">{{ $el.link_text }}</a></span>
-                <span class="icon">
-                  <img src="{{ relURL "img/arrow-right.svg" }}"></img>
-                </span>
-              </span>
-            </div>
+            <a href="{{ $el.link }}" class="cta-link">
+              <span>{{ $el.link_text }}</span>
+              <span class="cta-arrow">&rarr;</span>
+            </a>
           </div>
         </div>
         <div class="column">
@@ -60,18 +54,12 @@ <h3 class="title is-3">{{ $el.name }}</h3>
         </div>
         <div class="column">
           <div class="content">
-            <center>
-              <h3 class="title is-3">{{ .name }}</h3>
-            </center>
+            <h3 class="title is-3 has-text-centered">{{ .name }}</h3>
             {{ .description }}
-            <div class="column">
-              <span class="icon-text">
-                <span><a href="{{ .link }}">{{ .link_text }}</a></span>
-                <span class="icon">
-                  <img src="{{ relURL "img/arrow-right.svg" }}"></img>
-                </span>
-              </span>
-            </div>
+            <a href="{{ .link }}" class="cta-link">
+              <span>{{ .link_text }}</span>
+              <span class="cta-arrow">&rarr;</span>
+            </a>
           </div>
         </div>
         {{ end }}