MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* ======= MAIN CONTAINER ======= */ | ||
.main-container { | .main-container { | ||
width: 100%; | width: 100%; | ||
| Line 6: | Line 6: | ||
} | } | ||
/* HERO SECTION (Full-width, centered) */ | /* ======= HERO SECTION (Full-width, centered) ======= */ | ||
.hero-section { | .hero-section { | ||
width: | width: 100%; | ||
padding: | padding: 30px 15px; /* Tối ưu cho mobile */ | ||
background: linear-gradient(135deg, #ffefd5, #ffe4b5); | background: linear-gradient(135deg, #ffefd5, #ffe4b5); | ||
text-align: center; | text-align: center; | ||
| Line 15: | Line 15: | ||
border-radius: 5px; | border-radius: 5px; | ||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | ||
box-sizing: border-box; | |||
max-width: 100%; | |||
} | } | ||
.hero-title { | .hero-title { | ||
font-size: | font-size: 24px; /* Giảm size để cân đối trên mobile */ | ||
font-weight: bold; | font-weight: bold; | ||
color: #333; | color: #333; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
word-wrap: break-word; | |||
} | |||
.hero-section p { | |||
font-size: 16px; /* Nội dung gọn hơn trên mobile */ | |||
max-width: 90%; | |||
margin: 0 auto; | |||
line-height: 1.5; | |||
} | } | ||
/* | /* ======= MIDDLE SECTION (Using CSS Grid) ======= */ | ||
.middle-section { | .middle-section { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr; /* | grid-template-columns: 1fr; /* 1 column trên mobile */ | ||
gap: 20px; | gap: 20px; | ||
width: 100%; | width: 100%; | ||
| Line 33: | Line 44: | ||
} | } | ||
/* | /* COLUMNS */ | ||
.middle-section .column { | .middle-section .column { | ||
width: 100%; | width: 100%; | ||
| Line 57: | Line 68: | ||
} | } | ||
/* | /* ======= ICONS ======= */ | ||
.icon { | .icon { | ||
font-size: 30px; | font-size: 30px; | ||
| Line 64: | Line 75: | ||
} | } | ||
/* | /* ======= SECTION TITLE ======= */ | ||
.section-title { | .section-title { | ||
font-size: 18px; | font-size: 18px; | ||
| Line 76: | Line 87: | ||
} | } | ||
/* | /* Hiệu ứng gạch chân tinh tế dưới tiêu đề */ | ||
.section-title::after { | |||
content: ""; | |||
display: block; | |||
width: 40px; | |||
height: 3px; | |||
background-color: #ff9800; | |||
margin: 5px auto; | |||
border-radius: 3px; | |||
} | |||
/* ======= SECTION CONTENT ======= */ | |||
.section-content { | .section-content { | ||
text-align: left; | text-align: left; | ||
| Line 82: | Line 104: | ||
} | } | ||
/* | /* ======= FOOTER SECTION ======= */ | ||
.footer-section { | .footer-section { | ||
width: 100%; | width: 100%; | ||
| Line 93: | Line 115: | ||
} | } | ||
/* | /* ======= RESPONSIVE DESIGN ======= */ | ||
@media screen and (min-width: 768px) { | @media screen and (min-width: 768px) { | ||
.middle-section { | .middle-section { | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, 1fr); | ||
} | |||
} | |||
@media screen and (max-width: 768px) { | |||
.hero-section { | |||
padding: 20px 10px; /* Giảm padding thêm cho mobile */ | |||
} | |||
.hero-title { | |||
font-size: 22px; /* Giảm thêm một chút cho màn hình nhỏ */ | |||
} | |||
.hero-section p { | |||
font-size: 14px; | |||
max-width: 100%; | |||
} | } | ||
} | } | ||