new footer

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer>
+<!--<footer>
 	<div class="menu footer-container">
 		<div style="font-size: 1rem">
 			{{ site.footer }}
@@ -13,4 +13,203 @@
 		</div>
 	</div>
 	<script type="text/javascript" src="/assets/js/main.js"></script>
+</footer> 
+-->
+
+<footer>
+	<div class="footer-logo container">
+		<a href="https://distrust.co/">
+		<img src="/assets/base/distrust-text-white.svg" alt="Distrust logo" />
+		</a>
+	</div>
+	<div class="footer container">
+		<div class="footer-top">
+		<p class="footer-description">
+			Distrust is a research and consulting company securing mission-critical systems with verifiable open source infrastructure.
+			</p>
+		</div>
+		<div class="footer-divider">
+		</div>
+		<div class="footer-links">
+			<div>
+				<a href="/services.html">Services</a>
+				<a href="/software.html">Software</a>
+				<a href="/company.html">Company</a>
+			</div>
+			<div>
+				<a href="/blog.html">Blog</a>
+				<a href="/contact.html">Contact</a>
+			</div>
+		</div>
+	</div>
+
+
+	<div class="footer-bottom container">
+		<div class="footer-footer"> {{site.footer}} </div>
+		<div class="footer-social">
+			<a href="https://www.linkedin.com/company/distrustco" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+				<img src="/assets/base/linkedin.png" alt="LinkedIn" />
+			</a>
+			<a href="/feed.xml" target="_blank" rel="noopener noreferrer" aria-label="RSS">
+				<img src="/assets/base/rss-bw-tr.png" alt="RSS" />
+			</a>
+		</div>
+		</div>
+	</div>
 </footer>
+
+<style>
+	.footer {
+		display: flex;
+	}
+
+	.footer-logo img {
+		float: left;
+		margin-bottom: 2rem;
+		width: 450px;
+	}
+
+	.footer-logo img:hover {
+		filter: brightness(0.8)
+	}
+
+	.footer-divider {
+		width: 30rem;
+	}
+
+	.footer-top {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		gap: 2rem;
+	}
+
+	.footer-description {
+		font-size: 1.3rem;
+		line-height: 1.5;
+		text-align: left;
+	}
+
+	.footer-links {
+		display: flex;
+		gap: 8rem;
+		margin-top: 1rem;
+		padding-right: 2rem;
+	}
+
+	.footer-links div {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.footer-links a {
+		font-size: 1.3rem;
+		text-align: left;
+		transition: opacity 0.2s ease;
+	}
+
+	.footer-links a:hover {
+		color: var(--purple);	
+	}
+
+	.footer-bottom {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 5rem;
+		font-size: 1rem;
+	}
+
+	.footer-social a {
+		vertical-align: middle;
+	}
+	
+	.footer-social a img {
+		height: 24px;
+		margin-left: 0.5rem;
+		filter: invert(1) grayscale(1) brightness(0.5);
+		transition: filter 0.2s ease;
+		width: 22px; 
+		vertical-align: sub;
+	}
+	
+	.footer-social a img:hover {
+		filter: invert(1) grayscale(0) brightness(1);
+	}
+
+
+	@media (max-width: 1130px) {
+		footer {
+			padding: 50px 0px 30px 0px;
+		}
+		
+		.footer-divider {
+			width: 17rem;
+		}
+
+		.footer-description, .footer-links a {
+			font-size: 1.2rem !important;
+		}
+
+		.footer-links {
+			gap: 5rem;
+			padding-right: 0rem;
+		}
+
+	}
+
+	
+	@media (max-width: 730) {
+		footer {
+			padding: 50px 0px 20px 0px;
+		}
+	}
+
+	@media (max-width: 500px) {
+		.footer {
+			flex-direction: column;
+		}
+
+		footer {
+			padding: 50px 10px 15px 10px;
+		}
+
+		.footer-logo img {
+			width: 100%;
+			padding-right: 2px;
+		}
+
+		.footer-description, .footer-links a {
+			font-size: 1rem !important;
+		}
+
+		.footer-links {
+			margin-top: 1.5rem;
+			gap: 8rem;
+		}
+
+		.footer-links div {
+			gap: 0.25rem;
+		}
+
+		.footer-links a:hover {
+			color: var(--pink);	
+		}
+
+		.footer-footer {
+			font-size: 0.75rem;
+		}
+
+		.footer-bottom {
+			margin-top: 3rem;
+		}
+
+		.footer-social a img {
+			height: 20px;
+			margin-left: 0rem;
+			width: 20px; 
+		}
+	}
+	
+</style>

_sass/base.scss

@@ -160,6 +160,12 @@ a:hover {
 	border: 1px solid var(--light-purple);
 }
 
+.footer-bottom-row {
+	display: flex;
+	height: 50px;
+	justify-content: space-between !important;
+}
+
 @mixin capsule {
 	font-weight: 400;
 	font-size: 16px;
@@ -595,11 +601,11 @@ margin-bottom: 16px;
 footer {
 	color: var(--light-grey);
 	background-color: color-mix(in srgb, var(--background-color), white 1.5%);
-	border-top: 1px solid rgba(255, 255, 255, 0.13);
+	border-top: 2px solid var(--purple);
-	padding: 40px 0px;
+	padding: 80px 0px 40px 0px;
 	text-align: right;
 	margin-top: 80px;
-	font-size: 1.1rem;
+	font-size: 1rem;
 }
 
 .footer-link {