|
|
| Line 1: |
Line 1: |
|
| |
|
| /* ========================================= | | /* TAIPEDIA HOMEPAGE LAYOUT FIX */ |
| TAIPEDIA HOMEPAGE FIXES
| | /* Does not change fonts */ |
| Font configuration is unchanged
| |
| ========================================= */
| |
|
| |
|
| /* Main homepage container */
| | .mw-parser-output .library-home .kh-home { |
| | |
| .mw-parser-output .kh-home { | |
| width: 100%; | | width: 100%; |
| max-width: 1200px; | | max-width: 1200px; |
| margin: 0 auto; | | margin: 0 auto; |
| box-sizing: border-box; | | min-width: 0; |
| } | | } |
|
| |
|
| .mw-parser-output .kh-home *,
| | /* Compact hero */ |
| .mw-parser-output .kh-home *::before,
| | .mw-parser-output .library-home .kh-hero { |
| .mw-parser-output .kh-home *::after {
| | padding: 25px 20px; |
| box-sizing: border-box;
| | border-radius: 14px; |
| }
| |
| | |
| /* ========================================= | |
| 1. COMPACT HERO
| |
| ========================================= */
| |
| | |
| .mw-parser-output .kh-home .kh-hero { | |
| padding: 30px 20px; | |
| margin-bottom: 0;
| |
| border-radius: 16px; | |
| }
| |
| | |
| .mw-parser-output .kh-hero-inner {
| |
| width: 100%;
| |
| max-width: 720px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .mw-parser-output .kh-eyebrow {
| |
| font-size: 11px;
| |
| line-height: 1.5;
| |
| margin-bottom: 7px;
| |
| } | | } |
|
| |
|
| | /* Remove default heading decorations */ |
| .mw-parser-output .kh-home .kh-hero h1 { | | .mw-parser-output .kh-home .kh-hero h1 { |
| font-size: clamp(25px, 3.5vw, 34px); | | border: none; |
| line-height: 1.5;
| |
| margin: 0 0 8px;
| |
| padding: 0; | | padding: 0; |
| border: 0;
| | margin: 0 0 10px; |
| color: #ffffff;
| |
| }
| |
| | |
| .mw-parser-output .kh-home .kh-hero p {
| |
| color: #cbd5e1;
| |
| font-size: 14px;
| |
| line-height: 1.7;
| |
| margin: 0 0 15px; | |
| } | | } |
|
| |
|
| /* Hero navigation */ | | /* Category grid */ |
| | | .mw-parser-output .kh-home .kh-grid { |
| .mw-parser-output .kh-hero-links {
| |
| margin-top: 12px;
| |
| line-height: 1.8;
| |
| }
| |
| | |
| .mw-parser-output .kh-hero-links a {
| |
| color: #ffffff;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .mw-parser-output .kh-hero-links a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* =========================================
| |
| 2. SEARCH INPUT FIX
| |
| ========================================= */
| |
| | |
| .mw-parser-output .kh-search {
| |
| width: 100%;
| |
| max-width: 470px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .mw-parser-output .kh-search .mw-inputbox-form {
| |
| display: flex;
| |
| align-items: stretch;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| gap: 8px;
| |
| }
| |
| | |
| .mw-parser-output .kh-search input[type="text"],
| |
| .mw-parser-output .kh-search input[type="search"],
| |
| .mw-parser-output .kh-search .mw-inputbox-input {
| |
| flex: 1 1 220px;
| |
| min-width: 0;
| |
| max-width: 100%;
| |
| padding: 10px 14px;
| |
| background: #ffffff;
| |
| color: #1e293b;
| |
| border: 1px solid #cbd5e1;
| |
| border-radius: 9px;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .mw-parser-output .kh-search input[type="submit"] {
| |
| padding: 10px 18px;
| |
| background: #2563eb;
| |
| color: #ffffff;
| |
| border: 0;
| |
| border-radius: 9px;
| |
| cursor: pointer;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .mw-parser-output .kh-search input[type="submit"]:hover {
| |
| background: #1d4ed8;
| |
| }
| |
| | |
| /* =========================================
| |
| 3. SECTION SPACING
| |
| ========================================= */
| |
| | |
| .mw-parser-output .kh-home .kh-section { | |
| margin-top: 30px;
| |
| }
| |
| | |
| .mw-parser-output .kh-section-head {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| margin-bottom: 16px;
| |
| }
| |
| | |
| .mw-parser-output .kh-section-head h2 {
| |
| color: #17263c;
| |
| font-size: 23px;
| |
| line-height: 1.6;
| |
| margin: 0;
| |
| padding: 0;
| |
| border: 0;
| |
| }
| |
| | |
| .mw-parser-output .kh-section-head p {
| |
| margin: 0;
| |
| }
| |
| | |
| .mw-parser-output .kh-section-head a {
| |
| color: #2563eb;
| |
| text-decoration: none;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .mw-parser-output .kh-section-head a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* =========================================
| |
| 4. CATEGORY GRID
| |
| ========================================= */
| |
| | |
| .mw-parser-output .kh-grid {
| |
| display: grid; | | display: grid; |
| grid-template-columns: | | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| repeat(4, minmax(0, 1fr));
| |
| gap: 16px; | | gap: 16px; |
| align-items: stretch;
| |
| margin: 18px 0;
| |
| } | | } |
|
| |
|
| .mw-parser-output .kh-card { | | /* Category cards */ |
| | .mw-parser-output .kh-home .kh-card { |
| min-width: 0; | | min-width: 0; |
| padding: 20px; | | padding: 20px; |
| background: #ffffff;
| |
| color: #17263c;
| |
| border: 1px solid #e2e8f0;
| |
| border-radius: 14px; | | border-radius: 14px; |
| box-shadow: 0 3px 12px rgba(0,0,0,0.04);
| |
| transition:
| |
| transform 0.2s ease,
| |
| box-shadow 0.2s ease,
| |
| border-color 0.2s ease;
| |
| }
| |
|
| |
| .mw-parser-output .kh-card:hover {
| |
| transform: translateY(-3px);
| |
| border-color: #93c5fd;
| |
| box-shadow: 0 8px 22px rgba(0,0,0,0.08);
| |
| }
| |
|
| |
| .mw-parser-output .kh-card h3 {
| |
| font-size: 17px;
| |
| line-height: 1.7;
| |
| margin: 0 0 8px;
| |
| padding: 0;
| |
| border: 0;
| |
| overflow-wrap: anywhere;
| |
| }
| |
|
| |
| .mw-parser-output .kh-card h3 a {
| |
| color: #17263c;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .mw-parser-output .kh-card h3 a:hover {
| |
| color: #2563eb;
| |
| } | | } |
|
| |
|
| .mw-parser-output .kh-card p { | | /* Prevent cards from stretching unnecessarily */ |
| color: #64748b;
| | .mw-parser-output .kh-home .kh-card p { |
| font-size: 13px;
| |
| line-height: 1.7;
| |
| min-height: 0; | | min-height: 0; |
| margin: 0;
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* Prevent latest articles from overflowing */ |
| 5. LATEST FIVE ARTICLES
| | .mw-parser-output .kh-home .kh-article-list { |
| ========================================= */
| | max-width: 100%; |
| | |
| .mw-parser-output .kh-home .kh-latest { | |
| margin-top: 32px;
| |
| }
| |
| | |
| .mw-parser-output .kh-latest .kh-article-list {
| |
| background: #ffffff; | |
| border: 1px solid #e2e8f0;
| |
| border-radius: 14px;
| |
| padding: 20px;
| |
| box-shadow: 0 3px 12px rgba(0,0,0,0.04);
| |
| overflow-wrap: anywhere; | | overflow-wrap: anywhere; |
| } | | } |
|
| |
|
| .mw-parser-output .kh-latest .kh-article-list ul {
| | /* Tablet */ |
| padding-left: 22px;
| |
| margin: 0;
| |
| }
| |
| | |
| .mw-parser-output .kh-latest .kh-article-list li {
| |
| padding: 11px 3px;
| |
| border-bottom: 1px solid #e2e8f0;
| |
| line-height: 1.8;
| |
| }
| |
| | |
| .mw-parser-output .kh-latest .kh-article-list li:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .mw-parser-output .kh-latest .kh-article-list a {
| |
| color: #2563eb;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .mw-parser-output .kh-latest .kh-article-list a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* ========================================= | |
| 6. ALL CATEGORIES FOOTER
| |
| ========================================= */
| |
| | |
| .mw-parser-output .kh-category-footer {
| |
| padding: 28px 20px;
| |
| background: #eff6ff;
| |
| border: 1px solid #dbeafe;
| |
| border-radius: 14px;
| |
| text-align: center;
| |
| }
| |
| | |
| .mw-parser-output .kh-category-footer h2 {
| |
| color: #17263c;
| |
| font-size: 23px;
| |
| margin: 0 0 10px;
| |
| }
| |
| | |
| .mw-parser-output .kh-category-footer p {
| |
| color: #475569;
| |
| margin: 0;
| |
| }
| |
| | |
| .mw-parser-output .kh-footer-actions {
| |
| margin-top: 18px;
| |
| }
| |
| | |
| /* =========================================
| |
| 7. TABLET
| |
| ========================================= */
| |
| | |
| @media (max-width: 1000px) { | | @media (max-width: 1000px) { |
| | | .mw-parser-output .kh-home .kh-grid { |
| .mw-parser-output .kh-grid { | | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| grid-template-columns: | |
| repeat(2, minmax(0, 1fr));
| |
| gap: 14px;
| |
| }
| |
| | |
| .mw-parser-output .kh-home .kh-hero {
| |
| padding: 28px 18px;
| |
| } | | } |
| } | | } |
|
| |
|
| /* ========================================= | | /* Mobile */ |
| 8. MOBILE
| |
| ========================================= */
| |
| | |
| @media (max-width: 600px) { | | @media (max-width: 600px) { |
| | | .mw-parser-output .kh-home .kh-grid { |
| .mw-parser-output .kh-home .kh-hero { | |
| padding: 22px 15px;
| |
| border-radius: 12px;
| |
| }
| |
| | |
| .mw-parser-output .kh-home .kh-hero h1 {
| |
| font-size: 25px;
| |
| }
| |
| | |
| .mw-parser-output .kh-home .kh-hero p {
| |
| font-size: 13px;
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .mw-parser-output .kh-grid {
| |
| grid-template-columns: 1fr; | | grid-template-columns: 1fr; |
| gap: 12px;
| |
| }
| |
|
| |
| .mw-parser-output .kh-card {
| |
| padding: 17px;
| |
| border-radius: 12px;
| |
| }
| |
|
| |
| .mw-parser-output .kh-section-head h2 {
| |
| font-size: 21px;
| |
| }
| |
|
| |
| .mw-parser-output .kh-home .kh-section {
| |
| margin-top: 24px;
| |
| }
| |
|
| |
| .mw-parser-output .kh-search .mw-inputbox-form {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .mw-parser-output .kh-search input[type="text"],
| |
| .mw-parser-output .kh-search input[type="search"],
| |
| .mw-parser-output .kh-search .mw-inputbox-input,
| |
| .mw-parser-output .kh-search input[type="submit"] {
| |
| width: 100%;
| |
| flex: 0 1 auto;
| |
| }
| |
|
| |
| .mw-parser-output .kh-latest .kh-article-list {
| |
| padding: 15px;
| |
| } | | } |
|
| |
|
| .mw-parser-output .kh-category-footer { | | .mw-parser-output .library-home .kh-hero { |
| padding: 22px 15px; | | padding: 20px 15px; |
| } | | } |
| } | | } |
|
| |
| /* =========================================
| |
| 9. ACCESSIBILITY
| |
| ========================================= */
| |
|
| |
| .mw-parser-output .kh-home a:focus-visible,
| |
| .mw-parser-output .kh-home input:focus-visible {
| |
| outline: 3px solid #2563eb;
| |
| outline-offset: 3px;
| |
| }
| |
|
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .mw-parser-output .kh-card {
| |
| transition: none;
| |
| }
| |
|
| |
| .mw-parser-output .kh-card:hover {
| |
| transform: none;
| |
| }
| |
| }
| |
|
| |
| /* END TAIPEDIA HOMEPAGE FIXES */
| |