MediaWiki:Common.css: Difference between revisions
Myriad-admin (talk | contribs) Changed all instances to drg Tags: Mobile edit Mobile web edit |
Myriad-admin (talk | contribs) Trying new footer Tags: Mobile edit Mobile web edit |
||
Line 1: | Line 1: | ||
/* === | /* === DRG FOOTER === */ | ||
#drg-footer { | #drg-footer { | ||
width: 100%; | width: 100%; | ||
background: #fff; | |||
font-family: sans-serif; | font-family: sans-serif; | ||
font- | font-size: 0.95rem; | ||
border-top: 1px solid #ccc; | border-top: 1px solid #ccc; | ||
margin-top: 1em; | margin-top: 1em; | ||
color: #000; | |||
} | } | ||
.drg-columns { | |||
display: flex; | display: flex; | ||
justify-content: space-between; | |||
gap: 1em; | |||
padding: 2em 1em 1em; | |||
max-width: 1200px; | max-width: 1200px; | ||
margin: 0 auto; | margin: 0 auto; | ||
flex-wrap: wrap; | |||
} | } | ||
.drg-column { | |||
.drg- | flex: 1 1 30%; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: 0. | gap: 0.6em; | ||
} | } | ||
.drg- | .drg-column a { | ||
color: #000; | |||
color: | |||
text-decoration: none; | text-decoration: none; | ||
font-weight: normal; | |||
} | } | ||
.drg- | .drg-column a:hover { | ||
.drg- | text-decoration: underline; | ||
} | |||
.drg-divider { | |||
width: 1px; | |||
background-color: #666; | |||
opacity: 0.4; | |||
margin: 0 1em; | |||
} | } | ||
.drg-column-center { | |||
. | |||
align-items: center; | align-items: center; | ||
text-align: center; | |||
font-weight: bold; | |||
} | } | ||
. | .drg-eu-flag img { | ||
height: 2.5em; | height: 2.5em; | ||
margin-bottom: 0.8em; | |||
max-width: 100%; | |||
} | } | ||
. | .drg-eu-text { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
max-width: | max-width: 400px; | ||
line-height: 1. | line-height: 1.4; | ||
} | } | ||
/* === | .drg-disclaimer { | ||
@media | font-size: 0.8em; | ||
.drg- | color: #666; | ||
text-align: center; | |||
margin-top: 2em; | |||
padding: 1em; | |||
border-top: 1px solid #eee; | |||
max-width: 900px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.drg-disclaimer a { | |||
color: #666; | |||
text-decoration: underline; | |||
} | |||
/* === Responsive Layout === */ | |||
@media (max-width: 768px) { | |||
.drg-columns { | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.drg-divider { | |||
display: none; | |||
} | |||
.drg-column { | |||
align-items: center; | |||
text-align: center; | text-align: center; | ||
} | } | ||
.drg- | .drg-column-center { | ||
order: 2; | |||
} | } | ||
. | .drg-column-right { | ||
order: 3; | |||
} | } | ||
. | .drg-column-left { | ||
order: 1; | |||
} | } | ||
} | } |
Revision as of 14:12, 23 May 2025
/* === DRG FOOTER === */
#drg-footer {
width: 100%;
background: #fff;
font-family: sans-serif;
font-size: 0.95rem;
border-top: 1px solid #ccc;
margin-top: 1em;
color: #000;
}
.drg-columns {
display: flex;
justify-content: space-between;
gap: 1em;
padding: 2em 1em 1em;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.drg-column {
flex: 1 1 30%;
display: flex;
flex-direction: column;
gap: 0.6em;
}
.drg-column a {
color: #000;
text-decoration: none;
font-weight: normal;
}
.drg-column a:hover {
text-decoration: underline;
}
.drg-divider {
width: 1px;
background-color: #666;
opacity: 0.4;
margin: 0 1em;
}
.drg-column-center {
align-items: center;
text-align: center;
font-weight: bold;
}
.drg-eu-flag img {
height: 2.5em;
margin-bottom: 0.8em;
max-width: 100%;
}
.drg-eu-text {
font-size: 0.9em;
max-width: 400px;
line-height: 1.4;
}
.drg-disclaimer {
font-size: 0.8em;
color: #666;
text-align: center;
margin-top: 2em;
padding: 1em;
border-top: 1px solid #eee;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.drg-disclaimer a {
color: #666;
text-decoration: underline;
}
/* === Responsive Layout === */
@media (max-width: 768px) {
.drg-columns {
flex-direction: column;
align-items: center;
}
.drg-divider {
display: none;
}
.drg-column {
align-items: center;
text-align: center;
}
.drg-column-center {
order: 2;
}
.drg-column-right {
order: 3;
}
.drg-column-left {
order: 1;
}
}