website/_includes/footer.html

<!--<footer>
	<div class="menu footer-container">
		<div style="font-size: 1rem">
			{{ site.footer }}
		</div>
		<div class="footer-link">
			{% include nav-links.html %}
			<div>
				<a href="/feed.xml" style="vertical-align: middle;">
					<img style="filter: grayscale(100%); width: 22px; vertical-align: sub" src="/assets/base/rss.png" />
				</a>
			</div>
		</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>