MediaWiki:Common.css: Perbedaan antara revisi

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css FINAL CLEAN v4.0
===================================== */


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

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


.firstHeading{
    color:#004f40;
}


a{
    color:#1f5f8b;
}


a:hover{
    color:#006b54;
}



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


.me-home{

    max-width:1200px;

    margin:0 auto;

}



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


.me-hero{

    background:#f8f6ef;

    padding:45px;

    border-radius:16px;

    border:1px solid #ddd;

    text-align:center;

    margin:30px 0 50px;

}



.me-hero h1{

    font-family:Georgia,serif;

    font-size:42px;

    color:#006b5b;

    margin:0 0 15px;

}



.me-hero p{

    font-size:18px;

    line-height:1.7;

    margin:10px auto;

}



/* =================================
   CATEGORY MENU
   MALIKI MAIN CATEGORY
================================= */


.me-home .me-explore{

    display:grid !important;

    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    gap:25px !important;

    width:100% !important;

    margin:40px 0 60px !important;

}



/* CARD CATEGORY */


.me-home .me-explore-card{

    background:#006b54;

    height:180px;

    border-radius:15px;

    padding:20px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    width:100% !important;

    margin:0 !important;

    transition:.3s;

}



.me-home .me-explore-card:hover{

    background:#c79b2b;

    transform:translateY(-5px);

}



.me-home .me-explore-card h3{

    color:white;

    margin:10px 0;

    font-size:18px;

}



.me-home .me-explore-card p{

    color:white;

    font-size:14px;

    line-height:1.5;

    margin:5px 0;

}



/* LINK BUTTON */


.me-link{

    margin-top:12px;

}



.me-link a{

    color:white;

    text-decoration:none;

    font-weight:bold;

}



.me-link a:hover{

    color:white;

}



/* =========================
   SECTION TITLE
========================= */


.me-home h2{

    color:#006b5b;

    border-bottom:1px solid #ddd;

    padding-bottom:10px;

    margin-top:50px;

}



/* =========================
   FEATURED KNOWLEDGE
========================= */


.me-featured{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    margin:40px 0;

}



.me-feature-main{

    background:white;

    border:1px solid #ddd;

    border-radius:15px;

    padding:30px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.me-feature-main img{

    max-width:350px;

    height:auto;

    border-radius:12px;

}



.me-feature-side{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.me-feature-side div{

    background:#f8f6ef;

    border:1px solid #ddd;

    border-radius:12px;

    padding:25px;

}



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


.me-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.me-card{

    background:white;

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

}



.me-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:10px;

}



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


@media(max-width:900px){


    .me-home .me-explore{

        grid-template-columns:repeat(2,1fr) !important;

    }


    .me-featured{

        grid-template-columns:1fr;

    }


    .me-grid{

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){


    .me-home .me-explore{

        grid-template-columns:1fr !important;

    }


    .me-grid{

        grid-template-columns:1fr;

    }


    .me-hero{

        padding:25px;

    }


    .me-hero h1{

        font-size:28px;

    }

}

/* =================================
   FORCE MALIKI GRID OVERRIDE
================================= */

.mw-parser-output .me-home > .me-explore,
.me-home > .me-explore {

    display:grid !important;

    grid-template-columns:repeat(5, 1fr) !important;

    grid-auto-flow:row !important;

    justify-content:initial !important;

    align-items:stretch !important;

    gap:25px !important;

}


.mw-parser-output .me-home > .me-explore > .me-explore-card,
.me-home > .me-explore > .me-explore-card {

    display:flex !important;

    width:auto !important;

    margin:0 !important;

}