mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-04 06:49:45 +03:00 
			
		
		
		
	Added footer component
This commit is contained in:
		
							
								
								
									
										61
									
								
								src/components/Footer.astro
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										61
									
								
								src/components/Footer.astro
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,61 @@
 | 
			
		||||
---
 | 
			
		||||
import { Icon } from "astro-icon/components";
 | 
			
		||||
import dayjs from "dayjs";
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
<style lang="scss">
 | 
			
		||||
	@import "../scss/_variables.scss";
 | 
			
		||||
 | 
			
		||||
	footer {
 | 
			
		||||
		bottom: 0;
 | 
			
		||||
		height: 4em;
 | 
			
		||||
		left: 0;
 | 
			
		||||
		padding: 1em 4em;
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		right: 0;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.left-nav,
 | 
			
		||||
	.right-nav {
 | 
			
		||||
		display: inline-block;
 | 
			
		||||
		vertical-align: top;
 | 
			
		||||
		width: 49%;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.left-nav {
 | 
			
		||||
		float: left;
 | 
			
		||||
		font-size: $fontSizeBase * 0.75;
 | 
			
		||||
		text-align: left;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	.right-nav {
 | 
			
		||||
		float: right;
 | 
			
		||||
		text-align: right;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	@media (width <=684px) {
 | 
			
		||||
		footer {
 | 
			
		||||
			padding: 4em 1em 2em;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	a {
 | 
			
		||||
		color: $colorText;
 | 
			
		||||
 | 
			
		||||
		&:visited {
 | 
			
		||||
			color: $colorText;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
<footer>
 | 
			
		||||
	<div class="left-nav">
 | 
			
		||||
		<span>© {dayjs().year()} <a href="mailto:valentin@popov.link">Valentin Popov</a></span>
 | 
			
		||||
	</div>
 | 
			
		||||
	<div class="right-nav">
 | 
			
		||||
		<a href="https://github.com/valentineus" target="_blank"><Icon name="hugeicons:github-01" /></a>
 | 
			
		||||
		<a href="https://www.linkedin.com/in/valentineus/" target="_blank"><Icon name="hugeicons:linkedin-01" /></a>
 | 
			
		||||
		<a href="https://analytics.popov.link" target="_blank"><Icon name="hugeicons:analytics-up" /></a>
 | 
			
		||||
		<a href="/feed.xml" target="_blank"><Icon name="hugeicons:rss" /></a>
 | 
			
		||||
	</div>
 | 
			
		||||
</footer>
 | 
			
		||||
@@ -1,5 +1,6 @@
 | 
			
		||||
---
 | 
			
		||||
import Analytics from "../components/Analytics.astro";
 | 
			
		||||
import Footer from "../components/Footer.astro";
 | 
			
		||||
import Head from "../components/Head.astro";
 | 
			
		||||
import Header from "../components/Header.astro";
 | 
			
		||||
import "../scss/global.scss";
 | 
			
		||||
@@ -24,5 +25,6 @@ const { description, title } = Astro.props;
 | 
			
		||||
			<slot />
 | 
			
		||||
		</main>
 | 
			
		||||
		<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
 | 
			
		||||
		<Footer />
 | 
			
		||||
	</body>
 | 
			
		||||
</html>
 | 
			
		||||
 
 | 
			
		||||
@@ -36,6 +36,7 @@ body {
 | 
			
		||||
	max-width: 52em;
 | 
			
		||||
	min-height: 100vh;
 | 
			
		||||
	padding: 4em;
 | 
			
		||||
	position: relative;
 | 
			
		||||
	text-rendering: optimizelegibility;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user