website/src/lib/Footer.svelte

<script>
	import IconDiscord from "~icons/simple-icons/discord";
	import IconMatrix from "~icons/simple-icons/matrix";
	import IconGitHub from "~icons/simple-icons/github";
	import IconSignal from "~icons/fa6-solid/signal";
</script>

<footer>
	<hr />
	<div class="content">
		<span>© 2021 - present, Project Segfault</span>

		<div class="links">
			<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt">
				<IconMatrix />
			</a>
			<a href="https://discord.gg/26EG7fFtfS">
				<IconDiscord />
			</a>
			<a href="https://github.com/ProjectSegfault">
				<IconGitHub />
			</a>
			<a href="https://status.projectsegfau.lt/">
				<IconSignal />
			</a>
		</div>
	</div>
</footer>

<style>
	footer {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		font-size: 20px;
	}

	hr {
		color: var(--accent-primary);
		width: 100%;
		margin-left: 0;
	}

	div.content {
		display: flex;
		justify-content: space-between;
	}

	div.links {
		display: flex;
		gap: 12px;
		margin-left: 8px;
	}

	.links a {
		text-decoration: none;
	}

	@media only screen and (max-width: 500px) {
		.content {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		div.links {
			margin-left: 0;
		}
	}
</style>