mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Footer.less
2024-06-24 13:42:30 -04:00

130 lines
2.1 KiB
Plaintext

.citizen-footer {
padding: var( --space-xxl ) var( --padding-page );
margin-top: var( --space-xxl );
// Reserve space for header
margin-bottom: var( --header-size );
clear: both;
font-size: var( --font-size-small );
color: var( --color-base--subtle );
background-color: var( --color-surface-2 );
direction: ltr;
&__container {
max-width: var( --width-layout--extended );
margin-right: auto;
margin-left: auto;
}
&__content,
&__bottom {
display: flex;
flex-wrap: wrap;
gap: var( --space-md );
justify-content: space-between;
padding: var( --space-md ) 0;
}
&__bottom {
align-items: center;
margin-right: auto;
margin-left: auto;
border-top: 1px solid var( --border-color-base );
}
&__siteinfo {
display: flex;
flex-direction: column;
gap: var( --space-xs );
max-width: 90ch;
p {
margin: 0;
line-height: var( --line-height );
}
}
a {
font-weight: var( --font-weight-medium );
color: var( --color-base--emphasized );
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
li {
list-style: none;
}
}
#footer {
&-sitetitle {
font-size: 1.25rem;
color: var( --color-base--emphasized );
img.mw-logo-wordmark {
max-height: 54px;
filter: var( --filter-invert );
}
}
&-places {
ul {
flex-direction: column;
}
a {
display: block;
padding: var( --space-xs ) var( --space-md );
border-radius: var( --border-radius--small );
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:active {
background-color: var( --background-color-quiet--active );
}
&:hover,
&:focus {
text-decoration: none;
}
}
}
&-tagline {
padding: var( --space-xs ) 0;
}
&-icons {
display: flex;
ul {
gap: var( --space-xs );
}
li {
display: flex; // Horizontally aligned with there are two icons in the same li
gap: var( --space-xs ); // Sometimes there can be multiple icon under the same li
}
a {
display: flex;
align-items: center;
}
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.citizen-footer {
margin-bottom: 0;
}
#footer-sitetitle {
font-size: 2rem;
}
}