jekyll-bear-theme 0.2.4 → 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 +4 -4
- data/README.md +5 -3
- data/_includes/head.html +3 -0
- data/assets/images/JBBlog.png +0 -0
- data/assets/images/JBHome.png +0 -0
- data/assets/images/JBLife.png +0 -0
- data/assets/images/JBLongForm.png +0 -0
- data/assets/images/JBPoetry.png +0 -0
- data/assets/life-in-weeks.css +349 -0
- data/assets/style.css +28 -324
- metadata +6 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f04f0567099411f44dc94e5342a6763977fe847fb51036aef370403be39df6af
|
|
4
|
+
data.tar.gz: 5be5400f1bff4ae2cc9d410b7258ff7aac028ab758364a8f5bd3495d42a84c5f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 87898ab693ea8be95b44c1b4c2e7d5f4e3650ced713b581ac18862fe20acf117c0a0f632187305cddf8e70f8a02696640eba39feffa1036b14250c3d2c30477f
|
|
7
|
+
data.tar.gz: f0df15f5c21fa3ce4301e8ef9000226027fe7ffd2265bd5d54a360d27bcabba083ba564d48a02d9bb1c699c90b4f985a14ca8ea51fa36ca9f706c4faba2b1c3b
|
data/README.md
CHANGED
|
@@ -18,7 +18,7 @@ This is a port of it's theme to Jekyll, with some tweaks. So you can use GitHub
|
|
|
18
18
|
- Code highlighting
|
|
19
19
|
- **Life in Weeks visualization** - Interactive timeline of your life events
|
|
20
20
|
- **IBM Plex Mono typography** - Consistent monospace font across all elements
|
|
21
|
-
- **
|
|
21
|
+
- **Pine Forest color palette** - Cool, nature-inspired greens with automatic dark mode
|
|
22
22
|
|
|
23
23
|
## Screenshots
|
|
24
24
|
|
|
@@ -61,7 +61,7 @@ Or install it yourself as:
|
|
|
61
61
|
|
|
62
62
|
### Design Philosophy
|
|
63
63
|
|
|
64
|
-
jekyllBear now features a **monospace-first design** with IBM Plex Mono typography, creating a technical yet
|
|
64
|
+
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.
|
|
65
65
|
|
|
66
66
|
### Customization
|
|
67
67
|
|
|
@@ -69,7 +69,9 @@ The theme's CSS is now highly modular and customizable:
|
|
|
69
69
|
|
|
70
70
|
- **Typography**: Modify `--font-main`, `--font-secondary`, and `--font-monospace` variables
|
|
71
71
|
- **Spacing**: Use the standardized spacing scale for consistent layouts
|
|
72
|
-
- **Colors**: All theme colors are centralized in CSS custom properties
|
|
72
|
+
- **Colors**: All theme colors are centralized in CSS custom properties for easy customization
|
|
73
|
+
- **Pine Forest Palette**: Cool greens ranging from light pine mist to deep forest shadows
|
|
74
|
+
- **Glow Effects**: Configurable glow colors via `--glow-color-light` and `--glow-color-medium`
|
|
73
75
|
- **Layout**: Responsive design with mobile-first approach
|
|
74
76
|
|
|
75
77
|
## Usage
|
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>
|
data/assets/images/JBBlog.png
CHANGED
|
Binary file
|
data/assets/images/JBHome.png
CHANGED
|
Binary file
|
data/assets/images/JBLife.png
CHANGED
|
Binary file
|
|
Binary file
|
data/assets/images/JBPoetry.png
CHANGED
|
Binary file
|
|
@@ -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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* =============================================================================
|
|
2
|
-
JEKYLL BEAR THEME -
|
|
2
|
+
JEKYLL BEAR THEME - PINE FOREST AESTHETIC
|
|
3
3
|
============================================================================= */
|
|
4
4
|
/* =============================================================================
|
|
5
5
|
FONTS & IMPORTS
|
|
@@ -40,35 +40,43 @@
|
|
|
40
40
|
--z-dropdown: 200;
|
|
41
41
|
--z-modal: 1000;
|
|
42
42
|
|
|
43
|
-
/*
|
|
44
|
-
--background-color: #
|
|
45
|
-
--heading-color: #
|
|
46
|
-
--text-color: #
|
|
47
|
-
--link-color: #
|
|
48
|
-
--visited-color: #
|
|
49
|
-
--main-color: #
|
|
50
|
-
--code-background-color: #
|
|
51
|
-
--code-color: #
|
|
52
|
-
--blockquote-color: #
|
|
43
|
+
/* Pine Forest Theme Colors - Light Mode */
|
|
44
|
+
--background-color: #F5F7F3; /* Light pine needle mist */
|
|
45
|
+
--heading-color: #1A3025; /* Deep forest green */
|
|
46
|
+
--text-color: #0F2018; /* Dark pine shadow */
|
|
47
|
+
--link-color: #2D5016; /* Forest moss */
|
|
48
|
+
--visited-color: #1E3A11; /* Deep woodland */
|
|
49
|
+
--main-color: #4A7C59; /* Pine needle green */
|
|
50
|
+
--code-background-color: #E8EDEA; /* Frosted pine */
|
|
51
|
+
--code-color: #1A3025; /* Deep forest green */
|
|
52
|
+
--blockquote-color: #7A9B85; /* Sage green */
|
|
53
53
|
|
|
54
54
|
/* Interactive colors derived from theme */
|
|
55
55
|
--hover-color: white;
|
|
56
56
|
--border-color: var(--blockquote-color);
|
|
57
57
|
--shadow-color: rgba(0, 0, 0, 0.18);
|
|
58
|
+
|
|
59
|
+
/* Glow effects for interactive elements */
|
|
60
|
+
--glow-color-light: rgba(45, 80, 22, 0.3);
|
|
61
|
+
--glow-color-medium: rgba(45, 80, 22, 0.5);
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
/* Dark Mode Color Overrides */
|
|
61
65
|
@media (prefers-color-scheme: dark) {
|
|
62
66
|
:root {
|
|
63
|
-
--background-color: #
|
|
64
|
-
--heading-color: #
|
|
65
|
-
--text-color: #
|
|
66
|
-
--link-color: #
|
|
67
|
-
--visited-color: #
|
|
68
|
-
--main-color: #
|
|
69
|
-
--code-background-color: #
|
|
70
|
-
--code-color: #
|
|
71
|
-
--blockquote-color: #
|
|
67
|
+
--background-color: #0D1B12; /* Dark pine shadow */
|
|
68
|
+
--heading-color: #C8D8CE; /* Light pine mist */
|
|
69
|
+
--text-color: #E0EADE; /* Pale forest light */
|
|
70
|
+
--link-color: #7AB069; /* Bright moss green */
|
|
71
|
+
--visited-color: #9BC490; /* Light woodland */
|
|
72
|
+
--main-color: #8BB899; /* Soft pine green */
|
|
73
|
+
--code-background-color: #1A2B1F; /* Dark evergreen */
|
|
74
|
+
--code-color: #C8D8CE; /* Light pine mist */
|
|
75
|
+
--blockquote-color: #4A6B52; /* Forest undergrowth */
|
|
76
|
+
|
|
77
|
+
/* Dark mode glow effects */
|
|
78
|
+
--glow-color-light: rgba(122, 176, 105, 0.3);
|
|
79
|
+
--glow-color-medium: rgba(122, 176, 105, 0.5);
|
|
72
80
|
}
|
|
73
81
|
}
|
|
74
82
|
|
|
@@ -322,309 +330,5 @@ input[type=reset] {
|
|
|
322
330
|
color: var(--text-color);
|
|
323
331
|
opacity: 0.7;
|
|
324
332
|
}
|
|
325
|
-
|
|
326
|
-
/* =============================================================================
|
|
327
|
-
LIFE IN WEEKS - MAIN COMPONENT
|
|
328
|
-
============================================================================= */
|
|
329
|
-
|
|
330
|
-
.life-in-weeks {
|
|
331
|
-
margin: var(--spacing-md) 0;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.weeks-grid {
|
|
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;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
/* Week Square Base Styles */
|
|
344
|
-
.week {
|
|
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 */
|
|
364
|
-
.week.decade-0 {
|
|
365
|
-
background-color: var(--background-color);
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.week.decade-1 {
|
|
369
|
-
background-color: var(--code-background-color);
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.week.future {
|
|
373
|
-
background-color: transparent;
|
|
374
|
-
border-color: var(--blockquote-color);
|
|
375
|
-
opacity: 0.3;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
.week.decade-1.future {
|
|
379
|
-
background-color: var(--code-background-color);
|
|
380
|
-
opacity: 0.2;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
.week.has-events {
|
|
384
|
-
border-color: var(--visited-color);
|
|
385
|
-
background-color: var(--blockquote-color);
|
|
386
|
-
color: inherit;
|
|
387
|
-
font-size: var(--font-scale);
|
|
388
|
-
padding: 0;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
.week.has-events.future {
|
|
392
|
-
border-color: var(--blockquote-color);
|
|
393
|
-
opacity: 0.6;
|
|
394
|
-
color: var(--blockquote-color);
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
/* Current Week Animation */
|
|
398
|
-
.week.current {
|
|
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);
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
.week.current.has-events {
|
|
406
|
-
box-shadow: 0 0 10px rgba(124, 64, 17, 0.5);
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
@keyframes pulse {
|
|
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
|
-
}
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
/* Dark Mode Week Adjustments */
|
|
425
|
-
@media (prefers-color-scheme: dark) {
|
|
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
|
-
}
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
/* =============================================================================
|
|
436
|
-
LIFE IN WEEKS - INTERACTIVE COMPONENTS
|
|
437
|
-
============================================================================= */
|
|
438
|
-
|
|
439
|
-
/* Event Indicator */
|
|
440
|
-
.event-indicator {
|
|
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;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
/* Events List */
|
|
451
|
-
.events-list {
|
|
452
|
-
margin: var(--spacing-lg) 0;
|
|
453
|
-
padding: var(--spacing-md);
|
|
454
|
-
background-color: var(--code-background-color);
|
|
455
|
-
border-radius: var(--radius-md);
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
.events-list h3 {
|
|
459
|
-
margin-top: 0;
|
|
460
|
-
color: var(--heading-color);
|
|
461
|
-
border-bottom: 1px solid var(--main-color);
|
|
462
|
-
padding-bottom: var(--spacing-sm);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
.event-item {
|
|
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;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.event-item:last-child {
|
|
474
|
-
border-bottom: none;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.event-year {
|
|
478
|
-
color: var(--main-color);
|
|
479
|
-
margin-right: 15px;
|
|
480
|
-
min-width: 50px;
|
|
481
|
-
display: inline-block;
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
.event-name {
|
|
485
|
-
color: var(--heading-color);
|
|
486
|
-
margin-right: var(--spacing-sm);
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
.event-desc {
|
|
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
|
-
}
|
|
530
|
-
}
|
|
531
|
-
|
|
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 */
|
|
585
|
-
@media (max-width: 768px) {
|
|
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
|
-
}
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
/* Mobile screens */
|
|
610
|
-
@media (max-width: 480px) {
|
|
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
|
-
}
|
|
628
|
-
}
|
|
629
333
|
|
|
630
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.
|
|
4
|
+
version: 0.3.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- knhash
|
|
@@ -66,8 +66,9 @@ dependencies:
|
|
|
66
66
|
- !ruby/object:Gem::Version
|
|
67
67
|
version: '1.7'
|
|
68
68
|
description: jekyllBear is a clean, minimal Jekyll theme focused on readability and
|
|
69
|
-
simplicity. Features
|
|
70
|
-
|
|
69
|
+
simplicity. Features a Pine Forest color palette with cool, nature-inspired greens,
|
|
70
|
+
IBM Plex Mono typography, responsive design, tag system, life tracking visualization,
|
|
71
|
+
and a distraction-free reading experience inspired by Bear Blog.
|
|
71
72
|
email:
|
|
72
73
|
- mail@knhash.in
|
|
73
74
|
executables: []
|
|
@@ -108,6 +109,7 @@ files:
|
|
|
108
109
|
- assets/images/circle-about.ico
|
|
109
110
|
- assets/images/circle-about.png
|
|
110
111
|
- assets/life-carousel.js
|
|
112
|
+
- assets/life-in-weeks.css
|
|
111
113
|
- assets/style.css
|
|
112
114
|
homepage: https://knhash.in/jekyllBear
|
|
113
115
|
licenses:
|
|
@@ -133,5 +135,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
133
135
|
requirements: []
|
|
134
136
|
rubygems_version: 3.6.2
|
|
135
137
|
specification_version: 4
|
|
136
|
-
summary: A minimal, text focused blog theme
|
|
138
|
+
summary: A minimal, text focused blog theme with Pine Forest aesthetics
|
|
137
139
|
test_files: []
|