jekyll-bear-theme 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +15 -11
  3. data/_layouts/life-in-weeks.html +1 -1
  4. data/assets/style.css +423 -368
  5. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 321a64217ca032b2568fb793d950fe0f8e795b0672f15b9f4432bff72c6c48e3
4
- data.tar.gz: 5725640312e7f03e468c8b61b64ea828d6b4777dbe32043e098a01e14f0ea671
3
+ metadata.gz: bf797690bed536ffe7644ac0eda0ef8be4ea909bd115f9c71cbc41762edfa77c
4
+ data.tar.gz: 6dc66e27382cce24c1a0b64c94d7be4e85113afdfaa1635d793ebd1f377715b3
5
5
  SHA512:
6
- metadata.gz: 07b29e2279a7fb91b778950c5bcaa8d8a5a6b8e03fe6719a29539aa3ff5c52d800084cfa871da546b252b10cf4f5a5d59c010a73d15c1e6491077fc36d89b194
7
- data.tar.gz: b17d6e3ecdc6359f9328200e124855b86d2592c1ec3d2f9b553f3404ec33330605585ddefcc061ce352f883bed69b153908785c591e0c9ac57489990713f4c90
6
+ metadata.gz: e4d072da4d9d67c53729675503da52780c2ccfd8918edbd731a01e824f68564b129e784a3d9acda360a532d8173ac3230e60a447800d1940cb37fd9a4716fc9e
7
+ data.tar.gz: 3d525e9fa0717bcc71250d1370f1699cd3263ed95aca5f4218a49fb0fc259216b91f0e1ad955b290fa0e71860a17179d4841022d07242d3c602ce62e74ace468
data/README.md CHANGED
@@ -17,6 +17,8 @@ This is a port of it's theme to Jekyll, with some tweaks. So you can use GitHub
17
17
  - Gallery view for your images
18
18
  - Code highlighting
19
19
  - **Life in Weeks visualization** - Interactive timeline of your life events
20
+ - **IBM Plex Mono typography** - Consistent monospace font across all elements
21
+ - **Coffee-themed color palette** - Warm, coffee-inspired colors with automatic dark mode
20
22
 
21
23
  ## Screenshots
22
24
 
@@ -57,6 +59,19 @@ Or install it yourself as:
57
59
 
58
60
  $ gem install jekyll-bear-theme
59
61
 
62
+ ### Design Philosophy
63
+
64
+ jekyllBear now features a **monospace-first design** with IBM Plex Mono typography, creating a technical yet warm aesthetic. The coffee-themed color palette provides visual comfort while maintaining excellent readability across light and dark modes.
65
+
66
+ ### Customization
67
+
68
+ The theme's CSS is now highly modular and customizable:
69
+
70
+ - **Typography**: Modify `--font-main`, `--font-secondary`, and `--font-monospace` variables
71
+ - **Spacing**: Use the standardized spacing scale for consistent layouts
72
+ - **Colors**: All theme colors are centralized in CSS custom properties
73
+ - **Layout**: Responsive design with mobile-first approach
74
+
60
75
  ## Usage
61
76
 
62
77
  ### Basic Setup
@@ -121,17 +136,6 @@ Use them as templates for your front matter.
121
136
 
122
137
  >To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`.
123
138
 
124
-
125
- ## Recent Updates: Life in Weeks Interactive Carousel
126
-
127
- - The **Life in Weeks** page now features an interactive carousel blockquote above the grid, showing a key event from your life.
128
- - Up/down arrows let you cycle through events. The week number, event name, and description are shown, with the week number highlighted.
129
- - As you change the quote, the corresponding week in the grid pulses, visually connecting the event to its week.
130
- - The quote area has a fixed height and is vertically centered, so the grid never shifts as you browse events.
131
- - The grid is fully non-interactive (no tooltips, no pointer/question mark cursor), for a clean and minimal look.
132
- - The carousel arrows are styled to match the theme and do not show a highlight on click.
133
- - All code is lean and efficient: no extra network requests, no heavy JS, and all data is embedded at build time for instant loading.
134
-
135
139
  See `life.md`, `_layouts/life-in-weeks.html`, and `assets/life-carousel.js` for implementation details.
136
140
 
137
141
  ## Contributing
data/_layouts/life-in-weeks.html CHANGED
@@ -30,7 +30,7 @@ layout: compress
30
30
  <span aria-hidden="true">&#9660;</span>
31
31
  </button>
32
32
  </div>
33
- <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;">
33
+ <blockquote style="flex: 1; margin: 0; font-size: 1.1em; min-height: 5em; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.5; font-style: normal;">
34
34
  <span id="life-carousel-quote"></span>
35
35
  <span id="life-carousel-meta" style="font-size: 0.95em; color: var(--main-color); margin-top: 0.5em;"></span>
36
36
  </blockquote>
data/assets/style.css CHANGED
@@ -1,145 +1,46 @@
1
- /* Highlighted week number in carousel quote */
2
- .carousel-weeknum {
3
- color: var(--link-color);
4
- font-weight: bold;
5
- font-style: normal;
6
- }
7
- /* Pulse effect for carousel-selected week */
8
- .carousel-pulse {
9
- animation: carousel-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
10
- border-width: 2px !important;
11
- border-color: var(--link-color) !important;
12
- box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
13
- z-index: 2;
14
- }
15
-
16
- @keyframes carousel-pulse {
17
- 0% {
18
- transform: scale(1);
19
- opacity: 1;
20
- }
21
- 50% {
22
- transform: scale(1.18);
23
- opacity: 0.7;
24
- }
25
- 100% {
26
- transform: scale(1);
27
- opacity: 1;
28
- }
29
- }
30
- /* Carousel arrow button styles */
31
- #life-carousel-up, #life-carousel-down {
32
- background: none;
33
- border: none;
34
- cursor: pointer;
35
- font-size: 1.5em;
36
- line-height: 1;
37
- padding: 0.2em;
38
- color: var(--main-color);
39
- outline: none;
40
- user-select: none;
41
- -webkit-tap-highlight-color: transparent;
42
- transition: color 0.2s;
43
- }
44
- #life-carousel-up:focus, #life-carousel-down:focus, #life-carousel-up:active, #life-carousel-down:active {
45
- outline: none;
46
- box-shadow: none;
47
- background: none;
48
- color: var(--main-color);
49
- }
50
- #life-carousel-up span, #life-carousel-down span {
51
- color: inherit;
52
- }
53
- /* Tooltip for event squares */
54
-
55
- .week[data-event] {
56
- position: relative;
57
- cursor: default !important;
58
- }
59
-
60
- .week {
61
- cursor: default !important;
62
- }
1
+ /* =============================================================================
2
+ JEKYLL BEAR THEME - COFFEE AESTHETIC
3
+ ============================================================================= */
4
+ /* =============================================================================
5
+ FONTS & IMPORTS
6
+ ============================================================================= */
63
7
 
64
- /* Desktop: show tooltip on hover */
65
- @media (hover: hover) {
66
- .week[data-event]:hover::after {
67
- content: attr(data-event);
68
- position: absolute;
69
- background: var(--background-color);
70
- color: var(--text-color);
71
- padding: 0.6rem;
72
- border-radius: 0.2rem;
73
- border: 1px solid var(--blockquote-color);
74
- font-size: 1rem;
75
- font-family: var(--font-thin);
76
- font-weight: normal;
77
- line-height: 1.2;
78
- white-space: pre-line;
79
- z-index: 100;
80
- box-shadow: 0 4px 16px rgba(0,0,0,0.18);
81
- top: 130%;
82
- left: 50%;
83
- transform: translateX(-50%);
84
- pointer-events: none;
85
- max-width: 30vw;
86
- min-width: max-content;
87
- width: max-content;
88
- text-align: left;
89
- display: flex;
90
- align-items: center;
91
- vertical-align: baseline;
92
- }
93
- }
94
-
95
- /* Mobile: show tooltip on active/focus */
96
- @media (hover: none) {
97
- .week[data-event]:active::after,
98
- .week[data-event]:focus::after {
99
- content: attr(data-event);
100
- position: absolute;
101
- background: var(--background-color);
102
- color: var(--text-color);
103
- padding: 0.6rem;
104
- border-radius: 0.2rem;
105
- border: 1px solid var(--blockquote-color);
106
- font-size: 1rem;
107
- font-family: var(--font-thin);
108
- font-weight: normal;
109
- line-height: 1.2;
110
- white-space: pre-line;
111
- z-index: 100;
112
- box-shadow: 0 4px 16px rgba(0,0,0,0.18);
113
- top: 130%;
114
- left: 50%;
115
- transform: translateX(-50%);
116
- pointer-events: none;
117
- max-width: 50vw;
118
- min-width: max-content;
119
- width: max-content;
120
- text-align: left;
121
- display: flex;
122
- align-items: center;
123
- vertical-align: baseline;
124
- }
125
-
126
- .week[data-event] {
127
- -webkit-tap-highlight-color: transparent;
128
- outline: none;
129
- }
130
- }
8
+ @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');
131
9
 
132
-
133
-
134
- @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');
10
+ /* =============================================================================
11
+ CSS CUSTOM PROPERTIES (VARIABLES)
12
+ ============================================================================= */
135
13
 
136
14
  :root {
137
- --width: 900px;
138
- --font-main: 'IBM Plex Sans', sans-serif;
139
- --font-thin: 'IBM Plex Sans Thin', sans-serif;
140
- --font-secondary: 'IBM Plex Sans', sans-serif;
15
+ /* Layout */
16
+ --width: 720px;
17
+
18
+ /* Typography */
19
+ --font-main: 'IBM Plex Mono', monospace;
20
+ --font-secondary: 'IBM Plex Mono', monospace;
141
21
  --font-monospace: 'IBM Plex Mono', monospace;
142
- --font-scale: .95em;
22
+ --font-scale: 0.9em;
23
+
24
+ /* Spacing */
25
+ --spacing-xs: 5px;
26
+ --spacing-sm: 10px;
27
+ --spacing-md: 20px;
28
+ --spacing-lg: 40px;
29
+ --spacing-xl: 60px;
30
+
31
+ /* Border radius */
32
+ --radius-sm: 3px;
33
+ --radius-md: 5px;
34
+
35
+ /* Transitions */
36
+ --transition-fast: 0.2s;
37
+ --transition-normal: 0.3s;
38
+
39
+ /* Z-index scale */
40
+ --z-dropdown: 200;
41
+ --z-modal: 1000;
42
+
43
+ /* Coffee Theme Colors - Light Mode */
143
44
  --background-color: #F8F1E5; /* Lighter cream */
144
45
  --heading-color: #2C1E15; /* Darker roast coffee */
145
46
  --text-color: #1F1408; /* Darker espresso */
@@ -149,8 +50,14 @@
149
50
  --code-background-color: #E6D7C3; /* Coffee stained paper */
150
51
  --code-color: #2C1E15; /* Darker roast coffee */
151
52
  --blockquote-color: #B99B6B; /* Darker café latte foam */
53
+
54
+ /* Interactive colors derived from theme */
55
+ --hover-color: white;
56
+ --border-color: var(--blockquote-color);
57
+ --shadow-color: rgba(0, 0, 0, 0.18);
152
58
  }
153
59
 
60
+ /* Dark Mode Color Overrides */
154
61
  @media (prefers-color-scheme: dark) {
155
62
  :root {
156
63
  --background-color: #1A1310; /* Darker espresso */
@@ -165,11 +72,15 @@
165
72
  }
166
73
  }
167
74
 
75
+ /* =============================================================================
76
+ BASE STYLES
77
+ ============================================================================= */
78
+
168
79
  body {
169
80
  font-family: var(--font-secondary);
170
81
  font-size: var(--font-scale);
171
82
  margin: auto;
172
- padding: 20px;
83
+ padding: var(--spacing-md);
173
84
  max-width: var(--width);
174
85
  text-align: left;
175
86
  background-color: var(--background-color);
@@ -179,33 +90,63 @@ body {
179
90
  color: var(--text-color);
180
91
  }
181
92
 
182
- h1,
183
- h2,
184
- h3,
185
- h4,
186
- h5,
187
- h6 {
93
+ /* =============================================================================
94
+ TYPOGRAPHY
95
+ ============================================================================= */
96
+
97
+ h1, h2, h3, h4, h5, h6 {
188
98
  font-family: var(--font-main);
189
99
  color: var(--heading-color);
190
100
  }
191
101
 
102
+ strong, b {
103
+ color: var(--heading-color);
104
+ }
105
+
106
+ /* =============================================================================
107
+ LINKS
108
+ ============================================================================= */
109
+
192
110
  a {
193
111
  color: var(--link-color);
194
112
  font-family: var(--font-main);
195
113
  cursor: pointer;
196
114
  text-decoration: none;
197
115
  border-bottom: 3px solid var(--main-color);
116
+ transition: all var(--transition-fast) ease;
198
117
  }
199
118
 
200
119
  a:hover {
201
120
  background-color: var(--main-color);
202
- color: white;
121
+ color: var(--hover-color);
203
122
  text-decoration: none;
204
123
  }
205
124
 
125
+ a:visited {
126
+ color: var(--visited-color);
127
+ }
128
+
129
+ /* External link marker */
130
+ a[href^="http"]:where(:not([href*="knhash.in/"])):not(:has(img))::after {
131
+ content: "↗";
132
+ font-family: var(--font-monospace);
133
+ }
134
+
135
+ .title:hover {
136
+ text-decoration: none;
137
+ }
138
+
139
+ .title h1 {
140
+ font-size: 1.5em;
141
+ }
142
+
143
+ /* =============================================================================
144
+ LAYOUT COMPONENTS
145
+ ============================================================================= */
146
+
206
147
  header {
207
- margin-bottom: 40px;
208
- padding-bottom: 20px;
148
+ margin-bottom: var(--spacing-lg);
149
+ padding-bottom: var(--spacing-md);
209
150
  border-bottom: 3px dotted var(--main-color);
210
151
  }
211
152
 
@@ -213,69 +154,51 @@ nav a {
213
154
  margin-right: 8px;
214
155
  }
215
156
 
216
- strong,
217
- b {
218
- color: var(--heading-color);
157
+ main {
158
+ line-height: 1.6;
219
159
  }
220
160
 
221
- button {
222
- margin: 0;
223
- cursor: pointer;
161
+ footer {
162
+ margin-top: var(--spacing-lg);
163
+ border-top: 3px dotted var(--main-color);
164
+ padding: 25px 0;
165
+ text-align: center;
224
166
  }
225
167
 
226
- main {
227
- line-height: 1.6;
168
+ footer > span:has(a[href="https://bearblog.dev"]) {
169
+ display: none;
228
170
  }
229
171
 
230
- table {
231
- width: 100%;
232
- }
172
+ /* =============================================================================
173
+ CONTENT ELEMENTS
174
+ ============================================================================= */
233
175
 
234
176
  hr {
235
177
  border: 0;
236
- border-top: 1px dashed;
178
+ border-top: 1px dashed var(--border-color);
237
179
  }
238
180
 
239
181
  img {
240
182
  max-width: 100%;
241
183
  }
242
184
 
243
- code {
244
- font-family: var(--font-monospace);
245
- padding: 2px;
246
- background-color: var(--code-background-color);
247
- color: var(--code-color);
248
- border-radius: 3px;
249
- }
250
-
251
185
  blockquote {
252
186
  border-left: 1px solid var(--blockquote-color);
253
187
  color: var(--code-color);
254
- padding-left: 20px;
188
+ padding-left: var(--spacing-md);
255
189
  font-style: italic;
256
190
  }
257
191
 
258
- footer {
259
- margin-top: 40px;
260
- border-top: 3px dotted var(--main-color);
261
- padding: 25px 0;
262
- text-align: center;
263
- }
192
+ /* =============================================================================
193
+ CODE & SYNTAX HIGHLIGHTING
194
+ ============================================================================= */
264
195
 
265
- footer > span:has(a[href="https://bearblog.dev"]) {
266
- display: none;
267
- }
268
-
269
- .title:hover {
270
- text-decoration: none;
271
- }
272
-
273
- .title h1 {
274
- font-size: 1.5em;
275
- }
276
-
277
- .inline {
278
- width: auto !important;
196
+ code {
197
+ font-family: var(--font-monospace);
198
+ padding: 2px;
199
+ background-color: var(--code-background-color);
200
+ color: var(--code-color);
201
+ border-radius: var(--radius-sm);
279
202
  }
280
203
 
281
204
  .highlight,
@@ -283,13 +206,31 @@ footer > span:has(a[href="https://bearblog.dev"]) {
283
206
  padding: 1px 15px;
284
207
  background-color: var(--code-background-color);
285
208
  color: var(--code-color);
286
- border-radius: 3px;
209
+ border-radius: var(--radius-sm);
287
210
  margin-block-start: 1em;
288
211
  margin-block-end: 1em;
289
212
  overflow-x: auto;
290
213
  }
291
214
 
292
- /* blog post list */
215
+ /* =============================================================================
216
+ TABLES
217
+ ============================================================================= */
218
+
219
+ table {
220
+ width: 100%;
221
+ border-spacing: 0;
222
+ }
223
+
224
+ th, td {
225
+ padding: 6px 13px;
226
+ border: 1px solid var(--border-color);
227
+ font-size: 1em;
228
+ }
229
+
230
+ /* =============================================================================
231
+ BLOG POST LISTINGS
232
+ ============================================================================= */
233
+
293
234
  ul.blog-posts {
294
235
  list-style-type: none;
295
236
  padding: unset;
@@ -297,279 +238,393 @@ ul.blog-posts {
297
238
 
298
239
  ul.blog-posts li {
299
240
  display: flex;
300
- margin-bottom: 10px;
301
- }
302
-
303
- i time {
304
- font-style: normal;
305
- opacity: 0.7;
241
+ margin-bottom: var(--spacing-sm);
306
242
  }
307
243
 
308
244
  ul.blog-posts li span {
309
245
  flex: 0 0 130px;
310
246
  }
311
247
 
312
-
313
248
  ul.blog-posts li a:visited {
314
249
  color: var(--visited-color);
315
250
  }
316
251
 
317
- table {
318
- border-spacing: 0;
252
+ i time {
253
+ font-style: normal;
254
+ opacity: 0.7;
319
255
  }
320
256
 
321
- th,
322
- td {
323
- padding: 6px 13px;
324
- font-size: 1em;
257
+ /* =============================================================================
258
+ UTILITY CLASSES
259
+ ============================================================================= */
260
+
261
+ .inline {
262
+ width: auto !important;
325
263
  }
326
264
 
327
- /* external link marker */
328
- a[href^="http"]:where(:not([href*="knhash.in/"])):not(:has(img))::after {
329
- content: "↗";
330
- font-family: var(--font-monospace);
265
+ button {
266
+ margin: 0;
267
+ cursor: pointer;
331
268
  }
332
269
 
333
- /* Form elements */
270
+ /* =============================================================================
271
+ FORM ELEMENTS
272
+ ============================================================================= */
273
+
334
274
  input, button, textarea, select {
335
- margin: 0;
336
- padding: 0;
337
- box-sizing: border-box;
338
- font: inherit;
275
+ margin: 0;
276
+ padding: 0;
277
+ box-sizing: border-box;
278
+ font: inherit;
339
279
  }
280
+
340
281
  legend {
341
- margin: 20px 0;
342
- font-weight: bold;
282
+ margin: var(--spacing-md) 0;
283
+ font-weight: bold;
343
284
  }
285
+
344
286
  label {
345
- display: block;
346
- font-weight: bold;
287
+ display: block;
288
+ font-weight: bold;
347
289
  }
348
- input,
349
- textarea {
350
- margin: 0 0 10px;
351
- padding: 5px 10px;
352
- color: var(--text-color);
353
- background: var(--accent-color);
354
- border: 2px solid var(--link-color);
355
- border-radius: 5px;
290
+
291
+ input, textarea {
292
+ margin: 0 0 var(--spacing-sm);
293
+ padding: var(--spacing-xs) var(--spacing-sm);
294
+ color: var(--text-color);
295
+ background: var(--code-background-color);
296
+ border: 2px solid var(--link-color);
297
+ border-radius: var(--radius-md);
356
298
  }
299
+
357
300
  input {
358
- width: 55%;
301
+ width: 55%;
359
302
  }
303
+
360
304
  textarea {
361
- width: 95%;
362
- }
363
- input[type=button], input[type=submit], input[type=reset] {
364
- margin: 0 0 20px;
365
- padding: 7px;
366
- font-family: var(--font-secondary);
367
- font-weight: bold;
368
- color: var(--background-color);
369
- background: var(--link-color);
370
- border-radius: 5px;
371
- cursor: pointer;
305
+ width: 95%;
306
+ }
307
+
308
+ input[type=button],
309
+ input[type=submit],
310
+ input[type=reset] {
311
+ margin: 0 0 var(--spacing-md);
312
+ padding: 7px;
313
+ font-family: var(--font-secondary);
314
+ font-weight: bold;
315
+ color: var(--background-color);
316
+ background: var(--link-color);
317
+ border-radius: var(--radius-md);
318
+ cursor: pointer;
372
319
  }
320
+
373
321
  ::placeholder {
374
- color: var(--text-color);
375
- opacity: 0.7;
322
+ color: var(--text-color);
323
+ opacity: 0.7;
376
324
  }
377
325
 
378
- /* Life in Weeks Styles */
326
+ /* =============================================================================
327
+ LIFE IN WEEKS - MAIN COMPONENT
328
+ ============================================================================= */
329
+
379
330
  .life-in-weeks {
380
- margin: 20px 0;
331
+ margin: var(--spacing-md) 0;
381
332
  }
382
333
 
383
334
  .weeks-grid {
384
- margin: 60px 0;
385
- display: flex;
386
- flex-wrap: wrap;
387
- gap: 2px;
388
- max-width: 100%;
389
- align-items: flex-start;
335
+ margin: var(--spacing-xl) 0;
336
+ display: flex;
337
+ flex-wrap: wrap;
338
+ gap: 2px;
339
+ max-width: 100%;
340
+ align-items: flex-start;
390
341
  }
391
342
 
392
- /* Removed wide-screen overrides for .weeks-grid to always fit its container */
393
-
343
+ /* Week Square Base Styles */
394
344
  .week {
395
- width: 16px;
396
- height: 16px;
397
- border: 1px solid var(--main-color);
398
- background-color: var(--background-color);
399
- display: inline-flex;
400
- align-items: center;
401
- justify-content: center;
402
- position: relative;
403
- cursor: help;
404
- font-family: var(--font-thin);
405
- font-size: var(--font-scale);
406
- line-height: 1.5;
407
- padding: 2px 2px;
408
- white-space: nowrap;
409
- box-sizing: border-box;
410
- }
411
-
412
- /* Alternating decade bands */
345
+ width: 16px;
346
+ height: 16px;
347
+ border: 1px solid var(--main-color);
348
+ background-color: var(--background-color);
349
+ display: inline-flex;
350
+ align-items: center;
351
+ justify-content: center;
352
+ position: relative;
353
+ cursor: default;
354
+ font-family: var(--font-secondary);
355
+ font-size: var(--font-scale);
356
+ line-height: 1.5;
357
+ padding: 2px;
358
+ white-space: nowrap;
359
+ box-sizing: border-box;
360
+ transition: all var(--transition-fast) ease;
361
+ }
362
+
363
+ /* Week Square State Variations */
413
364
  .week.decade-0 {
414
- background-color: var(--background-color);
365
+ background-color: var(--background-color);
415
366
  }
416
367
 
417
368
  .week.decade-1 {
418
- background-color: var(--code-background-color);
369
+ background-color: var(--code-background-color);
419
370
  }
420
371
 
421
372
  .week.future {
422
- background-color: transparent;
423
- border-color: var(--blockquote-color);
424
- opacity: 0.3;
373
+ background-color: transparent;
374
+ border-color: var(--blockquote-color);
375
+ opacity: 0.3;
425
376
  }
426
377
 
427
378
  .week.decade-1.future {
428
- background-color: var(--code-background-color);
429
- opacity: 0.2;
379
+ background-color: var(--code-background-color);
380
+ opacity: 0.2;
430
381
  }
431
382
 
432
383
  .week.has-events {
433
- border-color: var(--visited-color);
434
- background-color: var(--blockquote-color);
435
- color: inherit;
436
- font-size: var(--font-scale);
437
- padding: 0;
384
+ border-color: var(--visited-color);
385
+ background-color: var(--blockquote-color);
386
+ color: inherit;
387
+ font-size: var(--font-scale);
388
+ padding: 0;
438
389
  }
439
390
 
440
391
  .week.has-events.future {
441
- border-color: var(--blockquote-color);
442
- opacity: 0.6;
443
- color: var(--blockquote-color);
392
+ border-color: var(--blockquote-color);
393
+ opacity: 0.6;
394
+ color: var(--blockquote-color);
444
395
  }
445
396
 
397
+ /* Current Week Animation */
446
398
  .week.current {
447
- animation: pulse 2s ease-in-out infinite;
448
- border-width: 2px;
449
- border-color: var(--link-color);
450
- box-shadow: 0 0 10px rgba(124, 64, 17, 0.3);
399
+ animation: pulse 2s ease-in-out infinite;
400
+ border-width: 2px;
401
+ border-color: var(--link-color);
402
+ box-shadow: 0 0 10px rgba(124, 64, 17, 0.3);
451
403
  }
452
404
 
453
405
  .week.current.has-events {
454
- box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
406
+ box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
455
407
  }
456
408
 
457
409
  @keyframes pulse {
458
- 0% {
459
- transform: scale(1);
460
- opacity: 1;
461
- }
462
- 50% {
463
- transform: scale(1.1);
464
- opacity: 0.7;
465
- }
466
- 100% {
467
- transform: scale(1);
468
- opacity: 1;
469
- }
410
+ 0% {
411
+ transform: scale(1);
412
+ opacity: 1;
413
+ }
414
+ 50% {
415
+ transform: scale(1.1);
416
+ opacity: 0.7;
417
+ }
418
+ 100% {
419
+ transform: scale(1);
420
+ opacity: 1;
421
+ }
470
422
  }
471
423
 
424
+ /* Dark Mode Week Adjustments */
472
425
  @media (prefers-color-scheme: dark) {
473
- .week.current {
474
- box-shadow: 0 0 10px rgba(229, 162, 84, 0.3);
475
- }
476
-
477
- .week.current.has-events {
478
- box-shadow: 0 0 10px rgba(229, 162, 84, 0.5);
479
- }
426
+ .week.current {
427
+ box-shadow: 0 0 10px rgba(229, 162, 84, 0.3);
428
+ }
429
+
430
+ .week.current.has-events {
431
+ box-shadow: 0 0 10px rgba(229, 162, 84, 0.5);
432
+ }
480
433
  }
481
434
 
435
+ /* =============================================================================
436
+ LIFE IN WEEKS - INTERACTIVE COMPONENTS
437
+ ============================================================================= */
438
+
439
+ /* Event Indicator */
482
440
  .event-indicator {
483
- position: absolute;
484
- top: 50%;
485
- left: 50%;
486
- transform: translate(-50%, -50%);
487
- color: var(--background-color);
488
- font-size: 8px;
489
- line-height: 1;
441
+ position: absolute;
442
+ top: 50%;
443
+ left: 50%;
444
+ transform: translate(-50%, -50%);
445
+ color: var(--background-color);
446
+ font-size: 8px;
447
+ line-height: 1;
490
448
  }
491
449
 
450
+ /* Events List */
492
451
  .events-list {
493
- margin: 40px 0;
494
- padding: 20px;
495
- background-color: var(--code-background-color);
496
- border-radius: 5px;
452
+ margin: var(--spacing-lg) 0;
453
+ padding: var(--spacing-md);
454
+ background-color: var(--code-background-color);
455
+ border-radius: var(--radius-md);
497
456
  }
498
457
 
499
458
  .events-list h3 {
500
- margin-top: 0;
501
- color: var(--heading-color);
502
- border-bottom: 1px solid var(--main-color);
503
- padding-bottom: 10px;
459
+ margin-top: 0;
460
+ color: var(--heading-color);
461
+ border-bottom: 1px solid var(--main-color);
462
+ padding-bottom: var(--spacing-sm);
504
463
  }
505
464
 
506
465
  .event-item {
507
- margin: 10px 0;
508
- padding: 8px 0;
509
- border-bottom: 1px dotted var(--blockquote-color);
510
- font-size: 0.9em;
511
- line-height: 1.4;
466
+ margin: var(--spacing-sm) 0;
467
+ padding: 8px 0;
468
+ border-bottom: 1px dotted var(--blockquote-color);
469
+ font-size: 0.9em;
470
+ line-height: 1.4;
512
471
  }
513
472
 
514
473
  .event-item:last-child {
515
- border-bottom: none;
474
+ border-bottom: none;
516
475
  }
517
476
 
518
477
  .event-year {
519
- color: var(--main-color);
520
- margin-right: 15px;
521
- min-width: 50px;
522
- display: inline-block;
478
+ color: var(--main-color);
479
+ margin-right: 15px;
480
+ min-width: 50px;
481
+ display: inline-block;
523
482
  }
524
483
 
525
484
  .event-name {
526
- color: var(--heading-color);
527
- margin-right: 10px;
485
+ color: var(--heading-color);
486
+ margin-right: var(--spacing-sm);
528
487
  }
529
488
 
530
489
  .event-desc {
531
- color: var(--text-color);
532
- font-style: italic;
533
- display: block;
534
- margin-top: 5px;
535
- margin-left: 65px;
490
+ color: var(--text-color);
491
+ font-style: italic;
492
+ display: block;
493
+ margin-top: var(--spacing-xs);
494
+ margin-left: 65px;
495
+ }
496
+
497
+ /* =============================================================================
498
+ LIFE IN WEEKS - CAROUSEL COMPONENTS
499
+ ============================================================================= */
500
+
501
+ /* Highlighted week number in carousel quote */
502
+ .carousel-weeknum {
503
+ color: var(--link-color);
504
+ font-weight: bold;
505
+ font-style: normal;
506
+ }
507
+
508
+ /* Pulse effect for carousel-selected week */
509
+ .carousel-pulse {
510
+ animation: carousel-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
511
+ border-width: 2px !important;
512
+ border-color: var(--link-color) !important;
513
+ box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
514
+ z-index: 2;
515
+ }
516
+
517
+ @keyframes carousel-pulse {
518
+ 0% {
519
+ transform: scale(1);
520
+ opacity: 1;
521
+ }
522
+ 50% {
523
+ transform: scale(1.18);
524
+ opacity: 0.7;
525
+ }
526
+ 100% {
527
+ transform: scale(1);
528
+ opacity: 1;
529
+ }
536
530
  }
537
531
 
538
- /* Responsive adjustments */
532
+ /* Carousel arrow button styles */
533
+ #life-carousel-up,
534
+ #life-carousel-down {
535
+ background: none;
536
+ border: none;
537
+ cursor: pointer;
538
+ font-size: 1.5em;
539
+ line-height: 1;
540
+ padding: 0.2em;
541
+ color: var(--main-color);
542
+ outline: none;
543
+ user-select: none;
544
+ -webkit-tap-highlight-color: transparent;
545
+ transition: color var(--transition-fast);
546
+ }
547
+
548
+ #life-carousel-up:focus,
549
+ #life-carousel-down:focus,
550
+ #life-carousel-up:active,
551
+ #life-carousel-down:active {
552
+ outline: none;
553
+ box-shadow: none;
554
+ background: none;
555
+ color: var(--main-color);
556
+ }
557
+
558
+ #life-carousel-up span,
559
+ #life-carousel-down span {
560
+ color: inherit;
561
+ }
562
+
563
+ /* =============================================================================
564
+ RESPONSIVE DESIGN
565
+ ============================================================================= */
566
+
567
+ /* Large screens - optimize week grid sizing */
568
+ @media (max-width: 1200px) {
569
+ .week {
570
+ width: calc((100vw - 40px - (51 * 2px)) / 52);
571
+ height: calc((100vw - 40px - (51 * 2px)) / 52);
572
+ font-size: calc(var(--font-scale) * 0.8);
573
+ padding: 0;
574
+ min-width: 8px;
575
+ min-height: 8px;
576
+ }
577
+
578
+ .week.has-events {
579
+ font-size: calc(var(--font-scale) * 0.8);
580
+ padding: 0;
581
+ }
582
+ }
583
+
584
+ /* Tablet screens */
539
585
  @media (max-width: 768px) {
540
- .week {
541
- min-width: 26px;
542
- height: 26px;
543
- font-size: var(--font-scale);
544
- padding: 3px 7px;
545
- }
546
-
547
- .week.has-events {
548
- font-size: var(--font-scale);
549
- padding: 3px 8px;
550
- }
551
-
552
- .event-desc {
553
- margin-left: 0;
554
- }
586
+ .week {
587
+ width: calc((100vw - 40px - (51 * 1px)) / 52);
588
+ height: calc((100vw - 40px - (51 * 1px)) / 52);
589
+ font-size: calc(var(--font-scale) * 0.7);
590
+ padding: 0;
591
+ min-width: 8px;
592
+ min-height: 8px;
593
+ }
594
+
595
+ .week.has-events {
596
+ font-size: calc(var(--font-scale) * 0.7);
597
+ padding: 0;
598
+ }
599
+
600
+ .weeks-grid {
601
+ gap: 1px;
602
+ }
603
+
604
+ .event-desc {
605
+ margin-left: 0;
606
+ }
555
607
  }
556
608
 
609
+ /* Mobile screens */
557
610
  @media (max-width: 480px) {
558
- .week {
559
- min-width: 22px;
560
- height: 22px;
561
- font-size: var(--font-scale);
562
- padding: 2px 6px;
563
- }
564
-
565
- .week.has-events {
566
- font-size: var(--font-scale);
567
- padding: 2px 7px;
568
- }
569
-
570
- .weeks-grid {
571
- gap: 1px;
572
- }
611
+ .week {
612
+ width: calc((100vw - 40px - (51 * 1px)) / 52);
613
+ height: calc((100vw - 40px - (51 * 1px)) / 52);
614
+ font-size: calc(var(--font-scale) * 0.6);
615
+ padding: 0;
616
+ min-width: 8px;
617
+ min-height: 8px;
618
+ }
619
+
620
+ .week.has-events {
621
+ font-size: calc(var(--font-scale) * 0.6);
622
+ padding: 0;
623
+ }
624
+
625
+ .weeks-grid {
626
+ gap: 1px;
627
+ }
573
628
  }
574
629
 
575
630
 
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-bear-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.2
4
+ version: 0.2.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - knhash
8
8
  bindir: bin
9
9
  cert_chain: []
10
- date: 2025-07-17 00:00:00.000000000 Z
10
+ date: 2025-07-18 00:00:00.000000000 Z
11
11
  dependencies:
12
12
  - !ruby/object:Gem::Dependency
13
13
  name: jekyll