MediaWiki:Common.css: Difference between revisions

Revision as of 21:16, 12 August 2024

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: #f0f0f0;
}

#content {
    font-family: 'Raleway', sans-serif;
}

.mw-page-title-main .mw-headline {
    font-family: 'Neuton', 'Raleway', serif;
    font-weight: bold;
}

.branding-box {
    font-weight: bold;
}

.minerva-search-form {
    justify-content: center;
}

/** Main Page */
.hhw-main-page {
    display: grid;
    grid-template-areas:
        "a a a"
        "b b c"
        "d e f";
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4px;
    padding: 4px;
}

.hhw-item-header { 
    background-color: #f4f4f4; 

    display: flex;
    justify-content: center;
    
    font-weight: bold;

    width: 100%; 
}

.hhw-item-content {
    margin: 0.5em;
}

.hhw-item   { background-color: #fff }
.hhw-item-1 { grid-area: a; }
.hhw-item-2 { grid-area: b; }
.hhw-item-3 { grid-area: c; }
.hhw-item-4 { grid-area: d; }
.hhw-item-5 { grid-area: e; }
.hhw-item-6 { grid-area: f; }

/** Notice Boxes */
.hhw-noticebox {
    display: flex;
    width: 100%;
    padding: 1em;

    font-weight: bold;

    border-radius: 0.5rem;
    border: solid 2px var(--color-progressive);
    border-left: solid 8px var(--color-progressive);
}

.hhw-noticebox-error {
    display: flex;
    width: 100%;
    padding: 1em;

    font-weight: bold;

    border-radius: 0.5rem;
    border: solid 2px var(--color-error);
    border-left: solid 8px var(--color-error);
}

.hhw-noticebox-warning {
    display: flex;
    width: 100%;
    padding: 1em;

    font-weight: bold;

    border-radius: 0.5rem;
    border: solid 2px var(--color-warning);
    border-left: solid 8px var(--color-warning);
}

@media ( max-width: 650px; ) {
    .hhw-main-page {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}