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 v12.0
   Common.css v12 FINAL
   Compact World History Style
   World History Inspired Style
===================================== */
===================================== */




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


body{
body{
     background:#ffffff;
     background:#f5f8f7;
     color:#24343b;
     color:#24343b;
}
}
Baris 32: Baris 32:




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


.me-home{
.me-home{
Baris 47: Baris 47:


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




.me-hero{
.me-hero-image{


     background:#f8f6ef;
     width:100%;
 
    border:1px solid #ddd;


    border-radius:12px;
     margin:25px auto 0;
 
    overflow:hidden;
 
     margin:20px auto 25px;


     text-align:center;
     text-align:center;
Baris 67: Baris 61:
}
}


/* =====================================
  HERO IMAGE / BANNER
===================================== */
.me-hero-image{
    width:100%;
    height:220px;
    overflow:hidden;
}




Baris 104: Baris 82:




.me-hero-content{
.me-hero{
 
    background:#f8f6ef;


     padding:12px 40px 25px;
     border:1px solid #ddd;


}
    border-radius:12px;
 
    text-align:center;
 
    margin:0 auto 45px;


    padding:25px 40px 35px;


}


/* Nama Ensiklopedia */




Baris 119: Baris 104:
     font-family:Georgia,serif;
     font-family:Georgia,serif;


     font-size:52px;
     font-size:54px;


     font-weight:400;
     font-weight:normal;


     color:#006b54;
     color:#006b54;


    line-height:1.1;
     margin:0 auto 15px;
 
     margin:0 auto 5px;


     padding-bottom:6px;
     padding-bottom:10px;


     border-bottom:1px solid #ccc;
     border-bottom:1px solid #ccc;
Baris 139: Baris 122:




/* Tagline */
.me-hero h3.tagline{


    font-size:24px;


.me-hero .tagline{
     font-weight:bold;
 
     font-size:22px;


     color:#24343b;
     color:#24343b;


     margin:14px auto 8px;
     margin:25px 0 15px;


}
}
Baris 154: Baris 136:




/* Deskripsi */
.me-hero p{
 
 
.me-hero-content p{


     font-size:16px;
     font-size:17px;


     line-height:1.5;
     line-height:1.6;


     max-width:850px;
     max-width:850px;


     margin:8px auto;
     margin:15px auto;


}
}
Baris 172: Baris 151:


/* =====================================
/* =====================================
   SECTION HEADING
   FEATURED GRID
  Pengetahuan Pilihan
===================================== */
===================================== */




.mw-parser-output h2{
.featured-grid{


    margin-top:20px;
     display:flex;
 
    margin-bottom:15px;
 
}
 
 
 
/* =====================================
  FEATURED CONTENT
===================================== */
 
 
.mw-parser-output .featured-grid{
 
     display:flex !important;


     justify-content:center;
     justify-content:center;
Baris 201: Baris 166:
     gap:12px;
     gap:12px;


     margin:15px auto 25px;
     margin:25px auto 45px;


}
}
Baris 207: Baris 172:




/* Item */
/* =====================================
  FEATURED ITEM
===================================== */




.mw-parser-output .featured-item{
.featured-item{


     width:300px;
     width:300px;
Baris 223: Baris 190:


/* =====================================
/* =====================================
   IMAGE BOX ONLY
   IMAGE BOX
  Border hanya gambar
===================================== */
===================================== */




.mw-parser-output .featured-image{
.featured-image{


     height:140px;
     height:130px;


     background:#f8f6ef;
     background:#f8f6ef;
Baris 242: Baris 210:


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


}
}
Baris 249: Baris 215:




.mw-parser-output .featured-image img{
.featured-image img{


     max-width:110px;
     max-width:120px;


     max-height:110px;
     max-height:120px;


     width:auto;
     width:auto;
Baris 270: Baris 236:




.mw-parser-output .featured-item h3{
.featured-item h3{


     color:#006b54;
     color:#006b54;


     font-size:20px;
     font-size:21px;


     margin:8px 0;
     margin:15px 0 10px;


}
}
Baris 287: Baris 253:




.mw-parser-output .featured-item p{
.featured-item p{


     max-width:250px;
     max-width:240px;


     margin:5px auto;
     margin:0 auto;


     font-size:14px;
     font-size:14px;


     line-height:1.45;
     line-height:1.55;


}
}
Baris 306: Baris 272:




.mw-parser-output .featured-item a{
.featured-item a{


     display:inline-block;
     display:inline-block;


     margin-top:10px;
     margin-top:15px;


     color:#c79b2b;
     color:#c79b2b;
Baris 321: Baris 287:




.featured-item a:hover{


/* =====================================
     color:#006b54;
  JELAJAH PENGETAHUAN
===================================== */
 
 
.me-explore{
 
     display:flex;
 
    justify-content:center;
 
    gap:12px;
 
    margin:25px auto;


}
}
Baris 341: Baris 295:




.me-item{
/* =====================================
  SECOND SECTION
===================================== */


    width:300px;


    text-align:center;
.featured-grid + h2{


}
     margin-top:30px;
 
 
 
.me-explore-card{
 
    height:140px;
 
    background:#f8f6ef;
 
    border:1px solid #ddd;
 
    border-radius:8px;
 
    display:flex;
 
    justify-content:center;
 
    align-items:center;
 
}
 
 
 
.me-explore-card img{
 
    max-width:110px;
 
     max-height:110px;


}
}
Baris 388: Baris 315:
@media(max-width:900px){
@media(max-width:900px){


 
     .featured-grid{
     .mw-parser-output .featured-grid,
    .me-explore{


         flex-wrap:wrap;
         flex-wrap:wrap;
Baris 404: Baris 329:




     .me-hero-image,
     .me-hero{
    .me-hero-image img{


         height:150px;
         padding:20px;


     }
     }




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


         padding:15px;
         font-size:36px;


     }
     }




     .me-hero h1{
     .me-hero h3.tagline{


         font-size:36px;
         font-size:20px;


     }
     }




     .me-hero .tagline{
     .me-hero-image img{


         font-size:18px;
         height:160px;


     }
     }




     .mw-parser-output .featured-item,
     .featured-item{
    .me-item{


         width:100%;
         width:100%;


     }
     }


}
}

Revisi per 10 September 2026 05.11

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


/* =========================
   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 BANNER
===================================== */


.me-hero-image{

    width:100%;

    margin:25px auto 0;

    text-align:center;

}



.me-hero-image img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}



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


.me-hero{

    background:#f8f6ef;

    border:1px solid #ddd;

    border-radius:12px;

    text-align:center;

    margin:0 auto 45px;

    padding:25px 40px 35px;

}



.me-hero h1{

    font-family:Georgia,serif;

    font-size:54px;

    font-weight:normal;

    color:#006b54;

    margin:0 auto 15px;

    padding-bottom:10px;

    border-bottom:1px solid #ccc;

    max-width:850px;

}



.me-hero h3.tagline{

    font-size:24px;

    font-weight:bold;

    color:#24343b;

    margin:25px 0 15px;

}



.me-hero p{

    font-size:17px;

    line-height:1.6;

    max-width:850px;

    margin:15px auto;

}



/* =====================================
   FEATURED GRID
   Pengetahuan Pilihan
===================================== */


.featured-grid{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:12px;

    margin:25px auto 45px;

}



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


.featured-item{

    width:300px;

    flex:none;

    text-align:center;

}



/* =====================================
   IMAGE BOX
   Border hanya gambar
===================================== */


.featured-image{

    height:130px;

    background:#f8f6ef;

    border:1px solid #ddd;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.featured-image img{

    max-width:120px;

    max-height:120px;

    width:auto;

    height:auto;

    object-fit:contain;

}



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


.featured-item h3{

    color:#006b54;

    font-size:21px;

    margin:15px 0 10px;

}



/* =====================================
   DESCRIPTION
===================================== */


.featured-item p{

    max-width:240px;

    margin:0 auto;

    font-size:14px;

    line-height:1.55;

}



/* =====================================
   LINK
===================================== */


.featured-item a{

    display:inline-block;

    margin-top:15px;

    color:#c79b2b;

    font-weight:bold;

    text-decoration:none;

}


.featured-item a:hover{

    color:#006b54;

}



/* =====================================
   SECOND SECTION
===================================== */


.featured-grid + h2{

    margin-top:30px;

}



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


@media(max-width:900px){

    .featured-grid{

        flex-wrap:wrap;

    }


}



@media(max-width:700px){


    .me-hero{

        padding:20px;

    }


    .me-hero h1{

        font-size:36px;

    }


    .me-hero h3.tagline{

        font-size:20px;

    }


    .me-hero-image img{

        height:160px;

    }


    .featured-item{

        width:100%;

    }

}