Enlarge reticle and fix cropped tree line silhouette

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
 

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) {