book-theme 1.0.0
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 +7 -0
- data/404.html +91 -0
- data/Gemfile +35 -0
- data/README.md +136 -0
- data/_books/Default-Book.md +20 -0
- data/_books/Test-Book-1.md +34 -0
- data/_books/Test-Book-2.md +31 -0
- data/_books/my-book.md +17 -0
- data/_books/the-great-gatsby.md +25 -0
- data/_config.yml +45 -0
- data/_includes/about-book.html +22 -0
- data/_includes/book-meta.html +35 -0
- data/_includes/footer-credit.html +4 -0
- data/_includes/footer.html +2 -0
- data/_includes/head.html +36 -0
- data/_includes/header-warning.html +13 -0
- data/_layouts/book-profile.html +133 -0
- data/_layouts/default.html +12 -0
- data/_layouts/home.html +4 -0
- data/_layouts/page.html +6 -0
- data/_layouts/post.html +8 -0
- data/_sass/_base.scss +13 -0
- data/_sass/_layout.scss +562 -0
- data/_sass/_variables.scss +7 -0
- data/assets/covers/gatsby.jpg +0 -0
- data/assets/css/main.scss +6 -0
- data/index.html +17 -0
- data/new-book.bat +160 -0
- metadata +132 -0
data/_sass/_layout.scss
ADDED
|
@@ -0,0 +1,562 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
COLOR VARIABLES
|
|
3
|
+
======================================== */
|
|
4
|
+
$color-bg: #f5f3ed;
|
|
5
|
+
$color-text: #4a4a4a;
|
|
6
|
+
$color-accent: #8b7355;
|
|
7
|
+
$color-accent-light: #d4c5b0;
|
|
8
|
+
$color-accent-dark: #6b5d4d;
|
|
9
|
+
$color-border: #c9b9a4;
|
|
10
|
+
$color-meta-1: #f5f3ed;
|
|
11
|
+
$color-meta-2: #ebe7e0;
|
|
12
|
+
$color-meta-3: #f5f3ed;
|
|
13
|
+
$color-meta-4: #ebe7e0;
|
|
14
|
+
$color-meta-5: #f5f3ed;
|
|
15
|
+
|
|
16
|
+
/* ========================================
|
|
17
|
+
BODY & CARD FRAME - WIDER & LONGER
|
|
18
|
+
======================================== */
|
|
19
|
+
body {
|
|
20
|
+
background: #e8e6e1;
|
|
21
|
+
background-image:
|
|
22
|
+
radial-gradient(#d4d0c8 1px, transparent 1px),
|
|
23
|
+
radial-gradient(#d4d0c8 1px, transparent 1px);
|
|
24
|
+
background-size: 20px 20px;
|
|
25
|
+
background-position: 0 0, 10px 10px;
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 30px;
|
|
28
|
+
font-family: 'Cormorant Garamond', serif;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card-frame {
|
|
36
|
+
position: relative;
|
|
37
|
+
max-width: 1400px;
|
|
38
|
+
width: 100%;
|
|
39
|
+
margin: 0 auto;
|
|
40
|
+
background: #f5f3ed;
|
|
41
|
+
border: 3px double $color-border;
|
|
42
|
+
box-shadow:
|
|
43
|
+
0 0 0 1px #d4d0c8,
|
|
44
|
+
0 0 0 3px #e8e6e1,
|
|
45
|
+
0 0 0 4px $color-border,
|
|
46
|
+
0 10px 30px rgba(0,0,0,0.1);
|
|
47
|
+
padding: 20px;
|
|
48
|
+
border-radius: 2px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.card-corners {
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
bottom: 0;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
z-index: 10;
|
|
59
|
+
|
|
60
|
+
.corner {
|
|
61
|
+
position: absolute;
|
|
62
|
+
font-size: 2rem;
|
|
63
|
+
color: $color-accent;
|
|
64
|
+
opacity: 0.6;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.corner-tl { top: 8px; left: 8px; }
|
|
68
|
+
.corner-tr { top: 8px; right: 8px; transform: rotate(90deg); }
|
|
69
|
+
.corner-bl { bottom: 8px; left: 8px; transform: rotate(-90deg); }
|
|
70
|
+
.corner-br { bottom: 8px; right: 8px; transform: rotate(180deg); }
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ========================================
|
|
74
|
+
MAIN LAYOUT - WIDER
|
|
75
|
+
======================================== */
|
|
76
|
+
.main-wrapper {
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-columns: 530px minmax(0, 1fr); /* Increased left sidebar from 380px */
|
|
79
|
+
gap: 30px; /* Increased from 20px */
|
|
80
|
+
position: relative;
|
|
81
|
+
z-index: 1;
|
|
82
|
+
align-items: stretch;
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ========================================
|
|
87
|
+
LEFT SIDEBAR
|
|
88
|
+
======================================== */
|
|
89
|
+
.left-sidebar {
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
gap: 10px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.left-top-cards {
|
|
96
|
+
display: grid;
|
|
97
|
+
grid-template-columns: 1fr 1fr;
|
|
98
|
+
gap: 12px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Card 1: Image & Quote */
|
|
102
|
+
.card-image-quote {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
gap: 15px;
|
|
106
|
+
background: #fff;
|
|
107
|
+
border: 1px solid $color-border;
|
|
108
|
+
padding: 8px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.image-box {
|
|
112
|
+
border: 2px solid $color-border;
|
|
113
|
+
padding: 6px;
|
|
114
|
+
margin-bottom: 10px;
|
|
115
|
+
background: #fff;
|
|
116
|
+
position: relative;
|
|
117
|
+
|
|
118
|
+
&::before, &::after {
|
|
119
|
+
content: "❧";
|
|
120
|
+
position: absolute;
|
|
121
|
+
font-size: 1rem;
|
|
122
|
+
color: $color-accent;
|
|
123
|
+
opacity: 0.7;
|
|
124
|
+
z-index: 2;
|
|
125
|
+
}
|
|
126
|
+
&::before { top: 2px; left: 2px; }
|
|
127
|
+
&::after { bottom: 2px; right: 2px; transform: rotate(180deg); }
|
|
128
|
+
|
|
129
|
+
img {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: auto;
|
|
132
|
+
display: block;
|
|
133
|
+
object-fit: cover;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.no-image {
|
|
137
|
+
height: 180px; /* Increased from 160px */
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: center;
|
|
141
|
+
color: #999;
|
|
142
|
+
font-style: italic;
|
|
143
|
+
background: #f9f9f9;
|
|
144
|
+
font-size: 0.85rem;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* Buy Button - Between Image and Quote */
|
|
149
|
+
.buy-button {
|
|
150
|
+
display: block;
|
|
151
|
+
width: 90%;
|
|
152
|
+
margin: 0 auto 10px auto; /* Centers button, space below */
|
|
153
|
+
padding: 10px;
|
|
154
|
+
background: $color-accent-dark;
|
|
155
|
+
color: #fff !important; /* Force white text */
|
|
156
|
+
text-align: center;
|
|
157
|
+
text-decoration: none;
|
|
158
|
+
font-family: 'Space Mono', monospace;
|
|
159
|
+
font-size: 0.75rem;
|
|
160
|
+
letter-spacing: 2px;
|
|
161
|
+
text-transform: uppercase;
|
|
162
|
+
border: 1px solid $color-border;
|
|
163
|
+
border-radius: 4px;
|
|
164
|
+
transition: all 0.3s ease;
|
|
165
|
+
|
|
166
|
+
span {
|
|
167
|
+
margin-right: 8px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:hover {
|
|
171
|
+
background: $color-accent;
|
|
172
|
+
color: #fff !important;
|
|
173
|
+
border-color: $color-accent;
|
|
174
|
+
transform: translateY(-2px);
|
|
175
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.quote-box {
|
|
180
|
+
position: relative;
|
|
181
|
+
padding: 10px 10px 15px 10px;
|
|
182
|
+
margin-top: 0px;
|
|
183
|
+
background: #fff;
|
|
184
|
+
font-style: italic;
|
|
185
|
+
text-align: center;
|
|
186
|
+
border-top: 1px solid $color-accent;
|
|
187
|
+
border-bottom: 1px solid $color-accent;
|
|
188
|
+
|
|
189
|
+
.quote-text {
|
|
190
|
+
font-size: 0.8rem;
|
|
191
|
+
line-height: 1.4;
|
|
192
|
+
color: #666;
|
|
193
|
+
margin: 0;
|
|
194
|
+
font-family: 'Cormorant Garamond', serif;
|
|
195
|
+
padding: 6px 0;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Card 2: Metadata */
|
|
200
|
+
.card-meta {
|
|
201
|
+
background: #fff;
|
|
202
|
+
border: 1px solid $color-border;
|
|
203
|
+
padding: 12px;
|
|
204
|
+
|
|
205
|
+
.meta-section {
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-direction: column;
|
|
208
|
+
gap: 2;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.meta-item {
|
|
212
|
+
padding: 16px;
|
|
213
|
+
margin-bottom: 8px;
|
|
214
|
+
margin-top: 5px;
|
|
215
|
+
border: 1px dotted rgb(192, 180, 165);
|
|
216
|
+
|
|
217
|
+
h3 {
|
|
218
|
+
font-size: 0.7rem;
|
|
219
|
+
text-transform: uppercase;
|
|
220
|
+
letter-spacing: 2px;
|
|
221
|
+
color: $color-accent-dark;
|
|
222
|
+
margin-bottom: 3px;
|
|
223
|
+
font-weight: bold;
|
|
224
|
+
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
p {
|
|
228
|
+
font-size: 0.8rem;
|
|
229
|
+
margin: 2px 0;
|
|
230
|
+
font-style: italic;
|
|
231
|
+
line-height: 1.3;
|
|
232
|
+
color: $color-text;
|
|
233
|
+
|
|
234
|
+
.symbol {
|
|
235
|
+
color: $color-accent;
|
|
236
|
+
margin-right: 5px;
|
|
237
|
+
font-size: 0.7rem;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.meta-item-1 { background: $color-meta-1; }
|
|
243
|
+
.meta-item-2 { background: $color-meta-2; }
|
|
244
|
+
.meta-item-3 { background: $color-meta-3; }
|
|
245
|
+
.meta-item-4 { background: $color-meta-4; }
|
|
246
|
+
.meta-item-5 { background: $color-meta-5; }
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Card 3: About (spans full width of left sidebar) */
|
|
250
|
+
.card-about {
|
|
251
|
+
border: 2px solid $color-border;
|
|
252
|
+
margin-top: 8px;
|
|
253
|
+
padding: 12px 10px 2px;
|
|
254
|
+
background: #f0eee8;
|
|
255
|
+
width: 100%;
|
|
256
|
+
|
|
257
|
+
.about-header h3 {
|
|
258
|
+
font-size: 1rem;
|
|
259
|
+
letter-spacing: 2px;
|
|
260
|
+
margin-bottom: 8px;
|
|
261
|
+
color: $color-text;
|
|
262
|
+
text-align: center;
|
|
263
|
+
font-family: 'Space Mono', monospace;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.about-content {
|
|
267
|
+
font-size: 0.8rem;
|
|
268
|
+
line-height: 1.3;
|
|
269
|
+
text-align: center;
|
|
270
|
+
|
|
271
|
+
p { margin: 4px 0; }
|
|
272
|
+
|
|
273
|
+
.disclaimer {
|
|
274
|
+
margin-top: 8px;
|
|
275
|
+
padding: 6px;
|
|
276
|
+
background: #fff;
|
|
277
|
+
border-left: 2px solid $color-accent;
|
|
278
|
+
padding-left: 8px;
|
|
279
|
+
text-align: left;
|
|
280
|
+
font-size: 0.6rem;
|
|
281
|
+
|
|
282
|
+
.symbol-hangul {
|
|
283
|
+
margin-right: 5px;
|
|
284
|
+
font-weight: bold;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.wip-note {
|
|
289
|
+
margin-top: 6px;
|
|
290
|
+
font-style: italic;
|
|
291
|
+
color: #777;
|
|
292
|
+
font-size: 0.55rem;
|
|
293
|
+
text-align: center;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* ========================================
|
|
299
|
+
RIGHT MAIN CONTENT - WIDER
|
|
300
|
+
======================================== */
|
|
301
|
+
.main-content {
|
|
302
|
+
background: #fff;
|
|
303
|
+
padding: 20px 40px 9px;
|
|
304
|
+
border: 1px solid $color-border;
|
|
305
|
+
display: flex;
|
|
306
|
+
flex-direction: column;
|
|
307
|
+
max-width: 800px;
|
|
308
|
+
min-width: 0; /* CRITICAL: This stops the container from stretching */
|
|
309
|
+
overflow: hidden;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.book-header {
|
|
313
|
+
text-align: center;
|
|
314
|
+
margin-bottom: 20px;
|
|
315
|
+
|
|
316
|
+
.book-title {
|
|
317
|
+
font-size: 2.5rem; /* Increased from 2.2rem */
|
|
318
|
+
font-weight: normal;
|
|
319
|
+
letter-spacing: 5px; /* Increased from 4px */
|
|
320
|
+
color: $color-text;
|
|
321
|
+
margin: 0 0 8px 0;
|
|
322
|
+
font-family: 'Cormorant Garamond', serif;
|
|
323
|
+
line-height: 1.2;
|
|
324
|
+
color: $color-accent-dark;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.book-traits {
|
|
328
|
+
font-family: 'Space Mono', monospace;
|
|
329
|
+
font-size: 0.75rem; /* Increased from 0.7rem */
|
|
330
|
+
letter-spacing: 3px;
|
|
331
|
+
color: #777;
|
|
332
|
+
margin-bottom: 12px;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.decorative-divider {
|
|
336
|
+
font-size: 1.3rem; /* Increased from 1.2rem */
|
|
337
|
+
color: $color-accent;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* Introduction Section */
|
|
342
|
+
.introduction-section {
|
|
343
|
+
margin-bottom: 15px;
|
|
344
|
+
|
|
345
|
+
.intro-title-lines {
|
|
346
|
+
display: flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
justify-content: center;
|
|
349
|
+
gap: 15px;
|
|
350
|
+
margin-bottom: 12px;
|
|
351
|
+
|
|
352
|
+
.line-solid {
|
|
353
|
+
flex: 1;
|
|
354
|
+
height: 1px;
|
|
355
|
+
background: $color-text;
|
|
356
|
+
max-width: 100px; /* Increased from 80px */
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.section-title {
|
|
360
|
+
font-size: 0.75rem; /* Increased from 0.7rem */
|
|
361
|
+
letter-spacing: 3px;
|
|
362
|
+
color: #555;
|
|
363
|
+
font-family: 'Space Mono', monospace;
|
|
364
|
+
white-space: nowrap;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Scroll Container with ALL text inside */
|
|
370
|
+
.scroll-container {
|
|
371
|
+
display: flex;
|
|
372
|
+
align-items: stretch;
|
|
373
|
+
gap: 8px; /* Increased from 6px */
|
|
374
|
+
margin-bottom: 15px;
|
|
375
|
+
|
|
376
|
+
.line-dashed-left,
|
|
377
|
+
.line-dashed-right {
|
|
378
|
+
width: 1px;
|
|
379
|
+
border-left: 1px dashed $color-border;
|
|
380
|
+
flex-shrink: 0;
|
|
381
|
+
height: 250px; /* Increased from 220px */
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.scroll-box {
|
|
385
|
+
flex-grow: 1;
|
|
386
|
+
height: 250px; /* Increased from 220px */
|
|
387
|
+
overflow-y: scroll;
|
|
388
|
+
padding: 15px; /* Increased from 15px */
|
|
389
|
+
background: #fafafa;
|
|
390
|
+
font-size: 0.9rem; /* Increased from 0.85rem */
|
|
391
|
+
line-height: 1.7; /* Increased from 1.6 */
|
|
392
|
+
text-align: justify;
|
|
393
|
+
|
|
394
|
+
/* Intro text wrapper inside scroll box */
|
|
395
|
+
.intro-text-wrapper {
|
|
396
|
+
margin-bottom: 15px;
|
|
397
|
+
padding-bottom: 15px;
|
|
398
|
+
border-bottom: 1px dotted $color-border;
|
|
399
|
+
|
|
400
|
+
&::first-letter {
|
|
401
|
+
float: left;
|
|
402
|
+
font-size: 3rem; /* Increased from 2.5rem */
|
|
403
|
+
line-height: 0.8;
|
|
404
|
+
margin-right: 10px; /* Increased from 8px */
|
|
405
|
+
margin-top: 5px; /* Increased from 3px */
|
|
406
|
+
font-family: 'Cormorant Garamond', serif;
|
|
407
|
+
font-weight: bold;
|
|
408
|
+
color: $color-accent-dark;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.intro-text {
|
|
412
|
+
font-size: 0.9rem;
|
|
413
|
+
line-height: 1.7;
|
|
414
|
+
text-align: justify;
|
|
415
|
+
margin: 0;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
/* Markdown content styling */
|
|
420
|
+
p {
|
|
421
|
+
margin: 12px 0;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
&::-webkit-scrollbar { width: 5px; }
|
|
425
|
+
&::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
426
|
+
&::-webkit-scrollbar-thumb { background: $color-border; }
|
|
427
|
+
&::-webkit-scrollbar-thumb:hover { background: $color-accent; }
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Scroll Label - BETWEEN scroll box and links */
|
|
432
|
+
.scroll-label-container {
|
|
433
|
+
text-align: right;
|
|
434
|
+
margin-bottom: 6px;
|
|
435
|
+
padding-bottom: 6px;
|
|
436
|
+
border-bottom: 1px dotted $color-border;
|
|
437
|
+
|
|
438
|
+
.scroll-label {
|
|
439
|
+
font-size: 0.65rem; /* Increased from 0.6rem */
|
|
440
|
+
text-transform: uppercase;
|
|
441
|
+
letter-spacing: 2px;
|
|
442
|
+
color: #999;
|
|
443
|
+
font-style: italic;
|
|
444
|
+
font-family: 'Space Mono', monospace;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Related Section - Contained Scroll Box */
|
|
449
|
+
.related-section {
|
|
450
|
+
margin-top: 0px 0px 0px;
|
|
451
|
+
padding: 15px 0;
|
|
452
|
+
/* Ensure this section stays within the main-content */
|
|
453
|
+
width: 100%;
|
|
454
|
+
max-width: 100%;
|
|
455
|
+
box-sizing: border-box; /* Includes padding in width calculation */
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.related-scroll-wrapper {
|
|
459
|
+
display: block; /* Changed from flex to block for stability */
|
|
460
|
+
width: 100%; /* Forces it to stay inside the main-content */
|
|
461
|
+
overflow-x: auto; /* Keeps the scroll internal */
|
|
462
|
+
overflow-y: hidden;
|
|
463
|
+
white-space: nowrap; /* Prevents links from wrapping to a new line */
|
|
464
|
+
padding-bottom: 0px;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.bullet-list {
|
|
468
|
+
display: flex; /* Allows the list to be as wide as its items */
|
|
469
|
+
gap: 15px;
|
|
470
|
+
list-style: none;
|
|
471
|
+
flex-wrap: nowrap;
|
|
472
|
+
padding: 0px 0;
|
|
473
|
+
margin: 0;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.bullet-list li {
|
|
477
|
+
flex: 0 0 auto; /* Prevents boxes from squishing */
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.bullet-list li a {
|
|
481
|
+
display: inline-block;
|
|
482
|
+
padding: 10px 20px;
|
|
483
|
+
background: #fff;
|
|
484
|
+
border: 1px solid $color-border;
|
|
485
|
+
text-decoration: none;
|
|
486
|
+
color: $color-accent-dark;
|
|
487
|
+
font-family: 'Space Mono', monospace;
|
|
488
|
+
font-size: 0.75rem;
|
|
489
|
+
text-transform: uppercase;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
|
|
493
|
+
/* Footer - FIX LINE NOT CROSSING INTO LINKS */
|
|
494
|
+
.book-footer {
|
|
495
|
+
margin-top: 2px 0px 0px; /* Increased from 15px */
|
|
496
|
+
padding-top: 15px;
|
|
497
|
+
border-top: 1px solid $color-border;
|
|
498
|
+
text-align: center;
|
|
499
|
+
font-size: 0.7rem; /* Increased from 0.65rem */
|
|
500
|
+
color: #999;
|
|
501
|
+
|
|
502
|
+
p {
|
|
503
|
+
margin: 4px 0; /* Increased from 3px 0 */
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
a {
|
|
507
|
+
color: #777;
|
|
508
|
+
text-decoration: none;
|
|
509
|
+
|
|
510
|
+
&:hover { color: $color-accent; }
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
/* ========================================
|
|
515
|
+
RESPONSIVE DESIGN
|
|
516
|
+
======================================== */
|
|
517
|
+
|
|
518
|
+
@media (max-width: 900px) and (min-width: 769px) {
|
|
519
|
+
body { padding: 20px; align-items: flex-start; }
|
|
520
|
+
.card-frame { padding: 25px; }
|
|
521
|
+
.main-wrapper { grid-template-columns: 1fr; gap: 20px; }
|
|
522
|
+
.left-top-cards { grid-template-columns: 1fr 1fr; }
|
|
523
|
+
.card-about { width: 100%; }
|
|
524
|
+
.related-section .bullet-list { grid-template-columns: repeat(2, 1fr); }
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
@media (max-width: 768px) and (min-width: 481px) {
|
|
528
|
+
body { padding: 15px; align-items: flex-start; }
|
|
529
|
+
.card-frame { padding: 22px 18px; border-width: 2px; }
|
|
530
|
+
.card-corners .corner { font-size: 1.5rem; opacity: 0.4; }
|
|
531
|
+
.main-wrapper { grid-template-columns: 1fr; gap: 15px; }
|
|
532
|
+
.left-top-cards { grid-template-columns: 1fr; }
|
|
533
|
+
.card-about { width: 100%; }
|
|
534
|
+
.main-content { padding: 25px 20px; }
|
|
535
|
+
.book-header .book-title { font-size: 2rem; }
|
|
536
|
+
.scroll-box { height: 220px; }
|
|
537
|
+
.line-dashed-left, .line-dashed-right { height: 220px; }
|
|
538
|
+
.related-section .bullet-list { grid-template-columns: 1fr; }
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
@media (max-width: 480px) and (min-width: 320px) {
|
|
542
|
+
body { padding: 10px; align-items: flex-start; }
|
|
543
|
+
.card-frame { padding: 18px 15px; border-width: 2px; }
|
|
544
|
+
.card-corners { display: none; }
|
|
545
|
+
.main-wrapper { grid-template-columns: 1fr; gap: 12px; }
|
|
546
|
+
.left-top-cards { grid-template-columns: 1fr; }
|
|
547
|
+
.image-box::before, .image-box::after { display: none; }
|
|
548
|
+
.image-box .no-image { height: 160px; }
|
|
549
|
+
.card-about { padding: 12px 10px; }
|
|
550
|
+
.main-content { padding: 20px 15px; }
|
|
551
|
+
.book-header .book-title { font-size: 1.6rem; }
|
|
552
|
+
.scroll-box { height: 200px; padding: 15px; font-size: 0.85rem; }
|
|
553
|
+
.line-dashed-left, .line-dashed-right { height: 200px; }
|
|
554
|
+
.scroll-label { font-size: 0.6rem; }
|
|
555
|
+
.related-section .bullet-list li { padding: 10px 8px 10px 20px; font-size: 0.8rem; }
|
|
556
|
+
.book-footer { font-size: 0.65rem; }
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
@media (hover: none) and (pointer: coarse) {
|
|
560
|
+
.scroll-box { -webkit-overflow-scrolling: touch; }
|
|
561
|
+
.bullet-list li { padding: 14px 10px 14px 24px; }
|
|
562
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// Design Tokens
|
|
2
|
+
$color-bg: #f9f9f9;
|
|
3
|
+
$color-text: #333;
|
|
4
|
+
$color-accent: #d4a5a5; // Soft paperback cover color
|
|
5
|
+
$color-border: #ddd;
|
|
6
|
+
$font-main: 'Cormorant Garamond', serif; /* For body text */
|
|
7
|
+
$font-mono: 'Space Mono', monospace; /* For meta data and tags */
|
|
Binary file
|
data/index.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
title: Library Index
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<div class="profile-container">
|
|
7
|
+
<h1 style="text-align:center; letter-spacing: 2px;">MY LIBRARY</h1>
|
|
8
|
+
|
|
9
|
+
<div class="book-list">
|
|
10
|
+
{% for book in site.books %}
|
|
11
|
+
<div class="book-item">
|
|
12
|
+
<h3><a href="{{ book.url | relative_url }}">{{ book.title }}</a></h3>
|
|
13
|
+
<p>{{ book.author }} — {{ book.genre }}</p>
|
|
14
|
+
</div>
|
|
15
|
+
{% endfor %}
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|