diff --git a/frontend/scss/landing.scss b/frontend/scss/landing.scss index 54800ec9a..b91f8d59e 100644 --- a/frontend/scss/landing.scss +++ b/frontend/scss/landing.scss @@ -9,6 +9,9 @@ color: #2d4739; font-family: Arial, sans-serif; + /* jednotná velikost ikon v .features a .services */ + --icon-size: 64px; + /* obrázky a typografie – tvrdá ochrana před přetečením */ img { max-width: 100%; @@ -23,8 +26,13 @@ flex-direction: column; text-align: center; margin: 0 auto 30px; + gap: 16px; /* mezera mezi textem a obrázkem */ - @media (min-width: 768px) { flex-direction: row; } + @media (min-width: 768px) { + flex-direction: row; + gap: 32px; + align-items: center; + } } .intro-left, @@ -32,14 +40,33 @@ @media (min-width: 768px) { width: 50%; } } - .intro-left { margin: auto 0; } + .intro-left { + margin: auto 0; + position: relative; + z-index: 1; /* zajistí text nad obrázkem */ + } + + .intro-right { + position: relative; + z-index: 0; + + img { /* kontrola rozměrů a bez přesahů */ + width: 100%; + height: auto; + max-width: 420px; + max-height: 40vh; + object-fit: contain; + display: block; + margin: 0 auto; + } + } /* jen uvnitř landing – neovlivní zbytek app */ h1 { text-align: center; font-size: 2.2rem; color: #2d4739; - line-height: 66px; + line-height: 1.2; /* místo pevného px */ text-transform: uppercase; font-family: skautbold, sans-serif; @@ -55,11 +82,6 @@ @media (min-width: 768px) { text-align: left; } } - .intro-right img { /* redundance – drží rozměr v gridu */ - width: 100%; - height: auto; - } - .intro-buttons { max-width: 1000px; padding: 20px 0; @@ -95,11 +117,27 @@ flex-direction: row; gap: 20px; text-align: center; - + align-items: center; /* vertikální zarovnání */ @media (min-width: 768px) { flex: 1 1 250px; flex-direction: unset; } } - .features-item-left { margin: auto 0; } + .features-item-left { + margin: auto 0; + width: var(--icon-size); + height: var(--icon-size); + min-width: var(--icon-size); + min-height: var(--icon-size); + flex: 0 0 var(--icon-size); + display: grid; + place-items: center; + + img { + width: 100%; + height: 100%; + object-fit: contain; /* stejná výsledná velikost bez deformace */ + display: block; + } + } .features-item h3 { font-size: 1.2rem; @@ -112,9 +150,7 @@ p { margin: 0; } } - .features img{ - width: 57px; - } + /* POZN.: zrušeno původní .features img { width: 57px; } */ .services-container { padding: 20px; @@ -139,10 +175,28 @@ display: flex; flex-direction: row; gap: 20px; + align-items: center; @media (min-width: 768px) { flex: 1 1 45%; flex-direction: unset; } } + .services-item-left { + width: var(--icon-size); + height: var(--icon-size); + min-width: var(--icon-size); + min-height: var(--icon-size); + flex: 0 0 var(--icon-size); + display: grid; + place-items: center; + + img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + } + } + .services-item-right { margin: auto 0; @@ -188,6 +242,16 @@ text-decoration: none; } } + + /* responzivní úpravy pro mobily */ + @media (max-width: 767.98px) { + .features { transform: none; margin-top: 10px; } + } +} + +/* menší ikona na velmi malých displejích */ +@media (max-width: 360px) { + .landing { --icon-size: 56px; } } /* Dark mode pro landing (izolovaně) */ @@ -238,4 +302,4 @@ transform: translateY(-3px); } } -} \ No newline at end of file +}