https://wiki.mtrnord.blog/index.php?action=history&feed=atom&title=Template%3APortal_Box%2Fstyles.css 2026-04-30T15:20:18Z Revision history for this page on the wiki MediaWiki 1.45.3 https://wiki.mtrnord.blog/index.php?title=Template:Portal_Box/styles.css&diff=51&oldid=prev 2026-04-18T15:31:50Z

<p></p> <a href="https://wiki.mtrnord.blog/index.php?title=Template:Portal_Box/styles.css&amp;diff=51&amp;oldid=45">Show changes</a>

MTRNord https://wiki.mtrnord.blog/index.php?title=Template:Portal_Box/styles.css&diff=45&oldid=prev 2026-04-18T15:13:35Z

<p>Created page with &quot;<span class="autocomment">* Portal grid layout + card styling. * Usage: wrap &lt;div class=&quot;mw-portal-grid&quot;&gt;...&lt;/div&gt; around multiple {{Portal box}} calls.: </span> <span class="autocomment">Grid container — place this on the page wrapping the boxes: </span> .mw-portal-grid { display: flex; flex-flow: row wrap; gap: 16px; margin: 1em 0; } <span class="autocomment">Individual card: </span> .mw-portal-box { flex: 1 1 220px; <span class="autocomment">grow, shrink, min-width — gives ~3 col on desktop: </span> break-inside: avoid; border: 1px solid v...&quot;</p> <p><b>New page</b></p><div>/*<br /> * Portal grid layout + card styling.<br /> * Usage: wrap &lt;div class=&quot;mw-portal-grid&quot;&gt;...&lt;/div&gt; around multiple {{Portal box}} calls.<br /> */<br /> <br /> /* Grid container — place this on the page wrapping the boxes */<br /> .mw-portal-grid {<br /> display: flex;<br /> flex-flow: row wrap;<br /> gap: 16px;<br /> margin: 1em 0;<br /> }<br /> <br /> /* Individual card */<br /> .mw-portal-box {<br /> flex: 1 1 220px; /* grow, shrink, min-width — gives ~3 col on desktop */<br /> break-inside: avoid;<br /> border: 1px solid var(--border-color-base, #a2a9b1);<br /> background: var(--background-color-neutral-subtle, #f8f9fa);<br /> color: var(--color-base, #202122);<br /> min-width: 180px;<br /> max-width: 340px;<br /> }<br /> <br /> .mw-portal-box-title {<br /> background: #3366cc;<br /> color: #fff;<br /> font-weight: bold;<br /> font-size: 95%;<br /> padding: 4px 8px;<br /> }<br /> <br /> .mw-portal-box-content {<br /> padding: 4px 8px 6px;<br /> font-size: 90%;<br /> }<br /> .mw-portal-box-content ul {<br /> margin: 4px 0 0 1.2em;<br /> padding: 0;<br /> }<br /> .mw-portal-box-content li {<br /> margin: 2px 0;<br /> }<br /> <br /> /* Colour variants for the title bar */<br /> .mw-portal-box-green .mw-portal-box-title { background: #2e7d32; }<br /> .mw-portal-box-teal .mw-portal-box-title { background: #117a8b; }<br /> .mw-portal-box-purple .mw-portal-box-title { background: #6a1b9a; }<br /> .mw-portal-box-red .mw-portal-box-title { background: #b71c1c; }<br /> .mw-portal-box-orange .mw-portal-box-title { background: #e65100; }<br /> .mw-portal-box-grey .mw-portal-box-title { background: #546e7a; }<br /> <br /> /* Responsive: 2 columns on narrow, 1 on mobile */<br /> @media screen and (max-width: 719px) {<br /> .mw-portal-box { flex-basis: 45%; }<br /> }<br /> @media screen and (max-width: 479px) {<br /> .mw-portal-box { flex-basis: 100%; max-width: 100%; }<br /> }<br /> <br /> /* Dark mode — card body only; title bars keep their colour (white text already contrasts) */<br /> @media screen {<br /> html.skin-theme-clientpref-night .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }<br /> }<br /> @media screen and (prefers-color-scheme: dark) {<br /> html.skin-theme-clientpref-os .mw-portal-box-grey .mw-portal-box-title { background: #37474f; }<br /> }</div>

MTRNord