jscom_ice 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4254caf3169c23ebbccbe115b7b8257ac7cfbdc96bf5d73866c867a452578a4e
-  data.tar.gz: c9281776d2d1ad0e424605b157692594b2851d577801ac211ce04e560708e077
+  metadata.gz: 63550921535bf31bd3e23e7b372d28af6f21cdb3b6e1661dc54142fc4d92309b
+  data.tar.gz: b00543909cf338ffde1f89f3ebe9cb7a876147ef0dfd99ed94dc9dbf3135f769
 SHA512:
-  metadata.gz: ccb996e3c4461090370d3a81f256cc8d9eb5ce61fc127418bdb7167205714b55dc48f03191cd1f45a6d3492c7b306dbbd5433d063aa90bcb106474cc017c06ef
-  data.tar.gz: 542d4ddd11075786f3699d9ee7fdcef279e6085fad94587d7c83808e8baaea51f1e47165f4567aba05945e3cc84ea20b4e527ac1ce246898579361b2a8b57878
+  metadata.gz: 7abc2c41ae5910cc660d4b0feab2f2b9baab04f4909855a35b7ccd50e5ed91d9aebc57cca93d054bde17b8325b6cb92ac8e8a390550c123b9ca0a83874663a7b
+  data.tar.gz: caadf1f9bbe501c2fedda2d8e7c935497516603e711e7ca5a8e9172afe4f3c6b746ffc5fd587cff9443d184c7acc61c409018fc8410b1879128f7f26180f6201

data/_includes/scripts.html

@@ -12,5 +12,8 @@ Scripts that are loaded throughout the website
 
 <script src="/assets/js/bootstrap.js"></script>
 
+<!-- Navbar scroll behavior -->
+<script src="/assets/js/navbar.js"></script>
+
 <!-- TODO contact form page & move this to more local include? (it's only needed on 1 page)-->
 <!--<script src="/assets/js/contact.js"></script>-->

data/_sass/base/_base.scss

@@ -107,6 +107,9 @@ body {
   flex-direction: column;
   min-height: 100vh;
 
+  // Account for fixed navbar height
+  padding-top: 56px; // Standard Bootstrap navbar height
+
   img {
     width: 100%;
     height: auto;
@@ -154,6 +157,8 @@ body {
   a {
     // Link Colors
     color: $darker-text-link-blue;
+    transition: color 0.2s ease, opacity 0.2s ease;
+
     &:hover,
     &:active,
     &:focus {

data/_sass/component/_navbar.scss

@@ -1,17 +1,29 @@
 // Navbar
 .navbar {
   border-color: $dark-light;
-  position: relative;
+  // position: relative; // Removed - let Bootstrap's fixed-top handle positioning
 
   margin-right: auto;
   margin-left: auto;
   border-bottom: 1px solid $dark-smoke;
 
+  // Smooth transitions for all state changes
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease, padding 0.3s ease;
+
+  // Scrolled state - solid background with shadow
+  &.navbar-scrolled {
+    background-color: rgba(33, 37, 41, 0.98) !important; // Dark semi-transparent
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
 
   .nav-link:not(:last-child) {
     //font-size: 18px;
     color: whitesmoke;
     opacity: .7;
+    transition: opacity 0.2s ease, color 0.2s ease;
   }
   .nav-link {
     &:hover {

data/_sass/component/_posts.scss

@@ -29,10 +29,11 @@
   .post-item-title a {
     color: $smoke;
     //font-weight: bold;
+    transition: color 0.2s ease;
   }
 
   .post-item-title a:hover {
-    color: $darker-blue-grey
+    color: $darker-blue-grey;
   }
 }
 

data/_sass/layout/_footer.scss

@@ -7,6 +7,7 @@
   a.footer_item {
     color: $dark-white;
     text-decoration: none;
+    transition: color 0.2s ease;
   }
 
   a.footer_item:hover {

data/assets/js/navbar.js

@@ -0,0 +1,55 @@
+/**
+ * Navbar scroll behavior
+ * Adds sticky styling to navbar when user scrolls down
+ */
+
+(function() {
+  'use strict';
+
+  // Configuration
+  const SCROLL_THRESHOLD = 50; // pixels before navbar changes
+  const NAVBAR_CLASS_SCROLLED = 'navbar-scrolled';
+
+  // Get navbar element
+  const navbar = document.querySelector('.navbar');
+
+  if (!navbar) {
+    return; // Exit if no navbar found
+  }
+
+  // Track scroll position
+  let lastScroll = 0;
+
+  /**
+   * Handle scroll events
+   */
+  function handleScroll() {
+    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (currentScroll > SCROLL_THRESHOLD) {
+      // User has scrolled down - add solid background
+      navbar.classList.add(NAVBAR_CLASS_SCROLLED);
+    } else {
+      // At top of page - use transparent background
+      navbar.classList.remove(NAVBAR_CLASS_SCROLLED);
+    }
+
+    lastScroll = currentScroll;
+  }
+
+  // Throttle scroll events for better performance
+  let ticking = false;
+
+  window.addEventListener('scroll', function() {
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        handleScroll();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+
+  // Check scroll position on load
+  handleScroll();
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jscom_ice
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - John Sosoka
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-18 00:00:00.000000000 Z
+date: 2025-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -120,6 +120,7 @@ files:
 - assets/js/bootstrap.min.js
 - assets/js/bootstrap.min.js.map
 - assets/js/jquery-3.7.0.min.js
+- assets/js/navbar.js
 - assets/js/popper.min.js
 homepage: https://github.com/johnsosoka/jscom-ice
 licenses:
@@ -140,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.3
+rubygems_version: 3.4.19
 signing_key:
 specification_version: 4
 summary: Simple Dark Jekyll Theme