From 20beeeb4203831ee3923ee52e4593a0251ca84a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Doubravsk=C3=BD?= <jan.doubravsky@gmail.com>
Date: Fri, 31 Jul 2026 20:41:52 +0200
Subject: [PATCH] Enlarge reticle and fix cropped tree line silhouette

---
 CHANGELOG.md                  |  7 ++++---
 src/app/(frontend)/styles.css | 24 +++++++++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7647a4e..770c407 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,10 +21,11 @@ verzování [sémantické](https://semver.org/lang/cs/).
 - Proměnná `CSRF_ORIGINS` pro případy, kdy se admin otevírá i z jiné adresy,
   než je `NEXT_PUBLIC_SERVER_URL` (typicky po IP v LAN). Bez ní Payload
   odmítal veškeré zápisy včetně nahrávání obrázků chybou 403.
-
 - Grafika: silueta lesa přes celou šířku nad patičkou a terč v hlavičce
-  mezi značkou a navigací. Obojí je vloženo jako CSS maska, takže se barví
-  podle motivu.
+  mezi značkou a navigací. Obojí je vloženo jako CSS maska — zdrojové PNG
+  nese jen průhlednost a barvu řídí CSS, takže to funguje ve světlém
+  i tmavém motivu. Výška siluety se odvozuje z poměru stran obrázku, aby
+  se neořezávaly špičky stromů.
 
 ### Opraveno
 
diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css
index 8969bf0..9ad94cf 100644
--- a/src/app/(frontend)/styles.css
+++ b/src/app/(frontend)/styles.css
@@ -10,7 +10,7 @@
   --barva-plocha: #f5f5f4;
   --barva-linka: #e2e0dd;
   --barva-akcent: #7a5c3e;
-  --barva-silueta: #dcd7d0;
+  --barva-silueta: #a49b8e;
   --sirka: 1100px;
   --radius: 6px;
 }
@@ -23,7 +23,7 @@
     --barva-plocha: #1e1e1e;
     --barva-linka: #2e2e2e;
     --barva-akcent: #c9a227;
-    --barva-silueta: #262626;
+    --barva-silueta: #3a3a3a;
   }
 }
 
@@ -106,8 +106,8 @@ a {
 .terc {
   position: relative;
   flex: 0 0 auto;
-  width: 42px;
-  height: 42px;
+  width: 63px;
+  height: 63px;
   background-color: var(--barva-tlumena);
   -webkit-mask: url('/terc.png') center / contain no-repeat;
   mask: url('/terc.png') center / contain no-repeat;
@@ -120,19 +120,25 @@ a {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 5px;
-  height: 5px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   background: #c0392b;
   transform: translate(-50%, -50%);
 }
 
+/*
+ * Výška se odvozuje z poměru stran obrázku, ne z pevné hodnoty. Předtím tu
+ * byla pevná výška s `cover`, což ořezávalo špičky stromů. `100% 100%` při
+ * shodném poměru nic nedeformuje.
+ */
 .skyline {
-  height: clamp(60px, 9vw, 120px);
+  width: 100%;
+  aspect-ratio: 1920 / 312;
   margin-top: 4rem;
   background-color: var(--barva-silueta);
-  -webkit-mask: url('/skyline.png') bottom center / cover no-repeat;
-  mask: url('/skyline.png') bottom center / cover no-repeat;
+  -webkit-mask: url('/skyline.png') bottom center / 100% 100% no-repeat;
+  mask: url('/skyline.png') bottom center / 100% 100% no-repeat;
 }
 
 @media (max-width: 620px) {