Make the site responsive for phones, tablets, and desktop

Mobile-first layout with breakpoints at 48rem (tablet) and 64rem (desktop):
stacked nav on phones, progressive column counts for the article grid and
footer, scrollable markdown tables, larger tap targets on nav links.

frontend/app/components/ArticleCard.vue

@@ -10,14 +10,16 @@ const cover = computed(() => mediaUrl(props.article.cover))
 
 <template>
   <article class="card">
+    <!-- No placeholder box when there is no cover: an empty grey rectangle
+         reads as a broken image rather than as a deliberate choice. -->
     <NuxtLinkLocale
+      v-if="cover"
       class="cover-link"
       :to="`/blog/${article.slug}`"
       tabindex="-1"
       aria-hidden="true"
     >
       <img
-        v-if="cover"
         class="cover"
         :src="cover"
         :alt="article.cover?.alternativeText ?? ''"
@@ -25,7 +27,6 @@ const cover = computed(() => mediaUrl(props.article.cover))
         :height="article.cover?.height ?? undefined"
         loading="lazy"
       >
-      <span v-else class="cover placeholder" />
     </NuxtLinkLocale>
 
     <p v-if="article.category" class="kicker">{{ article.category.name }}</p>
@@ -60,11 +61,9 @@ const cover = computed(() => mediaUrl(props.article.cover))
   transform: scale(1.03);
 }
 
-.placeholder {
-  display: block;
-}
-
-.kicker {
+/* Without a cover the kicker leads the card, so it needs no offset. */
+.cover-link + .kicker,
+.cover-link + h2 {
   margin-top: 1.1rem;
 }
 

frontend/app/components/LanguageSwitcher.vue

@@ -35,19 +35,28 @@ function onChange(event: Event) {
 
 select {
   appearance: none;
-  padding: 0.35rem 1.6rem 0.35rem 0.7rem;
+  padding: 0.4rem 1.7rem 0.4rem 0.7rem;
   border: 1px solid var(--color-border);
   border-radius: 0;
   background: transparent;
   color: var(--color-body);
   font: inherit;
-  font-size: 0.75rem;
+  /* Safari on iOS zooms the page when a control smaller than 16px is tapped,
+     so the picker stays at 1rem on phones and shrinks only from tablet up. */
+  font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   cursor: pointer;
 }
 
+@media (min-width: 48rem) {
+  select {
+    padding: 0.35rem 1.6rem 0.35rem 0.7rem;
+    font-size: 0.75rem;
+  }
+}
+
 select:hover {
   border-color: var(--color-ink);
   color: var(--color-ink);