diff --git a/docs/_data/footer-social.yml b/docs/_data/footer-social.yml new file mode 100644 index 00000000..2c06ee03 --- /dev/null +++ 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 index 3e6ebd12..a2b513bb 100644 --- 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 index 5c9e2e3c..cfc20102 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -20,13 +20,28 @@ -
-
- + + {% if jekyll.environment == 'production' %} diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss index 773e3f16..1724e5ed 100644 --- 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;