diff --git a/CHANGELOG.md b/CHANGELOG.md index 469ca9c..c3e7b04 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,17 @@ All notable changes to this project are documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.1.1] - 2026-09-14 + +### Fixed + +- Language switch no longer overlaps the header logo on narrow viewports (~390px, e.g. iPhone 14 + Pro): it now stacks centered above the wordmark on phones, and only moves to the header's + top-right corner from tablet width up. +- Article card thumbnails no longer use an overly aggressive portrait crop (`4:5`) that sliced + through text baked into cover images — changed to `3:2`, matching the featured cover on the home + page and the article detail page. + ## [2.1.0] - 2026-09-11 ### Added diff --git a/frontend/app/components/ArticleCard.vue b/frontend/app/components/ArticleCard.vue index f141432..b74f99c 100644 --- a/frontend/app/components/ArticleCard.vue +++ b/frontend/app/components/ArticleCard.vue @@ -53,7 +53,7 @@ const href = computed(() => localePath(props.locale, `/blog/${props.article.slug .cover { width: 100%; - aspect-ratio: 4 / 5; + aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-surface); transition: transform 0.4s ease; diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue index e20b000..304bde9 100644 --- a/frontend/app/layouts/default.vue +++ b/frontend/app/layouts/default.vue @@ -105,10 +105,22 @@ const strings = computed(() => STRINGS[locale.value]) position: relative; } +/* Stacked and centred above the wordmark on phones — there isn't room + beside the centred logo without overlapping it. Pinned to the corner + again once the header has space to spare. */ .lang-switch-header { - position: absolute; - top: 0; - right: var(--space); + display: flex; + justify-content: center; + margin-bottom: 0.75rem; +} + +@media (min-width: 48rem) { + .lang-switch-header { + position: absolute; + top: 0; + right: var(--space); + margin-bottom: 0; + } } .wordmark {