MediaWiki:Common.css: Perbedaan antara revisi
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
||
| Baris 1: | Baris 1: | ||
/* ===================================== | /* ===================================== | ||
MALIKI ENCYCLOPEDIA | |||
Common.css v12 FINAL | |||
World History Inspired Style | |||
===================================== */ | ===================================== */ | ||
/* ========================= | /* ========================= | ||
GLOBAL | |||
========================= */ | ========================= */ | ||
body{ | body{ | ||
background:#f5f8f7; | |||
color:#24343b; | |||
} | } | ||
.firstHeading{ | .firstHeading{ | ||
color:#004f40; | |||
} | } | ||
a{ | a{ | ||
color:#1f5f8b; | |||
} | } | ||
a:hover{ | a:hover{ | ||
color:#006b54; | |||
} | } | ||
/* ========================= | /* ========================= | ||
HOME CONTAINER | |||
========================= */ | ========================= */ | ||
.me-home{ | .me-home{ | ||
max-width:1200px; | |||
margin:0 auto; | |||
} | } | ||
/* ===================================== | /* ===================================== | ||
HERO BANNER | |||
===================================== */ | ===================================== */ | ||
.me-hero-image{ | .me-hero-image{ | ||
width:100%; | |||
margin:25px auto 0; | |||
text-align:center; | |||
} | } | ||
.me-hero-image img{ | .me-hero-image img{ | ||
width:100%; | |||
height:220px; | |||
object-fit:cover; | |||
display:block; | |||
} | } | ||
/* ===================================== | /* ===================================== | ||
HERO CONTENT | |||
===================================== */ | ===================================== */ | ||
.me-hero{ | .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{ | .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{ | .me-hero h3.tagline{ | ||
font-size:24px; | |||
font-weight:bold; | |||
color:#24343b; | |||
margin:25px 0 15px; | |||
} | } | ||
.me-hero p{ | .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%; | |||
} | |||
} | |||
/* ===================================== | |||
MALIKI ARTICLE STYLE | |||
===================================== */ | |||
.me-article{ | .me-article{ | ||
max-width:900px; | |||
margin:auto; | |||
} | } | ||
.me-article-header h1{ | .me-article-header h1{ | ||
font-family:Georgia,serif; | |||
font-size:42px; | |||
color:#006b54; | |||
border-bottom:1px solid #ddd; | |||
padding-bottom:15px; | |||
} | } | ||
.me-article-image{ | .me-article-image{ | ||
text-align:center; | |||
margin:25px 0; | |||
} | } | ||
.me-article-image img{ | .me-article-image img{ | ||
max-width:350px; | |||
height:auto; | |||
} | } | ||
.me-summary{ | .me-summary{ | ||
background:#f8f6ef; | |||
border-left:4px solid #c79b2b; | |||
padding:20px; | |||
margin:30px 0; | |||
} | } | ||
.me-section{ | .me-section{ | ||
margin:35px 0; | |||
} | } | ||
.me-section h2{ | .me-section h2{ | ||
color:#006b54; | |||
border-bottom:1px solid #ddd; | |||
padding-bottom:8px; | |||
} | } | ||
| Baris 171: | Baris 898: | ||
/* ===================================== | /* ===================================== | ||
RELASI PENGETAHUAN | |||
===================================== */ | ===================================== */ | ||
/* ================================ | |||
NAVIGASI PENGETAHUAN | |||
================================ */ | |||
.me-navigation{ | .me-navigation{ | ||
margin:35px 0; | |||
} | } | ||
.me-navigation h2{ | .me-navigation h2{ | ||
color:#006b54; | |||
font-size:24px; | |||
margin-bottom:25px; | |||
border-bottom:1px solid #ddd; | |||
padding-bottom:10px; | |||
} | } | ||
.me-navigation-table{ | .me-navigation-table{ | ||
width:100%; | |||
border-collapse:collapse; | |||
margin-top:20px; | |||
} | } | ||
.me-navigation-table th{ | .me-navigation-table th{ | ||
width:180px; | |||
text-align:left; | |||
background:#f5f3eb; | |||
padding:12px; | |||
border:1px solid #ddd; | |||
font-weight:bold; | |||
} | } | ||
.me-navigation-table td{ | .me-navigation-table td{ | ||
padding:12px; | |||
border:1px solid #ddd; | |||
} | } | ||
.me-navigation-table a{ | .me-navigation-table a{ | ||
color:#1f5f8b; | |||
} | } | ||
.me-navigation-table a:hover{ | .me-navigation-table a:hover{ | ||
color:#006b54; | |||
} | } | ||
.me-knowledge-navigation{ | .me-knowledge-navigation{ | ||
margin-top:35px; | |||
margin-bottom:35px; | |||
} | } | ||
| Baris 228: | Baris 1.068: | ||
/* ===================================== | /* ===================================== | ||
JELAJAH PENGETAHUAN | |||
===================================== */ | ===================================== */ | ||
.me-grid { | |||
.me-grid{ | |||
display:grid !important; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)) !important; | |||
gap:20px; | |||
width:100%; | |||
margin:20px 0 35px; | |||
align-items:stretch; | |||
} | |||
.me-card{ | |||
border:1px solid #d9e2df; | |||
background:#fff; | |||
padding:16px; | |||
box-sizing:border-box; | |||
border-radius:10px; | |||
box-shadow:0 2px 6px rgba(0,0,0,0.05); | |||
width:100%; | |||
min-width:0; | |||
} | |||
.me-card img{ | |||
width:100%; | |||
max-width:250px; | |||
height:180px; | |||
object-fit:contain; | |||
display:block; | |||
margin:0 auto 14px; | |||
} | |||
.me-card a{ | |||
color:#006b54; | |||
text-decoration:none; | |||
font-weight:bold; | |||
} | } | ||
.me-card { | |||
.me-card a:hover{ | |||
color:#c79b2b; | |||
} | |||
@media(max-width:900px){ | |||
.me-grid{ | |||
grid-template-columns:repeat(2, minmax(0, 1fr)); | |||
} | } | ||
} | } | ||
@media (max-width: | @media(max-width:600px){ | ||
.me-grid{ | |||
grid-template-columns:1fr; | |||
} | } | ||
} | } | ||
Revisi per 13 September 2026 14.25
/* =====================================
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%;
}
}
/* =====================================
MALIKI ARTICLE STYLE
===================================== */
.me-article{
max-width:900px;
margin:auto;
}
.me-article-header h1{
font-family:Georgia,serif;
font-size:42px;
color:#006b54;
border-bottom:1px solid #ddd;
padding-bottom:15px;
}
.me-article-image{
text-align:center;
margin:25px 0;
}
.me-article-image img{
max-width:350px;
height:auto;
}
.me-summary{
background:#f8f6ef;
border-left:4px solid #c79b2b;
padding:20px;
margin:30px 0;
}
.me-section{
margin:35px 0;
}
.me-section h2{
color:#006b54;
border-bottom:1px solid #ddd;
padding-bottom:8px;
}
/* =====================================
RELASI PENGETAHUAN
===================================== */
/* ================================
NAVIGASI PENGETAHUAN
================================ */
.me-navigation{
margin:35px 0;
}
.me-navigation h2{
color:#006b54;
font-size:24px;
margin-bottom:25px;
border-bottom:1px solid #ddd;
padding-bottom:10px;
}
.me-navigation-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}
.me-navigation-table th{
width:180px;
text-align:left;
background:#f5f3eb;
padding:12px;
border:1px solid #ddd;
font-weight:bold;
}
.me-navigation-table td{
padding:12px;
border:1px solid #ddd;
}
.me-navigation-table a{
color:#1f5f8b;
}
.me-navigation-table a:hover{
color:#006b54;
}
.me-knowledge-navigation{
margin-top:35px;
margin-bottom:35px;
}
/* =====================================
JELAJAH PENGETAHUAN
===================================== */
.me-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:20px;
width:100%;
margin:20px 0 35px;
align-items:stretch;
}
.me-card{
border:1px solid #d9e2df;
background:#fff;
padding:16px;
box-sizing:border-box;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
width:100%;
min-width:0;
}
.me-card img{
width:100%;
max-width:250px;
height:180px;
object-fit:contain;
display:block;
margin:0 auto 14px;
}
.me-card a{
color:#006b54;
text-decoration:none;
font-weight:bold;
}
.me-card a:hover{
color:#c79b2b;
}
@media(max-width:900px){
.me-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
@media(max-width:600px){
.me-grid{
grid-template-columns:1fr;
}
}