MediaWiki:Common.css

Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.

• Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
• Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
• Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css FINAL STABLE
===================================== */


/* =========================
   GLOBAL
========================= */

body {
    background: #f5f8f7;
    color: #24343b;
}

.firstHeading {
    color: #004f40;
}

a {
    color: #1f5f8b;
}

a:hover {
    color: #006b54;
}


/* =========================
   HOME
========================= */

.mw-parser-output .me-home {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================
   HERO
========================= */

.mw-parser-output .me-hero {
    background: #f8f6ef;
    padding: 45px;
    margin: 30px 0 50px 0;
    border: 1px solid #ddd;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;
}

.mw-parser-output .me-hero h1 {
    font-family: Georgia, serif;
    font-size: 42px;
    color: #006b5b;
    margin: 0 0 15px 0;
}

.mw-parser-output .me-hero p {
    font-size: 18px;
    line-height: 1.7;
    margin: 10px auto;
}


/* =========================
   JELAJAH PENGETAHUAN
========================= */

.mw-parser-output .me-explore {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:25px;
    width:100%;
    margin:30px 0 50px 0;
}


/* =========================
   ITEM
========================= */

.mw-parser-output .me-item {
    width:calc((100% - 50px) / 3);
    text-align:center;
    box-sizing:border-box;
}


/* =========================
   CARD
========================= */

.mw-parser-output .me-explore-card {
    width:100%;
    height:330px;
    box-sizing:border-box;

    background:#006b54;
    border-radius:15px;

    padding:20px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:white;
}


/* =========================
   GAMBAR
========================= */

.mw-parser-output .me-explore-card img {
    display:block;
    width:160px;
    height:140px;
    object-fit:contain;
    margin:0 auto 15px auto;
}


/* =========================
   JUDUL
========================= */

.mw-parser-output .me-explore-card h3 {
    color:white;
    font-size:20px;
    margin:10px 0;
}


/* =========================
   DESKRIPSI
========================= */

.mw-parser-output .me-explore-card p {
    color:white;
    font-size:14px;
    line-height:1.5;
    margin:5px 0;
}


/* =========================
   LINK DI BAWAH CARD
========================= */

.mw-parser-output .me-item > a {
    display:inline-block;
    margin-top:12px;
    color:#006b54;
    font-weight:bold;
    text-decoration:none;
}

.mw-parser-output .me-item > a:hover {
    color:#b8860b;
}


/* =========================
   TABLET
========================= */

@media (max-width:900px) {

    .mw-parser-output .me-item {
        width:calc((100% - 25px) / 2);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width:600px) {

    .mw-parser-output .me-item {
        width:100%;
    }

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .mw-parser-output .me-explore {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .mw-parser-output .me-explore {
        grid-template-columns: 1fr;
    }

    .mw-parser-output .me-hero {
        padding: 25px;
    }

    .mw-parser-output .me-hero h1 {
        font-size: 30px;
    }

    .mw-parser-output .me-explore-card {
        height: 300px;
    }

}