Lompat ke isi

MediaWiki:Common.css: Perbedaan antara revisi

Dari Maliki Encyclopedia
← Revisi sebelumnyaRevisi selanjutnya →

ADMIN-ency (bicara | kontrib)

3 grup pengguna
959 suntingan
Tidak ada ringkasan suntingan
Tidak ada ringkasan suntingan
Baris 1: Baris 1:
/* =====================================
/* =====================================
   MALIKI ENCYCLOPEDIA
   MALIKI ENCYCLOPEDIA
   Common.css Minimal Stabil v1.0
   Common.css Stable v2.0
===================================== */
===================================== */




/* Warna dasar */
/* =========================
  GLOBAL
========================= */
 
body {
body {
     background:#f5f8f7;
     background:#f5f8f7;
Baris 12: Baris 15:




/* Judul halaman */
.firstHeading {
.firstHeading {
     color:#004f40;
     color:#004f40;
Baris 18: Baris 20:




/* Link */
a {
a {
     color:#1f5f8b;
     color:#1f5f8b;
}
}


a:hover {
a:hover {
Baris 28: Baris 30:




/* =====================================
  MALIKI HEADER MENU
===================================== */


#maliki-header-menu {
/* =========================
     width:100%;
  MALIKI HOME CONTAINER
     box-sizing:border-box;
========================= */
 
.me-home{
     max-width:1200px;
     margin:auto;
}
 
 
 
/* =========================
  HERO
========================= */
 
.me-hero{
 
    background:#f8f6ef;
 
    padding:50px;
 
    border-radius:15px;
 
    border:1px solid #ddd;
 
     text-align:center;
     text-align:center;
     padding:12px;
 
     margin-top:10px;
     margin:30px 0 45px 0;
     margin-bottom:20px;
 
     border-top:1px solid #e5e5e5;
}
     border-bottom:1px solid #e5e5e5;
 
 
.me-hero h1{
 
     font-family:Georgia,serif;
 
     font-size:38px;
 
     color:#006b5b;
 
     margin-bottom:15px;
 
}
}


#maliki-header-menu a {
 
     color:#00695c;
.me-hero p{
     text-decoration:none;
 
     font-weight:600;
     font-size:18px;
     margin:0 10px;
 
     line-height:1.7;
 
     max-width:800px;
 
     margin:10px auto;
 
}
}


#maliki-header-menu a:hover {
 
     color:#b8860b;
 
/* =========================
  EXPLORE MENU
========================= */
 
 
.me-explore{
 
    display:grid;
 
    grid-template-columns:repeat(5,1fr);
 
    gap:25px;
 
     margin-bottom:50px;
 
}
}


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


.knowledge-card {
 
     border:1px solid #ddd;
.me-explore-card{
    padding:20px;
 
     box-sizing:border-box;
     background:#006b5b;
    background:#ffffff;
 
    margin:15px 0;
     min-height:140px;
 
     border-radius:12px;
     border-radius:12px;
     box-shadow:0 2px 8px rgba(0,0,0,0.08);
 
     color:white;
 
    display:flex;
 
    flex-direction:column;
 
    justify-content:center;
 
    align-items:center;
 
    text-align:center;
 
    transition:.3s;
 
}
}




.knowledge-card-title {
 
     font-size:22px;
.me-explore-card:hover{
     font-weight:700;
 
    color:#00695c;
     background:#c79b2b;
 
     transform:translateY(-6px);
 
}
}




.knowledge-card-type {
 
     color:#b8860b;
.me-explore-card a{
     font-weight:600;
 
     color:white;
 
    font-size:18px;
 
     font-weight:bold;
 
    text-decoration:none;
 
}
}




.knowledge-card-description {
 
     line-height:1.6;
.me-icon{
 
    font-size:35px;
 
     margin-bottom:12px;
 
}
}


/* =====================================
  INFOBOX KNOWLEDGE
===================================== */


.infobox {
 
     border:1px solid #ddd;
/* =========================
  SECTION TITLE
========================= */
 
 
.me-home h2{
 
    color:#006b5b;
 
     border-bottom:1px solid #ddd;
 
    padding-bottom:10px;
 
    margin-top:50px;
 
}
}
/* =====================================
  KNOWLEDGE CARD LINK
===================================== */


.knowledge-card-link a {
    color:#00695c;
    font-weight:bold;
    text-decoration:none;
}


/* =====================================
  JELAJAH PENGETAHUAN LAYOUT
===================================== */


.knowledge-grid {
/* =========================
  CARD GRID
========================= */
 
 
.me-grid{
 
     display:grid;
     display:grid;
     grid-template-columns:repeat(3, 1fr);
 
     gap:25px;
     grid-template-columns:repeat(3,1fr);
     width:100%;
 
     gap:30px;
 
     margin:30px 0;
 
}
}




.knowledge-grid .knowledge-card {
 
     width:100%;
/* =========================
     margin: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;
 
}
}


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


.knowledge-card {
 
     min-height:420px;
.me-card:hover{
 
     transform:translateY(-5px);
 
    box-shadow:0 8px 18px rgba(0,0,0,.15);
 
}
}


.knowledge-card-image {
    width:calc(100% + 40px);
    height:180px;
    margin:-20px -20px 20px -20px;
    overflow:hidden;
}


.knowledge-card-image img {
 
.me-card img{
 
     width:100%;
     width:100%;
     height:180px;
     height:180px;
     object-fit:cover;
     object-fit:cover;
     display:block;
 
     border-radius:10px;
 
}
}


/* =====================================
  KNOWLEDGE SECTION
===================================== */


.knowledge-section {
 
     margin-bottom:40px;
.me-card a{
 
     text-decoration:none;
 
}
}


.knowledge-section h2 {
 
     color:#00695c;
 
     border-bottom:1px solid #ddd;
/* =========================
     padding-bottom:8px;
  FEATURED KNOWLEDGE
  (World History Style)
========================= */
 
 
.me-featured{
 
     display:grid;
 
     grid-template-columns:2fr 1fr;
 
     gap:30px;
 
    margin:40px 0;
 
}
}




/* Maliki Encyclopedia Card Layout */


.me-grid {
.me-feature-main{
display:grid;
 
grid-template-columns:repeat(3, 1fr);
    background:white;
gap:24px;
 
margin:20px 0;
    border:1px solid #ddd;
 
    border-radius:15px;
 
    padding:25px;
 
}
}


.me-card {
 
width:220px;
 
min-height:320px;
.me-feature-main img{
border:1px solid #ddd;
 
border-radius:10px;
    width:100%;
background:#ffffff;
 
padding:15px;
    max-height:420px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
 
    object-fit:cover;
 
    border-radius:12px;
 
}
}


.me-grid {
display:flex;
gap:24px;
flex-wrap:wrap;
}




.me-card {
.me-feature-side{
width:220px;
border:1px solid #ddd;
border-radius:10px;
background:#fff;
padding:15px;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}


    display:flex;


.me-card img {
    flex-direction:column;
width:100%;
height:150px;
object-fit:cover;
border-radius:8px;
}


/* Maliki Encyclopedia Hero */
    gap:20px;


.me-hero {
background:#f7f5ef;
padding:40px;
margin:30px 0;
border-radius:12px;
text-align:center;
border:1px solid #ddd;
}
}


.me-hero h1 {
font-size:38px;
color:#006b54;
margin-bottom:15px;
}


.me-hero p {
font-size:18px;
line-height:1.6;
max-width:800px;
margin:auto;
}


/* Maliki Explore Navigation */
.me-feature-side div{
 
    background:#f8f6ef;


.me-explore {
    border:1px solid #ddd;
display:flex;
gap:20px;
flex-wrap:wrap;
margin:30px 0;
}


.me-explore-card {
    border-radius:12px;
flex:1;
min-width:180px;
background:#006b54;
padding:25px;
border-radius:12px;
text-align:center;
}


.me-explore-card a {
    padding:25px;
color:white;
text-decoration:none;
font-size:18px;
font-weight:bold;
}


.me-explore-card:hover {
background:#008060;
}
}


/* =====================================
  MALIKI ENCYCLOPEDIA HOMEPAGE
  Hero Section
===================================== */


.me-hero {
background:#f7f5ef;
padding:40px;
margin:30px 0;
border-radius:12px;
text-align:center;
border:1px solid #ddd;
}


.me-hero h1 {
/* =========================
font-size:38px;
  KNOWLEDGE CARD
color:#006b54;
========================= */
margin-bottom:15px;
}


.me-hero p {
font-size:18px;
line-height:1.6;
max-width:800px;
margin:10px auto;
}


.knowledge-card{


/* =====================================
    background:white;
  MENU JELAJAH PENGETAHUAN
===================================== */


.me-explore {
    border:1px solid #ddd;
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:flex-start;
margin:30px 0;
}


    border-radius:12px;


.me-explore-card {
    padding:20px;
background:#006b54;
border-radius:12px;
padding:25px;
width:200px;
text-align:center;
transition:0.3s;
}


    margin-bottom:20px;


.me-explore-card a {
color:white;
text-decoration:none;
font-size:18px;
font-weight:bold;
display:block;
}
}




.me-explore-card:hover {
background:#008060;
transform:translateY(-5px);
}


.knowledge-card-title{
    font-size:22px;


/* =====================================
    font-weight:bold;
  KARTU ENSIKLOPEDIA
===================================== */


.me-grid {
    color:#00695c;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin:30px 0;


}
}




.me-card {
width:220px;
border:1px solid #ddd;
border-radius:10px;
background:#fff;
padding:15px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}


.knowledge-card-description{
    line-height:1.7;


.me-card img {
width:100%;
height:150px;
object-fit:cover;
border-radius:8px;
}
}


.me-card a {
text-decoration:none;
}


.me-card:hover {
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}


/* Maliki Encyclopedia Explore Menu */
/* =========================
  RESPONSIVE
========================= */




.me-explore-card {
@media(max-width:900px){
background:#006b54;
border-radius:12px;
padding:25px 15px;
width:160px;
height:90px;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin:10px;
transition:0.3s;
}


.me-explore-card a {
color:white;
font-weight:bold;
font-size:16px;
text-decoration:none;
}


.me-explore{


.me-explore-card:hover {
grid-template-columns:repeat(2,1fr);
background:#c79b2b;
transform:translateY(-6px);
}


.me-icon {
font-size:32px;
display:block;
margin-bottom:8px;
}
}


.me-grid + h2,
.me-grid + div {
clear:both;
}


/* ===========================
.me-grid{
  MALIKI ENCYCLOPEDIA HOME
=========================== */


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


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




/* HERO */
.me-featured{
 
grid-template-columns:1fr;


.me-hero{
background:#f8f6ef;
padding:50px;
border-radius:15px;
text-align:center;
border:1px solid #ddd;
margin-bottom:40px;
}
}




.me-hero h1{
font-family:Georgia,serif;
font-size:38px;
color:#006b5b;
}
}






/* EXPLORE */
@media(max-width:600px){
 


.me-explore{
.me-explore{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:25px;
margin-bottom:50px;
}


.me-explore-card{
grid-template-columns:1fr;
background:#006b5b;
color:white;
padding:30px 15px;
border-radius:12px;
text-align:center;
transition:.3s;
}


.me-explore-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,.2);
}
}


.me-explore-card a{
color:white;
}


.me-icon{
.me-grid{
font-size:35px;
display:block;
margin-bottom:15px;
}


.me-featured{
display:grid;
grid-template-columns:1fr;
grid-template-columns:1fr;
gap:20px;
 
}
}


.me-feature-main{
 
border:1px solid #ddd;
.me-hero{
border-radius:15px;
 
padding:25px;
padding:25px;
background:white;
 
}
}


.me-feature-main img{
 
width:100%;
.me-hero h1{
border-radius:10px;
 
font-size:28px;
 
}
}


.me-feature-side{
display:flex;
flex-direction:column;
gap:20px;
}


.me-feature-side div{
background:#f8f6ef;
padding:25px;
border-radius:12px;
border:1px solid #ddd;
}
}

Revisi per 9 September 2026 15.53

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

}


}
Diperoleh dari "https://ency.uin-malang.ac.id/index.php?title=MediaWiki:Common.css&oldid=459"