Lompat ke isi

MediaWiki:Common.css: Perbedaan antara revisi

Dari Maliki Encyclopedia
Tidak ada ringkasan suntingan
Tidak ada ringkasan suntingan
Baris 1: Baris 1:
/* =====================================
/* =====================================
   MALIKI ENCYCLOPEDIA
   MALIKI ENCYCLOPEDIA
   Common.css FINAL v7.0
   Common.css FINAL v8.0
   Clean World History Style
   World History Inspired Style
===================================== */
===================================== */


Baris 33: Baris 33:


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


.me-home{
.me-home{
Baris 40: Baris 41:
     max-width:1200px;
     max-width:1200px;


     margin:0 auto;
     margin:auto;


}
}
Baris 46: Baris 47:




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


.me-hero{
.me-hero{


     background:#f8f6ef;
     background:#f8f6ef;
    padding:45px;


     border:1px solid #ddd;
     border:1px solid #ddd;
Baris 60: Baris 60:
     border-radius:16px;
     border-radius:16px;


     text-align:center;
     overflow:hidden;


     margin:30px 0 50px;
     margin:30px auto 55px;


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


}
}
Baris 90: Baris 70:




/* =====================================
/* gambar banner */
  FEATURED / PENGETAHUAN PILIHAN
===================================== */


 
.me-hero-image{
/* baris kartu */
 
.mw-parser-output .featured-grid{
 
    display:flex;
 
    justify-content:center;
 
    align-items:flex-start;
 
    gap:25px;
 
    margin:40px auto;


     width:100%;
     width:100%;
Baris 115: Baris 80:




/* kartu */
.me-hero-image img{


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


     width:300px;
     height:220px;


     flex:none;
     object-fit:cover;
 
    text-align:center;
 
    background:transparent;
 
    border:none;


}
}
Baris 133: Baris 92:




/* =========================
/* konten hero */
  GAMBAR
========================= */


.me-hero-content{


.mw-parser-output .featured-image{
     padding:25px 40px 35px;
 
     height:150px;
 
    background:#f8f6ef;
 
    border:1px solid #ddd;
 
    border-radius:10px;
 
    display:flex;
 
    justify-content:center;
 
    align-items:center;
 
    margin-bottom:18px;


}
}
Baris 160: Baris 102:




/* ukuran gambar */
.me-hero h1{


.mw-parser-output .featured-image img{
    font-family:Georgia,serif;


     max-width:120px;
     font-size:52px;


     max-height:120px;
     font-weight:normal;


     width:auto;
     color:#006b54;


     height:auto;
     margin:0 auto 15px;


     object-fit:contain;
     padding-bottom:12px;


}
    border-bottom:1px solid #ccc;


 
     max-width:850px;
 
/* =========================
  JUDUL
========================= */
 
 
.mw-parser-output .featured-item h3{
 
     color:#006b54;
 
    font-size:20px;
 
    margin:15px 0 10px;


}
}
Baris 195: Baris 124:




/* =========================
.me-hero .tagline{
  DESKRIPSI
========================= */


    font-size:25px;


.mw-parser-output .featured-item p{
     color:#24343b;
 
     max-width:250px;
 
    margin:0 auto;
 
    font-size:14px;


     line-height:1.6;
     margin:20px auto;


}
}
Baris 214: Baris 136:




/* =========================
.me-hero p{
  LINK
========================= */


    font-size:18px;


.mw-parser-output .featured-item a{
    line-height:1.7;


     display:inline-block;
     max-width:850px;
 
    margin-top:20px;
 
    color:#c79b2b;
 
    font-weight:bold;
 
    text-decoration:none;
 
}
 
 
.mw-parser-output .featured-item a:hover{


     color:#006b54;
     margin:15px auto;


}
}
Baris 243: Baris 151:


/* =====================================
/* =====================================
   JELAJAH PENGETAHUAN
   FEATURED CONTENT
===================================== */
===================================== */




.me-explore{
.featured-grid{


     display:flex;
     display:flex;
Baris 253: Baris 161:
     justify-content:center;
     justify-content:center;


     gap:25px;
     align-items:flex-start;


     flex-wrap:wrap;
     gap:18px;


     margin:40px auto;
     margin:35px auto;


}
}
Baris 263: Baris 171:




.me-item{
/* item */
 
.featured-item{


     width:300px;
     width:300px;
    flex:none;


     text-align:center;
     text-align:center;
Baris 273: Baris 185:




.me-explore-card{
/* gambar */
 
.featured-image{


     height:220px;
     height:160px;


     background:#ffffff;
     background:#f8f6ef;


     border:1px solid #ddd;
     border:1px solid #ddd;


     border-radius:15px;
     border-radius:8px;


     display:flex;
     display:flex;
Baris 288: Baris 202:


     align-items:center;
     align-items:center;
    margin-bottom:18px;


}
}
Baris 293: Baris 209:




.me-explore-card img{
.featured-image img{


     max-width:160px;
     max-width:120px;


     max-height:160px;
     max-height:120px;


     object-fit:contain;
     object-fit:contain;
Baris 305: Baris 221:




.me-item h3{
/* judul */
 
 
.featured-item h3{


     color:#006b54;
     color:#006b54;
Baris 311: Baris 230:
     font-size:20px;
     font-size:20px;


}
     margin:12px 0;
 
 
 
.me-item p{
 
     font-size:14px;
 
    line-height:1.6;


}
}




.me-item > a{


    color:#c79b2b;
/* deskripsi */


    font-weight:bold;


}
.featured-item p{


    max-width:250px;


    margin:auto;


/* =====================================
     font-size:14px;
  RESPONSIVE
===================================== */
 
 
@media(max-width:900px){
 
 
     .featured-grid{
 
        flex-wrap:wrap;
 
    }


    line-height:1.6;


}
}
Baris 353: Baris 253:




@media(max-width:700px){
/* link */




    .featured-item{
.featured-item a{


        width:100%;
    display:inline-block;


     }
     margin-top:20px;


    color:#c79b2b;


     .me-hero{
     font-weight:bold;


        padding:25px;
     text-decoration:none;
 
    }
 
 
    .me-hero h1{
 
        font-size:30px;
 
    }
 
}
 
 
/* =====================================
  FINAL MICRO ADJUSTMENT
  WORLD HISTORY STYLE
===================================== */
 
 
.mw-parser-output .featured-grid{
 
    gap:15px;
 
}
 
 
.mw-parser-output .featured-image{
 
    height:130px;
 
     margin-bottom:10px;


}
}




.mw-parser-output .featured-image img{
    max-width:110px;
    max-height:110px;
}
.mw-parser-output .featured-item h3{
    margin-top:10px;
}
.mw-parser-output .featured-item p{
    max-width:230px;
}


/* =====================================
/* =====================================
   HERO MALIKI ENCYCLOPEDIA
   RESPONSIVE
  WORLD HISTORY STYLE
===================================== */
===================================== */




.me-hero{
@media(max-width:900px){


    background:#f8f6ef;


    border:1px solid #ddd;
.featured-grid{


     border-radius:16px;
     flex-wrap:wrap;
 
    padding:30px 45px 45px;
 
    margin:30px auto 60px;
 
    text-align:center;


}
}


/* gambar hero */
.me-hero img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:4px;
    margin-bottom:35px;


}
}




 
@media(max-width:700px){
/* judul utama */
 
.me-hero h1{
 
    font-family:Georgia,serif;
 
    font-size:52px;
 
    font-weight:normal;
 
    color:#006b54;
 
    margin:0 auto 20px;
 
    border-bottom:1px solid #ccc;
 
    padding-bottom:15px;
 
    max-width:850px;
 
}
 
 
 
/* subjudul */
 
.me-hero p:first-of-type{
 
    font-size:26px;
 
    color:#24343b;
 
    margin:30px 0;
 
}
 
 
 
/* deskripsi */
 
.me-hero p:last-of-type{
 
    font-size:18px;
 
    line-height:1.7;
 
    max-width:900px;
 
    margin:auto;
 
}
 
/* =====================================
  MALIKI HERO BANNER WITH IMAGE
===================================== */
 
 
.me-hero{
 
    display:flex;
 
    flex-direction:column;
 
    align-items:center;
 
    justify-content:center;
 
    min-height:420px;
 
    background:#f8f6ef;
 
    border:1px solid #ddd;
 
    border-radius:18px;
 
    overflow:hidden;
 
}
 
 
 
/* gambar hero */
 
 
.me-hero-image{
 
    width:100%;
 
    text-align:center;
 
}
 
 
.me-hero-image img{
 
    width:100%;
 
    max-height:180px;
 
    object-fit:cover;
 
}
 
 
 
/* teks */




.me-hero-content{
.me-hero-content{


    text-align:center;
     padding:20px;
 
     padding:30px;


}
}
Baris 585: Baris 303:
.me-hero h1{
.me-hero h1{


    font-family:Georgia,serif;
     font-size:34px;
 
     font-size:60px;
 
    font-weight:400;
 
    color:#006b54;
 
    line-height:1.1;


}
}
Baris 601: Baris 311:
.me-hero .tagline{
.me-hero .tagline{


     font-size:24px;
     font-size:20px;
 
    color:#24343b;


}
}




.featured-item{


.me-hero p{
    width:100%;


    font-size:18px;
}


    line-height:1.7;


}
}

Revisi per 9 September 2026 20.47

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css FINAL v8.0
   World History Inspired Style
===================================== */


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

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


.firstHeading{
    color:#004f40;
}


a{
    color:#1f5f8b;
}


a:hover{
    color:#006b54;
}



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


.me-home{

    max-width:1200px;

    margin:auto;

}



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


.me-hero{

    background:#f8f6ef;

    border:1px solid #ddd;

    border-radius:16px;

    overflow:hidden;

    margin:30px auto 55px;

    text-align:center;

}



/* gambar banner */

.me-hero-image{

    width:100%;

}



.me-hero-image img{

    width:100%;

    height:220px;

    object-fit:cover;

}



/* konten hero */

.me-hero-content{

    padding:25px 40px 35px;

}



.me-hero h1{

    font-family:Georgia,serif;

    font-size:52px;

    font-weight:normal;

    color:#006b54;

    margin:0 auto 15px;

    padding-bottom:12px;

    border-bottom:1px solid #ccc;

    max-width:850px;

}



.me-hero .tagline{

    font-size:25px;

    color:#24343b;

    margin:20px auto;

}



.me-hero p{

    font-size:18px;

    line-height:1.7;

    max-width:850px;

    margin:15px auto;

}



/* =====================================
   FEATURED CONTENT
===================================== */


.featured-grid{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:18px;

    margin:35px auto;

}



/* item */

.featured-item{

    width:300px;

    flex:none;

    text-align:center;

}



/* gambar */

.featured-image{

    height:160px;

    background:#f8f6ef;

    border:1px solid #ddd;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}



.featured-image img{

    max-width:120px;

    max-height:120px;

    object-fit:contain;

}



/* judul */


.featured-item h3{

    color:#006b54;

    font-size:20px;

    margin:12px 0;

}



/* deskripsi */


.featured-item p{

    max-width:250px;

    margin:auto;

    font-size:14px;

    line-height:1.6;

}



/* link */


.featured-item a{

    display:inline-block;

    margin-top:20px;

    color:#c79b2b;

    font-weight:bold;

    text-decoration:none;

}



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


@media(max-width:900px){


.featured-grid{

    flex-wrap:wrap;

}


}


@media(max-width:700px){


.me-hero-content{

    padding:20px;

}



.me-hero h1{

    font-size:34px;

}



.me-hero .tagline{

    font-size:20px;

}


.featured-item{

    width:100%;

}


}