Add labels over community icons in the footer. (#1142)

Gemfile.lock

@@ -1,15 +1,15 @@
 GIT
   remote: https://github.com/ldemailly/html-proofer.git
-  revision: a9fd7130ddf4bffc54ef938783d09a110e46574b
+  revision: 87a477847c9c43b065dfc8971b12cea2e8f8a1b6
   specs:
-    html-proofer (3.7.5)
+    html-proofer (3.7.6)
       activesupport (>= 4.2, < 6.0)
       addressable (~> 2.3)
       colorize (~> 0.8)
       mercenary (~> 0.3.2)
-      nokogiri (~> 1.7)
+      nokogiri (~> 1.8.1)
       parallel (~> 1.3)
-      typhoeus (~> 0.7)
+      typhoeus (~> 1.3)
       yell (~> 2.0)
 
 GEM
@@ -28,38 +28,42 @@ GEM
     coffee-script-source (1.11.1)
     colorator (1.1.0)
     colorize (0.8.1)
-    commonmarker (0.17.7)
+    commonmarker (0.17.9)
       ruby-enum (~> 0.5)
     concurrent-ruby (1.0.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
     ethon (0.11.0)
       ffi (>= 1.3.0)
+    eventmachine (1.2.5)
     execjs (2.7.0)
-    faraday (0.13.1)
+    faraday (0.14.0)
       multipart-post (>= 1.2, < 3)
-    ffi (1.9.18)
+    ffi (1.9.23)
     forwardable-extended (2.6.0)
     gemoji (3.0.0)
-    github-pages (172)
+    github-pages (180)
       activesupport (= 4.2.9)
-      github-pages-health-check (= 1.3.5)
+      github-pages-health-check (= 1.4.0)
-      jekyll (= 3.6.2)
+      jekyll (= 3.7.3)
       jekyll-avatar (= 0.5.0)
-      jekyll-coffeescript (= 1.0.2)
+      jekyll-coffeescript (= 1.1.1)
-      jekyll-commonmark-ghpages (= 0.1.3)
+      jekyll-commonmark-ghpages (= 0.1.5)
       jekyll-default-layout (= 0.1.4)
-      jekyll-feed (= 0.9.2)
+      jekyll-feed (= 0.9.3)
-      jekyll-gist (= 1.4.1)
+      jekyll-gist (= 1.5.0)
-      jekyll-github-metadata (= 2.9.3)
+      jekyll-github-metadata (= 2.9.4)
-      jekyll-mentions (= 1.2.0)
+      jekyll-mentions (= 1.3.0)
       jekyll-optional-front-matter (= 0.3.0)
       jekyll-paginate (= 1.1.0)
       jekyll-readme-index (= 0.2.0)
-      jekyll-redirect-from (= 0.12.1)
+      jekyll-redirect-from (= 0.13.0)
-      jekyll-relative-links (= 0.5.2)
+      jekyll-relative-links (= 0.5.3)
       jekyll-remote-theme (= 0.2.3)
-      jekyll-sass-converter (= 1.5.0)
+      jekyll-sass-converter (= 1.5.2)
-      jekyll-seo-tag (= 2.3.0)
+      jekyll-seo-tag (= 2.4.0)
-      jekyll-sitemap (= 1.1.1)
+      jekyll-sitemap (= 1.2.0)
       jekyll-swiss (= 0.4.0)
       jekyll-theme-architect (= 0.1.0)
       jekyll-theme-cayman (= 0.1.0)
@@ -74,61 +78,65 @@ GEM
       jekyll-theme-slate (= 0.1.0)
       jekyll-theme-tactile (= 0.1.0)
       jekyll-theme-time-machine (= 0.1.0)
-      jekyll-titles-from-headings (= 0.5.0)
+      jekyll-titles-from-headings (= 0.5.1)
-      jemoji (= 0.8.1)
+      jemoji (= 0.9.0)
-      kramdown (= 1.14.0)
+      kramdown (= 1.16.2)
       liquid (= 4.0.0)
-      listen (= 3.0.6)
+      listen (= 3.1.5)
       mercenary (~> 0.3)
-      minima (= 2.1.1)
+      minima (= 2.4.0)
+      nokogiri (>= 1.8.1, < 2.0)
       rouge (= 2.2.1)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.3.5)
+    github-pages-health-check (1.4.0)
       addressable (~> 2.3)
       net-dns (~> 0.8)
       octokit (~> 4.0)
       public_suffix (~> 2.0)
-      typhoeus (~> 0.7)
+      typhoeus (~> 1.3)
     html-pipeline (2.7.1)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    i18n (0.9.1)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.6.2)
+    jekyll (3.7.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
       jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
+      jekyll-watch (~> 2.0)
       kramdown (~> 1.14)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 3)
+      rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
     jekyll-avatar (0.5.0)
       jekyll (~> 3.0)
-    jekyll-coffeescript (1.0.2)
+    jekyll-coffeescript (1.1.1)
       coffee-script (~> 2.2)
       coffee-script-source (~> 1.11.1)
-    jekyll-commonmark (1.1.0)
+    jekyll-commonmark (1.2.0)
       commonmarker (~> 0.14)
       jekyll (>= 3.0, < 4.0)
-    jekyll-commonmark-ghpages (0.1.3)
+    jekyll-commonmark-ghpages (0.1.5)
       commonmarker (~> 0.17.6)
       jekyll-commonmark (~> 1)
       rouge (~> 2)
     jekyll-default-layout (0.1.4)
       jekyll (~> 3.0)
-    jekyll-feed (0.9.2)
+    jekyll-feed (0.9.3)
       jekyll (~> 3.3)
-    jekyll-gist (1.4.1)
+    jekyll-gist (1.5.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (2.9.3)
+    jekyll-github-metadata (2.9.4)
       jekyll (~> 3.1)
       octokit (~> 4.0, != 4.4.0)
     jekyll-include-cache (0.1.0)
       jekyll (~> 3.3)
-    jekyll-mentions (1.2.0)
+    jekyll-mentions (1.3.0)
       activesupport (~> 4.0)
       html-pipeline (~> 2.3)
       jekyll (~> 3.0)
@@ -137,19 +145,19 @@ GEM
     jekyll-paginate (1.1.0)
     jekyll-readme-index (0.2.0)
       jekyll (~> 3.0)
-    jekyll-redirect-from (0.12.1)
+    jekyll-redirect-from (0.13.0)
       jekyll (~> 3.3)
-    jekyll-relative-links (0.5.2)
+    jekyll-relative-links (0.5.3)
       jekyll (~> 3.3)
     jekyll-remote-theme (0.2.3)
       jekyll (~> 3.5)
       rubyzip (>= 1.2.1, < 3.0)
       typhoeus (>= 0.7, < 2.0)
-    jekyll-sass-converter (1.5.0)
+    jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.3.0)
+    jekyll-seo-tag (2.4.0)
       jekyll (~> 3.3)
-    jekyll-sitemap (1.1.1)
+    jekyll-sitemap (1.2.0)
       jekyll (~> 3.3)
     jekyll-swiss (0.4.0)
     jekyll-theme-architect (0.1.0)
@@ -192,45 +200,49 @@ GEM
     jekyll-theme-time-machine (0.1.0)
       jekyll (~> 3.5)
       jekyll-seo-tag (~> 2.0)
-    jekyll-titles-from-headings (0.5.0)
+    jekyll-titles-from-headings (0.5.1)
       jekyll (~> 3.3)
-    jekyll-watch (1.5.1)
+    jekyll-watch (2.0.0)
       listen (~> 3.0)
-    jemoji (0.8.1)
+    jemoji (0.9.0)
       activesupport (~> 4.0, >= 4.2.9)
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
-      jekyll (>= 3.0)
+      jekyll (~> 3.0)
-    kramdown (1.14.0)
+    kramdown (1.16.2)
     liquid (4.0.0)
-    listen (3.0.6)
+    listen (3.1.5)
-      rb-fsevent (>= 0.9.3)
+      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (>= 0.9.7)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
     mercenary (0.3.6)
     mini_portile2 (2.3.0)
-    minima (2.1.1)
+    minima (2.4.0)
-      jekyll (~> 3.3)
+      jekyll (~> 3.5)
-    minitest (5.10.3)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
     multipart-post (2.0.0)
     net-dns (0.8.0)
-    nokogiri (1.8.1)
+    nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
-    octokit (4.7.0)
+    octokit (4.8.0)
       sawyer (~> 0.8.0, >= 0.5.3)
-    parallel (1.12.0)
+    parallel (1.12.1)
-    pathutil (0.16.0)
+    pathutil (0.16.1)
       forwardable-extended (~> 2.6)
     public_suffix (2.0.5)
-    rake (12.3.0)
+    rake (12.3.1)
-    rb-fsevent (0.10.2)
+    rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (2.2.1)
-    ruby-enum (0.7.1)
+    ruby-enum (0.7.2)
       i18n
+    ruby_dep (1.5.0)
     rubyzip (1.2.1)
     safe_yaml (1.0.4)
-    sass (3.5.3)
+    sass (3.5.6)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -241,9 +253,9 @@ GEM
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
-    typhoeus (0.8.0)
+    typhoeus (1.3.0)
-      ethon (>= 0.8.0)
+      ethon (>= 0.9.0)
-    tzinfo (1.2.4)
+    tzinfo (1.2.5)
       thread_safe (~> 0.1)
     unicode-display_width (1.3.0)
     yell (2.0.7)
@@ -259,4 +271,4 @@ DEPENDENCIES
   rake
 
 BUNDLED WITH
-   1.16.0
+   1.16.1

_includes/footer.html

@@ -6,6 +6,7 @@
                     <div class="container-fluid">
                         <div class="row justify-content-start">
                             <div class="icon">
+                                <span class="tip">istio-users@</span>
                                 <a title="Join the istio-users@ mailing list to participate in discussions and get help troubleshooting problems"
                                    href="https://groups.google.com/forum/#!forum/istio-users">
                                     {% include icons/mailing-list.svg %}
@@ -13,6 +14,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">twitter</span>
                                 <a title="Follow us on Twitter to get the latest news"
                                    href="https://twitter.com/IstioMesh">
                                     {% include icons/twitter.svg %}
@@ -20,6 +22,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">stack overflow</span>
                                 <a title="Stack Overflow is where you can ask questions and find curated answers on deploying, configuring, and using Istio"
                                    href="https://stackoverflow.com/questions/tagged/istio">
                                     {% include icons/stackoverflow.svg %}
@@ -54,6 +57,7 @@
                     <div class="container-fluid">
                         <div class="row justify-content-end">
                             <div class="icon">
+                                <span class="tip">istio-dev@</span>
                                 <a title="Join the istio-dev@ mailing list to discuss development issues around the Istio project"
                                    href="https://groups.google.com/forum/#!forum/istio-dev">
                                     {% include icons/mailing-list.svg %}
@@ -61,6 +65,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">github</span>
                                 <a title="GitHub is where development takes place on Istio code"
                                    href="https://github.com/istio/community">
                                     {% include icons/github.svg %}
@@ -68,6 +73,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">drive</span>
                                 <a title="Access our team drive if you'd like to take a look at the Istio technical design documents"
                                     href="https://groups.google.com/forum/#!forum/istio-team-drive-access">
                                     {% include icons/drive.svg %}
@@ -75,6 +81,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">working groups</span>
                                 <a title="If you'd like to contribute to the Istio project, consider participating in our working groups"
                                    href="https://github.com/istio/community/blob/master/WORKING-GROUPS.md">
                                     {% include icons/working-groups.svg %}
@@ -82,6 +89,7 @@
                             </div>
 
                             <div class="icon">
+                                <span class="tip">slack</span>
                                 <a title="Interactively discuss development issues with the Istio community on Slack (invitation-only)"
                                         href="https://istio.slack.com">
                                     {% include icons/slack.svg %}

_sass/modules/_footer.scss

@@ -13,6 +13,7 @@ div.footer {
         bottom: 0;
         width: 100%;
         height: $footerHeight;
+        overflow: hidden;
 
         @media (max-width: $bp-sm) {
             padding: 1rem 0 1.5rem;
@@ -20,6 +21,7 @@ div.footer {
         }
 
         div.icon {
+            position: relative;
             display: inline-flex;
             padding: 4px;
             border-width: 2px;
@@ -28,13 +30,6 @@ div.footer {
             border-radius: 2px;
             color: $textBrandColor;
 
-            &:hover {
-                border-color: white;
-                border-radius: 25px;
-                box-shadow: 0 0 2px 2px $textBrandColor;
-                transition: border-radius 1s, border-color 1s ease;
-            }
-
             a {
                 &:hover {
                     text-decoration: none;
@@ -46,6 +41,13 @@ div.footer {
                 height: 35px;
                 fill: $textBrandColor;
             }
+
+            &:hover {
+                border-color: white;
+                border-radius: 25px;
+                box-shadow: 0 0 2px 2px $textBrandColor;
+                transition: border-radius 1s, border-color 1s ease;
+            }
         }
 
         p.copyright {
@@ -67,5 +69,24 @@ div.footer {
             line-height: 1.6em;
             font-size: 0.8em;
         }
+
+        .icon .tip {
+            opacity: 0;
+            background-color: transparent;
+            color: $textBrandColor;
+            text-align: center;
+            position: absolute;
+            z-index: 1;
+            width: 200px;
+            left: -78px;
+            top: -23px;
+            font-size: 75%;
+        }
+
+        /* Show the tooltip text when you mouse over the tooltip container */
+        .icon:hover .tip {
+            opacity: 1;
+            transition: opacity .5s;
+        }
     }
 }