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

.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-subtle );
	background-color: var( --color-surface-2 );
	direction: ltr;
	contain: content;

	&__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: var( --border-width-base ) 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-emphasized );
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
	}

	li {
		list-style: none;
	}
}

#footer {
	&-places {
		ul {
			flex-direction: column;
		}

		a {
			display: block;
			padding: var( --space-xs ) var( --space-md );
			border-radius: var( --border-radius-base );

			&:hover {
				background-color: var( --background-color-button-quiet--hover );
			}

			&:active {
				background-color: var( --background-color-button-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;
	}
}
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`.citizen-footer {`
feat(core): ✨ more granular spacing units 2022-11-01 00:34:00 +00:00			`padding: var( --space-xxl ) var( --padding-page );`
			`margin-top: var( --space-xxl );`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`// Reserve space for header`
			`margin-bottom: var( --header-size );`
refactor: order styles with idiomatic order 2021-01-11 16:45:52 +00:00			`clear: both;`
feat(core): ✨ use CSS variables for small font sizes 2024-02-26 22:16:07 +00:00			`font-size: var( --font-size-small );`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-subtle );`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`background-color: var( --color-surface-2 );`
refactor: order styles with idiomatic order 2021-01-11 16:45:52 +00:00			`direction: ltr;`
perf(footer): ⚡️ add CSS containment to footer 2024-11-03 05:05:28 +00:00			`contain: content;`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00
			`&__container {`
			`max-width: var( --width-layout--extended );`
			`margin-right: auto;`
			`margin-left: auto;`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`

feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`&__content,`
			`&__bottom {`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`display: flex;`
			`flex-wrap: wrap;`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`gap: var( --space-md );`
feat(core): ✨ align footer links to the end of the footer 2024-05-03 21:03:32 +00:00			`justify-content: space-between;`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`padding: var( --space-md ) 0;`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`

feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`&__bottom {`
			`align-items: center;`
			`margin-right: auto;`
			`margin-left: auto;`
feat(core): ✨ implement Codex border-width tokens 2024-07-15 06:07:25 +00:00			`border-top: var( --border-width-base ) solid var( --border-color-base );`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`

feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`&__siteinfo {`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`display: flex;`
			`flex-direction: column;`
feat(core): ✨ more granular spacing units 2022-11-01 00:34:00 +00:00			`gap: var( --space-xs );`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`max-width: 90ch;`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00
			`p {`
			`margin: 0;`
			`line-height: var( --line-height );`
			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`

feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`a {`
feat(core): ✨ use different font weight in different themes The same font weight do not provide the same contrast in different themes. We should be able to change the scaling 2022-10-23 23:40:19 +00:00			`font-weight: var( --font-weight-medium );`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`color: var( --color-emphasized );`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`ul {`
			`display: flex;`
			`flex-wrap: wrap;`
			`margin: 0;`
			`}`

			`li {`
			`list-style: none;`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`#footer {`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`&-places {`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`ul {`
			`flex-direction: column;`
			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`a {`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`display: block;`
feat(core): ✨ more granular spacing units 2022-11-01 00:34:00 +00:00			`padding: var( --space-xs ) var( --space-md );`
feat(core): ✨ use px for border-radius - Move border radius calculation to CSS variable instead of LESS - Rename CSS variable according to Codex, soft-deprecating the existing border radius 2024-07-05 17:24:31 +00:00			`border-radius: var( --border-radius-base );`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`&:hover {`
feat(core): ✨ convert some CSS variables into Codex equivalent part 2 Also fix various inconsistencies with quiet buttons 2024-07-01 00:41:31 +00:00			`background-color: var( --background-color-button-quiet--hover );`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`&:active {`
feat(core): ✨ convert some CSS variables into Codex equivalent part 2 Also fix various inconsistencies with quiet buttons 2024-07-01 00:41:31 +00:00			`background-color: var( --background-color-button-quiet--active );`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`}`
fix(core): 🐛 do not underline footer places links 2023-07-08 01:04:22 +00:00
			`&:hover,`
			`&:focus {`
			`text-decoration: none;`
			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`
			`}`

			`&-tagline {`
refactor(core): ♻️ clean up legacy LESS variables 2022-11-16 23:25:02 +00:00			`padding: var( --space-xs ) 0;`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`

			`&-icons {`
			`display: flex;`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00
			`ul {`
feat(core): ✨ more granular spacing units 2022-11-01 00:34:00 +00:00			`gap: var( --space-xs );`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00
Fix alignment for footer icons if they are in the same li (#124) 2020-06-09 17:23:28 +00:00			`li {`
			`display: flex; // Horizontally aligned with there are two icons in the same li`
fix(core): 🐛 add gap between footer icons under the same li 2023-05-06 22:07:21 +00:00			`gap: var( --space-xs ); // Sometimes there can be multiple icon under the same li`
Fix alignment for footer icons if they are in the same li (#124) 2020-06-09 17:23:28 +00:00			`}`
Add footer icon style to accomodate more footer icons 2020-06-23 19:51:05 +00:00
			`a {`
			`display: flex;`
			`align-items: center;`
			`}`
Removed unused bottom bar 2020-06-07 06:07:30 +00:00			`}`
Github CI lint - eslint/stylelint 2020-06-08 22:09:32 +00:00			`}`
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global. 2022-10-01 19:06:57 +00:00
feat(core): ✨ replace breakpoint LESS variables with Codex tokens Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem. We have to keep a copy for now as they are introduced in 1.41. Related: #735 2023-11-16 22:55:23 +00:00			`@media ( min-width: @min-width-breakpoint-desktop ) {`
feat(core): ✨ move sitenotice out of mw-body site notice is not related to the body/article 2022-10-01 20:15:40 +00:00			`.citizen-footer {`
			`margin-bottom: 0;`
			`}`
feat(core): ✨ smaller footer wordmark size on mobile 2022-10-02 05:05:41 +00:00
			`#footer-sitetitle {`
			`font-size: 2rem;`
			`}`
feat(core): ✨ move sitenotice out of mw-body site notice is not related to the body/article 2022-10-01 20:15:40 +00:00			`}`