fix: weather icon case mismatch + pin/weather icon alignment
- Lowercase all weather_icons map keys to match stored entry values
('sunny', 'partly cloudy', etc.); add |lower filter as safety net
- Remove vertical-align hack from location pin SVG
- Add display:inline-flex + align-items:center to .journal-post-location
and .journal-post-weather so icons and text share a true center axis
This commit is contained in:
@@ -42,18 +42,28 @@ body::after {
|
||||
padding: 0 var(--space-5);
|
||||
height: var(--site-header-height);
|
||||
background: var(--color-canvas);
|
||||
border-top: 3px solid var(--color-accent);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.site-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
color: var(--color-ink);
|
||||
line-height: 1;
|
||||
@@ -140,21 +150,6 @@ body::after {
|
||||
.entry-card:hover .entry-title { color: var(--color-accent); }
|
||||
|
||||
|
||||
/* Location & weather badges (single entry page) */
|
||||
|
||||
.entry-location {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-2);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.entry-weather {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
@keyframes card-highlight {
|
||||
0% { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
|
||||
100% { background-color: transparent; }
|
||||
@@ -203,6 +198,9 @@ body::after {
|
||||
.journal-post-location,
|
||||
.journal-post-weather {
|
||||
color: var(--color-ink-muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.journal-photo-wrap {
|
||||
@@ -346,21 +344,6 @@ body::after {
|
||||
|
||||
/* ── Single entry ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.entry-hero {
|
||||
width: 100%;
|
||||
max-height: 480px;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-8);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.entry-hero img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-back-fixed {
|
||||
position: fixed;
|
||||
top: calc(var(--site-header-height) + var(--space-3));
|
||||
@@ -368,91 +351,10 @@ body::after {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.entry-header { margin-bottom: var(--space-8); }
|
||||
|
||||
.entry-header-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.entry-header .entry-date {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ink-muted);
|
||||
display: inline;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.entry .entry-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-ink);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
.entry .entry-title { font-size: var(--text-3xl); }
|
||||
}
|
||||
|
||||
.entry-title-rule {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.entry-body { margin-bottom: var(--space-10); }
|
||||
.entry-body p { margin-bottom: 1.4em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); }
|
||||
.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
|
||||
|
||||
.entry-footer { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
|
||||
.entry-footer a { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
|
||||
.entry-footer a:hover { color: var(--color-accent-hover); }
|
||||
|
||||
/* ── Photo gallery ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.entry-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3px;
|
||||
margin-bottom: var(--space-10);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
.entry-gallery { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.gallery-thumb {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.gallery-thumb:hover img,
|
||||
.gallery-thumb:focus img { opacity: 0.82; }
|
||||
|
||||
.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
|
||||
|
||||
/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
|
||||
|
||||
.pswp__bg { background: #000; }
|
||||
@@ -593,12 +495,9 @@ body::after {
|
||||
}
|
||||
|
||||
.stat-block {
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6) var(--space-5);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-left: 2px solid var(--color-accent);
|
||||
padding: var(--space-2) 0 var(--space-2) var(--space-4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@@ -606,7 +505,7 @@ body::after {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 6vw, var(--text-3xl));
|
||||
font-weight: 400;
|
||||
color: var(--color-accent);
|
||||
color: var(--color-ink);
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--space-2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -1004,7 +903,7 @@ body::after {
|
||||
color: var(--color-ink-muted);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-1) var(--space-4);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
@@ -1107,6 +1006,24 @@ body::after {
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.trip-card-cover {
|
||||
aspect-ratio: 3 / 1;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
background: var(--color-border);
|
||||
margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
|
||||
}
|
||||
|
||||
.trip-card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.45s ease;
|
||||
}
|
||||
|
||||
.trip-card:hover .trip-card-cover img { transform: scale(1.04); }
|
||||
|
||||
.trip-card-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xl);
|
||||
@@ -1460,6 +1377,41 @@ body::after {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Story progress bar ──────────────────────────────────── */
|
||||
.story-progress {
|
||||
position: fixed;
|
||||
top: var(--site-header-height);
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 0%;
|
||||
background: var(--color-accent);
|
||||
z-index: 200;
|
||||
pointer-events: none;
|
||||
will-change: width;
|
||||
}
|
||||
|
||||
/* ── Story opener (location + date eyebrow) ──────────────── */
|
||||
.story-opener {
|
||||
text-align: center;
|
||||
padding-bottom: var(--space-12);
|
||||
margin-bottom: var(--space-12);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
opacity: 0;
|
||||
animation: storyReveal 0.9s cubic-bezier(.16,1,.3,1) 0.8s both;
|
||||
}
|
||||
|
||||
.story-opener__text {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-muted);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.story-opener { opacity: 1; animation: none; }
|
||||
}
|
||||
|
||||
/* ── Story nav title (desktop: fades into header center) ─────── */
|
||||
.story-nav-title {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user