/* Dzisiejsza data (na górze strony i w ramce Wikinews) */
.today-date {text-align:center; font-size:0.9em; font-style:italic; margin-top:-16px; margin-bottom:8px;}
/* Tworzy grida, na którym opiera się cała strona */
.mainpage-wrapper {
display:grid; grid-template-columns:3fr minmax(225px, 1fr); grid-template-rows:auto auto auto 1fr;
grid-template-areas:'categories categories' 'featured wikinews' 'recent sidebar' 'sister sidebar';
justify-content:stretch; place-items:start stretch;
gap:12px;
}
/* Na węższych wyświetlaczach pokazuj jedno pod drugim */
@media only screen and (max-width:981px){
.mainpage-wrapper {display:block;}
.featured {margin-top:20px;}
.recent {margin-top:12px;}
.sidebar {margin-top:12px;}
}
/* Pasek z głównymi kategoriami */
.categories-bar {
grid-area:categories; display:grid; grid-auto-columns:auto; grid-auto-flow:column;
justify-content:space-around; border-radius:4px; background:#d3ebfd;
}
.categories-bar.categories-bar {margin:0; padding:4px;} /* Hack, by specyficzność selektora była wyższa */
.categories-bar li {display:inline-block; text-align:center;}
/* Niebieska ramka "Wikinews" */
.wikinews {
align-self:stretch; grid-area:wikinews; background-color:#d3ebfd;
background-image:url(//upload.wikimedia.org/wikipedia/commons/thumb/2/24/Wikinews-logo.svg/450px-Wikinews-logo.svg.png);
background-position:-200px 70px; background-repeat:no-repeat;
border-radius:4px; padding:8px; font-size:0.9em; text-align:center;
display:grid; grid-template-rows:auto 1fr auto 2fr auto;
grid-template-areas:'heading' '.' 'create' '.' 'footer';
}
.wikinews .heading {grid-area:heading;}
.wikinews h2 {padding-bottom:4px; margin:0 0 4px 0; text-align:center; font-size:1.1rem;}
.wikinews .article-count {font-weight:700; font-size:1.1em;}
.wikinews .create {grid-area:create;}
.wikinews .create form {text-align:center;}
.wikinews .create .mw-ui-input {width:100%; max-width:350px;}
.wikinews .footer {grid-area:footer;}
.wikinews .links, .wikinews .categories {
margin:8px 0 0 0; text-align:center; padding:2px 0; background:rgba(211, 235, 253, 0.85);
border-radius:2px;
}
.wikinews .links li, .wikinews .categories li {display:inline-block;}
.wikinews .links li:not(:last-child)::after,
.wikinews .categories li:not(:last-child)::after {content:' \2022'; margin:0 2px;}
.wikinews .categories {display:none;}
.wikinews .today-date {display:none; font-size:1em; margin-top:4px;}
/* Na mniejszych ekranach połącz pasek kategorii i ramkę Wikinews */
@media only screen and (max-width:981px) {
.categories-bar {display:none;}
.wikinews .categories {display:block;}
}
/*
Na jeszcze mniejszych ekranach ukryj zachętę do tworzenia nowego artykułu
W jej miejscu umieszczane są linki do głównych kategorii i dzisiejsza data
*/
@media only screen and (max-width:800px){
.wikinews {background-position:-200px 30px;}
.wikinews h2 {font-size:1.3rem; padding-bottom:0; border-bottom:none;}
.wikinews .links, .wikinews .create {display:none;}
.wikinews .today-date {display:block;}
.today-date.at-top {display:none;}
.create-invite {display:none;}
}
/*
Pokazuje artykuł w dużej ramce z cieniem. Wykorzystuje powiększoną czcionkę,
by zwrócić uwagę czytelnika. Zdjęcie dostaje swoją przestrzeń, obok tekstu
*/
.featured {
grid-area:featured; align-self:stretch;
display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto 1fr;
grid-template-areas:'. .' 'content image' '. .';
padding:20px 12px; border-radius:8px; border:1px solid #ddd; color:inherit;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.1);
}
.featured > p {display:none;} /* Ukrywa pusty znacznik <p>, który dodaje parser */
.featured > .wrapper {grid-area:content;}
.featured h2 {border-bottom:none; margin:4px 0 0 0; font-size:1.75rem; padding-top:0;}
.featured h2 a {color:inherit;}
.featured .date {margin-bottom:12px; color:#666; font-size:0.9em;}
.featured .content {font-size:1.2em; line-height:1.4; margin:0;}
.featured .image {
border-left:1px solid #ccc; padding-left:8px; margin-left:8px;
grid-area:image; display:flex; align-items:center; /* Wyśrodkowuje obrazek */
}
.featured img {max-width:20vw; max-height:150px; object-fit:contain;}
/* Na małych ekranach pokaż zdjęcie nad nagłówkiem */
@media only screen and (max-width:550px) {
.featured {
grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:'image' 'content';
}
.featured .image {border-left:none; justify-content:center; margin:0; padding:0;}
.featured img {max-width:unset;}
.featured .badges:not(:empty) {margin-top:12px;}
}
/* Tworzy dwie kolumny, w których będą pokazywane nowe artykuły */
.recent {
grid-area:recent;
display:grid; grid-template-columns:1fr 1fr; justify-content:stretch; place-items:stretch;
border:1px solid #ccc; border-radius:4px;
}
.recent .column {
margin:4px 4px 4px 0; padding-left:4px;
display:grid; align-content:stretch; place-items:stretch;
}
.recent .column:not(:first-of-type) {border-left:1px solid #ccc;}
/* Na małych ekranach pokaż kolumny jedna pod drugą */
@media only screen and (max-width:780px) {
.recent {display:block;}
.recent .column {display:block;}
.recent .column:not(:first-of-type) {border-left:none;}
.recent .column:not(:first-of-type) .article-box:first-of-type {border-top:1px solid #ccc;}
}
/*
Ramka obejmująca początek artykułu i zdjęcie. Zdjęcie jest pokazywane obok treści.
Jeśli kolumna jest wyższa niż wycinki artykułów, przestrzeń jest rozdzielana w stosunku
1:2 (jedna część między kreską a wycinkiem i dwie części pod wycinkiem)
*/
.article-box {
padding:8px 0 8px 4px; color:inherit;
display:grid; grid-template-rows:minmax(4px, 1fr) auto 2fr;
}
.article-box:not(:first-of-type) {border-top:1px solid #ccc;}
.article-box h2 {border-bottom:none; margin:0 4px 0 0; padding-top:0;}
.article-box h2 a {color:inherit;}
.article-box > p {display:none} /* Ukrywa pusty znacznik <p>, który dodaje parser */
.article-box > .wrapper {grid-row:2;}
.article-box .date {margin-bottom:6px; font-size:0.9em; color:#666;}
.article-box .image {float:right; max-width:35%; margin-left:12px; margin-top:-1.5em;}
.article-box .image img {max-width:100%; max-height:130px; object-fit:contain;}
.article-box .content {margin:0;}
/*
Na szerszych wyświetlaczach zwiększany jest rozmiar czcionki i wysokość
wiersza tekstu, by ramka nie była zbyt mała
*/
@media only screen and (min-width:1550px) {
.article-box {font-size:1.1em;}
.article-box > p {line-height:1.8;}
.article-box .image img {max-height:120px;}
}
.see-more {text-align:right; padding-right:20px;}
/*
Panel boczny jest zbiorem ramek (klasa widget). Układają się jedna pod drugą.
Każda z nich może mieć swój nagłówek i zawartość
*/
.sidebar {grid-area:sidebar;}
.sidebar > p:not(.widget) {display:none;}
.sidebar > .widget {
background:#eee; padding:8px; border-radius:4px; font-size:0.9em; margin-bottom:12px;
}
.sidebar > .widget.center {text-align:center; width:unset;}
.sidebar > .widget h2 {
padding-bottom:4px; margin:0 0 4px 0; text-align:center; font-size:1.1rem;
border-bottom: 1px solid #c6c6c6;
}
.sidebar > .widget .see-more {padding-right:8px; font-weight:700;}
.sidebar .feed .lista-najnowszych {max-height:30em; overflow-y:auto; margin-bottom:8px;}
.sidebar .feed .lista-najnowszych + p {display:none;}
.sidebar .currencies table {margin:0 auto !important; display:table; width:unset !important;}
.sidebar .currencies p:last-child {display:none;}
@media only screen and (min-width:981px){
.sidebar .feed .lista-najnowszych {max-height:40em;}
}
/*
Na średnich wyświetlaczach ramki wyświetlane są pod główną treścią w dwóch
kolumnach. Kolumna pierwsza to najnowsze wiadomości, a do drugiej trafiają
pozostałe ramki. Począwszy od 5. ramki trafiają one do obu kolumn naprzemiennie
*/
@media only screen and (min-width:740px) and (max-width:981px){
.sidebar {
display:grid; grid-auto-rows:auto; grid-template-columns:1fr 1fr; column-gap:12px;
align-items:start;
}
/* span 3 = Lista nowych obejmuje 3 wiersze, czyli 3 następne ramki trafią do prawej kolumny */
.sidebar .feed {grid-column:1; grid-row:1 / span 3;}
}
/* Ramka z projektami siostrzanymi */
.mainpage-bottom {grid-area:sister;}
.sister-projects, .frame {
grid-area:sister; border:1px solid #ccc; border-radius:4px; padding:8px;
}
.frame + .frame {margin-top:12px;}
.sister-projects {
padding-bottom:76px;
position:relative; /* Dzięki temu pasek z siostrzanymi ma dobrą szerokość */
}
.sister-projects h2, .frame h2 {border-bottom:1px solid #ccc; margin:0 0 8px 0; text-align:center}
.sister-projects .wikinews-logo {float:left; width:150px; margin:16px;}
.sister-projects .projects-wrapper {
max-width:100%; overflow:auto; clear:both; position:absolute; margin:0 -8px;
padding:8px 0;
}
.sister-projects .projects {display:flex;}
.sister-projects .project {
display:grid; grid-template-rows:1fr 1fr; grid-template-columns:auto 1fr;
grid-template-areas:'logo name' 'logo desc'; column-gap:8px; margin:0 12px;
white-space:nowrap;
}
.sister-projects .project img {
max-width:50px; max-height:50px; object-fit:contain; grid-area:logo; align-self:center;
}
.sister-projects .project .name {grid-area:name; align-self:end; font-weight:700;}
.sister-projects .project .description {grid-area:desc; align-self:start;}
/* Na małych ekranach przenieś logo nad tekst */
@media only screen and (max-width:550px) {
.sister-projects .wikinews-logo {float:none; width:unset; text-align:center}
}
/* Na dużych ekranach zwiększ czcionkę, żeby siostrzane nie nachodziły */
@media only screen and (min-width:1550px) {
.sister-projects, .frame {font-size:1.1em;}
}
/* Etykiety portali */
p.badges {margin:0;}
.badge {
background:#d3ebfd; color:rgba(0,0,0,0.8); padding:0 8px;
border-radius:2px; font-size:0.8em; font-weight:700; margin-bottom:4px;
display:inline-block;
}
.badge a {color:inherit;}
.badge.Gospodarka {background:rgb(255, 240, 158);}
.badge.Katastrofy {background:rgb(255, 183, 183);}
.badge.Kultura {background:rgb(214, 197, 255);}
.badge.Nauka {background:rgb(206, 210, 255);}
.badge.Polityka {background:rgb(147, 241, 216);}
.badge.Prawo {background:rgb(255, 196, 255);}
.badge.Sport {background:rgb(255, 226, 173);}
.badge.Społeczeństwo {background:rgb(207, 226, 170);}
.badge.Technika {background:rgb(210, 225, 237);}
.badge.Środowisko {background:rgb(190, 254, 190);}
/* [[Kategoria:Szablony strony głównej]][[Kategoria:Style szablonów]] */
