MediaWiki:Common.css: Perbedaan antara revisi

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


/* =========================
   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 {
    flex: 0 0 30%;
    width: 30%;
    max-width: 30%;
    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 DALAM CARD
========================= */

.mw-parser-output .me-explore-card img {
    display: block;

    width: 160px;
    height: 140px;

    object-fit: contain;

    margin: 0 auto 15px auto;
}


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

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


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

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


/* =========================
   RESPONSIVE — TABLET
========================= */

@media (max-width: 900px) {

    .mw-parser-output .me-item {
        flex: 0 0 47%;
        width: 47%;
        max-width: 47%;
    }

}


/* =========================
   RESPONSIVE — MOBILE
========================= */

@media (max-width: 600px) {

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

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

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

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

}