MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 23:39, 11 October 2026

/* ==============================================
   THE WORLD OF HAELORA
   MediaWiki Timeless Skin
   Version 1.0
   ============================================== */


/* ==============================================
   1. GLOBAL COLORS & BACKGROUNDS
   ============================================== */

body,
#mw-content-container {
    background-color: #E9E0D1 !important;
    color: #292724;
}

/* Main article background */

#mw-content,
#mw-content .mw-parser-output,
#mw-content .mw-body-content {
    background-color: #F3EBDD !important;
    color: #292724;
}

#mw-content {
    border: 1px solid #B49A67 !important;
}

/* Remove default container borders */

#mw-content-container {
    border-top: none !important;
    border-bottom: none !important;
}


/* ==============================================
   2. TYPOGRAPHY & HEADINGS
   ============================================== */

/* Main page title */

#firstHeading {
    font-family: Georgia, "Times New Roman", serif;
    color: #343743;
    border-bottom: 2px solid #B49A67 !important;
    padding-bottom: 0.3em;
}

#mw-content #firstHeading {
    background-color: #F3EBDD !important;
}

/* Article headings */

#mw-content h2,
#mw-content h3,
#mw-content h4 {
    font-family: Georgia, "Times New Roman", serif;
    color: #343743;
}

#mw-content h2 {
    border-bottom: 1px solid #D5CBB9 !important;
    padding-bottom: 0.2em;
}


/* ==============================================
   3. LINKS
   ============================================== */

#mw-content a {
    color: #405A83;
}

#mw-content a:visited {
    color: #68577B;
}

#mw-content a:hover {
    color: #8A6938;
    text-decoration: underline;
}


/* ==============================================
   4. HEADER & FOOTER
   ============================================== */

/* Antique gold header */

#mw-header-container {
    border-bottom: 5px solid #B49A67 !important;
}

#mw-header {
    border-bottom-color: #B49A67 !important;
}

/* Replace Timeless's colored header stripes */

#mw-header-hack .color-left,
#mw-header-hack .color-middle,
#mw-header-hack .color-right {
    background: #B49A67 !important;
}

/* Antique gold footer */

#mw-footer-container {
    border-top: 4px solid #B49A67 !important;
}

/* Footer readability */

#mw-footer-container,
#mw-footer-container *,
#mw-footer,
#mw-footer a {
    color: #514B43 !important;
}


/* ==============================================
   5. SIDEBAR NAVIGATION
   ============================================== */

#mw-site-navigation .sidebar-inner,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk {
    background-color: #EDE3D3 !important;
    border-color: #D5CBB9 !important;
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    border: 1px solid #D5CBB9 !important;
}


/* ==============================================
   6. TABLES & DIVIDERS
   ============================================== */

#mw-content table.wikitable {
    background-color: #F3EBDD;
    border-color: #D5CBB9;
}

#mw-content table.wikitable th {
    background-color: #EAE1D1;
    color: #343743;
}

#mw-content hr {
    border: 0;
    border-top: 1px solid #B49A67;
}


/* ==============================================
   7. HOMEPAGE - WELCOME SECTION
   ============================================== */

.haelora-welcome {
    max-width: 850px;
    margin: 0 auto 45px;
    padding: 0 35px 25px;
    text-align: center;
    color: #292724;
}

/* Welcome heading */

.haelora-welcome-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #343743;
    margin-bottom: 22px;
}

/* Introductory text */

.haelora-welcome-intro {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;
    color: #514B43;
    margin-bottom: 18px;
}

/* Author credit */

.haelora-welcome-credit {
    font-size: 0.9rem;
    color: #756B5D;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #B49A67;
}


/* ==============================================
   8. HOMEPAGE - REALM NAVIGATION
   ============================================== */

#mw-content .haelora-realms {
    max-width: 1100px;
    margin: 35px auto 50px;
}

/* Section heading */

#mw-content .haelora-realms-heading {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #343743;
    border-bottom: 1px solid #B49A67;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

/* Two-column realm grid */

#mw-content .haelora-realm-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/* Individual realm cards */

#mw-content .haelora-realm-card {
    background-color: #EDE3D3 !important;
    border: 1px solid #B49A67 !important;
    padding: 25px;
    text-align: center;
    min-width: 0;
    transition: background-color 0.2s ease;
}

#mw-content .haelora-realm-card:hover {
    background-color: #E5D7C2 !important;
}

/* Realm names */

#mw-content .haelora-realm-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    margin-bottom: 12px;
}

#mw-content .haelora-realm-name a {
    color: #343743 !important;
    text-decoration: none;
}

#mw-content .haelora-realm-name a:hover {
    color: #8A6938 !important;
    text-decoration: underline;
}

/* Realm descriptions */

#mw-content .haelora-realm-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #514B43;
    margin: 0;
}


/* ==============================================
   9. HOMEPAGE - LOGO SPACING
   ============================================== */

body.page-Main_Page .mw-parser-output > p:first-child {
    margin-bottom: 0 !important;
}


/* ==============================================
   10. RESPONSIVE MOBILE STYLES
   ============================================== */

@media (max-width: 650px) {

    /* Welcome section */

    .haelora-welcome {
        padding: 0 12px 20px;
        margin: 0 auto 30px;
    }

    .haelora-welcome-intro {
        font-size: 1.1rem;
    }

    /* Stack realm cards vertically */

    #mw-content .haelora-realm-grid {
        grid-template-columns: 1fr;
    }

    #mw-content .haelora-realm-card {
        padding: 20px;
    }

    /* Adjust realm heading */

    #mw-content .haelora-realms-heading {
        font-size: 1.7rem;
    }

}

/* ==============================================
   HAELORA - SIDE-BY-SIDE REALM BANNERS
   ============================================== */

/* Arrange banner and text horizontally */

#mw-content .haelora-realm-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    text-align: left;
}

/* Banner container */

#mw-content .haelora-realm-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Banner images */

#mw-content .haelora-realm-banner img {
    display: block;
    width: 100px;
    max-width: 100%;
    height: auto;
}

/* Text area */

#mw-content .haelora-realm-info {
    min-width: 0;
}

/* Realm names */

#mw-content .haelora-realm-name {
    margin-bottom: 12px;
}

/* Mobile adjustments */

@media (max-width: 650px) {

    #mw-content .haelora-realm-card {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 15px;
        padding: 15px;
    }

    #mw-content .haelora-realm-banner img {
        max-width: 90px;
    }
}

/* ==============================================
   HAELORA - ENCYCLOPEDIA NAVIGATION
   ============================================== */

#mw-content .haelora-encyclopedia {
    max-width: 1100px;
    margin: 50px auto;
    padding-top: 20px;
}

/* Section heading */

#mw-content .haelora-encyclopedia-heading {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #343743;
    border-bottom: 1px solid #B49A67;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Introduction */

#mw-content .haelora-encyclopedia-intro {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #514B43;
    max-width: 750px;
    margin: 0 auto 30px;
    line-height: 1.7;
}

/* Two-column layout */

#mw-content .haelora-encyclopedia-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Subject cards */

#mw-content .haelora-topic-card {
    background-color: #EDE3D3;
    border: 1px solid #B49A67;
    padding: 22px 25px;
    text-align: center;
    transition: background-color 0.2s ease;
}

#mw-content .haelora-topic-card:hover {
    background-color: #E5D7C2;
}

/* Subject titles */

#mw-content .haelora-topic-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

#mw-content .haelora-topic-title a {
    color: #343743 !important;
    text-decoration: none;
}

#mw-content .haelora-topic-title a:hover {
    color: #8A6938 !important;
    text-decoration: underline;
}

/* Descriptions */

#mw-content .haelora-topic-card p {
    color: #514B43;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Complete encyclopedia link */

#mw-content .haelora-encyclopedia-more {
    text-align: center;
    margin-top: 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
}

/* Mobile layout */

@media (max-width: 650px) {

    #mw-content .haelora-encyclopedia-grid {
        grid-template-columns: 1fr;
    }

    #mw-content .haelora-topic-card {
        padding: 20px;
    }

    #mw-content .haelora-encyclopedia-heading {
        font-size: 1.7rem;
    }
}