jekyll-bear-theme 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ecc530b679d4282ee1b024826ab66867981de210b25bc59772758990f1f9fa3
-  data.tar.gz: 89b663c633e425b61c4ec0c25de78dc6082027bc89c0ecbe8a435c49ac8786bf
+  metadata.gz: 321a64217ca032b2568fb793d950fe0f8e795b0672f15b9f4432bff72c6c48e3
+  data.tar.gz: 5725640312e7f03e468c8b61b64ea828d6b4777dbe32043e098a01e14f0ea671
 SHA512:
-  metadata.gz: 821809b58d18a4f4f5c2af63725552a224cb0cd8b0419b5d8641a9697a7902aed86013601a818518116796f76252b3b05fa17ce543779fea3a659039317d2683
-  data.tar.gz: 276a81deb6a733f2a10c891bb111e4a821b3af99e2fa1dd354b5e9f77df56ff5d3aa307fe7f4d185082a188a61ad21aa8eaf0dcc6b3c18d29c1e6cbfcf17d6c3
+  metadata.gz: 07b29e2279a7fb91b778950c5bcaa8d8a5a6b8e03fe6719a29539aa3ff5c52d800084cfa871da546b252b10cf4f5a5d59c010a73d15c1e6491077fc36d89b194
+  data.tar.gz: b17d6e3ecdc6359f9328200e124855b86d2592c1ec3d2f9b553f3404ec33330605585ddefcc061ce352f883bed69b153908785c591e0c9ac57489990713f4c90

data/README.md

@@ -122,6 +122,18 @@ Use them as templates for your front matter.
 >To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`.
 
 
+## Recent Updates: Life in Weeks Interactive Carousel
+
+- The **Life in Weeks** page now features an interactive carousel blockquote above the grid, showing a key event from your life.
+- Up/down arrows let you cycle through events. The week number, event name, and description are shown, with the week number highlighted.
+- As you change the quote, the corresponding week in the grid pulses, visually connecting the event to its week.
+- The quote area has a fixed height and is vertically centered, so the grid never shifts as you browse events.
+- The grid is fully non-interactive (no tooltips, no pointer/question mark cursor), for a clean and minimal look.
+- The carousel arrows are styled to match the theme and do not show a highlight on click.
+- All code is lean and efficient: no extra network requests, no heavy JS, and all data is embedded at build time for instant loading.
+
+See `life.md`, `_layouts/life-in-weeks.html`, and `assets/life-carousel.js` for implementation details.
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/knhash/jekyllBear. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

data/_layouts/life-in-weeks.html

@@ -20,7 +20,34 @@ layout: compress
         {% assign start_day = split_start[2] %}
         {% assign end_year = page.end_year | plus: 0 %}
         
-        <div class="weeks-grid">
+        <!-- Carousel Blockquote Section -->
+        <div id="life-carousel-container" style="display: flex; align-items: center; margin: 2.2em 0 1.7em 0;" data-start-date="{{ page.start_date }}">
+          <div style="display: flex; flex-direction: column; align-items: center; margin-right: 1em;">
+            <button id="life-carousel-up" aria-label="Previous event" style="background: none; border: none; cursor: pointer; font-size: 1.5em; line-height: 1; padding: 0.2em;">
+              <span aria-hidden="true">&#9650;</span>
+            </button>
+            <button id="life-carousel-down" aria-label="Next event" style="background: none; border: none; cursor: pointer; font-size: 1.5em; line-height: 1; padding: 0.2em;">
+              <span aria-hidden="true">&#9660;</span>
+            </button>
+          </div>
+          <blockquote style="flex: 1; margin: 0; font-size: 1.1em; height: 7.5em; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.5; overflow: hidden; font-style: normal;">
+            <span id="life-carousel-quote"></span>
+            <span id="life-carousel-meta" style="font-size: 0.95em; color: var(--main-color); margin-top: 0.5em;"></span>
+          </blockquote>
+        </div>
+        {% capture events_json %}[
+        {% assign first = true %}
+        {% for event_date in data %}
+          {% assign date = event_date[0] %}
+          {% for event in event_date[1] %}
+            {% unless first %},{% endunless %}{"name":{{ event.name | jsonify }},"desc":{{ event.desc | jsonify }},"date":{{ date | jsonify }}}
+            {% assign first = false %}
+          {% endfor %}
+        {% endfor %}
+        ]{% endcapture %}
+        <script id="life-in-weeks-events-json" type="application/json">{{ events_json | strip }}</script>
+        <script src="{{ "/assets/life-carousel.js" | relative_url }}"></script>
+        <div class="weeks-grid" style="margin-top: 1.7em;">
             {% assign total_years = end_year | minus: start_year | plus: 1 %}
             {% assign total_weeks = total_years | times: 52 %}
             {% if total_weeks > 0 %}
@@ -67,9 +94,9 @@ layout: compress
                         {% assign is_current = true %}
                     {% endif %}
                     {% assign decade_mod = decade | modulo: 2 %}
-                    <div class="week decade-{{ decade_mod }}{% if week_has_events %} has-events{% endif %}{% if is_future %} future{% endif %}{% if is_current %} current{% endif %}" 
-                         {% if week_has_events %}data-event="{{ week_tooltip | strip }}"{% endif %}>
-                        {% if week_has_events %}{{ week_events | strip }}{% endif %}
+                    <div class="week decade-{{ decade_mod }}{% if week_has_events %} has-events{% endif %}{% if is_future %} future{% endif %}{% if is_current %} current{% endif %}"
+                         data-week-number="{{ week_index }}">
+                        <!-- No event text, just highlight -->
                     </div>
                     {% assign week_index = week_index | plus: 1 %}
                 {% endfor %}

data/assets/life-carousel.js

@@ -0,0 +1,93 @@
+// Carousel logic for life-in-weeks blockquote
+(function() {
+  let currentIndex = 0;
+
+  // Parse events from embedded JSON
+  function loadEventsFromJson() {
+    var jsonTag = document.getElementById('life-in-weeks-events-json');
+    if (jsonTag) {
+      try {
+        var jsonStr = jsonTag.textContent.trim();
+        window.lifeInWeeksEvents = JSON.parse(jsonStr);
+      } catch (e) {
+        window.lifeInWeeksEvents = [];
+      }
+    }
+  }
+
+  function getWeekNumberSinceBirth(eventDateStr) {
+    // Get start_date from a data attribute on the container
+    const container = document.getElementById('life-carousel-container');
+    const startDateStr = container ? container.getAttribute('data-start-date') : null;
+    if (!startDateStr) return '?';
+    const start = new Date(startDateStr);
+    const eventDate = new Date(eventDateStr);
+    if (isNaN(start) || isNaN(eventDate)) return '?';
+    const diffMs = eventDate - start;
+    const weekNum = Math.floor(diffMs / (1000 * 60 * 60 * 24 * 7)) + 1;
+    return weekNum;
+  }
+
+  function updateCarousel() {
+    const events = window.lifeInWeeksEvents || [];
+    const quote = document.getElementById('life-carousel-quote');
+    const meta = document.getElementById('life-carousel-meta');
+    // Remove pulse from all weeks
+    document.querySelectorAll('.week.carousel-pulse').forEach(el => {
+      el.classList.remove('carousel-pulse');
+    });
+    if (!events.length) {
+      quote.textContent = 'No events to display.';
+      meta.textContent = '';
+      return;
+    }
+    if (currentIndex >= events.length) currentIndex = 0;
+    if (currentIndex < 0) currentIndex = events.length - 1;
+    const event = events[currentIndex];
+    const weekNum = getWeekNumberSinceBirth(event.date);
+    // Highlight the corresponding week in the grid
+    const weekDiv = document.querySelector('.week[data-week-number="' + (weekNum - 1) + '"]');
+    if (weekDiv) {
+      weekDiv.classList.add('carousel-pulse');
+    }
+    let main = '';
+    if (event.name && event.desc) {
+      main = `<span class="carousel-weeknum">Week ${weekNum}</span>: ${event.name}`;
+      quote.innerHTML = main;
+      meta.textContent = event.desc;
+    } else if (event.name) {
+      main = `<span class="carousel-weeknum">Week ${weekNum}</span>: ${event.name}`;
+      quote.innerHTML = main;
+      meta.textContent = '';
+    } else if (event.desc) {
+      main = `<span class="carousel-weeknum">Week ${weekNum}</span>`;
+      quote.innerHTML = main;
+      meta.textContent = event.desc;
+    } else {
+      quote.innerHTML = `<span class="carousel-weeknum">Week ${weekNum}</span>`;
+      meta.textContent = '';
+    }
+  }
+  window.updateLifeCarousel = updateCarousel;
+
+  function setupCarousel() {
+    loadEventsFromJson();
+    document.getElementById('life-carousel-up').addEventListener('click', function() {
+      const events = window.lifeInWeeksEvents || [];
+      currentIndex = (currentIndex - 1 + events.length) % events.length;
+      updateCarousel();
+    });
+    document.getElementById('life-carousel-down').addEventListener('click', function() {
+      const events = window.lifeInWeeksEvents || [];
+      currentIndex = (currentIndex + 1) % events.length;
+      updateCarousel();
+    });
+    updateCarousel();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupCarousel);
+  } else {
+    setupCarousel();
+  }
+})();

data/assets/style.css

@@ -1,43 +1,144 @@
+/* Highlighted week number in carousel quote */
+.carousel-weeknum {
+  color: var(--link-color);
+  font-weight: bold;
+  font-style: normal;
+}
+/* Pulse effect for carousel-selected week */
+.carousel-pulse {
+  animation: carousel-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
+  border-width: 2px !important;
+  border-color: var(--link-color) !important;
+  box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
+  z-index: 2;
+}
+
+@keyframes carousel-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.18);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/* Carousel arrow button styles */
+#life-carousel-up, #life-carousel-down {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.5em;
+  line-height: 1;
+  padding: 0.2em;
+  color: var(--main-color);
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.2s;
+}
+#life-carousel-up:focus, #life-carousel-down:focus, #life-carousel-up:active, #life-carousel-down:active {
+  outline: none;
+  box-shadow: none;
+  background: none;
+  color: var(--main-color);
+}
+#life-carousel-up span, #life-carousel-down span {
+  color: inherit;
+}
 /* Tooltip for event squares */
+
 .week[data-event] {
   position: relative;
-  cursor: pointer;
+  cursor: default !important;
 }
-.week[data-event]:hover::after {
-  content: attr(data-event);
-  position: absolute;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 0.6rem;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-family: var(--font-secondary);
-  font-weight: normal;
-  line-height: 1.4;
-  white-space: pre-line;
-  z-index: 100;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
-  top: 130%;
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-  max-width: 50vw;
-  min-width: max-content;
-  width: max-content;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  vertical-align: baseline;
+
+.week {
+  cursor: default !important;
+}
+
+/* Desktop: show tooltip on hover */
+@media (hover: hover) {
+  .week[data-event]:hover::after {
+    content: attr(data-event);
+    position: absolute;
+    background: var(--background-color);
+    color: var(--text-color);
+    padding: 0.6rem;
+    border-radius: 0.2rem;
+    border: 1px solid var(--blockquote-color);
+    font-size: 1rem;
+    font-family: var(--font-thin);
+    font-weight: normal;
+    line-height: 1.2;
+    white-space: pre-line;
+    z-index: 100;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+    top: 130%;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    max-width: 30vw;
+    min-width: max-content;
+    width: max-content;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    vertical-align: baseline;
+  }
+}
+
+/* Mobile: show tooltip on active/focus */
+@media (hover: none) {
+  .week[data-event]:active::after,
+  .week[data-event]:focus::after {
+    content: attr(data-event);
+    position: absolute;
+    background: var(--background-color);
+    color: var(--text-color);
+    padding: 0.6rem;
+    border-radius: 0.2rem;
+    border: 1px solid var(--blockquote-color);
+    font-size: 1rem;
+    font-family: var(--font-thin);
+    font-weight: normal;
+    line-height: 1.2;
+    white-space: pre-line;
+    z-index: 100;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+    top: 130%;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    max-width: 50vw;
+    min-width: max-content;
+    width: max-content;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    vertical-align: baseline;
+  }
+  
+  .week[data-event] {
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+  }
 }
 
       
       
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
 :root {
     --width: 900px;
-    --font-main: 'Fira Code', monospace;
-    --font-secondary: 'Fira Code', monospace;
+    --font-main: 'IBM Plex Sans', sans-serif;
+    --font-thin: 'IBM Plex Sans Thin', sans-serif;
+    --font-secondary: 'IBM Plex Sans', sans-serif;
+    --font-monospace: 'IBM Plex Mono', monospace;
     --font-scale: .95em;
     --background-color: #F8F1E5; /* Lighter cream */
     --heading-color: #2C1E15; /* Darker roast coffee */
@@ -140,7 +241,7 @@ img {
 }
 
 code {
-    font-family: monospace;
+    font-family: var(--font-monospace);
     padding: 2px;
     background-color: var(--code-background-color);
     color: var(--code-color);
@@ -225,7 +326,8 @@ td {
 
 /* external link marker */
 a[href^="http"]:where(:not([href*="knhash.in/"])):not(:has(img))::after {
-    content: "↗"
+    content: "↗";
+    font-family: var(--font-monospace);
 }
 
 /* Form elements */
@@ -280,7 +382,6 @@ input[type=button], input[type=submit], input[type=reset] {
 
 .weeks-grid {
   margin: 60px 0;
-  font-family: var(--font-main);
   display: flex;
   flex-wrap: wrap;
   gap: 2px;
@@ -288,28 +389,11 @@ input[type=button], input[type=submit], input[type=reset] {
   align-items: flex-start;
 }
 
-/* Make weeks grid wider on larger screens while maintaining padding */
-@media (min-width: 1200px) {
-  .weeks-grid {
-    max-width: calc(100vw - 10vw);
-    width: calc(100vw - 10vw);
-    margin-left: calc((var(--width) - 100vw + 10vw) / 2);
-    margin-right: calc((var(--width) - 100vw + 10vw) / 2);
-  }
-}
-
-@media (min-width: 1400px) {
-  .weeks-grid {
-    max-width: calc(100vw - 10vw);
-    width: calc(100vw - 10vw);
-    margin-left: calc((var(--width) - 100vw + 10vw) / 2);
-    margin-right: calc((var(--width) - 100vw + 10vw) / 2);
-  }
-}
+/* Removed wide-screen overrides for .weeks-grid to always fit its container */
 
 .week {
-  min-width: 30px;
-  height: 30px;
+  width: 16px;
+  height: 16px;
   border: 1px solid var(--main-color);
   background-color: var(--background-color);
   display: inline-flex;
@@ -317,9 +401,10 @@ input[type=button], input[type=submit], input[type=reset] {
   justify-content: center;
   position: relative;
   cursor: help;
+  font-family: var(--font-thin);
   font-size: var(--font-scale);
   line-height: 1.5;
-  padding: 4px 8px;
+  padding: 2px 2px;
   white-space: nowrap;
   box-sizing: border-box;
 }
@@ -346,11 +431,10 @@ input[type=button], input[type=submit], input[type=reset] {
 
 .week.has-events {
   border-color: var(--visited-color);
-  color: var(--text-color);
+  background-color: var(--blockquote-color);
+  color: inherit;
   font-size: var(--font-scale);
-  min-width: auto;
-  width: auto;
-  padding: 4px 10px;
+  padding: 0;
 }
 
 .week.has-events.future {

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-bear-theme
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - knhash
 bindir: bin
 cert_chain: []
-date: 2025-07-16 00:00:00.000000000 Z
+date: 2025-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -107,6 +107,7 @@ files:
 - assets/images/circle-about-tr.png
 - assets/images/circle-about.ico
 - assets/images/circle-about.png
+- assets/life-carousel.js
 - assets/style.css
 homepage: https://knhash.in/jekyllBear
 licenses: