diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 109364e..cb15e85 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -120,54 +120,7 @@ body::after { .entry-card:hover .entry-card-photo img { transform: scale(1.04); } -.entry-card-photo-overlay { - position: absolute; - inset: auto 0 0 0; - padding: var(--space-5) var(--space-4) var(--space-3); - background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, transparent 100%); - display: flex; - align-items: flex-end; - gap: var(--space-3); - flex-wrap: wrap; -} -.entry-date-overlay { - font-size: var(--text-xs); - font-weight: 700; - letter-spacing: 0.08em; - color: rgba(255,255,255,0.92); -} - -.entry-location-overlay { - font-size: var(--text-xs); - color: rgba(255,255,255,0.85); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 180px; -} - -/* Card: text-only variant */ - -.entry-card-textmeta { - display: flex; - align-items: center; - gap: var(--space-3); - margin-bottom: var(--space-3); - flex-wrap: wrap; -} - -.entry-date-plain { - font-size: var(--text-xs); - font-weight: 700; - letter-spacing: 0.07em; - color: var(--color-ink-muted); -} - -.entry-location-plain { - font-size: var(--text-xs); - color: var(--color-ink-muted); -} /* Card body */ @@ -183,18 +136,6 @@ body::after { .entry-card:hover .entry-title { color: var(--color-accent); } -.entry-excerpt { - font-size: var(--text-base); - line-height: var(--leading-normal); - color: var(--color-ink-2); - margin-bottom: var(--space-3); -} - -.entry-read-more { - font-size: var(--text-sm); - font-weight: 500; - color: var(--color-accent); -} /* Location & weather badges (single entry page) */ @@ -216,7 +157,105 @@ body::after { 100% { background-color: transparent; } } -.entry-card.is-highlighted { + +/* ── Journal post (inline feed) ─────────────────────────────────────────────── */ + +.journal-post { + border-bottom: 1px solid var(--color-border); + padding-bottom: var(--space-12); + margin-bottom: var(--space-12); +} + +.journal-post-header { + margin-bottom: var(--space-4); +} + +.journal-post-title { + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 400; + line-height: var(--leading-snug); + color: var(--color-ink); + margin-bottom: var(--space-2); +} + +.journal-post-meta { + font-size: var(--text-xs); + color: var(--color-ink-muted); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2); +} + +.journal-post-permalink { + color: var(--color-ink-muted); + text-decoration: none; + font-weight: 700; + letter-spacing: 0.07em; +} + +.journal-post-permalink:hover { color: var(--color-accent); } + +.journal-post-location, +.journal-post-weather { + color: var(--color-ink-muted); +} + +.journal-photo-strip { + display: flex; + overflow-x: scroll; + scroll-snap-type: x mandatory; + scrollbar-width: none; + border-radius: var(--radius-md); + margin-bottom: var(--space-3); +} + +.journal-photo-strip::-webkit-scrollbar { display: none; } + +.journal-photo-slide { + flex: 0 0 100%; + scroll-snap-align: start; + aspect-ratio: 3 / 2; + overflow: hidden; +} + +.journal-photo-slide img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.journal-photo-dots { + display: flex; + justify-content: center; + gap: var(--space-2); + margin-bottom: var(--space-4); +} + +.journal-photo-dot { + width: 6px; + height: 6px; + border-radius: 9999px; + background: var(--color-border); + transition: background 0.2s; +} + +.journal-photo-dot.is-active { + background: var(--color-ink-muted); +} + +.journal-post-body { + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--color-ink-2); +} + +.journal-post-body p { margin-bottom: var(--space-4); } +.journal-post-body p:last-child { margin-bottom: 0; } + +.journal-post.is-highlighted { animation: card-highlight 0.7s ease-out forwards; } diff --git a/themes/intotheeast/templates/partials/base.html.twig b/themes/intotheeast/templates/partials/base.html.twig index a97cc43..0d5ae1b 100644 --- a/themes/intotheeast/templates/partials/base.html.twig +++ b/themes/intotheeast/templates/partials/base.html.twig @@ -26,5 +26,18 @@ {% block content %}{% endblock %} {{ assets.js('bottom')|raw }} +