مستخدم:Osps7/MainPage/styles.css

.today-date {text-align:center; font-size:0.9em; font-style:italic; margin-top:-16px; margin-bottom:8px;}

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

@media only screen and (max-width:981px){
    .mainpage-wrapper {display:block;}
    .featured {margin-top:20px;}
    .recent {margin-top:12px;}
    .sidebar {margin-top:12px;}
}

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

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

@media only screen and (max-width:981px) {
    .categories-bar {display:none;}
    .wikinews .categories {display:block;}
}

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

.featured {
    /*-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;}
 .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;
} 
.featured img {max-width:20vw; max-height:150px; object-fit:contain;} */

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

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

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

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

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

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

.sister-projects {
    grid-area:sister; border:1px solid #ccc; border-radius:4px; padding:8px 8px 76px 8px;
    position:relative; /* Dzięki temu pasek z siostrzanymi ma dobrą szerokość */
}
.sister-projects 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;}

@media only screen and (max-width:550px) {
    .sister-projects .wikinews-logo {float:none; width:unset; text-align:center}
}

@media only screen and (min-width:1550px) {
    .sister-projects {font-size:1.1em;}
}

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