Updated header wrapping and sizing for mobile. Updates to mobile view that were icky.

Author: radicalkjax

.gitignore

@@ -133,6 +133,7 @@ credentials.yml
 .ruby-version
 .ruby-gemset
 .rvmrc
+.ruby-lsp/
 
 # Documentation build
 docs/_site/

Gemfile

@@ -25,4 +25,8 @@ gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
 # Development tools
 group :development do
   gem "webrick", "~> 1.8"
-end
+end
+
+# Ruby 3.4+ compatibility
+gem "csv"
+gem "bigdecimal"

Gemfile.lock

@@ -10,13 +10,15 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     base64 (0.2.0)
+    bigdecimal (3.3.1)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.11.1)
     colorator (1.1.0)
     commonmarker (0.23.11)
     concurrent-ruby (1.3.5)
+    csv (3.3.5)
     dnsruby (1.72.4)
       base64 (~> 0.2.0)
       logger (~> 1.6.5)
@@ -211,12 +213,14 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.10)
     logger (1.6.6)
     mercenary (0.3.6)
+    mini_portile2 (2.8.9)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.25.4)
-    nokogiri (1.13.10-x86_64-darwin)
+    nokogiri (1.13.10)
+      mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
@@ -251,9 +255,12 @@ GEM
     zeitwerk (2.6.18)
 
 PLATFORMS
+  x86_64-darwin-23
   x86_64-darwin-24
 
 DEPENDENCIES
+  bigdecimal
+  csv
   github-pages (~> 228)
   http_parser.rb (~> 0.6.0)
   jekyll-feed (~> 0.15)

_sass/base/_global.scss

@@ -751,20 +751,49 @@
   .section-title {
     font-size: 2rem;
   }
-  
+
   .hero-content h1 {
     font-size: 2.5rem;
   }
-  
+
   .recognition-grid,
   .expertise-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .cta-buttons {
     flex-direction: column;
     align-items: center;
   }
+
+  .podcast-content h2 {
+    font-size: 1.75rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .podcast {
+    padding: 2rem 1rem;
+  }
+
+  .podcast-content {
+    padding: 0;
+  }
+
+  .podcast-features {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0;
+  }
+
+  .feature-item {
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+  }
 }
 
 // Reduced Motion Support

_sass/components/_kawaii.scss

@@ -119,6 +119,10 @@
   text-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
   margin-bottom: 0.5rem;
   filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.4));
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
 }
 
 // Hero highlight text

_sass/layout/_header.scss

@@ -11,14 +11,14 @@
 }
 
 .header-container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 3rem;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 3rem;
+  gap: 2rem;
 }
 
 .brand {
@@ -82,7 +82,7 @@
   gap: 1rem;
   flex-wrap: nowrap;
   flex-shrink: 0;
-  margin-left: auto;
+  justify-content: flex-end;
 }
 
 .nav-link {
@@ -128,35 +128,119 @@
 }
 
 // Responsive
+@media (max-width: 1300px) {
+  .header-container {
+    padding: 0 2rem;
+    gap: 1rem;
+  }
+
+  .nav {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    flex-shrink: 1;
+  }
+
+  .nav-link {
+    padding: 0.75rem 1.1rem;
+    font-size: 0.88rem;
+  }
+}
+
+@media (max-width: 1100px) {
+  .header-container {
+    padding: 0 2rem;
+  }
+
+  .nav {
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: 100%;
+  }
+
+  .nav-link {
+    padding: 0.75rem 1.2rem;
+    font-size: 0.875rem;
+  }
+}
+
 @media (max-width: 1024px) {
   .header-container {
     flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
   }
-  
+
+  .brand {
+    width: 100%;
+    justify-content: center;
+  }
+
   .nav {
     flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .nav-link {
+    padding: 0.75rem 1.25rem;
+    font-size: 0.85rem;
   }
 }
 
 @media (max-width: 768px) {
   .header-container {
     flex-direction: column;
     text-align: center;
+    padding: 0 1rem;
   }
-  
+
   .brand {
+    flex-direction: column;
     justify-content: center;
+    text-align: center;
+    width: 100%;
   }
-  
+
   .nav {
     justify-content: center;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 0.5rem;
   }
-  
+
+  .nav-link {
+    padding: 0.65rem 1rem;
+    font-size: 0.8rem;
+    flex: 0 1 auto;
+    min-width: fit-content;
+  }
+
   .logo {
-    font-size: 2.5rem;
+    font-size: 2rem;
   }
-  
+
+  .tagline {
+    font-size: 0.75rem;
+  }
+
   .logo-text-wrapper {
     text-align: center;
   }
+}
+
+@media (max-width: 480px) {
+  .header-container {
+    padding: 0 0.75rem;
+  }
+
+  .nav {
+    gap: 0.5rem;
+  }
+
+  .nav-link {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
 }

contact.md

@@ -208,5 +208,34 @@ permalink: /contact/
   -webkit-text-fill-color: transparent;
   text-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
   filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.4));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  .page-section-title {
+    font-size: 1.75rem;
+  }
+
+  .team-contacts {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    padding: 0 1rem;
+    margin: 2rem auto;
+    max-width: 100%;
+  }
+
+  .team-member {
+    padding: 1.5rem;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .contact-form {
+    padding: 0 1rem;
+    margin: 2rem auto;
+  }
 }
 </style>
+

podcasts.html

@@ -259,6 +259,8 @@ <h3>Episodes Coming Soon!</h3>
   -webkit-text-fill-color: transparent;
   text-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
   filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.4));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .podcast-tagline {
@@ -309,6 +311,8 @@ <h3>Episodes Coming Soon!</h3>
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .podcast-subtitle {
@@ -469,18 +473,28 @@ <h3>Episodes Coming Soon!</h3>
 @media (max-width: 768px) {
   .episodes-carousel-container {
     padding: 0 2rem;
+    display: flex;
+    justify-content: center;
   }
-  
+
+  .episodes-carousel {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
   .carousel-nav {
     width: 40px;
     height: 40px;
     font-size: 1.2rem;
   }
-  
+
   .episode-slide {
     padding: 0 0.5rem;
+    display: flex;
+    justify-content: center;
   }
-  
+
   .episode-slide.prev,
   .episode-slide.next {
     transform: translateX(0) scale(0.9);
@@ -528,10 +542,22 @@ <h3>Episodes Coming Soon!</h3>
     grid-template-columns: 1fr;
     text-align: center;
   }
-  
+
   .podcast-cover-art {
     max-width: 300px;
     margin: 0 auto;
   }
+
+  .podcast-main-title {
+    font-size: 1.75rem;
+  }
+
+  .podcast-details h2 {
+    font-size: 1.5rem;
+  }
+
+  .podcast-tagline {
+    font-size: 1rem;
+  }
 }
 </style>