Fotku prostě vynecháte (celé …) a nic dalšího řešit nemusíte.
--------------------------------------------------------------------------- */
.karty {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
/* Každá karta si drží svoji výšku. Bez tohohle by se všechny v řádku
natáhly na tu nejvyšší a pod krátkými by zela prázdná plocha. */
align-items: start;
}
.karta {
display: flex;
flex-direction: column;
background: var(--p-paper);
border: 1px solid var(--p-line);
border-radius: 6px;
overflow: hidden;
/* Pico dává vlastní vnitřní okraj, stín i spodní mezeru.
Tady je nechceme — fotka musí sedět až ke kraji karty. */
padding: 0;
margin: 0;
box-shadow: none;
}
/* Fotka nahoře. Ořezává se na stejnou výšku, ať mřížka drží rytmus. */
.karta > a {
display: block;
overflow: hidden;
line-height: 0; /* jinak pod obrázkem zůstane proužek od řádkování */
border-bottom: 1px solid var(--p-line);
}
.karta > a img {
width: 100%;
height: 170px;
object-fit: cover;
display: block;
transition: transform .35s ease, filter .35s ease;
}
.karta:hover > a img { transform: scale(1.04); }
/* Fotka se do karty ořezává na střed. Když je hlavní věc spíš nahoře
(věž, koruna stromů) nebo dole (stavba pod obzorem), přidejte obrázku
třídu „vyse“ nebo „nize“:
*/
.karta > a img.vyse { object-position: center 25%; }
.karta > a img.nize { object-position: center 72%; }
/* Karta bez fotky dostane aspoň zlatý proužek, ať nezačíná „do prázdna“. */
.karta:not(:has(> a)) { border-top: 3px solid var(--p-gold-2); }
.karta-text {
display: flex;
flex-direction: column;
flex: 1;
padding: .7rem .9rem .9rem;
}
.karta-text h3 {
margin: 0 0 .15rem;
font-size: 1.02rem;
line-height: 1.25;
color: var(--p-claret);
}
.karta-misto {
margin: 0 0 .5rem;
font-size: .85rem;
font-style: italic;
color: var(--p-muted);
}
.karta-text p { margin: 0 0 .5rem; font-size: .92rem; }
/* Rozbalovací podrobnosti se drží u dolního okraje, ať jsou karty zarovnané. */
.karta details {
margin-top: auto;
padding-top: .5rem;
font-size: .89rem;
}
.karta summary {
cursor: pointer;
color: var(--p-claret);
font-weight: bold;
}
.karta summary:hover { color: var(--p-gold); }
.karta details p { margin: .5rem 0 0; }
/* Odkaz ven (Wikipedie, turistika…) na posledním řádku. */
.karta-odkaz { margin: .6rem 0 0 !important; font-size: .88rem; }
.karta details + .karta-odkaz { margin-top: .4rem !important; }
.karta:not(:has(details)) .karta-odkaz { margin-top: auto !important; padding-top: .5rem; }
@media (max-width: 480px) {
.karty { grid-template-columns: 1fr; }
.karta > a img { height: 190px; }
}
/* ---------------------------------------------------------------------------
Souvislý text s obtékanými obrázky
Odstavce plynou za sebou a obrázky se do nich zapouštějí střídavě zleva
a zprava. O to, na kterou stranu obrázek půjde, se starat nemusíte —
dělá to samo CSS podle pořadí. Na úzké obrazovce (mobil) obtékání
skončí a obrázek se postaví přes celou šířku mezi odstavce.
Napíše se to takhle — nic víc v tom není:
Nadpis
Odstavec…
Popisek pod obrázkem.
Další odstavec, ten už obrázek obteče…
Na co si dát pozor:
• Obrázky musí být PŘÍMO v , ne
zanořené v dalším
. Podle pořadí mezi sourozenci se totiž
pozná, jestli jde obrázek doleva nebo doprava.
• Za každým obrázkem nechte aspoň jeden pořádný odstavec, jinak
nemá co obtékat a vznikne prázdné místo.
• Nadpisy
a
obtékání vždy ukončí a začnou na novém řádku.
Je to schválně — nový oddíl nemá začínat vedle cizího obrázku.
• Když chcete pořadí porušit, přidejte obrázku třídu „vlevo“
nebo „vpravo“:
• Když z odstavce zbyde vedle obrázku jen kousek prvního řádku,
přidejte odstavci třídu „pod-obrazkem“ a začne až pod obrázkem:
--------------------------------------------------------------------------- */
/* Aby oddíl obepnul i obrázky, které z něj jinak „vyčuhují“. */
.text-s-obrazky::after {
content: "";
display: block;
clear: both;
}
.text-s-obrazky > figure {
width: 42%;
max-width: 340px;
margin: .3rem 0 1rem;
/* Každý obrázek začíná pod tím předchozím. Bez toho by se dva obrázky
blízko u sebe postavily vedle sebe a text mezi nimi by se ztratil. */
clear: both;
}
/* Střídání stran. Liché obrázky doleva, sudé doprava. */
.text-s-obrazky > figure:nth-of-type(odd) { float: left; margin-right: 1.4rem; }
.text-s-obrazky > figure:nth-of-type(even) { float: right; margin-left: 1.4rem; }
/* Ruční přebití, když se střídání zrovna nehodí. */
.text-s-obrazky > figure.vlevo { float: left; margin-right: 1.4rem; margin-left: 0; }
.text-s-obrazky > figure.vpravo { float: right; margin-left: 1.4rem; margin-right: 0; }
/* Když se vedle obrázku vejde jen začátek odstavce a zbytek skočí pod něj,
vypadá první řádek jako nechtěné odsazení. Přidejte odstavci třídu
„pod-obrazkem" a začne celý až pod obrázkem:
Text, který má začít až pod obrázkem…
Hodí se hlavně u krátkých oddílů a u cizojazyčných verzí, kde bývá
text kratší než český originál. */
.text-s-obrazky p.pod-obrazkem { clear: both; }
.text-s-obrazky > figure img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
border: 1px solid var(--p-line);
}
.text-s-obrazky > figure figcaption {
padding-top: .4rem;
font-size: .85rem;
font-style: italic;
color: var(--p-muted);
line-height: 1.4;
}
/* Nadpis nikdy neobtéká — nový oddíl začíná pod obrázkem. */
.text-s-obrazky h2,
.text-s-obrazky h3 { clear: both; }
/* Seznam vedle obrázku. Bez tohohle by se první odrážka vešla vedle
obrázku a zbylé by skočily pod něj — vznikla by rozházená „schodiště“.
flow-root přinutí celý seznam, aby se vešel do zbylého sloupce
a držel odrážky pod sebou. */
.text-s-obrazky ul,
.text-s-obrazky ol { display: flow-root; }
/* Úzká obrazovka: obtékání nemá smysl, obrázek dostane celou šířku
a zůstane stát mezi odstavci tam, kde je napsaný.
Pozor na ty dlouhé selektory s :nth-of-type — vypadají zbytečně, ale
nejsou. Zúžení okna samo o sobě pravidlu žádnou váhu nepřidá, takže
kdyby tu bylo jen „.text-s-obrazky > figure", prohrálo by souboj
s pravidlem pro střídání stran výše a obrázky by zůstaly obtékané. */
@media (max-width: 640px) {
.text-s-obrazky > figure,
.text-s-obrazky > figure:nth-of-type(odd),
.text-s-obrazky > figure:nth-of-type(even),
.text-s-obrazky > figure.vlevo,
.text-s-obrazky > figure.vpravo {
float: none;
width: 100%;
max-width: none;
margin: 1rem 0;
}
}
/* Tabulky */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
table th { background: var(--p-gold-2); color: #2e2a24; }
table caption { text-align: left; font-weight: bold; color: var(--p-claret); padding: .3rem 0; }
td.cislo, th.cislo { text-align: right; white-space: nowrap; }
tr.radek-celkem td {
border-top: 2px solid var(--p-gold);
font-weight: bold;
color: var(--p-claret);
}
/* Vyúčtování po jednotlivých letech -------------------------------------- */
/* Tabulka účtu je hustší než ostatní — má i patnáct řádků. */
table.ucto { font-size: .92rem; }
table.ucto th { font-weight: bold; }
table.ucto th:first-child { width: 55%; }
table.ucto td, table.ucto th { padding: .3rem .6rem; }
details.rok-ucto {
border: 1px solid var(--p-line);
border-radius: 6px;
background: var(--p-paper);
margin-bottom: .6rem;
}
details.rok-ucto > summary {
cursor: pointer;
padding: .6rem .9rem;
font-weight: bold;
color: var(--p-claret);
list-style-position: inside;
}
details.rok-ucto > summary:hover { background: var(--p-bg); }
details.rok-ucto[open] > summary { border-bottom: 1px solid var(--p-line); }
details.rok-ucto .rok-cislo { font-size: 1.1rem; }
details.rok-ucto .rok-popis { font-weight: normal; color: var(--p-muted); }
details.rok-ucto .rok-popis::before { content: "— "; }
/* Obsah roku odsadíme, ať je vidět, že patří pod nadpis. */
details.rok-ucto > *:not(summary) { margin-left: .9rem; margin-right: .9rem; }
details.rok-ucto > p { margin-top: .8rem; }
details.rok-ucto .table-wrap:last-child { margin-bottom: .9rem; }
/* Loga podporovatelů */
.sponsors { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: 1rem 0; }
.sponsors img { max-height: 60px; width: auto; opacity: .9; }
/* Hlášky formuláře */
.alert { padding: .9rem 1.1rem; border-radius: 6px; margin-bottom: 1.5rem; }
.alert-success { background: #e5efd9; border: 1px solid #a9c07e; color: #3a5320; }
.alert-error { background: #f6dede; border: 1px solid #cf9c9c; color: #7a2e2e; }
/* Upozornění na chybějící překlad */
.upozorneni-preklad {
background: var(--p-paper);
border: 1px solid var(--p-line);
border-left: 4px solid var(--p-gold);
border-radius: 6px;
padding: 2rem;
margin: 2rem 0;
text-align: center;
}
.upozorneni-preklad h1 { margin-top: 0; }
.upozorneni-preklad a[role="button"] { margin: .3rem; }
/* ---------------------------------------------------------------------------
8. Patička
--------------------------------------------------------------------------- */
.site-footer { background: var(--p-dark); color: #cbbfa6; margin-top: 3rem; }
.site-footer .paticka-vnitrek {
max-width: var(--p-sirka);
margin: 0 auto;
padding: 1.6rem var(--p-okraj);
font-size: .85rem;
}
.site-footer a { color: var(--p-gold-2); }
.site-footer .paticka-sloupce {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.site-footer .paticka-copyright {
margin: 1rem 0 0;
font-size: .8rem;
color: #a99a7c;
}
/* ---------------------------------------------------------------------------
9. Přizpůsobení malým obrazovkám
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
.two-col { grid-template-columns: 1fr; }
.uvodni-obrazek img { height: 260px; }
.uvodni-obrazek h1 { font-size: 1.8rem; }
/* Na úzké hlavičce už není místo — zrcadlová freska ustoupí menu. */
.znacka-zrcadlo { display: none; }
[type="checkbox"].prepinac-menu ~ label.prepinac-menu-popisek {
display: block;
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
color: var(--p-claret);
padding: .2rem .5rem;
user-select: none;
order: 2;
}
.header-inner { flex-wrap: wrap; }
.znacka { margin-right: auto; }
.prepinac-jazyka { order: 1; }
/* Obě podoby menu se na mobilu chovají stejně — jako rozbalený seznam. */
.pas-menu { display: none; }
.prepinac-menu:checked ~ .pas-menu,
.site-header:has(.prepinac-menu:checked) .pas-menu { display: block; }
.main-nav {
display: none;
flex-direction: column;
align-items: stretch;
width: 100%;
order: 3;
padding: .5rem 0;
gap: 0;
}
.prepinac-menu:checked ~ .main-nav { display: flex; }
.pas-menu .main-nav { display: flex; }
.main-nav a {
padding: .7rem .5rem;
border-bottom: 1px solid var(--p-line);
border-radius: 0;
}
.nav-radek { justify-content: flex-start; }
.nav-radek a { border-bottom: 1px solid var(--p-line); }
}
@media (max-width: 480px) {
:root { --p-okraj: 1rem; }
.znacka img { height: 42px; }
.znacka .znacka-text b { font-size: 1rem; }
.znacka .znacka-text span { display: none; }
.uvodni-obrazek img { height: 200px; }
.uvodni-obrazek h1 { font-size: 1.45rem; }
.lead { font-size: 1.05rem; }
.gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* ===========================================================================
Tříkrálová sbírka (web farnosti)
=========================================================================== */
/* Drobná poznámka pod textem či tabulkou */
.poznamka {
font-size: .86rem;
color: var(--p-muted);
font-style: italic;
}
/* Cesta stránkou.
Pico dělá z každého
) ?>)