astro-accelerator 5.10.36 → 5.10.38

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 (4) hide show
  1. package/package.json +1 -1
  2. package/public/css/main.css +55 -94
  3. package/public/css/vars.css +2 -0
  4. package/src/themes/accelerator/components/TimelineEvent.astro +15 -15
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "5.10.36",
2
+ "version": "5.10.38",
3
3
  "author": "Steve Fenton",
4
4
  "name": "astro-accelerator",
5
5
  "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
package/public/css/main.css CHANGED
@@ -92,13 +92,22 @@ textarea {
92
92
  font-family: var(--code-font);
93
93
  }
94
94
 
95
- button {
96
- background-color: var(--icon-block);
95
+ button, .button {
96
+ background-color: var(--aft);
97
+ border: 1px solid var(--icon-block);
97
98
  border-radius: var(--block-radius);
98
- color: var(--aft);
99
+ color: var(--icon-block);
99
100
  cursor: pointer;
101
+ display: inline-block;
100
102
  font-size: 1.3rem;
101
103
  padding: 0.5rem;
104
+ text-decoration: none;
105
+ }
106
+
107
+ button:hover, .button:hover,
108
+ button:focus, .button:focus {
109
+ background-color: var(--icon-block);
110
+ color: var(--aft);
102
111
  }
103
112
 
104
113
  summary {
@@ -1354,120 +1363,72 @@ figure:focus .magnify-button {
1354
1363
  }
1355
1364
 
1356
1365
  .timeline::before {
1357
- content: '';
1358
- position: absolute;
1359
- left: 2rem;
1360
- top: 0;
1361
- bottom: 0;
1362
- width: 0.4rem;
1363
- background-color: var(--icon-block);
1366
+ background-color: var(--icon-block);
1367
+ bottom: 0;
1368
+ content: '';
1369
+ left: 2rem;
1370
+ position: absolute;
1371
+ top: calc(var(--block-gap) * -1);
1372
+ width: 0.4rem;
1364
1373
  }
1365
1374
 
1366
1375
  .timeline-event {
1367
- position: relative;
1368
- margin-bottom: 1rem;
1369
- padding-left: 4rem;
1370
-
1371
- @media (prefers-reduced-motion: no-preference) {
1372
- transition: margin-bottom 0.3s ease;
1373
- }
1376
+ padding-inline-start: 4rem;
1377
+ position: relative;
1378
+ margin-block-end: var(--block-gap);
1374
1379
  }
1375
1380
 
1376
1381
  .timeline-event::before {
1377
- content: '';
1378
- position: absolute;
1379
- left: 1.5rem;
1380
- top: 1.5rem;
1381
- width: 1rem;
1382
- height: 1rem;
1383
- background: var(--aft);
1384
- border: 3px solid var(--icon-block);
1385
- border-radius: 50%;
1386
- box-shadow: var(--box-shadow-unselected);
1387
- z-index: 1;
1388
-
1389
- @media (prefers-reduced-motion: no-preference) {
1390
- transition: all 0.3s ease;
1391
- }
1392
- }
1393
-
1394
- .timeline-event:focus-within {
1395
- margin-bottom: 2rem;
1396
- }
1397
-
1398
- .timeline-event:focus-within::before {
1399
- background: var(--icon-block);
1400
- box-shadow: var(--box-shadow);
1401
- transform: scale(1.2);
1382
+ background: var(--aft);
1383
+ border: 3px solid var(--icon-block);
1384
+ border-radius: 50%;
1385
+ box-shadow: var(--box-shadow-unselected);
1386
+ content: '';
1387
+ height: 1rem;
1388
+ left: 1.5rem;
1389
+ position: absolute;
1390
+ top: 1.5em;
1391
+ width: 1rem;
1392
+ z-index: 1;
1402
1393
  }
1403
1394
 
1404
- .timeline-event > button {
1405
- width: 100%;
1406
- text-align: left;
1407
- background: var(--aft-block);
1408
- color: var(--fore-block);
1409
- border-radius: 0.5rem;
1410
- padding: 1.5rem;
1411
- cursor: pointer;
1412
- box-shadow: var(--box-shadow-unselected);
1413
-
1414
- @media (prefers-reduced-motion: no-preference) {
1415
- transition: all 0.3s ease;
1416
- }
1395
+ .timeline-event > div {
1396
+ background: var(--aft-block);
1397
+ border-radius: var(--block-radius);
1398
+ box-shadow: var(--box-shadow-unselected);
1399
+ color: var(--fore-block);
1400
+ padding: 1.5rem;
1401
+ text-align: left;
1402
+ width: 100%;
1417
1403
  }
1418
1404
 
1419
- .timeline-event.event-today > button {
1420
- border: 1px solid var(--icon-block);
1421
- background: var(--aft);
1405
+ .timeline-event.event-today > div {
1406
+ box-shadow: var(--box-glow);
1422
1407
  }
1423
1408
 
1424
- .timeline-event.event-past > button {
1425
- opacity: 0.8;
1426
- background: var(--aft);
1427
- color: var(--fore);
1428
- box-shadow: none;
1409
+ .timeline-event.event-past > div {
1410
+ background: var(--aft);
1411
+ box-shadow: none;
1412
+ color: var(--fore);
1413
+ opacity: 0.8;
1429
1414
  }
1430
1415
 
1431
- .timeline-event > button:hover,
1432
- .timeline-event > button:focus {
1433
- outline: none;
1434
- box-shadow: var(--box-shadow);
1435
- transform: translateX(4px);
1416
+ .timeline-details {
1417
+ font-size: var(--font-size-meta);
1436
1418
  }
1437
1419
 
1438
1420
  .timeline time {
1439
- display: inline-block;
1440
- font-size: var(--font-size-meta);
1441
- margin-bottom: 0.5rem;
1421
+ display: inline-block;
1422
+ margin-block-end: var(--grid-gap);
1442
1423
  }
1443
1424
 
1444
1425
  .timeline-location {
1445
- display: block;
1446
- font-size: var(--font-size-meta);
1447
- }
1448
-
1449
- .timeline-location::before {
1450
- content: '📍 ';
1451
- }
1452
-
1453
- .timeline-details {
1454
- max-height: 0;
1455
- overflow: hidden;
1456
- opacity: 0;
1457
- font-size: var(--font-size-meta);
1458
-
1459
- @media (prefers-reduced-motion: no-preference) {
1460
- transition: max-height 0.2s ease, opacity 0.2s ease;
1461
- }
1462
- }
1463
-
1464
- .timeline-event:focus-within .timeline-details {
1465
- max-height: 500px;
1466
- opacity: 1;
1426
+ display: block;
1427
+ font-size: var(--font-size-meta);
1467
1428
  }
1468
1429
 
1469
1430
  .timeline-event.event-past::before {
1470
- box-shadow: var(--box-shadow-unselected);
1431
+ box-shadow: var(--box-shadow-unselected);
1471
1432
  }
1472
1433
 
1473
1434
  /* Animation */
package/public/css/vars.css CHANGED
@@ -37,6 +37,7 @@
37
37
  --fore-block: #333;
38
38
  --aft-block: #BEE;
39
39
  --icon-block: #FF0;
40
+ --icon-block-alpha: rgba(from var(--icon-block) r g b / 0.4);
40
41
 
41
42
  --fore-table-head: #DFF;
42
43
  --aft-table-head: #233;
@@ -68,6 +69,7 @@
68
69
 
69
70
  --box-shadow: 0 12px 24px -12px rgb(0 0 0 / 50%);
70
71
  --box-shadow-slight: 0 6px 12px -6px rgb(0 0 0 / 40%);
72
+ --box-glow: 0 0 12px 0 var(--icon-block-alpha);
71
73
 
72
74
  --box-shadow-unselected: rgb(0 0 0 / 6%) 0px 2px 4px, rgb(0 0 0 / 5%) 0px 0.5px 1px;
73
75
  --transform-selected: translate3d(0px, -1px, 0px);
package/src/themes/accelerator/components/TimelineEvent.astro CHANGED
@@ -19,17 +19,20 @@ const accelerator = new Accelerator(SITE);
19
19
  ---
20
20
 
21
21
  <div class="timeline-event">
22
- <button aria-expanded="false">
22
+ <div>
23
23
  <time datetime={date}
24
24
  >{
25
- accelerator.dateFormatter.formatDate(date, SITE.default.locale)
25
+ accelerator.dateFormatter.formatShortDate(
26
+ date,
27
+ SITE.default.locale,
28
+ )
26
29
  }</time
27
30
  >{
28
31
  endDate && (
29
32
  <Fragment>
30
33
  &dash;
31
34
  <time datetime={endDate}>
32
- {accelerator.dateFormatter.formatDate(
35
+ {accelerator.dateFormatter.formatShortDate(
33
36
  endDate,
34
37
  SITE.default.locale,
35
38
  )}
@@ -39,16 +42,13 @@ const accelerator = new Accelerator(SITE);
39
42
  }
40
43
  <h3>{title}</h3>
41
44
  <span class="timeline-location">{location}</span>
42
-
43
- <div class="timeline-details">
44
- <p>{description}</p>
45
- {
46
- linkHref && (
47
- <a href={linkHref} class="button">
48
- {linkText}
49
- </a>
50
- )
51
- }
52
- </div>
53
- </button>
45
+ <p>{description}</p>
46
+ {
47
+ linkHref && (
48
+ <a href={linkHref} class="button">
49
+ {linkText}
50
+ </a>
51
+ )
52
+ }
53
+ </div>
54
54
  </div>