MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Checking for links to be in third column Tags: Mobile edit Mobile web edit |
Myriad-admin (talk | contribs) Streamlined Footer Tags: Mobile edit Mobile web edit |
||
Line 10: | Line 10: | ||
padding-top: 2em; | padding-top: 2em; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
color: | color: var(--myriad-purple); | ||
font-size: | font-size: 1.1rem; | ||
margin: 1em 0 2em; | margin: 1em 0 2em; | ||
} | |||
/* === MYRIAD colour palette === */ | |||
:root { | |||
--myriad-blue: #374CFF; | |||
--myriad-purple: #8836EA; | |||
--myriad-pink: #DB20D2; | |||
--myriad-dkblue: #000091; | |||
--myriad-yellow: #FFCE00; | |||
--myriad-green: #5AE09A; | |||
} | } | ||
Line 18: | Line 28: | ||
.drg-columns { | .drg-columns { | ||
display: flex; | display: flex; | ||
justify-content: | justify-content: center; | ||
align-items: | align-items: center; | ||
gap: 2em; | gap: 2em; | ||
max-width: 1200px; | max-width: 1200px; | ||
Line 29: | Line 39: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | align-items: center; | ||
gap: 1em; | |||
min-width: 0; | min-width: 0; | ||
} | } | ||
.drg-column-left, | .drg-column-left, | ||
.drg-column-right { | .drg-column-right { | ||
text-align: | text-align: center; | ||
} | } | ||
.drg-column-left a, | .drg-column-left a, | ||
.drg-column-right a { | .drg-column-right a { | ||
color: | color: var(--myriad-purple); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
Line 58: | Line 69: | ||
text-align: center; | text-align: center; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | |||
} | } | ||
.drg-eu-flag { | .drg-eu-flag { | ||
margin-bottom: | margin-bottom: 1em; | ||
} | } | ||
.drg-eu-flag img { | .drg-eu-flag img { | ||
height: | height: 4em; | ||
width: auto; | width: auto; | ||
max-width: 100%; | max-width: 100%; | ||
Line 69: | Line 81: | ||
.drg-eu-text { | .drg-eu-text { | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1. | line-height: 1.5; | ||
font-size: | font-size: 1em; | ||
max-width: 400px; | max-width: 400px; | ||
text-align: center; | text-align: center; | ||
Line 81: | Line 93: | ||
padding: 1em 0 0; | padding: 1em 0 0; | ||
border-top: 1px solid #eee; | border-top: 1px solid #eee; | ||
font-size: 0. | font-size: 0.9em; | ||
color: #666; | color: #666; | ||
text-align: center; | text-align: center; | ||
Line 104: | Line 116: | ||
} | } | ||
.drg-eu-text { | .drg-eu-text { | ||
max-width: | max-width: 90%; | ||
} | } | ||
} | } |
Revision as of 15:39, 23 May 2025
/* === Hide native “Privacy/Terms/Desktop” bar === */
#footer-places {
display: none !important;
}
/* === DRG Footer container === */
#drg-footer {
border-top: 1px solid #ccc;
background: #fff;
padding-top: 2em;
font-family: sans-serif;
color: var(--myriad-purple);
font-size: 1.1rem;
margin: 1em 0 2em;
}
/* === MYRIAD colour palette === */
:root {
--myriad-blue: #374CFF;
--myriad-purple: #8836EA;
--myriad-pink: #DB20D2;
--myriad-dkblue: #000091;
--myriad-yellow: #FFCE00;
--myriad-green: #5AE09A;
}
/* === Three‐column layout === */
.drg-columns {
display: flex;
justify-content: center;
align-items: center;
gap: 2em;
max-width: 1200px;
margin: 0 auto;
flex-wrap: nowrap;
}
.drg-column {
flex: 1 1 33%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
min-width: 0;
}
.drg-column-left,
.drg-column-right {
text-align: center;
}
.drg-column-left a,
.drg-column-right a {
color: var(--myriad-purple);
text-decoration: none;
}
.drg-column-left a:hover,
.drg-column-right a:hover {
text-decoration: underline;
}
/* Divider lines */
.drg-divider {
width: 1px;
background: #666;
opacity: 0.4;
align-self: stretch;
}
/* Center column specifics */
.drg-column-center {
text-align: center;
align-items: center;
justify-content: center;
}
.drg-eu-flag {
margin-bottom: 1em;
}
.drg-eu-flag img {
height: 4em;
width: auto;
max-width: 100%;
}
.drg-eu-text {
font-weight: bold;
line-height: 1.5;
font-size: 1em;
max-width: 400px;
text-align: center;
}
/* Disclaimer block */
.drg-disclaimer {
max-width: 900px;
margin: 2em auto 0;
padding: 1em 0 0;
border-top: 1px solid #eee;
font-size: 0.9em;
color: #666;
text-align: center;
}
.drg-disclaimer a {
color: #666;
text-decoration: underline;
}
/* === Responsive tweaks === */
@media (max-width: 768px) {
.drg-columns {
flex-direction: column;
align-items: center;
}
.drg-divider {
display: none;
}
.drg-column {
width: 100%;
text-align: center;
}
.drg-eu-text {
max-width: 90%;
}
}