From dade78d4d065eda5022e076a5a7d9532e2dbe2c5 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 15 Jul 2016 15:58:22 +0000
Subject: [PATCH] Responsive footer, take 2. Done #538 @2.5

---
 less/102-footer.less | 78 +++++++++++++++++++++++++++++++++++---------
 less/105-mmenu.less  |  3 ++
 2 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/less/102-footer.less b/less/102-footer.less
index ece8796..248cd8e 100644
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -31,16 +31,23 @@ footer.site {
 		padding: 40px;
 	}
 	@media @m900 {
-		justify-content: flex-start;
-	}
-	@media @m768 {
+		justify-content: center;
+		text-align: center;
 		padding: 30px;
 	}
+	@media (max-width: 400px) {
+		padding: 30px 20px;
+	}
 
 	// Footer containers
 	& > div {
 		flex-grow: 1;
 		padding-right: 20px; // so elements don't get too close when layout shrinks
+
+		@media @m900 {
+			padding-right: 0;
+		}
+
 		&:last-of-type {
 			padding-right: 0;
 		}
@@ -56,6 +63,10 @@ footer.site {
 
 		@media @m900 {
 			flex-basis: 100%;
+
+			img	{
+				max-width: 120px;
+			}
 		}
 	}
 
@@ -65,6 +76,12 @@ footer.site {
 		font-style: normal;
 		font-size: 14px;
 		line-height: 32/14;
+
+		@media @m900 {
+			font-size: 12px;
+			margin: 35px 0;
+			line-height: 1.5;
+		}
 	}
 
 	.footer-social {
@@ -77,6 +94,14 @@ footer.site {
 			padding: 0 0 0 40px;
 			text-align: left;
 		}
+		@media @m1024 {
+			order: 0; // Back to original order
+		}
+		@media @m900 {
+			text-align: center;
+			padding-left: 0;
+			margin-top: 30px;
+		}
 	}
 
 	.workshop {
@@ -88,6 +113,11 @@ footer.site {
 			padding-left: 40px;
 			text-align: left;
 		}
+		@media @m900 {
+			text-align: center;
+			padding-left: 0;
+			margin-top: 30px;
+		}
 	}
 	.workshop-link {
 		.rounded-button();
@@ -103,6 +133,9 @@ footer.site {
 		@media @m1024 {
 			.longarrow-button(20px, 54px, 16px, 0);
 		}
+		@media @m900 {
+			.longarrow-button(15px, 20px, 11px, 1px);
+		}
 	}
 }
 
@@ -118,6 +151,14 @@ footer.site {
 	font-size: 27px;
 	line-height: 60px;
 	text-align: center;
+
+	@media @m900 {
+		font-size: 22px;
+		line-height: 42px;
+		width: 40px;
+		height: 40px;
+	}
+
 	&:hover {
 		color: #fff;
 	}
@@ -136,10 +177,12 @@ footer.site {
 	flex-grow: 2;
 
 	@media @m900 {
-		padding-left: 40px;
-		padding-right: 0;
+		padding: 0 20px !important;
 		flex-grow: 0 !important;
-		margin-top: 20px;
+		text-align: left;
+	}
+	@media (max-width: 400px) {
+		padding: 0 10px !important;
 	}
 
 	.menu-title {
@@ -164,13 +207,10 @@ footer.legal {
 	flex-wrap: nowrap;
 
 	@media @m900 {
-		padding-right: 45px;
-	}
-	@media @m768 {
-		padding-left: 70px;
-	}
-	@media @m640 {
-		flex-wrap: wrap;
+		padding: 20px 50px;
+		font-size: 12px;
+		display: block;
+		text-align: center;
 	}
 }
 
@@ -180,11 +220,12 @@ footer.legal {
 	white-space: nowrap;
 	padding-left: 30px;
 
-	@media @m640 {
+	@media @m900 {
+		text-align: center;
 		order: 0; // back to source order
 		padding-left: 0;
+		flex-basis: 100%;
 		padding-bottom: 20px;
-		text-align: left;
 	}
 
 	a {
@@ -202,6 +243,13 @@ footer.legal {
 		border-radius: 100%;
 		transition: all 0.25s;
 
+		@media @m900 {
+			font-size: 12px;
+			width: 40px;
+			height: 40px;
+			line-height: 40px;
+		}
+
 		&.active, &:hover {
 			color: #8aaa43;
 		}
diff --git a/less/105-mmenu.less b/less/105-mmenu.less
index bbfa915..9b5de0f 100644
--- a/less/105-mmenu.less
+++ b/less/105-mmenu.less
@@ -156,6 +156,9 @@ html.mm-front #mm-blocker {
 		color: #a5acb2;
 		line-height: 60px;
 		padding: 0;
+		font-size: 27px;
+		width: 54px;
+		height: 54px;
 		&:hover {
 			text-shadow: none;
 			color: #fff;
-- 
2.39.5