hello-theme/dev/scss/theme/_footer.scss

/**
 * Footer styling and layout
 */

@use "../reset/variables" as variables;

.site-footer {
	padding-block-start: 1rem;
	padding-block-end: 1rem;
	position: relative;

	.site-title {
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.2;
	}

	.site-branding {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
	}

	.footer-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.custom-logo-link {
			display: block;
		}

		.site-branding {

			.site-title,
			.site-description {
				margin: 0;
			}

			.site-logo {

				img {
					display: block;
				}
			}

			&.show-title {

				.site-logo {
					display: none !important;
				}
			}

			&.show-logo {

				.site-title {
					display: none !important;
				}
			}
		}

		.copyright {
			align-items: center;
			display: flex;
			justify-content: flex-end;

			p {
				margin: 0;
			}
		}

	}

	&.footer-inverted {

		.footer-inner {
			flex-direction: row-reverse;

			.site-branding {
				text-align: end;
			}
		}
	}

	&.footer-stacked {

		.footer-inner {
			align-items: center;
			flex-direction: column;
			text-align: center;

			.site-branding .site-title {
				text-align: center;
			}

			.site-navigation {
				.menu {
					padding: 0;
				}
			}
		}
	}
}

@media (max-width: variables.$screen-xs) {

	.site-footer {

		&:not(.footer-stacked) {

			.footer-inner {

				.site-branding,
				.site-navigation,
				.copyright {
					display: block;
					text-align: center;
					width: 100%;
					max-width: none;
				}
			}
		}
	}

	.site-footer {

		.footer-inner {

			.site-navigation {

				ul.menu {
					justify-content: center;

					li {
						display: inline-block;
					}
				}
			}
		}
	}
}