|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* Mobile-first grid styling for Wikiwide */ |
| | | .wikiwide-hero { |
| /* === HIDE PAGE TITLE ONLY ON MAIN PAGE === */
| | text-align: center; |
| body.page-Main_Page h1.firstHeading {
| | padding: 20px 10px; |
| display: none; | | background: #fff; |
| | border-bottom: 1px solid #ccc; |
| } | | } |
|
| |
|
| /* === HERO BANNER STYLING === */
| | .wikiwide-hero h1 { |
| .hero-banner { | | font-size: 1.5em; |
| text-align: center; | | margin: 10px 0; |
| margin-top: 20px;
| |
| }
| |
| .hero-banner img { | |
| max-width: 100%;
| |
| height: auto;
| |
| margin-bottom: 10px; | |
| } | | } |
|
| |
|
| /* === TAGLINE BELOW BANNER === */
| | .cta-button { |
| .hero-tagline { | | display: inline-block; |
| text-align: center; | | background: black; |
| font-weight: 600; | | color: white; |
| font-size: 16px; | | padding: 10px 16px; |
| margin-bottom: 20px; | | text-decoration: none; |
| | border-radius: 8px; |
| | font-weight: bold; |
| } | | } |
|
| |
|
| /* === GRID LAYOUT FOR MAIN SECTIONS === */
| | .section-title { |
| .wikiwide-sections { | | font-weight: bold; |
| display: flex; | | font-size: 1.2em; |
| justify-content: space-between;
| | margin: 20px 10px 10px; |
| flex-wrap: wrap; | |
| margin-bottom: 30px; | |
| }
| |
| .wikiwide-sections > div {
| |
| width: 32%;
| |
| padding: 10px;
| |
| background: #fafafa;
| |
| border: 1px solid #e2e2e2;
| |
| border-radius: 8px;
| |
| } | | } |
|
| |
|
| /* === FOOTER CLEANUP === */
| | .horizontal-scroll { |
| .footer-area { | |
| display: flex; | | display: flex; |
| justify-content: space-between; | | overflow-x: auto; |
| flex-wrap: wrap;
| | gap: 10px; |
| background: #f8f8f8;
| |
| padding: 20px;
| |
| border-top: 1px solid #ccc; | |
| }
| |
| .footer-area > div {
| |
| width: 30%;
| |
| padding: 10px; | | padding: 10px; |
| font-size: 90%;
| |
| }
| |
| .footer-area h3 {
| |
| margin-top: 0;
| |
| font-size: 16px;
| |
| } | | } |
|
| |
|
| /* === SOCIAL ICONS STYLING === */
| | .card { |
| .social-icons a { | | min-width: 160px; |
| margin-right: 8px; | | padding: 12px; |
| font-size: 20px; | | border: 1px solid #ccc; |
| color: #444; | | border-radius: 10px; |
| text-decoration: none; | | background: #f9f9f9; |
| }
| | text-align: center; |
| .social-icons a:hover {
| | flex-shrink: 0; |
| color: #000; | |
| } | | } |
|
| |
|
| /* === RESPONSIVE FIX === */
| | .updates-list { |
| @media screen and (max-width: 768px) {
| | padding: 0 15px; |
| .wikiwide-sections > div, | |
| .footer-area > div {
| |
| width: 100%;
| |
| margin-bottom: 20px;
| |
| }
| |
| } | | } |
|
| |
|
| /* Grid Styling for Desktop */
| | .wikiwide-footer { |
| .mainpage-grid-3col { | | text-align: center; |
| display: flex; | | margin-top: 30px; |
| flex-wrap: wrap; | | padding: 15px 10px; |
| gap: 2em; | | font-size: 0.9em; |
| justify-content: space-between; | | color: #888; |
| margin-bottom: 2em; | | border-top: 1px solid #ddd; |
| } | | } |
|
| |
|
| .mainpage-col { | | .footer-links a { |
| flex: 1 1 30%; | | margin: 0 8px; |
| min-width: 250px; | | color: #555; |
| }
| | text-decoration: none; |
| | |
| /* Mobile Optimizations */
| |
| @media screen and (max-width: 768px) {
| |
| .mainpage-grid-3col {
| |
| flex-direction: column;
| |
| }
| |
| | |
| .mainpage-col {
| |
| width: 100%;
| |
| margin-bottom: 1.5em;
| |
| text-align: center;
| |
| } | |
| | |
| .mainpage-col ul {
| |
| padding-left: 1em;
| |
| text-align: left;
| |
| }
| |
| } | | } |