MediaWiki:Gadget-article-columns.css
Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.
- Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
- Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
- Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
- Opera: Naciśnij klawisze Ctrl+F5.
/*
* Gadżet dla dwukolumnowego układu artykułów
* Opiera się na gridzie z dwoma komórkami - treść i panel boczny
* Na wąskich ekranach pasek boczny ląduje pod spodem treści
* @author [[User:Msz2001]]
*/
.wn-article-columns-root {
display:grid; grid-template-columns:1fr 250px; grid-template-rows:auto 1fr;
gap:8px; grid-template-areas:'. .' 'text aside'; align-items:start;
/* Górny wiersz pozostawiony na np. komunikat w podglądzie */
}
.previewnote {grid-column:span 2;}
.wn-article-content {grid-area:text;}
.wn-article-sidebar {
grid-area:aside; display:grid; grid-template-columns:1fr; gap:8px;
grid-auto-flow:row; align-items:start;
}
/* Powtórzenie klasy jest celowe i zwiększa szczegółowość selektora */
.wn-article-sidebar .szablon-tematyczny.szablon-tematyczny {width:auto; float:none; margin-left:0;}
/* Nie wyświetlaj obrazków w szablonach tematycznych w pasku bocznym */
.wn-article-sidebar .szablon-tematyczny .header + .center {display:none;}
/* W nowym Wektorze wykorzystaj przestrzeń po prawej stronie */
html:not(.vector-feature-page-tools-pinned-enabled).vector-feature-limited-width-enabled body.skin-vector-2022 .wn-article-columns-root {margin-right:min(0px, calc(-100vw + 83rem));}
/* 1540px = 2 * (32rem + 258px); 1rem = 16px */
@media only screen and (min-width:1540px){
html:not(.vector-feature-page-tools-pinned-enabled).vector-feature-limited-width-enabled body.skin-vector-2022 .wn-article-columns-root {margin-right:-258px;}
}
/* W Minervie wykorzystaj przestrzeń po prawej stronie */
body.skin-minerva .article-root {margin-right:calc(516px - 50vw);}
/* 1548px = 2 * (516px + 258px) */
@media only screen and (min-width:1548px){
body.skin-minerva .wn-article-columns-root {margin-right:-258px;}
}
/* Na ekranach węższych niż 1000px przenieś boczną kolumnę pod spód i wyśrodkuj ją */
@media screen and (max-width:1000px){
html:not(.vector-feature-page-tools-pinned-enabled).vector-feature-limited-width-enabled body.skin-vector-2022 .wn-article-columns-root,
body.skin-minerva .wn-article-columns-root {margin-right:0;}
.wn-article-columns-root {
grid-template-columns:1fr; grid-template-rows:auto auto;
grid-template-areas:'text' 'aside'
}
.wn-article-sidebar {
grid-template-columns:1fr; max-width:350px; margin:0 auto;
}
}