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;
	}
}