MediaWiki:Common.css: Porovnání verzí
MediaWiki interface page
More actions
Homepage CSS značka: vyprázdnění |
Homepage CSS pro novou hlavni stranu |
||
| Řádek 1: | Řádek 1: | ||
/* ============================== | |||
Homepage (Hlavni strana) | |||
============================== */ | |||
.wf-home-hero { | |||
text-align: center; | |||
padding: 2.5em 1.5em 2em; | |||
margin-bottom: 1.5em; | |||
background: var(--color-surface-2, #f8f9fa); | |||
border-radius: 12px; | |||
} | |||
.wf-home-hero-title { | |||
font-size: 1.8em; | |||
font-weight: 700; | |||
margin-bottom: 0.2em; | |||
} | |||
.wf-home-hero-desc { | |||
color: var(--color-base--subtle, #54595d); | |||
font-size: 1.1em; | |||
margin-bottom: 1em; | |||
} | |||
.wf-home-stats { | |||
display: flex; | |||
justify-content: center; | |||
gap: 1.5em; | |||
flex-wrap: wrap; | |||
font-size: 0.95em; | |||
} | |||
.wf-home-stat { | |||
color: var(--color-base--subtle, #54595d); | |||
} | |||
.wf-home-stat strong { | |||
color: var(--color-primary, #36c); | |||
font-size: 1.15em; | |||
} | |||
.wf-home-grid-2 { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 1.5em; | |||
margin-bottom: 2em; | |||
} | |||
.wf-home-card { | |||
border: 1px solid var(--border-color-base, #c8ccd1); | |||
border-radius: 12px; | |||
overflow: hidden; | |||
background: var(--color-surface-1, #fff); | |||
transition: box-shadow 0.2s, transform 0.2s; | |||
} | |||
.wf-home-card:hover { | |||
box-shadow: 0 4px 16px rgba(0,0,0,0.1); | |||
transform: translateY(-2px); | |||
} | |||
.wf-home-card .mw-file-element { | |||
width: 100%; | |||
height: 200px; | |||
object-fit: cover; | |||
display: block; | |||
} | |||
.wf-home-card figure { | |||
margin: 0; | |||
} | |||
.wf-home-card-body { | |||
padding: 1em 1.2em; | |||
} | |||
.wf-home-card-title { | |||
font-size: 1.2em; | |||
font-weight: 600; | |||
margin-bottom: 0.3em; | |||
} | |||
.wf-home-card-title a { | |||
text-decoration: none; | |||
} | |||
.wf-home-card-desc { | |||
color: var(--color-base--subtle, #54595d); | |||
font-size: 0.9em; | |||
line-height: 1.5; | |||
} | |||
.wf-home-section { | |||
margin-bottom: 2em; | |||
} | |||
.wf-home-section-title { | |||
font-size: 1.3em; | |||
font-weight: 600; | |||
margin-bottom: 0.8em; | |||
padding-bottom: 0.4em; | |||
border-bottom: 2px solid var(--color-primary, #36c); | |||
} | |||
.wf-home-grid-3 { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 0.8em; | |||
} | |||
.wf-home-cat { | |||
display: block; | |||
padding: 0.9em 1.1em; | |||
border: 1px solid var(--border-color-base, #c8ccd1); | |||
border-radius: 10px; | |||
background: var(--color-surface-1, #fff); | |||
transition: background 0.15s, box-shadow 0.15s; | |||
} | |||
.wf-home-cat:hover { | |||
background: var(--color-surface-2, #f8f9fa); | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.06); | |||
} | |||
.wf-home-cat-name { | |||
font-weight: 600; | |||
font-size: 1em; | |||
display: block; | |||
margin-bottom: 0.15em; | |||
} | |||
.wf-home-cat-name a { | |||
text-decoration: none; | |||
} | |||
.wf-home-cat-count { | |||
color: var(--color-base--subtle, #54595d); | |||
font-size: 0.82em; | |||
} | |||
@media (max-width: 720px) { | |||
.wf-home-grid-2 { | |||
grid-template-columns: 1fr; | |||
} | |||
.wf-home-grid-3 { | |||
grid-template-columns: 1fr 1fr; | |||
} | |||
.wf-home-hero { | |||
padding: 1.5em 1em; | |||
} | |||
.wf-home-hero-title { | |||
font-size: 1.4em; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.wf-home-grid-3 { | |||
grid-template-columns: 1fr; | |||
} | |||
.wf-home-stats { | |||
gap: 0.8em; | |||
} | |||
} | |||
Verze z 3. 2. 2026, 19:43
/* ==============================
Homepage (Hlavni strana)
============================== */
.wf-home-hero {
text-align: center;
padding: 2.5em 1.5em 2em;
margin-bottom: 1.5em;
background: var(--color-surface-2, #f8f9fa);
border-radius: 12px;
}
.wf-home-hero-title {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 0.2em;
}
.wf-home-hero-desc {
color: var(--color-base--subtle, #54595d);
font-size: 1.1em;
margin-bottom: 1em;
}
.wf-home-stats {
display: flex;
justify-content: center;
gap: 1.5em;
flex-wrap: wrap;
font-size: 0.95em;
}
.wf-home-stat {
color: var(--color-base--subtle, #54595d);
}
.wf-home-stat strong {
color: var(--color-primary, #36c);
font-size: 1.15em;
}
.wf-home-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5em;
margin-bottom: 2em;
}
.wf-home-card {
border: 1px solid var(--border-color-base, #c8ccd1);
border-radius: 12px;
overflow: hidden;
background: var(--color-surface-1, #fff);
transition: box-shadow 0.2s, transform 0.2s;
}
.wf-home-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.wf-home-card .mw-file-element {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.wf-home-card figure {
margin: 0;
}
.wf-home-card-body {
padding: 1em 1.2em;
}
.wf-home-card-title {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 0.3em;
}
.wf-home-card-title a {
text-decoration: none;
}
.wf-home-card-desc {
color: var(--color-base--subtle, #54595d);
font-size: 0.9em;
line-height: 1.5;
}
.wf-home-section {
margin-bottom: 2em;
}
.wf-home-section-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 0.8em;
padding-bottom: 0.4em;
border-bottom: 2px solid var(--color-primary, #36c);
}
.wf-home-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8em;
}
.wf-home-cat {
display: block;
padding: 0.9em 1.1em;
border: 1px solid var(--border-color-base, #c8ccd1);
border-radius: 10px;
background: var(--color-surface-1, #fff);
transition: background 0.15s, box-shadow 0.15s;
}
.wf-home-cat:hover {
background: var(--color-surface-2, #f8f9fa);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-home-cat-name {
font-weight: 600;
font-size: 1em;
display: block;
margin-bottom: 0.15em;
}
.wf-home-cat-name a {
text-decoration: none;
}
.wf-home-cat-count {
color: var(--color-base--subtle, #54595d);
font-size: 0.82em;
}
@media (max-width: 720px) {
.wf-home-grid-2 {
grid-template-columns: 1fr;
}
.wf-home-grid-3 {
grid-template-columns: 1fr 1fr;
}
.wf-home-hero {
padding: 1.5em 1em;
}
.wf-home-hero-title {
font-size: 1.4em;
}
}
@media (max-width: 480px) {
.wf-home-grid-3 {
grid-template-columns: 1fr;
}
.wf-home-stats {
gap: 0.8em;
}
}