mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Footer.less

125 lines
2 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 );
background-color: var( --color-surface-2 );
clear: both;
color: var( --color-base--subtle );
direction: ltr;
font-size: 0.875rem;
&__container {
max-width: var( --width-layout--extended );
margin-right: auto;
margin-left: auto;
}
&__content,
&__bottom {
display: flex;
flex-wrap: wrap;
padding: var( --space-md ) 0;
gap: var( --space-md );
}
&__bottom {
align-items: center;
justify-content: space-between;
border-top: 1px solid var( --border-color-base );
margin-right: auto;
margin-left: auto;
}
&__siteinfo {
display: flex;
max-width: 90ch;
flex-direction: column;
gap: var( --space-xs );
p {
margin: 0;
line-height: var( --line-height );
}
}
a {
color: var( --color-base--emphasized );
font-weight: var( --font-weight-medium );
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
li {
list-style: none;
}
}
#footer {
&-sitetitle {
color: var( --color-base--emphasized );
font-size: 1.25rem;
img.mw-logo-wordmark {
max-height: 54px;
filter: invert( 1 ) hue-rotate( 180deg );
}
}
&-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 );
}
}
}
&-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: @width-breakpoint-desktop ) {
.citizen-footer {
margin-bottom: 0;
}
#footer-sitetitle {
font-size: 2rem;
}
}