jekyll-bear-theme 0.3.0 → 0.3.1

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3d03b43a44bb6836f6c5e1e9aa92d850aaf064b9ca8c6e7857554909e6a53dbf
4
- data.tar.gz: cf00fe723e7d08808aa0a8e36861262554058004b790db48bc6f7f4fd940aea2
3
+ metadata.gz: f04f0567099411f44dc94e5342a6763977fe847fb51036aef370403be39df6af
4
+ data.tar.gz: 5be5400f1bff4ae2cc9d410b7258ff7aac028ab758364a8f5bd3495d42a84c5f
5
5
  SHA512:
6
- metadata.gz: 38550f11d7725953e630b3514e83dc690ace23b525bc1aa528ffe24decb3b61cafa2044d311efb2af920b55b3d0e4ea0367d0ad392ab8373aee90dedf88f41ad
7
- data.tar.gz: b533bf95ddb547ff7bc5c14c58046a27abdcf9485eb3d827a66f3e915c18bf28ed23d1713fefaff3c0ac034c8ca431ef35a41ea065a6495e2afe4ca25398f41a
6
+ metadata.gz: 87898ab693ea8be95b44c1b4c2e7d5f4e3650ced713b581ac18862fe20acf117c0a0f632187305cddf8e70f8a02696640eba39feffa1036b14250c3d2c30477f
7
+ data.tar.gz: f0df15f5c21fa3ce4301e8ef9000226027fe7ffd2265bd5d54a360d27bcabba083ba564d48a02d9bb1c699c90b4f985a14ca8ea51fa36ca9f706c4faba2b1c3b
data/_includes/head.html CHANGED
@@ -12,6 +12,9 @@
12
12
  <link href='{{ site.baseurl }}/feed.xml' rel='alternate' type='application/atom+xml'>
13
13
  <link rel="canonical" href="{{ site.baseurl }}{{ page.url }}">
14
14
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
15
+ {% if page.layout == 'life-in-weeks' %}
16
+ <link rel="stylesheet" href="{{ site.baseurl }}/assets/life-in-weeks.css">
17
+ {% endif %}
15
18
  </head>
16
19
 
17
20
  <body>
@@ -0,0 +1,349 @@
1
+ /* =============================================================================
2
+ LIFE IN WEEKS - CSS CUSTOM PROPERTIES
3
+ ============================================================================= */
4
+
5
+ :root {
6
+ /* Decade band colors for better contrast */
7
+ --decade-0-bg: var(--background-color);
8
+ --decade-1-bg: var(--blockquote-color);
9
+ --decade-0-opacity: 1;
10
+ --decade-1-opacity: 0.7;
11
+ --decade-future-opacity: 0.15;
12
+
13
+ /* Event week colors - distinct from decade bands */
14
+ --event-bg: var(--main-color);
15
+ --event-border: var(--visited-color);
16
+ --event-future-opacity: 0.6;
17
+ }
18
+
19
+ /* Dark mode decade adjustments */
20
+ @media (prefers-color-scheme: dark) {
21
+ :root {
22
+ --decade-0-bg: var(--background-color);
23
+ --decade-1-bg: var(--code-background-color);
24
+ --decade-0-opacity: 1;
25
+ --decade-1-opacity: 0.8;
26
+ --decade-future-opacity: 0.2;
27
+
28
+ /* Event colors for dark mode */
29
+ --event-bg: var(--link-color);
30
+ --event-border: var(--main-color);
31
+ --event-future-opacity: 0.7;
32
+ }
33
+ }
34
+
35
+ /* =============================================================================
36
+ LIFE IN WEEKS - STANDALONE CSS MODULE
37
+ ============================================================================= */
38
+
39
+ /* This CSS file contains all styles specific to the Life in Weeks visualization.
40
+ It should be included in addition to the base theme styles. */
41
+
42
+ /* =============================================================================
43
+ LIFE IN WEEKS - MAIN COMPONENT
44
+ ============================================================================= */
45
+
46
+ .life-in-weeks {
47
+ margin: var(--spacing-md) 0;
48
+ }
49
+
50
+ .weeks-grid {
51
+ margin: var(--spacing-xl) 0;
52
+ display: flex;
53
+ flex-wrap: wrap;
54
+ gap: 2px;
55
+ max-width: 100%;
56
+ align-items: flex-start;
57
+ }
58
+
59
+ /* Week Square Base Styles */
60
+ .week {
61
+ width: 16px;
62
+ height: 16px;
63
+ border: 1px solid var(--main-color);
64
+ background-color: var(--background-color);
65
+ display: inline-flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ position: relative;
69
+ cursor: default;
70
+ font-family: var(--font-secondary);
71
+ font-size: var(--font-scale);
72
+ line-height: 1.5;
73
+ padding: 2px;
74
+ white-space: nowrap;
75
+ box-sizing: border-box;
76
+ transition: all var(--transition-fast) ease;
77
+ }
78
+
79
+ /* Week Square State Variations */
80
+ .week.decade-0 {
81
+ background-color: var(--decade-0-bg);
82
+ border-color: var(--main-color);
83
+ opacity: var(--decade-0-opacity);
84
+ }
85
+
86
+ .week.decade-1 {
87
+ background-color: var(--decade-1-bg);
88
+ border-color: var(--main-color);
89
+ opacity: var(--decade-1-opacity);
90
+ }
91
+
92
+ .week.future {
93
+ background-color: transparent;
94
+ border-color: var(--blockquote-color);
95
+ opacity: 0.3;
96
+ }
97
+
98
+ .week.decade-1.future {
99
+ background-color: var(--decade-1-bg);
100
+ opacity: var(--decade-future-opacity);
101
+ }
102
+
103
+ .week.has-events {
104
+ border-color: var(--event-border);
105
+ background-color: var(--event-bg);
106
+ color: var(--background-color);
107
+ font-size: var(--font-scale);
108
+ padding: 0;
109
+ }
110
+
111
+ .week.has-events.future {
112
+ border-color: var(--event-border);
113
+ background-color: var(--event-bg);
114
+ opacity: var(--event-future-opacity);
115
+ color: var(--background-color);
116
+ }
117
+
118
+ /* Current Week Animation */
119
+ .week.current {
120
+ animation: pulse 2s ease-in-out infinite;
121
+ border-width: 2px;
122
+ border-color: var(--link-color);
123
+ box-shadow: 0 0 10px var(--glow-color-light);
124
+ }
125
+
126
+ .week.current.has-events {
127
+ box-shadow: 0 0 10px var(--glow-color-medium);
128
+ }
129
+
130
+ @keyframes pulse {
131
+ 0% {
132
+ transform: scale(1);
133
+ opacity: 1;
134
+ }
135
+ 50% {
136
+ transform: scale(1.1);
137
+ opacity: 0.7;
138
+ }
139
+ 100% {
140
+ transform: scale(1);
141
+ opacity: 1;
142
+ }
143
+ }
144
+
145
+ /* Dark Mode Week Adjustments */
146
+ @media (prefers-color-scheme: dark) {
147
+ .week.current {
148
+ box-shadow: 0 0 10px var(--glow-color-light);
149
+ }
150
+
151
+ .week.current.has-events {
152
+ box-shadow: 0 0 10px var(--glow-color-medium);
153
+ }
154
+ }
155
+
156
+ /* =============================================================================
157
+ LIFE IN WEEKS - INTERACTIVE COMPONENTS
158
+ ============================================================================= */
159
+
160
+ /* Event Indicator */
161
+ .event-indicator {
162
+ position: absolute;
163
+ top: 50%;
164
+ left: 50%;
165
+ transform: translate(-50%, -50%);
166
+ color: var(--background-color);
167
+ font-size: 8px;
168
+ line-height: 1;
169
+ }
170
+
171
+ /* Events List */
172
+ .events-list {
173
+ margin: var(--spacing-lg) 0;
174
+ padding: var(--spacing-md);
175
+ background-color: var(--code-background-color);
176
+ border-radius: var(--radius-md);
177
+ }
178
+
179
+ .events-list h3 {
180
+ margin-top: 0;
181
+ color: var(--heading-color);
182
+ border-bottom: 1px solid var(--main-color);
183
+ padding-bottom: var(--spacing-sm);
184
+ }
185
+
186
+ .event-item {
187
+ margin: var(--spacing-sm) 0;
188
+ padding: 8px 0;
189
+ border-bottom: 1px dotted var(--blockquote-color);
190
+ font-size: 0.9em;
191
+ line-height: 1.4;
192
+ }
193
+
194
+ .event-item:last-child {
195
+ border-bottom: none;
196
+ }
197
+
198
+ .event-year {
199
+ color: var(--main-color);
200
+ margin-right: 15px;
201
+ min-width: 50px;
202
+ display: inline-block;
203
+ }
204
+
205
+ .event-name {
206
+ color: var(--heading-color);
207
+ margin-right: var(--spacing-sm);
208
+ }
209
+
210
+ .event-desc {
211
+ color: var(--text-color);
212
+ font-style: italic;
213
+ display: block;
214
+ margin-top: var(--spacing-xs);
215
+ margin-left: 65px;
216
+ }
217
+
218
+ /* =============================================================================
219
+ LIFE IN WEEKS - CAROUSEL COMPONENTS
220
+ ============================================================================= */
221
+
222
+ /* Highlighted week number in carousel quote */
223
+ .carousel-weeknum {
224
+ color: var(--link-color);
225
+ font-weight: bold;
226
+ font-style: normal;
227
+ }
228
+
229
+ /* Pulse effect for carousel-selected week */
230
+ .carousel-pulse {
231
+ animation: carousel-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
232
+ border-width: 2px !important;
233
+ border-color: var(--link-color) !important;
234
+ box-shadow: 0 0 10px var(--glow-color-medium);
235
+ z-index: 2;
236
+ }
237
+
238
+ @keyframes carousel-pulse {
239
+ 0% {
240
+ transform: scale(1);
241
+ opacity: 1;
242
+ }
243
+ 50% {
244
+ transform: scale(1.18);
245
+ opacity: 0.7;
246
+ }
247
+ 100% {
248
+ transform: scale(1);
249
+ opacity: 1;
250
+ }
251
+ }
252
+
253
+ /* Carousel arrow button styles */
254
+ #life-carousel-up,
255
+ #life-carousel-down {
256
+ background: none;
257
+ border: none;
258
+ cursor: pointer;
259
+ font-size: 1.5em;
260
+ line-height: 1;
261
+ padding: 0.2em;
262
+ color: var(--main-color);
263
+ outline: none;
264
+ user-select: none;
265
+ -webkit-tap-highlight-color: transparent;
266
+ transition: color var(--transition-fast);
267
+ }
268
+
269
+ #life-carousel-up:focus,
270
+ #life-carousel-down:focus,
271
+ #life-carousel-up:active,
272
+ #life-carousel-down:active {
273
+ outline: none;
274
+ box-shadow: none;
275
+ background: none;
276
+ color: var(--main-color);
277
+ }
278
+
279
+ #life-carousel-up span,
280
+ #life-carousel-down span {
281
+ color: inherit;
282
+ }
283
+
284
+ /* =============================================================================
285
+ LIFE IN WEEKS - RESPONSIVE DESIGN
286
+ ============================================================================= */
287
+
288
+ /* Large screens - optimize week grid sizing */
289
+ @media (max-width: 1200px) {
290
+ .week {
291
+ width: calc((100vw - 40px - (51 * 2px)) / 52);
292
+ height: calc((100vw - 40px - (51 * 2px)) / 52);
293
+ font-size: calc(var(--font-scale) * 0.8);
294
+ padding: 0;
295
+ min-width: 8px;
296
+ min-height: 8px;
297
+ }
298
+
299
+ .week.has-events {
300
+ font-size: calc(var(--font-scale) * 0.8);
301
+ padding: 0;
302
+ }
303
+ }
304
+
305
+ /* Tablet screens */
306
+ @media (max-width: 768px) {
307
+ .week {
308
+ width: calc((100vw - 40px - (51 * 1px)) / 52);
309
+ height: calc((100vw - 40px - (51 * 1px)) / 52);
310
+ font-size: calc(var(--font-scale) * 0.7);
311
+ padding: 0;
312
+ min-width: 8px;
313
+ min-height: 8px;
314
+ }
315
+
316
+ .week.has-events {
317
+ font-size: calc(var(--font-scale) * 0.7);
318
+ padding: 0;
319
+ }
320
+
321
+ .weeks-grid {
322
+ gap: 1px;
323
+ }
324
+
325
+ .event-desc {
326
+ margin-left: 0;
327
+ }
328
+ }
329
+
330
+ /* Mobile screens */
331
+ @media (max-width: 480px) {
332
+ .week {
333
+ width: calc((100vw - 40px - (51 * 1px)) / 52);
334
+ height: calc((100vw - 40px - (51 * 1px)) / 52);
335
+ font-size: calc(var(--font-scale) * 0.6);
336
+ padding: 0;
337
+ min-width: 8px;
338
+ min-height: 8px;
339
+ }
340
+
341
+ .week.has-events {
342
+ font-size: calc(var(--font-scale) * 0.6);
343
+ padding: 0;
344
+ }
345
+
346
+ .weeks-grid {
347
+ gap: 1px;
348
+ }
349
+ }
data/assets/style.css CHANGED
@@ -330,309 +330,5 @@ input[type=reset] {
330
330
  color: var(--text-color);
331
331
  opacity: 0.7;
332
332
  }
333
-
334
- /* =============================================================================
335
- LIFE IN WEEKS - MAIN COMPONENT
336
- ============================================================================= */
337
-
338
- .life-in-weeks {
339
- margin: var(--spacing-md) 0;
340
- }
341
-
342
- .weeks-grid {
343
- margin: var(--spacing-xl) 0;
344
- display: flex;
345
- flex-wrap: wrap;
346
- gap: 2px;
347
- max-width: 100%;
348
- align-items: flex-start;
349
- }
350
-
351
- /* Week Square Base Styles */
352
- .week {
353
- width: 16px;
354
- height: 16px;
355
- border: 1px solid var(--main-color);
356
- background-color: var(--background-color);
357
- display: inline-flex;
358
- align-items: center;
359
- justify-content: center;
360
- position: relative;
361
- cursor: default;
362
- font-family: var(--font-secondary);
363
- font-size: var(--font-scale);
364
- line-height: 1.5;
365
- padding: 2px;
366
- white-space: nowrap;
367
- box-sizing: border-box;
368
- transition: all var(--transition-fast) ease;
369
- }
370
-
371
- /* Week Square State Variations */
372
- .week.decade-0 {
373
- background-color: var(--background-color);
374
- }
375
-
376
- .week.decade-1 {
377
- background-color: var(--code-background-color);
378
- }
379
-
380
- .week.future {
381
- background-color: transparent;
382
- border-color: var(--blockquote-color);
383
- opacity: 0.3;
384
- }
385
-
386
- .week.decade-1.future {
387
- background-color: var(--code-background-color);
388
- opacity: 0.2;
389
- }
390
-
391
- .week.has-events {
392
- border-color: var(--visited-color);
393
- background-color: var(--blockquote-color);
394
- color: inherit;
395
- font-size: var(--font-scale);
396
- padding: 0;
397
- }
398
-
399
- .week.has-events.future {
400
- border-color: var(--blockquote-color);
401
- opacity: 0.6;
402
- color: var(--blockquote-color);
403
- }
404
-
405
- /* Current Week Animation */
406
- .week.current {
407
- animation: pulse 2s ease-in-out infinite;
408
- border-width: 2px;
409
- border-color: var(--link-color);
410
- box-shadow: 0 0 10px var(--glow-color-light);
411
- }
412
-
413
- .week.current.has-events {
414
- box-shadow: 0 0 10px var(--glow-color-medium);
415
- }
416
-
417
- @keyframes pulse {
418
- 0% {
419
- transform: scale(1);
420
- opacity: 1;
421
- }
422
- 50% {
423
- transform: scale(1.1);
424
- opacity: 0.7;
425
- }
426
- 100% {
427
- transform: scale(1);
428
- opacity: 1;
429
- }
430
- }
431
-
432
- /* Dark Mode Week Adjustments */
433
- @media (prefers-color-scheme: dark) {
434
- .week.current {
435
- box-shadow: 0 0 10px var(--glow-color-light);
436
- }
437
-
438
- .week.current.has-events {
439
- box-shadow: 0 0 10px var(--glow-color-medium);
440
- }
441
- }
442
-
443
- /* =============================================================================
444
- LIFE IN WEEKS - INTERACTIVE COMPONENTS
445
- ============================================================================= */
446
-
447
- /* Event Indicator */
448
- .event-indicator {
449
- position: absolute;
450
- top: 50%;
451
- left: 50%;
452
- transform: translate(-50%, -50%);
453
- color: var(--background-color);
454
- font-size: 8px;
455
- line-height: 1;
456
- }
457
-
458
- /* Events List */
459
- .events-list {
460
- margin: var(--spacing-lg) 0;
461
- padding: var(--spacing-md);
462
- background-color: var(--code-background-color);
463
- border-radius: var(--radius-md);
464
- }
465
-
466
- .events-list h3 {
467
- margin-top: 0;
468
- color: var(--heading-color);
469
- border-bottom: 1px solid var(--main-color);
470
- padding-bottom: var(--spacing-sm);
471
- }
472
-
473
- .event-item {
474
- margin: var(--spacing-sm) 0;
475
- padding: 8px 0;
476
- border-bottom: 1px dotted var(--blockquote-color);
477
- font-size: 0.9em;
478
- line-height: 1.4;
479
- }
480
-
481
- .event-item:last-child {
482
- border-bottom: none;
483
- }
484
-
485
- .event-year {
486
- color: var(--main-color);
487
- margin-right: 15px;
488
- min-width: 50px;
489
- display: inline-block;
490
- }
491
-
492
- .event-name {
493
- color: var(--heading-color);
494
- margin-right: var(--spacing-sm);
495
- }
496
-
497
- .event-desc {
498
- color: var(--text-color);
499
- font-style: italic;
500
- display: block;
501
- margin-top: var(--spacing-xs);
502
- margin-left: 65px;
503
- }
504
-
505
- /* =============================================================================
506
- LIFE IN WEEKS - CAROUSEL COMPONENTS
507
- ============================================================================= */
508
-
509
- /* Highlighted week number in carousel quote */
510
- .carousel-weeknum {
511
- color: var(--link-color);
512
- font-weight: bold;
513
- font-style: normal;
514
- }
515
-
516
- /* Pulse effect for carousel-selected week */
517
- .carousel-pulse {
518
- animation: carousel-pulse 1.2s cubic-bezier(0.4,0,0.6,1) infinite;
519
- border-width: 2px !important;
520
- border-color: var(--link-color) !important;
521
- box-shadow: 0 0 10px var(--glow-color-medium);
522
- z-index: 2;
523
- }
524
-
525
- @keyframes carousel-pulse {
526
- 0% {
527
- transform: scale(1);
528
- opacity: 1;
529
- }
530
- 50% {
531
- transform: scale(1.18);
532
- opacity: 0.7;
533
- }
534
- 100% {
535
- transform: scale(1);
536
- opacity: 1;
537
- }
538
- }
539
-
540
- /* Carousel arrow button styles */
541
- #life-carousel-up,
542
- #life-carousel-down {
543
- background: none;
544
- border: none;
545
- cursor: pointer;
546
- font-size: 1.5em;
547
- line-height: 1;
548
- padding: 0.2em;
549
- color: var(--main-color);
550
- outline: none;
551
- user-select: none;
552
- -webkit-tap-highlight-color: transparent;
553
- transition: color var(--transition-fast);
554
- }
555
-
556
- #life-carousel-up:focus,
557
- #life-carousel-down:focus,
558
- #life-carousel-up:active,
559
- #life-carousel-down:active {
560
- outline: none;
561
- box-shadow: none;
562
- background: none;
563
- color: var(--main-color);
564
- }
565
-
566
- #life-carousel-up span,
567
- #life-carousel-down span {
568
- color: inherit;
569
- }
570
-
571
- /* =============================================================================
572
- RESPONSIVE DESIGN
573
- ============================================================================= */
574
-
575
- /* Large screens - optimize week grid sizing */
576
- @media (max-width: 1200px) {
577
- .week {
578
- width: calc((100vw - 40px - (51 * 2px)) / 52);
579
- height: calc((100vw - 40px - (51 * 2px)) / 52);
580
- font-size: calc(var(--font-scale) * 0.8);
581
- padding: 0;
582
- min-width: 8px;
583
- min-height: 8px;
584
- }
585
-
586
- .week.has-events {
587
- font-size: calc(var(--font-scale) * 0.8);
588
- padding: 0;
589
- }
590
- }
591
-
592
- /* Tablet screens */
593
- @media (max-width: 768px) {
594
- .week {
595
- width: calc((100vw - 40px - (51 * 1px)) / 52);
596
- height: calc((100vw - 40px - (51 * 1px)) / 52);
597
- font-size: calc(var(--font-scale) * 0.7);
598
- padding: 0;
599
- min-width: 8px;
600
- min-height: 8px;
601
- }
602
-
603
- .week.has-events {
604
- font-size: calc(var(--font-scale) * 0.7);
605
- padding: 0;
606
- }
607
-
608
- .weeks-grid {
609
- gap: 1px;
610
- }
611
-
612
- .event-desc {
613
- margin-left: 0;
614
- }
615
- }
616
-
617
- /* Mobile screens */
618
- @media (max-width: 480px) {
619
- .week {
620
- width: calc((100vw - 40px - (51 * 1px)) / 52);
621
- height: calc((100vw - 40px - (51 * 1px)) / 52);
622
- font-size: calc(var(--font-scale) * 0.6);
623
- padding: 0;
624
- min-width: 8px;
625
- min-height: 8px;
626
- }
627
-
628
- .week.has-events {
629
- font-size: calc(var(--font-scale) * 0.6);
630
- padding: 0;
631
- }
632
-
633
- .weeks-grid {
634
- gap: 1px;
635
- }
636
- }
637
333
 
638
334
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-bear-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.0
4
+ version: 0.3.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - knhash
@@ -109,6 +109,7 @@ files:
109
109
  - assets/images/circle-about.ico
110
110
  - assets/images/circle-about.png
111
111
  - assets/life-carousel.js
112
+ - assets/life-in-weeks.css
112
113
  - assets/style.css
113
114
  homepage: https://knhash.in/jekyllBear
114
115
  licenses: