---
import { Icon } from "astro-icon";
---

<footer>
	<div class="container">
		<ul>
			<li>
				<a href="https://astro.build/" target="_blank">Astro</a>
				<Icon name="astro" width="20" height="20" />
			</li>
			<li>
				<a href="https://www.netlify.com/" target="_blank">Netlify</a>
				<Icon name="netlify" width="20" height="20" />
			</li>
			<li>
				<a href="/rss.xml" target="_blank">RSS</a>
				<Icon name="rss" width="20" height="20" />
			</li>
		</ul>
		<p>© Sergey Yarkov, 2022</p>
	</div>
</footer>

<style lang="scss">
	footer {
		user-select: none;
		text-align: center;
		font-weight: 500;
		margin-top: 5rem;
		& .container {
			padding: 25px 0 10px 0;
			border-top: 1px solid var(--border-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 15px;
		}
		& ul {
			display: flex;
			align-items: center;
			column-gap: 25px;
			& li {
				display: flex;
				align-items: center;
				column-gap: 7px;
				& a {
					color: var(--font-color);
					font-size: var(--font-size-sm);
				}
			}
		}
		& p {
			text-align: center;
			font-size: var(--font-size-xs);
		}
	}
</style>