new footer

_includes/footer.html

@@ -56,160 +56,4 @@
 		</div>
 		</div>
 	</div>
-</footer>
+</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,12 +160,6 @@ 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;
@@ -608,28 +602,83 @@ footer {
 	font-size: 1rem;
 }
 
-.footer-link {
+.footer {
 	display: flex;
-	flex-direction: row;
 }
 
-.footer-link div {
+.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;
-	margin-left: 20px;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 2rem;
 }
 
-.footer-link div a {
+.footer-description {
-	text-decoration: none;
+	font-size: 1.3rem;
-	color: var(--light-grey);
+	line-height: 1.5;
+	text-align: left;
 }
 
-.footer-link div a:hover {
+.footer-links {
-	color: white;
-}
-
-.footer-container {
 	display: flex;
-	justify-content: space-between
+	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);
 }
 
 
@@ -1842,6 +1891,23 @@ pre {
 	.component-links {
 		max-width: 100%;
 	}
+
+	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: 1020px) {
@@ -1881,6 +1947,12 @@ pre {
 	}
 }
 
+@media (max-width: 730) {
+	footer {
+		padding: 50px 0px 20px 0px;
+	}
+}
+
 @media (max-width: 600px) {
 	.mini-card {
 		padding: 20px 20px !important;
@@ -1946,16 +2018,54 @@ pre {
 		padding-left: 10px;
 	}
 
-	.footer-link {
+	//footer//
-		flex-direction: column !important;
+
+	.footer {
+		flex-direction: column;
 	}
 
-	.footer-link div {
+	footer {
-		margin-bottom: 20px;
+		padding: 50px 10px 15px 10px;
-		min-width: 200px;
-		display: inline;
 	}
 
+	.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(--purple);	
+	}
+
+	.footer-footer {
+		font-size: 0.75rem;
+	}
+
+	.footer-bottom {
+		margin-top: 3rem;
+	}
+
+	.footer-social a img {
+		height: 20px;
+		margin-left: 0rem;
+		width: 20px; 
+	}
+
+	//footer//
+
 	.tall-section {
 		margin: 100px 0px;
 	}