MediaWiki:Common.css: Różnice pomiędzy wersjami
Z Foto Wikizagłębie
Foto commons etap 1: style strony głównej |
Style galerii miast na stronie głównej |
||
| Linia 253: | Linia 253: | ||
padding: 1rem; | padding: 1rem; | ||
} | } | ||
} | |||
.foto-city-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 1rem; | |||
} | |||
.foto-city-card { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 0.65rem; | |||
min-width: 0; | |||
padding: 0.9rem; | |||
background: #f8fbfa; | |||
border: 1px solid #dfe5e3; | |||
border-radius: 8px; | |||
} | |||
.foto-city-card h3 { | |||
margin: 0; | |||
color: #1c2726; | |||
font-family: Georgia, "Times New Roman", serif; | |||
font-size: 1.08rem; | |||
line-height: 1.25; | |||
} | |||
.foto-city-card h3 a { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
.foto-city-card h3 a:hover { | |||
color: #236963; | |||
text-decoration: underline; | |||
} | |||
.foto-city-card .gallery, | |||
.foto-city-card ul.gallery { | |||
margin: 0; | |||
} | |||
.foto-city-card .gallerytext { | |||
font-size: 0.88rem; | |||
line-height: 1.35; | |||
} | |||
.foto-city-more { | |||
margin: 0.2rem 0 0; | |||
} | |||
.foto-city-more a { | |||
display: inline-block; | |||
padding: 0.55rem 0.78rem; | |||
background: #236963; | |||
border-radius: 4px; | |||
color: #ffffff; | |||
font-weight: 700; | |||
text-decoration: none; | |||
} | |||
.foto-city-more a:hover { | |||
background: #1d514d; | |||
color: #ffffff; | |||
text-decoration: none; | |||
} | } | ||
Aktualna wersja na dzień 19:14, 21 cze 2026
/* Foto Wikizaglebie portal home */
.foto-home {
max-width: 1180px;
margin: 0 auto;
color: #24302f;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.foto-home h1,
.foto-home h2 {
margin: 0 0 0.45em;
color: #1c2726;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
letter-spacing: 0;
}
.foto-home h1 {
font-size: 2.25rem;
line-height: 1.12;
}
.foto-home h2 {
font-size: 1.55rem;
line-height: 1.2;
}
.foto-home p {
font-size: 1rem;
line-height: 1.6;
}
.foto-kicker {
margin: 0 0 0.45rem;
color: #8a4f24;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
}
.foto-lead {
max-width: 760px;
margin: 0 0 1.4rem;
font-size: 1.12rem;
}
.foto-hero {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
gap: 1.4rem;
align-items: stretch;
margin: 0 0 1.45rem;
padding: 1.6rem;
background: #f5f1e8;
border: 1px solid #ded5c5;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(36, 48, 47, 0.08);
}
.foto-hero-main,
.foto-hero-side,
.foto-home-section,
.foto-home-footer {
box-sizing: border-box;
}
.foto-search {
margin-top: 1.2rem;
padding: 1rem;
background: #ffffff;
border: 1px solid #d6cabb;
border-radius: 6px;
}
.foto-search .mw-inputbox-centered {
text-align: left;
}
.foto-search input[type="search"],
.foto-search input[type="text"] {
box-sizing: border-box;
max-width: 100%;
min-height: 44px;
padding: 0.65rem 0.75rem;
border: 1px solid #9aa7a4;
border-radius: 4px;
font-size: 1rem;
}
.foto-search input[type="submit"] {
min-height: 44px;
margin-left: 0.45rem;
padding: 0.65rem 1rem;
border: 1px solid #1f5f5b;
border-radius: 4px;
background: #236963;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.foto-cta {
height: 100%;
padding: 1.1rem;
background: #fffaf2;
border: 1px solid #d9c6aa;
border-radius: 6px;
}
.foto-cta-title {
margin: 0 0 0.8rem;
color: #1f5f5b;
font-weight: 700;
}
.foto-cta ul {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.foto-cta li a,
.foto-cta-button {
display: block;
padding: 0.72rem 0.85rem;
background: #8a4f24;
border-radius: 4px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.foto-cta li a:hover,
.foto-cta-button:hover {
background: #6f3f1c;
color: #ffffff;
text-decoration: none;
}
.foto-home-section {
margin: 0 0 1.2rem;
padding: 1.35rem;
background: #ffffff;
border: 1px solid #dfe5e3;
border-radius: 8px;
}
.foto-home-section-muted {
background: #f7f9f8;
}
.foto-section-header {
max-width: 850px;
margin-bottom: 1rem;
}
.foto-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.75rem;
}
.foto-tiles a {
text-decoration: none;
}
.foto-tile {
display: block;
min-height: 54px;
padding: 0.85rem;
background: #eef4f2;
border: 1px solid #cfdcda;
border-left: 4px solid #236963;
border-radius: 6px;
color: #1d3734;
font-weight: 700;
}
.foto-tile-feature {
background: #236963;
border-color: #236963;
color: #ffffff;
}
.foto-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 0.55rem 1rem;
}
.foto-list-grid ul {
margin-top: 0;
}
.foto-section-link {
margin: 1rem 0 0;
font-weight: 700;
}
.foto-home-footer {
margin: 0 0 1rem;
padding: 1rem 1.25rem;
background: #24302f;
border-radius: 8px;
}
.foto-footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.foto-footer-links a {
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.foto-footer-links a:hover {
color: #f5d49d;
text-decoration: underline;
}
.foto-portal .CategoryTreeTag {
margin-top: 1rem;
padding: 1rem;
background: #ffffff;
border: 1px solid #dfe5e3;
border-radius: 6px;
}
@media (max-width: 760px) {
.foto-hero {
grid-template-columns: 1fr;
padding: 1rem;
}
.foto-home h1 {
font-size: 1.7rem;
}
.foto-search input[type="search"],
.foto-search input[type="text"],
.foto-search input[type="submit"] {
width: 100%;
margin: 0.35rem 0 0;
}
.foto-home-section,
.foto-home-footer {
padding: 1rem;
}
}
.foto-city-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.foto-city-card {
display: flex;
flex-direction: column;
gap: 0.65rem;
min-width: 0;
padding: 0.9rem;
background: #f8fbfa;
border: 1px solid #dfe5e3;
border-radius: 8px;
}
.foto-city-card h3 {
margin: 0;
color: #1c2726;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.25;
}
.foto-city-card h3 a {
color: inherit;
text-decoration: none;
}
.foto-city-card h3 a:hover {
color: #236963;
text-decoration: underline;
}
.foto-city-card .gallery,
.foto-city-card ul.gallery {
margin: 0;
}
.foto-city-card .gallerytext {
font-size: 0.88rem;
line-height: 1.35;
}
.foto-city-more {
margin: 0.2rem 0 0;
}
.foto-city-more a {
display: inline-block;
padding: 0.55rem 0.78rem;
background: #236963;
border-radius: 4px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.foto-city-more a:hover {
background: #1d514d;
color: #ffffff;
text-decoration: none;
}