MediaWiki:Common.css: Perbedaan antara revisi

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css Stable v2.0
===================================== */


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

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


.firstHeading {
    color:#004f40;
}


a {
    color:#1f5f8b;
}


a:hover {
    color:#006b54;
}



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

.me-home{
    max-width:1200px;
    margin:auto;
}



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

.me-hero{

    background:#f8f6ef;

    padding:50px;

    border-radius:15px;

    border:1px solid #ddd;

    text-align:center;

    margin:30px 0 45px 0;

}


.me-hero h1{

    font-family:Georgia,serif;

    font-size:38px;

    color:#006b5b;

    margin-bottom:15px;

}


.me-hero p{

    font-size:18px;

    line-height:1.7;

    max-width:800px;

    margin:10px auto;

}



/* =========================
   EXPLORE MENU
========================= */


.me-explore{

    display:grid;

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

    gap:25px;

    margin-bottom:50px;

}



.me-explore-card{

    background:#006b5b;

    min-height:140px;

    border-radius:12px;

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.3s;

}



.me-explore-card:hover{

    background:#c79b2b;

    transform:translateY(-6px);

}



.me-explore-card a{

    color:white;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

}



.me-icon{

    font-size:35px;

    margin-bottom:12px;

}



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


.me-home h2{

    color:#006b5b;

    border-bottom:1px solid #ddd;

    padding-bottom:10px;

    margin-top:50px;

}



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


.me-grid{

    display:grid;

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

    gap:30px;

    margin:30px 0;

}



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


.me-card{

    background:white;

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

    box-shadow:0 3px 8px rgba(0,0,0,.08);

    transition:.3s;

}



.me-card:hover{

    transform:translateY(-5px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}



.me-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:10px;

}



.me-card a{

    text-decoration:none;

}



/* =========================
   FEATURED KNOWLEDGE
   (World History Style)
========================= */


.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:25px;

}



.me-feature-main img{

    width:100%;

    max-height:420px;

    object-fit:cover;

    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;

}



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


.knowledge-card{

    background:white;

    border:1px solid #ddd;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

}



.knowledge-card-title{

    font-size:22px;

    font-weight:bold;

    color:#00695c;

}



.knowledge-card-description{

    line-height:1.7;

}



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


@media(max-width:900px){


.me-explore{

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

}


.me-grid{

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

}


.me-featured{

grid-template-columns:1fr;

}


}



@media(max-width:600px){


.me-explore{

grid-template-columns:1fr;

}


.me-grid{

grid-template-columns:1fr;

}


.me-hero{
padding:25px;

}


.me-hero h1{
font-size:28px;

}

}

.me-explore-card h3{
color:white;
margin:10px 0;
}


.me-explore-card p{
color:white;
font-size:15px;
line-height:1.5;
}


.me-explore-card a{
margin-top:10px;
color:#ffffff;
font-weight:bold;
}



.me-feature-main{
display:flex;
flex-direction:column;
align-items:flex-start;
}


.me-feature-main img{
max-width:350px;
margin:auto;
}

/* =================================
 MALIKI HOMEPAGE FINAL OVERRIDE
================================= */


.me-home{

max-width:1200px;

margin:auto;

}



/* HERO */

.me-hero{

background:#f8f6ef;

padding:45px;

border-radius:16px;

border:1px solid #ddd;

text-align:center;

margin-bottom:50px;

}



.me-hero h1{

font-family:Georgia,serif;

font-size:42px;

color:#006b5b;

}



.me-hero p{

font-size:18px;

line-height:1.7;

}



/* MENU */

.me-explore{

display:grid;

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

gap:25px;

margin-bottom:60px;

}



.me-explore-card{

background:#006b5b;

border-radius:15px;

height:180px;

padding:20px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.me-icon{

font-size:40px;

}



.me-explore-card h3{

color:white;

}



.me-explore-card p{

font-size:14px;

color:white;

}



.me-link{

margin-top:10px;

}



.me-link a{

background:#c79b2b;

padding:7px 14px;

border-radius:5px;

color:white;

text-decoration:none;

font-size:14px;

}



/* FEATURED */


.me-featured{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

}



.me-feature-main{

background:white;

border:1px solid #ddd;

border-radius:15px;

padding:30px;

text-align:center;

}



.me-feature-main img{

max-width:350px;

height:auto;

}



.me-feature-side{

display:flex;

flex-direction:column;

gap:20px;

}



.me-feature-side div{

background:#f8f6ef;

border:1px solid #ddd;

padding:25px;

border-radius:15px;

}