From 02ffedbca280f3c8123b0ec2566f311b888a6f61 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Thu, 20 Aug 2026 13:02:28 +0200
Subject: [PATCH] =?UTF-8?q?K=C3=B6z=C3=A9pre=20ker=C3=BCl,=20ami=20bel?=
 =?UTF-8?q?=C3=A9p=C5=91=20pont,=20=C3=A9s=20s=C3=B6t=C3=A9ten=20indul=20a?=
 =?UTF-8?q?=20site?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A facelift mindent balra igazított, pedig nem minden olvasnivaló. A szabály
mostantól: középre az kerül, ami tájékozódási pont és nem szöveg — az
oldalak hero-ja, a magányos állapotblokkok, és a lista végén álló egyetlen
vissza-link. Balra marad minden, amit olvasnak vagy pásztáznak: törzsszöveg,
listák, táblázatok, kártyák, vezérlők, lábléc.

A részletoldalak kivételek: a blogbejegyzés és a katalógus-részlet hero-ja
balra marad, mert ott a cím már a tartalom első sora, nem belépő pont.

Az alapértelmezett téma a sötét lett; süti nélkül az indul, és a világosat
az választja, aki kéri. Retro módban pedig eltűnik a téma-kapcsoló: ott a
retro palettája írja felül a tokeneket, a gomb nem csinált volna semmit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/frontend/index.html                      |  5 +---
 apps/frontend/src/layout/AppLayout.vue        |  2 +-
 .../src/layout/__tests__/AppLayout.test.ts    | 16 ++++++++++---
 apps/frontend/src/page/blog/BlogIndexPage.vue |  2 +-
 .../src/page/builds/BuildsIndexPage.vue       |  7 ++----
 .../src/page/catalog/CatalogIndexPage.vue     |  2 +-
 .../src/page/catalog/CatalogShowPage.vue      |  2 +-
 apps/frontend/src/page/code/CodeIndexPage.vue |  2 +-
 .../frontend/src/page/contact/ContactPage.vue |  2 +-
 .../src/page/engines/EnginesIndexPage.vue     |  2 +-
 apps/frontend/src/page/home/HomePage.vue      |  2 +-
 .../src/page/howtos/HowtosIndexPage.vue       |  7 ++----
 .../src/page/stores/StoresIndexPage.vue       |  7 ++----
 apps/frontend/src/page/team/TeamIndexPage.vue |  2 +-
 .../src/stores/__tests__/ui.store.test.ts     | 24 +++++++++----------
 apps/frontend/src/stores/ui.store.ts          |  2 +-
 apps/frontend/src/styles/global.css           | 20 ++++++++++++++++
 17 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index ea595d3..f730b65 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -8,12 +8,9 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <title>Teletype Games</title>
     <script>
-      /* A témát a bundle betöltése ELŐTT tesszük a gyökérre, különben minden
-         sötét témás oldalbetöltés villan egy világosat. A sütit ezután az
-         ui.store tartja karban; süti nélkül az alapértelmezés a világos. */
       (function () {
         var m = document.cookie.match(/(?:^|; )theme=([^;]*)/)
-        var theme = m && decodeURIComponent(m[1]) === 'dark' ? 'dark' : 'light'
+        var theme = m && decodeURIComponent(m[1]) === 'light' ? 'light' : 'dark'
         document.documentElement.setAttribute('data-theme', theme)
         var r = document.cookie.match(/(?:^|; )retro-mode=([^;]*)/)
         document.documentElement.setAttribute('data-retro', r && r[1] === '1' ? '1' : '0')
diff --git a/apps/frontend/src/layout/AppLayout.vue b/apps/frontend/src/layout/AppLayout.vue
index aae1eb5..ea91a98 100644
--- a/apps/frontend/src/layout/AppLayout.vue
+++ b/apps/frontend/src/layout/AppLayout.vue
@@ -18,7 +18,7 @@
             <button :class="localeBtnClass('hu')" class="locale-btn" @click="switchLocale('hu')">HU</button>
           </div>
 
-          <button class="icon-btn" :aria-label="t('nav.theme')" :title="t('nav.theme')" @click="toggleTheme">
+          <button v-if="!isRetroMode" class="icon-btn" :aria-label="t('nav.theme')" :title="t('nav.theme')" @click="toggleTheme">
             <Sun v-if="theme === 'dark'" v-bind="ICON_CONTROL" />
             <Moon v-else v-bind="ICON_CONTROL" />
           </button>
diff --git a/apps/frontend/src/layout/__tests__/AppLayout.test.ts b/apps/frontend/src/layout/__tests__/AppLayout.test.ts
index f58cde7..73e0d6a 100644
--- a/apps/frontend/src/layout/__tests__/AppLayout.test.ts
+++ b/apps/frontend/src/layout/__tests__/AppLayout.test.ts
@@ -46,12 +46,22 @@ describe('AppLayout', () => {
 
   it('switches the theme from the header, and writes it to the root element', async () => {
     const wrapper = await mountLayout()
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
 
     await wrapper.findAll('.icon-btn')[0].trigger('click')
 
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
-    expect(document.cookie).toContain('theme=dark')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    expect(document.cookie).toContain('theme=light')
+  })
+
+  it('drops the theme switch in retro mode, where it would do nothing', async () => {
+    const wrapper = await mountLayout()
+    expect(wrapper.findAll('.icon-btn')).toHaveLength(2)
+
+    await wrapper.get('.retro-toggle-btn').trigger('click')
+
+    expect(wrapper.findAll('.icon-btn')).toHaveLength(1)
+    expect(wrapper.get('.icon-btn').attributes('aria-label')).toBe('Menu')
   })
 
   it('marks retro mode on the root element too, so the page background follows', async () => {
diff --git a/apps/frontend/src/page/blog/BlogIndexPage.vue b/apps/frontend/src/page/blog/BlogIndexPage.vue
index 6f233d2..cb7b3c7 100644
--- a/apps/frontend/src/page/blog/BlogIndexPage.vue
+++ b/apps/frontend/src/page/blog/BlogIndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="blog-container">
     <header class="hero-section">
-      <div class="hero-container">
+      <div class="hero-container hero-centered">
         <p class="hero-badge">{{ t('blog.badge') }}</p>
         <h1 class="hero-title">{{ t('blog.title') }}</h1>
         <p class="hero-subtitle">{{ t('blog.subtitle') }}</p>
diff --git a/apps/frontend/src/page/builds/BuildsIndexPage.vue b/apps/frontend/src/page/builds/BuildsIndexPage.vue
index bfcf220..c651e78 100644
--- a/apps/frontend/src/page/builds/BuildsIndexPage.vue
+++ b/apps/frontend/src/page/builds/BuildsIndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('builds.title') }}</h1>
       <p class="hero-subtitle">{{ t('builds.subtitle') }}</p>
     </div>
@@ -72,7 +72,7 @@
       </div>
     </div>
 
-    <div class="builds-back">
+    <div class="focus-row">
       <RouterLink to="/catalog" class="link text-sm">{{ t('catalogShow.back') }}</RouterLink>
     </div>
   </main>
@@ -202,7 +202,4 @@ onMounted(() => store.fetch())
 .builds-card-kind {
   @apply flex items-center gap-1.5 text-sm text-fg-muted;
 }
-.builds-back {
-  @apply mt-8;
-}
 </style>
diff --git a/apps/frontend/src/page/catalog/CatalogIndexPage.vue b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
index 4ca73f7..489869e 100644
--- a/apps/frontend/src/page/catalog/CatalogIndexPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('catalog.title') }}</h1>
       <p class="hero-subtitle">{{ t('catalog.subtitle') }}</p>
       <div class="hero-actions">
diff --git a/apps/frontend/src/page/catalog/CatalogShowPage.vue b/apps/frontend/src/page/catalog/CatalogShowPage.vue
index 0626e7b..711f3f7 100644
--- a/apps/frontend/src/page/catalog/CatalogShowPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogShowPage.vue
@@ -133,7 +133,7 @@
     </main>
 
     <main v-else class="main-container">
-      <p class="text-fg-muted">{{ error || t('catalogShow.loading') }}</p>
+      <p class="state-message">{{ error || t('catalogShow.loading') }}</p>
     </main>
 
     <ImageLightbox
diff --git a/apps/frontend/src/page/code/CodeIndexPage.vue b/apps/frontend/src/page/code/CodeIndexPage.vue
index 75953ea..94bcde0 100644
--- a/apps/frontend/src/page/code/CodeIndexPage.vue
+++ b/apps/frontend/src/page/code/CodeIndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('code.title') }}</h1>
       <p class="hero-subtitle">{{ t('code.subtitle') }}</p>
       <div class="hero-actions">
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index 273c61a..13a6b5f 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('contact.title') }}</h1>
       <p class="hero-subtitle">{{ t('contact.subtitle') }}</p>
       <div class="hero-actions">
diff --git a/apps/frontend/src/page/engines/EnginesIndexPage.vue b/apps/frontend/src/page/engines/EnginesIndexPage.vue
index f395611..44fd8c1 100644
--- a/apps/frontend/src/page/engines/EnginesIndexPage.vue
+++ b/apps/frontend/src/page/engines/EnginesIndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="engines-container">
     <header class="hero-section">
-      <div class="hero-container">
+      <div class="hero-container hero-centered">
         <p class="hero-badge">{{ t('engines.badge') }}</p>
         <h1 class="hero-title">{{ t('engines.titleLead') }} {{ t('engines.titleAccent') }}</h1>
         <p class="hero-subtitle">{{ t('engines.subtitle') }}</p>
diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue
index 40c134c..c98b4a6 100644
--- a/apps/frontend/src/page/home/HomePage.vue
+++ b/apps/frontend/src/page/home/HomePage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-container">
     <header class="hero-section">
-      <div class="hero-container">
+      <div class="hero-container hero-centered">
         <p class="hero-badge">{{ t('home.welcomeTo') }}</p>
         <h1 class="hero-title">Teletype <span class="text-accent">Games</span></h1>
         <p class="hero-subtitle">{{ t('home.subtitle') }}</p>
diff --git a/apps/frontend/src/page/howtos/HowtosIndexPage.vue b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
index 78794a3..ff19d2b 100644
--- a/apps/frontend/src/page/howtos/HowtosIndexPage.vue
+++ b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="howtos-container">
     <header class="hero-section">
-      <div class="hero-container">
+      <div class="hero-container hero-centered">
         <p class="hero-badge">{{ t('howtos.badge') }}</p>
         <h1 class="hero-title">{{ t('howtos.title') }}</h1>
         <p class="hero-subtitle">{{ t('howtos.subtitle') }}</p>
@@ -49,7 +49,7 @@
         </a>
       </div>
 
-      <div v-if="!error && recentPages.length > 0" class="howtos-footer">
+      <div v-if="!error && recentPages.length > 0" class="focus-row">
         <a :href="WIKI_BASE" target="_blank" rel="noopener noreferrer" class="link text-sm">
           {{ t('howtos.browseWiki') }}
         </a>
@@ -101,7 +101,4 @@ onMounted(() => store.fetch())
 .howto-card-footer {
   @apply mt-auto truncate border-t border-line pt-3 font-mono text-xs text-fg-subtle;
 }
-.howtos-footer {
-  @apply mt-10;
-}
 </style>
diff --git a/apps/frontend/src/page/stores/StoresIndexPage.vue b/apps/frontend/src/page/stores/StoresIndexPage.vue
index bbc4c0d..aed778f 100644
--- a/apps/frontend/src/page/stores/StoresIndexPage.vue
+++ b/apps/frontend/src/page/stores/StoresIndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('stores.title') }}</h1>
       <p class="hero-subtitle">{{ t('stores.subtitle') }}</p>
     </div>
@@ -105,7 +105,7 @@
       </section>
     </template>
 
-    <div class="st-back">
+    <div class="focus-row">
       <RouterLink to="/catalog" class="link text-sm">{{ t('catalogShow.back') }}</RouterLink>
     </div>
   </main>
@@ -280,7 +280,4 @@ const platforms = [
 .st-platform-ext {
   @apply rounded border border-line bg-surface px-2 py-0.5 text-xs text-accent;
 }
-.st-back {
-  @apply mt-8;
-}
 </style>
diff --git a/apps/frontend/src/page/team/TeamIndexPage.vue b/apps/frontend/src/page/team/TeamIndexPage.vue
index 25fd60f..29a5e39 100644
--- a/apps/frontend/src/page/team/TeamIndexPage.vue
+++ b/apps/frontend/src/page/team/TeamIndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="hero-section">
-    <div class="hero-container">
+    <div class="hero-container hero-centered">
       <h1 class="hero-title">{{ t('team.title') }}</h1>
       <p class="hero-subtitle">{{ t('team.subtitle') }}</p>
     </div>
diff --git a/apps/frontend/src/stores/__tests__/ui.store.test.ts b/apps/frontend/src/stores/__tests__/ui.store.test.ts
index a4cb492..5af2f21 100644
--- a/apps/frontend/src/stores/__tests__/ui.store.test.ts
+++ b/apps/frontend/src/stores/__tests__/ui.store.test.ts
@@ -23,28 +23,28 @@ describe('useUiStore', () => {
     expect(store.isRetroMode).toBe(false)
   })
 
-  it('starts in the light theme when no cookie is set', () => {
+  it('starts in the dark theme when no cookie is set', () => {
+    const store = useUiStore()
+    expect(store.theme).toBe('dark')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('reads the theme back from the cookie', () => {
+    document.cookie = 'theme=light;path=/'
     const store = useUiStore()
     expect(store.theme).toBe('light')
     expect(document.documentElement.getAttribute('data-theme')).toBe('light')
   })
 
-  it('reads the theme back from the cookie', () => {
-    document.cookie = 'theme=dark;path=/'
-    const store = useUiStore()
-    expect(store.theme).toBe('dark')
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
-  })
-
   it('toggling the theme writes the cookie and the root attribute', () => {
     const store = useUiStore()
     store.toggleTheme()
-    expect(store.theme).toBe('dark')
-    expect(document.cookie).toContain('theme=dark')
-    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
-    store.toggleTheme()
     expect(store.theme).toBe('light')
     expect(document.cookie).toContain('theme=light')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+    store.toggleTheme()
+    expect(store.theme).toBe('dark')
+    expect(document.cookie).toContain('theme=dark')
   })
 
   it('toggles menu', () => {
diff --git a/apps/frontend/src/stores/ui.store.ts b/apps/frontend/src/stores/ui.store.ts
index 633ff6b..a2cd286 100644
--- a/apps/frontend/src/stores/ui.store.ts
+++ b/apps/frontend/src/stores/ui.store.ts
@@ -7,7 +7,7 @@ export type Theme = 'light' | 'dark'
 const THEME_COOKIE = 'theme'
 
 function readTheme(): Theme {
-  return getCookie(THEME_COOKIE) === 'dark' ? 'dark' : 'light'
+  return getCookie(THEME_COOKIE) === 'light' ? 'light' : 'dark'
 }
 
 function applyTheme(theme: Theme) {
diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css
index c9f7db9..61260b4 100644
--- a/apps/frontend/src/styles/global.css
+++ b/apps/frontend/src/styles/global.css
@@ -65,6 +65,26 @@ button:focus-visible {
     @apply mt-6 flex flex-wrap items-center gap-3;
   }
 
+  .hero-centered {
+    @apply text-center;
+  }
+
+  .hero-centered .hero-subtitle {
+    @apply mx-auto;
+  }
+
+  .hero-centered .hero-actions {
+    @apply justify-center;
+  }
+
+  .focus-row {
+    @apply mt-8 text-center;
+  }
+
+  .state-message {
+    @apply py-16 text-center text-fg-muted;
+  }
+
   .card {
     @apply rounded-card border border-line bg-surface p-5 md:p-6;
   }