MediaWiki:Common.css: Perbedaan antara revisi
Tampilan
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
||
| Baris 1: | Baris 1: | ||
/* ===================================== | /* ===================================== | ||
MALIKI ENCYCLOPEDIA | MALIKI ENCYCLOPEDIA | ||
Common.css FINAL | Common.css v12 FINAL | ||
World History Inspired Style | |||
===================================== */ | ===================================== */ | ||
/* | /* ========================= | ||
GLOBAL | GLOBAL | ||
========================= */ | |||
body{ | body{ | ||
background:# | background:#f5f8f7; | ||
color:#24343b; | color:#24343b; | ||
} | } | ||
| Baris 32: | Baris 32: | ||
/* | /* ========================= | ||
HOME CONTAINER | HOME CONTAINER | ||
========================= */ | |||
.me-home{ | .me-home{ | ||
| Baris 47: | Baris 47: | ||
/* ===================================== | /* ===================================== | ||
HERO | HERO BANNER | ||
===================================== */ | ===================================== */ | ||
.me-hero{ | .me-hero-image{ | ||
width:100%; | |||
margin:25px auto 0; | |||
margin: | |||
text-align:center; | text-align:center; | ||
| Baris 67: | Baris 61: | ||
} | } | ||
| Baris 104: | Baris 82: | ||
.me-hero | .me-hero{ | ||
background:#f8f6ef; | |||
border:1px solid #ddd; | |||
border-radius:12px; | |||
text-align:center; | |||
margin:0 auto 45px; | |||
padding:25px 40px 35px; | |||
} | |||
| Baris 119: | Baris 104: | ||
font-family:Georgia,serif; | font-family:Georgia,serif; | ||
font-size: | font-size:54px; | ||
font-weight: | font-weight:normal; | ||
color:#006b54; | color:#006b54; | ||
margin:0 auto 15px; | |||
margin:0 auto | |||
padding-bottom: | padding-bottom:10px; | ||
border-bottom:1px solid #ccc; | border-bottom:1px solid #ccc; | ||
| Baris 139: | Baris 122: | ||
.me-hero h3.tagline{ | |||
font-size:24px; | |||
font-weight:bold; | |||
font- | |||
color:#24343b; | color:#24343b; | ||
margin: | margin:25px 0 15px; | ||
} | } | ||
| Baris 154: | Baris 136: | ||
.me-hero p{ | |||
.me-hero | |||
font-size: | font-size:17px; | ||
line-height:1. | line-height:1.6; | ||
max-width:850px; | max-width:850px; | ||
margin: | margin:15px auto; | ||
} | } | ||
| Baris 172: | Baris 151: | ||
/* ===================================== | /* ===================================== | ||
FEATURED GRID | |||
Pengetahuan Pilihan | |||
===================================== */ | ===================================== */ | ||
. | .featured-grid{ | ||
display:flex; | |||
display:flex | |||
justify-content:center; | justify-content:center; | ||
| Baris 201: | Baris 166: | ||
gap:12px; | gap:12px; | ||
margin: | margin:25px auto 45px; | ||
} | } | ||
| Baris 207: | Baris 172: | ||
/* | /* ===================================== | ||
FEATURED ITEM | |||
===================================== */ | |||
.featured-item{ | |||
width:300px; | width:300px; | ||
| Baris 223: | Baris 190: | ||
/* ===================================== | /* ===================================== | ||
IMAGE BOX | IMAGE BOX | ||
Border hanya gambar | |||
===================================== */ | ===================================== */ | ||
.featured-image{ | |||
height: | height:130px; | ||
background:#f8f6ef; | background:#f8f6ef; | ||
| Baris 242: | Baris 210: | ||
align-items:center; | align-items:center; | ||
} | } | ||
| Baris 249: | Baris 215: | ||
.featured-image img{ | |||
max-width: | max-width:120px; | ||
max-height: | max-height:120px; | ||
width:auto; | width:auto; | ||
| Baris 270: | Baris 236: | ||
.featured-item h3{ | |||
color:#006b54; | color:#006b54; | ||
font-size: | font-size:21px; | ||
margin: | margin:15px 0 10px; | ||
} | } | ||
| Baris 287: | Baris 253: | ||
.featured-item p{ | |||
max-width: | max-width:240px; | ||
margin: | margin:0 auto; | ||
font-size:14px; | font-size:14px; | ||
line-height:1. | line-height:1.55; | ||
} | } | ||
| Baris 306: | Baris 272: | ||
.featured-item a{ | |||
display:inline-block; | display:inline-block; | ||
margin-top: | margin-top:15px; | ||
color:#c79b2b; | color:#c79b2b; | ||
| Baris 321: | Baris 287: | ||
.featured-item a:hover{ | |||
color:#006b54; | |||
} | } | ||
| Baris 341: | Baris 295: | ||
/* ===================================== | |||
SECOND SECTION | |||
===================================== */ | |||
.featured-grid + h2{ | |||
margin-top:30px; | |||
} | } | ||
| Baris 388: | Baris 315: | ||
@media(max-width:900px){ | @media(max-width:900px){ | ||
.featured-grid{ | |||
flex-wrap:wrap; | flex-wrap:wrap; | ||
| Baris 404: | Baris 329: | ||
.me-hero | .me-hero{ | ||
padding:20px; | |||
} | } | ||
.me-hero | .me-hero h1{ | ||
font-size:36px; | |||
} | } | ||
.me-hero | .me-hero h3.tagline{ | ||
font-size: | font-size:20px; | ||
} | } | ||
.me-hero | .me-hero-image img{ | ||
height:160px; | |||
} | } | ||
.featured-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%;
}
}