From 697db1874af06fd7b3620699dc8446018b8bb1fb Mon Sep 17 00:00:00 2001
From: eupiteco <eupiteco@gmail.com>
Date: Wed, 5 Sep 2018 23:27:27 -0300
Subject: [PATCH] responsive tweaks and social icons

---
 _includes/components/footer.html    | 47 ++++++++++++++++++++++++-----
 _site/assets/styles/components.scss | 17 ++++++++---
 _site/assets/styles/main.css        |  8 +++--
 _site/components/index.html         | 47 ++++++++++++++++++++++++-----
 assets/styles/components.scss       | 17 ++++++++---
 5 files changed, 107 insertions(+), 29 deletions(-)

diff --git a/_includes/components/footer.html b/_includes/components/footer.html
index edacb48..f918962 100644
--- a/_includes/components/footer.html
+++ b/_includes/components/footer.html
@@ -29,19 +29,50 @@
 			</ul>
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
 				<span>Follow us</span>
-				<div class="footer__social-media" >
-					<li class="footer__social-media-icon" ></li>
-					<li class="footer__social-media-icon" ></li>
-					<li class="footer__social-media-icon" ></li>
+				<div class="row footer__social-media" >
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#github"/>
+						</svg>
+					</li>
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#twitter"/>
+						</svg>
+					</li>
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#slack"/>
+						</svg>
+					</li>
 			</div>
 			</ul>
 		</div>
 		<div class="spacer col-12" ></div>
 		<div class="footer-extras row">
-			<div class="col-lg-2 col-md-4 col-sm-6" >
-				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
-			</div>
-			<div class="col-md-6 col-sm-12" >
+			<div class="footer-extras__logo col-md-6 col-sm-12" >
+				<img class="mb-3" src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
 				<p>© 2018 The Invisible Internet Project<br />
 				Content available under a Creative Commons license.</p>
 			</div>
diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss
index 8103391..68aff17 100644
--- a/_site/assets/styles/components.scss
+++ b/_site/assets/styles/components.scss
@@ -343,6 +343,7 @@
 		list-style: none;
 		font-weight: 600;
 		text-transform: capitalize;
+		margin-bottom: 2rem;
 		span {
 			display: block;
 			margin-bottom: 0.5em;
@@ -358,14 +359,16 @@
 	}
 	&__social-media {
 		display: flex;
+		margin-top: 16px !important;
 		&-icon {
-			content: " ";
-			width: 75px;
-			height: 75px;
+			height: 40px;
+			width: 40px;
 			margin-right: 1rem;
 			margin-bottom: 1rem;
-			background-color: rgba(255,255,255,0.5);
-			border-radius: 75px;
+			color: rgba(255,255,255,0.5);
+			&:hover {
+				color: $oc-white;
+			}
 		}
 	}
 
@@ -375,6 +378,10 @@
 				margin: 0 0.5rem;
 			}
 		}
+		&__logo img {
+			max-width: 180px;
+			height: auto;
+		}
 	}
 	.spacer {
 		content: " ";
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index 6639424..74d0aaf 100644
--- a/_site/assets/styles/main.css
+++ b/_site/assets/styles/main.css
@@ -184,13 +184,15 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0); mar
 
 .badge-secondary { background-color: #60AB60 !important; }
 
-.footer ul { list-style: none; font-weight: 600; text-transform: capitalize; }
+.footer ul { list-style: none; font-weight: 600; text-transform: capitalize; margin-bottom: 2rem; }
 .footer ul span { display: block; margin-bottom: 0.5em; }
 .footer ul a { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
 .footer ul a:hover { color: #ffffff; }
-.footer__social-media { display: flex; }
-.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; }
+.footer__social-media { display: flex; margin-top: 16px !important; }
+.footer__social-media-icon { height: 40px; width: 40px; margin-right: 1rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.5); }
+.footer__social-media-icon:hover { color: #ffffff; }
 .footer-extras ul li { margin: 0 0.5rem; }
+.footer-extras__logo img { max-width: 180px; height: auto; }
 .footer .spacer { content: " "; height: 2rem; }
 
 #styleguide-nav { background-color: #4661A9 !important; }
diff --git a/_site/components/index.html b/_site/components/index.html
index e89ed77..dca370c 100644
--- a/_site/components/index.html
+++ b/_site/components/index.html
@@ -291,19 +291,50 @@
 			</ul>
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
 				<span>Follow us</span>
-				<div class="footer__social-media" >
-					<li class="footer__social-media-icon" ></li>
-					<li class="footer__social-media-icon" ></li>
-					<li class="footer__social-media-icon" ></li>
+				<div class="row footer__social-media" >
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#github"/>
+						</svg>
+					</li>
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#twitter"/>
+						</svg>
+					</li>
+					<li>
+						<svg
+							class="footer__social-media-icon"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<use xlink:href="../assets/images/feather-sprite.svg#slack"/>
+						</svg>
+					</li>
 			</div>
 			</ul>
 		</div>
 		<div class="spacer col-12" ></div>
 		<div class="footer-extras row">
-			<div class="col-lg-2 col-md-4 col-sm-6" >
-				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
-			</div>
-			<div class="col-md-6 col-sm-12" >
+			<div class="footer-extras__logo col-md-6 col-sm-12" >
+				<img class="mb-3" src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
 				<p>© 2018 The Invisible Internet Project<br />
 				Content available under a Creative Commons license.</p>
 			</div>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 8103391..68aff17 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -343,6 +343,7 @@
 		list-style: none;
 		font-weight: 600;
 		text-transform: capitalize;
+		margin-bottom: 2rem;
 		span {
 			display: block;
 			margin-bottom: 0.5em;
@@ -358,14 +359,16 @@
 	}
 	&__social-media {
 		display: flex;
+		margin-top: 16px !important;
 		&-icon {
-			content: " ";
-			width: 75px;
-			height: 75px;
+			height: 40px;
+			width: 40px;
 			margin-right: 1rem;
 			margin-bottom: 1rem;
-			background-color: rgba(255,255,255,0.5);
-			border-radius: 75px;
+			color: rgba(255,255,255,0.5);
+			&:hover {
+				color: $oc-white;
+			}
 		}
 	}
 
@@ -375,6 +378,10 @@
 				margin: 0 0.5rem;
 			}
 		}
+		&__logo img {
+			max-width: 180px;
+			height: auto;
+		}
 	}
 	.spacer {
 		content: " ";