MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 24: | Line 24: | ||
@font-face { | @font-face { | ||
font-family: "TaipediaShan"; | font-family: "TaipediaShan"; | ||
src: url("/resources/assets/fonts/Shan.ttf | src: url("/resources/assets/fonts/Shan.ttf") | ||
format("truetype"); | format("truetype"); | ||
font-style: normal; | font-style: normal; | ||
Revision as of 19:20, 8 October 2026
/* ==========================================
TAIPEDIA DIGITAL LIBRARY
Complete MediaWiki CSS
Font: Shan.ttf
Applies to:
- Article/post content
- Library cards
- Library homepage
Does not change:
- Navigation
- Sidebar
- Search
- MediaWiki interface
========================================== */
/* ==========================================
1. CUSTOM SHAN FONT
========================================== */
@font-face {
font-family: "TaipediaShan";
src: url("/resources/assets/fonts/Shan.ttf")
format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
/* ==========================================
2. ARTICLE / POST CONTENT
========================================== */
/* Main article content */
.mw-parser-output {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
font-size: 17px;
line-height: 1.9;
}
/* Paragraphs and inline content */
.mw-parser-output p,
.mw-parser-output span,
.mw-parser-output div,
.mw-parser-output a,
.mw-parser-output strong,
.mw-parser-output em {
font-family: inherit;
}
/* Article headings */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
line-height: 1.7;
}
/* Article lists */
.mw-parser-output ul,
.mw-parser-output ol,
.mw-parser-output li,
.mw-parser-output dl,
.mw-parser-output dd,
.mw-parser-output dt {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
line-height: 1.9;
}
/* Article tables */
.mw-parser-output table,
.mw-parser-output td,
.mw-parser-output th {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
}
/* Blockquotes */
.mw-parser-output blockquote {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
line-height: 1.9;
}
/* Keep code readable */
.mw-parser-output pre,
.mw-parser-output code,
.mw-parser-output .mw-code {
font-family: monospace !important;
}
/* ==========================================
3. LIBRARY HOMEPAGE
========================================== */
.mw-parser-output .library-home {
max-width: 1200px;
margin: 0 auto;
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
}
/* Force Shan font inside library cards */
.mw-parser-output .library-home *,
.mw-parser-output .library-card *,
.mw-parser-output .library-grid * {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
}
/* ==========================================
4. WELCOME BANNER
========================================== */
.mw-parser-output .library-hero {
background: linear-gradient(
135deg,
#142d4e 0%,
#2459a6 100%
);
color: #ffffff;
padding: 55px 30px;
text-align: center;
border-radius: 18px;
margin-bottom: 35px;
}
.mw-parser-output .library-hero h1 {
color: #ffffff;
font-size: 36px;
font-weight: 400;
margin: 0 0 15px;
padding: 0;
border: none;
line-height: 1.7;
}
.mw-parser-output .library-hero p {
color: #ffffff;
font-size: 17px;
line-height: 1.9;
margin: 0;
}
/* ==========================================
5. LIBRARY SECTION TITLE
========================================== */
.mw-parser-output .library-home > h2 {
font-size: 26px;
font-weight: 400;
color: #183153;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 12px;
margin: 30px 0 25px;
line-height: 1.7;
}
/* ==========================================
6. LIBRARY GRID
========================================== */
.mw-parser-output .library-grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
margin: 25px 0 40px;
}
/* ==========================================
7. LIBRARY CARDS
========================================== */
.mw-parser-output .library-card {
display: flex;
flex-direction: column;
background: #ffffff;
color: #183153;
border: 1px solid #dbe4ef;
border-radius: 16px;
padding: 24px;
min-width: 0;
box-sizing: border-box;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.06);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* Card hover */
.mw-parser-output .library-card:hover {
transform: translateY(-5px);
border-color: #2563eb;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.12);
}
/* ==========================================
8. CARD ICON
========================================== */
.mw-parser-output .library-icon {
font-size: 38px;
line-height: 1.4;
margin-bottom: 12px;
}
/* ==========================================
9. CATEGORY NUMBER
========================================== */
.mw-parser-output .library-number {
color: #2563eb;
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 6px;
}
/* ==========================================
10. CARD TITLE — SHAN FONT
========================================== */
.mw-parser-output .library-card h3 {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
font-size: 21px;
font-weight: 400;
line-height: 1.8;
color: #183153;
margin: 8px 0 12px;
padding: 0;
border: none;
overflow-wrap: break-word;
}
/* ==========================================
11. CARD DESCRIPTION
========================================== */
.mw-parser-output .library-card p {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
font-size: 15px;
font-weight: 400;
line-height: 1.9;
color: #64748b;
margin: 0 0 20px;
flex-grow: 1;
}
/* ==========================================
12. CARD LINKS
========================================== */
.mw-parser-output .library-card a {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
display: inline-block;
color: #2563eb;
font-size: 15px;
font-weight: 400;
text-decoration: none;
transition: color 0.2s ease;
}
.mw-parser-output .library-card a:hover {
color: #1e40af;
text-decoration: underline;
}
/* ==========================================
13. CATEGORY PAGE CONTENT
========================================== */
.mw-category,
.mw-category-group,
.mw-category-generated {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
line-height: 1.9;
}
/* Category listing links */
.mw-category a,
.mw-category-group a {
font-family: "TaipediaShan",
"Noto Sans Myanmar",
sans-serif !important;
}
/* ==========================================
14. TABLET RESPONSIVE
========================================== */
@media (max-width: 900px) {
.mw-parser-output .library-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.mw-parser-output .library-card {
padding: 20px;
}
.mw-parser-output .library-hero {
padding: 40px 20px;
}
.mw-parser-output .library-hero h1 {
font-size: 30px;
}
}
/* ==========================================
15. MOBILE RESPONSIVE
========================================== */
@media (max-width: 600px) {
.mw-parser-output {
font-size: 16px;
line-height: 1.85;
}
.mw-parser-output .library-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.mw-parser-output .library-card {
padding: 20px;
border-radius: 14px;
}
.mw-parser-output .library-card h3 {
font-size: 19px;
}
.mw-parser-output .library-card p {
font-size: 14px;
}
.mw-parser-output .library-hero {
padding: 35px 18px;
border-radius: 14px;
}
.mw-parser-output .library-hero h1 {
font-size: 26px;
}
.mw-parser-output .library-hero p {
font-size: 15px;
}
.mw-parser-output .library-home > h2 {
font-size: 22px;
}
}
/* ==========================================
END — TAIPEDIA CSS
========================================== */