jekyll-bear-theme 0.2.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ff08eadac46e03fb1806ee17aa05f1c3e781adc9a37a63c9b2fe6d8091e4e09
-  data.tar.gz: 2f733ffa2737c15a5a922910b38d18d2cd2418911b726fbc38f8e33918d76aa4
+  metadata.gz: 3d03b43a44bb6836f6c5e1e9aa92d850aaf064b9ca8c6e7857554909e6a53dbf
+  data.tar.gz: cf00fe723e7d08808aa0a8e36861262554058004b790db48bc6f7f4fd940aea2
 SHA512:
-  metadata.gz: 2392b39ce303ccb1b832628290937c58f862ea5d005807d0b3ea389ae1c71fde48dada77419c5d165710f9f24db1f9c22660c050b9ac6a5dd2cb88ddc35fd759
-  data.tar.gz: 4c3ff1cb58b97b95aa1d8d3ec94dcc18dded2f7a2526e038ef4012a801f8a0394fb57cbb211b31faadfff1c662d8e4b6ffefcd40007f2babb0fba8c084fe1596
+  metadata.gz: 38550f11d7725953e630b3514e83dc690ace23b525bc1aa528ffe24decb3b61cafa2044d311efb2af920b55b3d0e4ea0367d0ad392ab8373aee90dedf88f41ad
+  data.tar.gz: b533bf95ddb547ff7bc5c14c58046a27abdcf9485eb3d827a66f3e915c18bf28ed23d1713fefaff3c0ac034c8ca431ef35a41ea065a6495e2afe4ca25398f41a

data/README.md

@@ -17,6 +17,8 @@ This is a port of it's theme to Jekyll, with some tweaks. So you can use GitHub
 - Gallery view for your images
 - Code highlighting
 - **Life in Weeks visualization** - Interactive timeline of your life events
+- **IBM Plex Mono typography** - Consistent monospace font across all elements
+- **Pine Forest color palette** - Cool, nature-inspired greens with automatic dark mode
 
 ## Screenshots
 
@@ -57,6 +59,21 @@ Or install it yourself as:
 
     $ gem install jekyll-bear-theme
 
+### Design Philosophy
+
+jekyllBear now features a **monospace-first design** with IBM Plex Mono typography, creating a technical yet natural aesthetic. The pine forest color palette provides visual tranquility while maintaining excellent readability across light and dark modes, evoking the calm and focus of a peaceful woodland environment.
+
+### Customization
+
+The theme's CSS is now highly modular and customizable:
+
+- **Typography**: Modify `--font-main`, `--font-secondary`, and `--font-monospace` variables
+- **Spacing**: Use the standardized spacing scale for consistent layouts
+- **Colors**: All theme colors are centralized in CSS custom properties for easy customization
+- **Pine Forest Palette**: Cool greens ranging from light pine mist to deep forest shadows
+- **Glow Effects**: Configurable glow colors via `--glow-color-light` and `--glow-color-medium`
+- **Layout**: Responsive design with mobile-first approach
+
 ## Usage
 
 ### Basic Setup
@@ -121,17 +138,6 @@ 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

data/assets/style.css

@@ -1,175 +1,94 @@
-/* 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;
-}
+/* =============================================================================
+   JEKYLL BEAR THEME - PINE FOREST AESTHETIC
+   ============================================================================= */
+/* =============================================================================
+   FONTS & IMPORTS
+   ============================================================================= */
 
-@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: default !important;
-}
+@import url('https://fonts.googleapis.com/css2?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');
 
-.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=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');
+/* =============================================================================
+   CSS CUSTOM PROPERTIES (VARIABLES)
+   ============================================================================= */
 
 :root {
-    --width: 900px;
-    --font-main: 'IBM Plex Sans', sans-serif;
-    --font-thin: 'IBM Plex Sans Thin', sans-serif;
-    --font-secondary: 'IBM Plex Sans', sans-serif;
+    /* Layout */
+    --width: 720px;
+    
+    /* Typography */
+    --font-main: 'IBM Plex Mono', monospace;
+    --font-secondary: 'IBM Plex Mono', monospace;
     --font-monospace: 'IBM Plex Mono', monospace;
-    --font-scale: .95em;
-    --background-color: #F8F1E5; /* Lighter cream */
-    --heading-color: #2C1E15; /* Darker roast coffee */
-    --text-color: #1F1408; /* Darker espresso */
-    --link-color: #7C4011; /* Darker caramel */
-    --visited-color: #5E3211; /* Darker roasted coffee beans */
-    --main-color: #96572D; /* Darker café au lait */
-    --code-background-color: #E6D7C3; /* Coffee stained paper */
-    --code-color: #2C1E15; /* Darker roast coffee */
-    --blockquote-color: #B99B6B; /* Darker café latte foam */
-}
-
+    --font-scale: 0.9em;
+    
+    /* Spacing */
+    --spacing-xs: 5px;
+    --spacing-sm: 10px;
+    --spacing-md: 20px;
+    --spacing-lg: 40px;
+    --spacing-xl: 60px;
+    
+    /* Border radius */
+    --radius-sm: 3px;
+    --radius-md: 5px;
+    
+    /* Transitions */
+    --transition-fast: 0.2s;
+    --transition-normal: 0.3s;
+    
+    /* Z-index scale */
+    --z-dropdown: 200;
+    --z-modal: 1000;
+    
+    /* Pine Forest Theme Colors - Light Mode */
+    --background-color: #F5F7F3; /* Light pine needle mist */
+    --heading-color: #1A3025; /* Deep forest green */
+    --text-color: #0F2018; /* Dark pine shadow */
+    --link-color: #2D5016; /* Forest moss */
+    --visited-color: #1E3A11; /* Deep woodland */
+    --main-color: #4A7C59; /* Pine needle green */
+    --code-background-color: #E8EDEA; /* Frosted pine */
+    --code-color: #1A3025; /* Deep forest green */
+    --blockquote-color: #7A9B85; /* Sage green */
+    
+    /* Interactive colors derived from theme */
+    --hover-color: white;
+    --border-color: var(--blockquote-color);
+    --shadow-color: rgba(0, 0, 0, 0.18);
+    
+    /* Glow effects for interactive elements */
+    --glow-color-light: rgba(45, 80, 22, 0.3);
+    --glow-color-medium: rgba(45, 80, 22, 0.5);
+}
+
+/* Dark Mode Color Overrides */
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #1A1310; /* Darker espresso */
-        --heading-color: #F0DFC0; /* Lighter café latte foam */
-        --text-color: #F0E6D2; /* Lighter coffee stained paper */
-        --link-color: #E5A254; /* Lighter caramel drizzle */
-        --visited-color: #C49B76; /* Lighter roasted coffee beans */
-        --main-color: #B89470; /* Lighter mocha */
-        --code-background-color: #2C2117; /* Dark chocolate coffee */
-        --code-color: #F0DFC0; /* Lighter café latte foam */
-        --blockquote-color: #6E563D; /* Lighter coffee grounds */
+        --background-color: #0D1B12; /* Dark pine shadow */
+        --heading-color: #C8D8CE; /* Light pine mist */
+        --text-color: #E0EADE; /* Pale forest light */
+        --link-color: #7AB069; /* Bright moss green */
+        --visited-color: #9BC490; /* Light woodland */
+        --main-color: #8BB899; /* Soft pine green */
+        --code-background-color: #1A2B1F; /* Dark evergreen */
+        --code-color: #C8D8CE; /* Light pine mist */
+        --blockquote-color: #4A6B52; /* Forest undergrowth */
+        
+        /* Dark mode glow effects */
+        --glow-color-light: rgba(122, 176, 105, 0.3);
+        --glow-color-medium: rgba(122, 176, 105, 0.5);
     }
 }
 
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
 body {
     font-family: var(--font-secondary);
     font-size: var(--font-scale);
     margin: auto;
-    padding: 20px;
+    padding: var(--spacing-md);
     max-width: var(--width);
     text-align: left;
     background-color: var(--background-color);
@@ -179,33 +98,63 @@ body {
     color: var(--text-color);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+/* =============================================================================
+   TYPOGRAPHY
+   ============================================================================= */
+
+h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-main);
     color: var(--heading-color);
 }
 
+strong, b {
+    color: var(--heading-color);
+}
+
+/* =============================================================================
+   LINKS
+   ============================================================================= */
+
 a {
     color: var(--link-color);
     font-family: var(--font-main);
     cursor: pointer;
     text-decoration: none;
     border-bottom: 3px solid var(--main-color);
+    transition: all var(--transition-fast) ease;
 }
 
 a:hover {
     background-color: var(--main-color);
-    color: white;
+    color: var(--hover-color);
     text-decoration: none;
 }
 
+a:visited {
+    color: var(--visited-color);
+}
+
+/* External link marker */
+a[href^="http"]:where(:not([href*="knhash.in/"])):not(:has(img))::after {
+    content: "↗";
+    font-family: var(--font-monospace);
+}
+
+.title:hover {
+    text-decoration: none;
+}
+
+.title h1 {
+    font-size: 1.5em;
+}
+
+/* =============================================================================
+   LAYOUT COMPONENTS
+   ============================================================================= */
+
 header {
-    margin-bottom: 40px;
-    padding-bottom: 20px;
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-md);
     border-bottom: 3px dotted var(--main-color);
 }
 
@@ -213,69 +162,51 @@ nav a {
     margin-right: 8px;
 }
 
-strong,
-b {
-    color: var(--heading-color);
+main {
+    line-height: 1.6;
 }
 
-button {
-    margin: 0;
-    cursor: pointer;
+footer {
+    margin-top: var(--spacing-lg);
+    border-top: 3px dotted var(--main-color);
+    padding: 25px 0;
+    text-align: center;
 }
 
-main {
-    line-height: 1.6;
+footer > span:has(a[href="https://bearblog.dev"]) {
+    display: none;
 }
 
-table {
-    width: 100%;
-}
+/* =============================================================================
+   CONTENT ELEMENTS
+   ============================================================================= */
 
 hr {
     border: 0;
-    border-top: 1px dashed;
+    border-top: 1px dashed var(--border-color);
 }
 
 img {
     max-width: 100%;
 }
 
-code {
-    font-family: var(--font-monospace);
-    padding: 2px;
-    background-color: var(--code-background-color);
-    color: var(--code-color);
-    border-radius: 3px;
-}
-
 blockquote {
     border-left: 1px solid var(--blockquote-color);
     color: var(--code-color);
-    padding-left: 20px;
+    padding-left: var(--spacing-md);
     font-style: italic;
 }
 
-footer {
-    margin-top: 40px;
-    border-top: 3px dotted var(--main-color);
-    padding: 25px 0;
-    text-align: center;
-}
-
-footer > span:has(a[href="https://bearblog.dev"]) {
-    display: none;
-}
-
-.title:hover {
-    text-decoration: none;
-}
+/* =============================================================================
+   CODE & SYNTAX HIGHLIGHTING
+   ============================================================================= */
 
-.title h1 {
-    font-size: 1.5em;
-}
-
-.inline {
-    width: auto !important;
+code {
+    font-family: var(--font-monospace);
+    padding: 2px;
+    background-color: var(--code-background-color);
+    color: var(--code-color);
+    border-radius: var(--radius-sm);
 }
 
 .highlight,
@@ -283,13 +214,31 @@ footer > span:has(a[href="https://bearblog.dev"]) {
     padding: 1px 15px;
     background-color: var(--code-background-color);
     color: var(--code-color);
-    border-radius: 3px;
+    border-radius: var(--radius-sm);
     margin-block-start: 1em;
     margin-block-end: 1em;
     overflow-x: auto;
 }
 
-/* blog post list */
+/* =============================================================================
+   TABLES
+   ============================================================================= */
+
+table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+th, td {
+    padding: 6px 13px;
+    border: 1px solid var(--border-color);
+    font-size: 1em;
+}
+
+/* =============================================================================
+   BLOG POST LISTINGS
+   ============================================================================= */
+
 ul.blog-posts {
     list-style-type: none;
     padding: unset;
@@ -297,304 +246,393 @@ ul.blog-posts {
 
 ul.blog-posts li {
     display: flex;
-    margin-bottom: 10px;
-}
-
-i time {
-    font-style: normal;
-    opacity: 0.7;
+    margin-bottom: var(--spacing-sm);
 }
 
 ul.blog-posts li span {
     flex: 0 0 130px;
 }
 
-
 ul.blog-posts li a:visited {
     color: var(--visited-color);
 }
 
-table {
-    border-spacing: 0;
+i time {
+    font-style: normal;
+    opacity: 0.7;
 }
 
-th,
-td {
-    padding: 6px 13px;
-    font-size: 1em;
+/* =============================================================================
+   UTILITY CLASSES
+   ============================================================================= */
+
+.inline {
+    width: auto !important;
 }
 
-/* external link marker */
-a[href^="http"]:where(:not([href*="knhash.in/"])):not(:has(img))::after {
-    content: "↗";
-    font-family: var(--font-monospace);
+button {
+    margin: 0;
+    cursor: pointer;
 }
 
-/* Form elements */
+/* =============================================================================
+   FORM ELEMENTS
+   ============================================================================= */
+
 input, button, textarea, select {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font: inherit;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font: inherit;
 }
+
 legend {
-  margin: 20px 0;
-  font-weight: bold;
+    margin: var(--spacing-md) 0;
+    font-weight: bold;
 }
+
 label {
-  display: block;
-  font-weight: bold;
+    display: block;
+    font-weight: bold;
 }
-input,
-textarea {
-  margin: 0 0 10px;
-  padding: 5px 10px;
-  color: var(--text-color);
-  background: var(--accent-color);
-  border: 2px solid var(--link-color);
-  border-radius: 5px;
+
+input, textarea {
+    margin: 0 0 var(--spacing-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    color: var(--text-color);
+    background: var(--code-background-color);
+    border: 2px solid var(--link-color);
+    border-radius: var(--radius-md);
 }
+
 input {
-  width: 55%;
+    width: 55%;
 }
+
 textarea {
-  width: 95%;
-}
-input[type=button], input[type=submit], input[type=reset] {
-  margin: 0 0 20px;
-  padding: 7px;
-  font-family: var(--font-secondary);
-  font-weight: bold;
-  color: var(--background-color);
-  background: var(--link-color);
-  border-radius: 5px;
-  cursor: pointer;
+    width: 95%;
+}
+
+input[type=button], 
+input[type=submit], 
+input[type=reset] {
+    margin: 0 0 var(--spacing-md);
+    padding: 7px;
+    font-family: var(--font-secondary);
+    font-weight: bold;
+    color: var(--background-color);
+    background: var(--link-color);
+    border-radius: var(--radius-md);
+    cursor: pointer;
 }
+
 ::placeholder {
-  color: var(--text-color);
-  opacity: 0.7;
+    color: var(--text-color);
+    opacity: 0.7;
 }
 
-/* Life in Weeks Styles */
+/* =============================================================================
+   LIFE IN WEEKS - MAIN COMPONENT
+   ============================================================================= */
+
 .life-in-weeks {
-  margin: 20px 0;
+    margin: var(--spacing-md) 0;
 }
 
 .weeks-grid {
-  margin: 60px 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  max-width: 100%;
-  align-items: flex-start;
+    margin: var(--spacing-xl) 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    max-width: 100%;
+    align-items: flex-start;
 }
 
-/* Removed wide-screen overrides for .weeks-grid to always fit its container */
-
+/* Week Square Base Styles */
 .week {
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--main-color);
-  background-color: var(--background-color);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  cursor: help;
-  font-family: var(--font-thin);
-  font-size: var(--font-scale);
-  line-height: 1.5;
-  padding: 2px 2px;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-
-/* Alternating decade bands */
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--main-color);
+    background-color: var(--background-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: default;
+    font-family: var(--font-secondary);
+    font-size: var(--font-scale);
+    line-height: 1.5;
+    padding: 2px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    transition: all var(--transition-fast) ease;
+}
+
+/* Week Square State Variations */
 .week.decade-0 {
-  background-color: var(--background-color);
+    background-color: var(--background-color);
 }
 
 .week.decade-1 {
-  background-color: var(--code-background-color);
+    background-color: var(--code-background-color);
 }
 
 .week.future {
-  background-color: transparent;
-  border-color: var(--blockquote-color);
-  opacity: 0.3;
+    background-color: transparent;
+    border-color: var(--blockquote-color);
+    opacity: 0.3;
 }
 
 .week.decade-1.future {
-  background-color: var(--code-background-color);
-  opacity: 0.2;
+    background-color: var(--code-background-color);
+    opacity: 0.2;
 }
 
 .week.has-events {
-  border-color: var(--visited-color);
-  background-color: var(--blockquote-color);
-  color: inherit;
-  font-size: var(--font-scale);
-  padding: 0;
+    border-color: var(--visited-color);
+    background-color: var(--blockquote-color);
+    color: inherit;
+    font-size: var(--font-scale);
+    padding: 0;
 }
 
 .week.has-events.future {
-  border-color: var(--blockquote-color);
-  opacity: 0.6;
-  color: var(--blockquote-color);
+    border-color: var(--blockquote-color);
+    opacity: 0.6;
+    color: var(--blockquote-color);
 }
 
+/* Current Week Animation */
 .week.current {
-  animation: pulse 2s ease-in-out infinite;
-  border-width: 2px;
-  border-color: var(--link-color);
-  box-shadow: 0 0 10px rgba(124, 64, 17, 0.3);
+    animation: pulse 2s ease-in-out infinite;
+    border-width: 2px;
+    border-color: var(--link-color);
+    box-shadow: 0 0 10px var(--glow-color-light);
 }
 
 .week.current.has-events {
-  box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
+    box-shadow: 0 0 10px var(--glow-color-medium);
 }
 
 @keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.7;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 0.7;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
+/* Dark Mode Week Adjustments */
 @media (prefers-color-scheme: dark) {
-  .week.current {
-    box-shadow: 0 0 10px rgba(229, 162, 84, 0.3);
-  }
-  
-  .week.current.has-events {
-    box-shadow: 0 0 10px rgba(229, 162, 84, 0.5);
-  }
+    .week.current {
+        box-shadow: 0 0 10px var(--glow-color-light);
+    }
+    
+    .week.current.has-events {
+        box-shadow: 0 0 10px var(--glow-color-medium);
+    }
 }
 
+/* =============================================================================
+   LIFE IN WEEKS - INTERACTIVE COMPONENTS
+   ============================================================================= */
+
+/* Event Indicator */
 .event-indicator {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--background-color);
-  font-size: 8px;
-  line-height: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--background-color);
+    font-size: 8px;
+    line-height: 1;
 }
 
+/* Events List */
 .events-list {
-  margin: 40px 0;
-  padding: 20px;
-  background-color: var(--code-background-color);
-  border-radius: 5px;
+    margin: var(--spacing-lg) 0;
+    padding: var(--spacing-md);
+    background-color: var(--code-background-color);
+    border-radius: var(--radius-md);
 }
 
 .events-list h3 {
-  margin-top: 0;
-  color: var(--heading-color);
-  border-bottom: 1px solid var(--main-color);
-  padding-bottom: 10px;
+    margin-top: 0;
+    color: var(--heading-color);
+    border-bottom: 1px solid var(--main-color);
+    padding-bottom: var(--spacing-sm);
 }
 
 .event-item {
-  margin: 10px 0;
-  padding: 8px 0;
-  border-bottom: 1px dotted var(--blockquote-color);
-  font-size: 0.9em;
-  line-height: 1.4;
+    margin: var(--spacing-sm) 0;
+    padding: 8px 0;
+    border-bottom: 1px dotted var(--blockquote-color);
+    font-size: 0.9em;
+    line-height: 1.4;
 }
 
 .event-item:last-child {
-  border-bottom: none;
+    border-bottom: none;
 }
 
 .event-year {
-  color: var(--main-color);
-  margin-right: 15px;
-  min-width: 50px;
-  display: inline-block;
+    color: var(--main-color);
+    margin-right: 15px;
+    min-width: 50px;
+    display: inline-block;
 }
 
 .event-name {
-  color: var(--heading-color);
-  margin-right: 10px;
+    color: var(--heading-color);
+    margin-right: var(--spacing-sm);
 }
 
 .event-desc {
-  color: var(--text-color);
-  font-style: italic;
-  display: block;
-  margin-top: 5px;
-  margin-left: 65px;
+    color: var(--text-color);
+    font-style: italic;
+    display: block;
+    margin-top: var(--spacing-xs);
+    margin-left: 65px;
+}
+
+/* =============================================================================
+   LIFE IN WEEKS - CAROUSEL COMPONENTS
+   ============================================================================= */
+
+/* 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 var(--glow-color-medium);
+    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 var(--transition-fast);
 }
 
-/* Responsive adjustments */
-/* Responsive sizing to fit ~52 squares across screen width */
+#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;
+}
+
+/* =============================================================================
+   RESPONSIVE DESIGN
+   ============================================================================= */
+
+/* Large screens - optimize week grid sizing */
 @media (max-width: 1200px) {
-  .week {
-    width: calc((100vw - 40px - (51 * 2px)) / 52);
-    height: calc((100vw - 40px - (51 * 2px)) / 52);
-    font-size: calc(var(--font-scale) * 0.8);
-    padding: 0;
-    min-width: 8px;
-    min-height: 8px;
-  }
-  
-  .week.has-events {
-    font-size: calc(var(--font-scale) * 0.8);
-    padding: 0;
-  }
+    .week {
+        width: calc((100vw - 40px - (51 * 2px)) / 52);
+        height: calc((100vw - 40px - (51 * 2px)) / 52);
+        font-size: calc(var(--font-scale) * 0.8);
+        padding: 0;
+        min-width: 8px;
+        min-height: 8px;
+    }
+    
+    .week.has-events {
+        font-size: calc(var(--font-scale) * 0.8);
+        padding: 0;
+    }
 }
 
+/* Tablet screens */
 @media (max-width: 768px) {
-  .week {
-    width: calc((100vw - 40px - (51 * 1px)) / 52);
-    height: calc((100vw - 40px - (51 * 1px)) / 52);
-    font-size: calc(var(--font-scale) * 0.7);
-    padding: 0;
-    min-width: 8px;
-    min-height: 8px;
-  }
-  
-  .week.has-events {
-    font-size: calc(var(--font-scale) * 0.7);
-    padding: 0;
-  }
-  
-  .weeks-grid {
-    gap: 1px;
-  }
-  
-  .event-desc {
-    margin-left: 0;
-  }
+    .week {
+        width: calc((100vw - 40px - (51 * 1px)) / 52);
+        height: calc((100vw - 40px - (51 * 1px)) / 52);
+        font-size: calc(var(--font-scale) * 0.7);
+        padding: 0;
+        min-width: 8px;
+        min-height: 8px;
+    }
+    
+    .week.has-events {
+        font-size: calc(var(--font-scale) * 0.7);
+        padding: 0;
+    }
+    
+    .weeks-grid {
+        gap: 1px;
+    }
+    
+    .event-desc {
+        margin-left: 0;
+    }
 }
 
+/* Mobile screens */
 @media (max-width: 480px) {
-  .week {
-    width: calc((100vw - 40px - (51 * 1px)) / 52);
-    height: calc((100vw - 40px - (51 * 1px)) / 52);
-    font-size: calc(var(--font-scale) * 0.6);
-    padding: 0;
-    min-width: 8px;
-    min-height: 8px;
-  }
-  
-  .week.has-events {
-    font-size: calc(var(--font-scale) * 0.6);
-    padding: 0;
-  }
-  
-  .weeks-grid {
-    gap: 1px;
-  }
+    .week {
+        width: calc((100vw - 40px - (51 * 1px)) / 52);
+        height: calc((100vw - 40px - (51 * 1px)) / 52);
+        font-size: calc(var(--font-scale) * 0.6);
+        padding: 0;
+        min-width: 8px;
+        min-height: 8px;
+    }
+    
+    .week.has-events {
+        font-size: calc(var(--font-scale) * 0.6);
+        padding: 0;
+    }
+    
+    .weeks-grid {
+        gap: 1px;
+    }
 }
       
   

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-bear-theme
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.3.0
 platform: ruby
 authors:
 - knhash
@@ -66,8 +66,9 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.7'
 description: jekyllBear is a clean, minimal Jekyll theme focused on readability and
-  simplicity. Features include a responsive design, tag system, life tracking, and
-  a distraction-free reading experience inspired by Bear Blog.
+  simplicity. Features a Pine Forest color palette with cool, nature-inspired greens,
+  IBM Plex Mono typography, responsive design, tag system, life tracking visualization,
+  and a distraction-free reading experience inspired by Bear Blog.
 email:
 - mail@knhash.in
 executables: []
@@ -133,5 +134,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.2
 specification_version: 4
-summary: A minimal, text focused blog theme inspired by Bear Blog
+summary: A minimal, text focused blog theme with Pine Forest aesthetics
 test_files: []