Merge branch 'new-footer'

_includes/footer.html

@@ -1,16 +1,85 @@
 <footer>
-	<div class="menu footer-container">
+	<div class="footer container">
-		<div style="font-size: 1rem">
+		<div class="footer-top">
-			{{ site.footer }}
+			<div class="footer-logo">
-		</div>
+				<a href="/">
-		<div class="footer-link">
+				<img src="/assets/base/distrust-text-white.svg" alt="Distrust logo" />
-			{% 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>
+			<p class="footer-description footer-description-desktop">
+			Distrust is a research and consulting company securing mission-critical systems with verifiable open source infrastructure.
+			</p>
+			<p class="footer-description footer-description-mobile">
+				Distrust secures mission-critical systems with verifiable open source infrastructure.
+				</p>
+		</div>
+		<div class="footer-divider">
+		</div>
+		<div class="footer-links">
+			<div class="footer-column">
+				<a href="/services.html">Services</a>
+				<a href="/software.html">Software</a>
+				<a href="/threatmodel.html">Threat model</a>
+			</div>
+			<div class="footer-column">
+				<a href="/company.html">Company</a>
+				<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="/feed.xml" target="_blank" rel="noopener noreferrer" aria-label="RSS">
+				<img src="/assets/base/rss-bw-tr.png" alt="RSS" />
+			</a>
+		</div>
 		</div>
 	</div>
-	<script type="text/javascript" src="/assets/js/main.js"></script>
 </footer>
+
+
+<!-- ORIGINAL
+<footer>
+	<div class="footer-logo container">
+		<a href="/">
+		<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="/threatmodel.html">Threat model</a>
+			</div>
+			<div>
+				<a href="/company.html">Company</a>
+				<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="/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>
+-->

_sass/base.scss

@@ -595,35 +595,101 @@ 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: 60px 0px 40px 0px;
 	text-align: right;
 	margin-top: 80px;
-	font-size: 1.1rem;
+	font-size: 1rem;
 }
 
-.footer-link {
+.footer {
 	display: flex;
-	flex-direction: row;
 }
 
-.footer-link div {
+.footer-description-mobile {
+	display: none;
+}
+
+.footer-logo img {
+	float: left;
+	width: 270px;
+}
+
+.footer-logo img:hover {
+	filter: brightness(0.8)
+}
+
+.footer-divider {
+	width: 30rem;
+}
+
+.footer-top {
 	display: flex;
-	margin-left: 20px;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: flex-start;
 }
 
-.footer-link div a {
+.footer-logo {
-	text-decoration: none;
+	flex: 1 1 100%;
-	color: var(--light-grey);
-}
-
-.footer-link div a:hover {
-	color: white;
-}
-
-.footer-container {
 	display: flex;
-	justify-content: space-between
+	flex-direction: column;
+	align-items: flex-start
+}
+
+.footer-description {
+	font-size: 1.3rem;
+	line-height: 1.5;
+	text-align: left;
+}
+
+.footer-links {
+	display: flex;
+	gap: 6rem;
+	margin-top: 0.5rem;
+	line-height: 2.5rem !important;
+}
+
+.footer-links div {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 9.5rem;
+}
+
+.footer-links a {
+	font-size: 1.5rem;
+	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: 2rem;
+	font-size: 1rem;
+}
+
+.footer-social a {
+	vertical-align: middle;
+}
+
+.footer-social a img {
+	height: 20px;
+	width: 20px; 
+	margin-left: 0.5rem;
+	filter: invert(1) grayscale(1) brightness(0.5);
+	transition: filter 0.2s ease;
+	vertical-align: sub;
+}
+
+.footer-social a img:hover {
+	filter: invert(1) grayscale(0) brightness(1);
 }
 
 
@@ -1836,6 +1902,59 @@ pre {
 	.component-links {
 		max-width: 100%;
 	}
+
+	footer {
+		padding: 50px 0px 30px 0px;
+	}
+
+	.footer-links {
+		gap: 5rem;
+		padding-right: 0rem;
+	}
+
+	.footer {
+		flex-direction: column;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+
+	.footer-logo img {
+		width: 115%;
+	}
+
+	.footer-description, .footer-links a {
+		font-size: 1.2rem !important;
+	}
+
+	.footer-description {
+		margin-bottom: 1.2rem;
+	}
+
+	.footer-links {
+		gap: 5rem;
+		flex-direction: row;
+		line-height: 2rem !important;
+	}
+
+	.footer-links a:hover {
+		color: var(--purple);	
+	}
+
+	.footer-footer {
+		font-size: 0.75rem;
+	}
+
+	.footer-bottom {
+		margin-top: 2rem;
+	}
+
+	.footer-social a img {
+		height: 20px;
+		margin-left: 0rem;
+		width: 20px; 
+	}
 }
 
 @media (max-width: 1020px) {
@@ -1875,6 +1994,12 @@ pre {
 	}
 }
 
+@media (max-width: 730) {
+	footer {
+		padding: 50px 0px 20px 0px;
+	}
+}
+
 @media (max-width: 600px) {
 	.mini-card {
 		padding: 20px 20px !important;
@@ -1940,16 +2065,67 @@ pre {
 		padding-left: 10px;
 	}
 
-	.footer-link {
+	//footer on mobile//
-		flex-direction: column !important;
+
+	.footer {
+		flex-direction: column;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: flex-start;
 	}
 
-	.footer-link div {
+	footer {
-		margin-bottom: 20px;
+		padding: 50px 10px 15px 10px;
-		min-width: 200px;
-		display: inline;
 	}
 
+	.footer-logo img {
+		width: 100%;
+	}
+
+	.footer-description-desktop {
+		display: none;
+	}
+
+	.footer-description-mobile {
+		display: block;
+	}
+
+	.footer-description {
+		font-size: 1rem !important;
+		margin-bottom: 1.2rem;
+	}
+
+	.footer-links {
+		gap: 3rem;
+		flex-direction: row;
+		line-height: 1.7rem !important;
+	}
+
+	.footer-links a {
+		font-size: 1.1rem !important;
+	}
+
+	.footer-links a:hover {
+		color: var(--purple);	
+	}
+
+	.footer-footer {
+		font-size: 0.75rem;
+	}
+
+	.footer-bottom {
+		margin-top: 2rem;
+	}
+
+	.footer-social a img {
+		height: 20px;
+		margin-left: 0rem;
+		width: 20px; 
+	}
+
+	//footer//
+
 	.tall-section {
 		margin: 100px 0px;
 	}
@@ -2058,3 +2234,13 @@ pre {
  */
 }
 
+@media (max-width: 400px) {
+ 
+	.footer-description-mobile {
+		display: none;
+	}
+
+	.footer-logo img {
+		margin-bottom: 1.5rem;
+	  }
+}