Merge pull request #83 from Grumpyyash/footer-rework

update the footer
layer5io · Mar 15, 2021 · 5a0c1cb · 5a0c1cb
2 parents 9195d44 + 52dfc08
commit 5a0c1cb
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 31 deletions.
diff --git a/docs/_data/footer-social.yml b/docs/_data/footer-social.yml
@@ -0,0 +1,26 @@
+- title: Social
+  links:
+  - name: Twitter
+    link: https://twitter.com/layer5
+    social_icon: Twitter
+    new_window: true
+  - name: Calendar
+    link: https://layer5.io/community/calendar
+    social_icon: Calendar
+    new_window: true
+  - name: YouTube
+    link: https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA
+    social_icon: YouTube
+    new_window: true
+  - name: Docker Hub
+    link: https://hub.docker.com/u/layer5/
+    social_icon: DockerHub
+    new_window: true
+  - name: Slack
+    link: http://slack.layer5.io/
+    social_icon: Slack
+    new_window: true
+  - name: GitHub
+    link: https://github.com/layer5io/getnighthawk/
+    social_icon: GitHub
+    new_window: true
diff --git a/docs/_data/footer.yml b/docs/_data/footer.yml
@@ -35,29 +35,3 @@
   - name: Service Mesh Landscape
     link: https://layer5.io/landscape
     new_window: true
-- title: Social
-  links:
-  - name: Twitter
-    link: https://twitter.com/layer5
-    social_icon: Twitter
-    new_window: true
-  - name: Calendar
-    link: https://layer5.io/community/calendar
-    social_icon: Calendar
-    new_window: true
-  - name: YouTube
-    link: https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA
-    social_icon: YouTube
-    new_window: true
-  - name: Docker Hub
-    link: https://hub.docker.com/u/layer5/
-    social_icon: DockerHub
-    new_window: true
-  - name: Slack
-    link: http://slack.layer5.io/
-    social_icon: Slack
-    new_window: true
-  - name: GitHub
-    link: https://github.com/layer5io/getnighthawk/
-    social_icon: GitHub
-    new_window: true
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -20,13 +20,28 @@
 
 				</div>
 
-
 			</div>
 			<hr>
-			<div class="container">
-				<p class="copyright-text">Copyright <span class="copyright">&#169;</span> Layer5, Inc. 2021 </p>
+			<div class="row footer-social-row">
+				<div class="col-lg-6">
+					<p class="copyright-text">Copyright <span class="copyright">&#169;</span> Layer5, Inc. 2021 </p>
+				</div>
+				<div class="col-lg-6 footer-social-div">
+					{% for column in site.data.footer-social %}
+					<ul class="footer-social-links">
+						{% for link in column.links %}
+							<li><a {% if link.new_window %}target="_blank"{% endif %} href="{% include relative-src.html src=link.link %}" {% if link.social_icon %}class="{{ link.social_icon || downcase }}-icon"{% endif %}>
+								{% if link.social_icon %}
+									{% include social-icon.html icon=link.social_icon %}
+								{% endif %}
+								</a></li>
+						{% endfor %}
+					</ul>
+					{% endfor %}
+				</div>
 			</div>
 
+
 		</footer>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 		{% if jekyll.environment == 'production' %}

diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss
@@ -4,8 +4,6 @@
 	font-size: 0.8rem;
 }
 .copyright-text {
-	position: absolute;
-	left: 12rem;
 	color: white;
 	font-size: 15px;
 	line-height: 15px;
@@ -86,6 +84,89 @@
 	}
 
 }
+.footer-social-links {
+  display: table;
+
+	li {
+		list-style: none;
+		margin: 10px auto;
+		display: table-cell;
+		padding-right: 1.5rem;
+
+		@media #{$tablet} {
+			max-width: 200px;
+		}
+		a {
+
+			&:hover {
+				text-decoration: none;
+			}
+			svg {
+				fill: #999;
+				margin-right: 10px;
+				transition: fill 0.2s ease;
+				vertical-align: middle;
+				position: relative;
+				top: -2px;
+				width: 22px;
+				height: 22px;
+			}
+
+			&:hover svg {
+				fill: #fff;
+			}
+
+			&.twitter-icon:hover svg {
+				fill: #55acee;
+			}
+
+			&.google-plus-icon:hover svg {
+				fill: #db4437;
+			}
+
+			&.calendar-icon:hover svg {
+				fill: #0073cf;
+			}
+
+			&.dockerhub-icon:hover svg {
+				fill: #029CEC;
+			}
+
+			&.youtube-icon:hover svg {
+				fill: #cd201f;
+			}
+
+			&.layer5-icon:hover svg {
+				fill: #00b39f;
+			}
+
+			&.linkedin-icon:hover svg {
+				fill: #0077b5;
+			}
+
+			&.slack-icon:hover svg {
+				fill: #4B154B;
+			}
+
+			&.github-icon:hover svg {
+				fill: #000000;
+			}
+
+			&.rss-icon:hover svg {
+				fill: #f26522;
+			}
+		}
+	}
+
+}
+.footer-social-div {
+	max-width: 550px;
+	padding-left: 40px !important;
+}
+.footer-social-row {
+	text-align: center;
+	padding-left: 50px;
+}
 .feed {
 	width: 100%;
 	margin: 10px;