Add YouTube social button in header and footer (#16838)

assets/sass/_base.sass

@@ -125,7 +125,7 @@ header
   background-size: contain
   background-position: center center
   background-repeat: no-repeat
-  
+
 #blog
   &.flip-nav, &.open-nav
     .logo
@@ -490,7 +490,7 @@ footer
   display: inline-block
   background-image: url(/images/social_sprite.svg)
   background-repeat: no-repeat
-  background-size: 300px
+  background-size: 350px
   width: 50px
   height: 50px
   border-radius: 5px
@@ -549,6 +549,12 @@ a.calendar
   &:hover
     background-position: -250px 100%
 
+a.youtube
+  background-position: -300px 0
+
+  &:hover
+    background-position: -300px 100%
+
 #viewDocs
   display: none
 

assets/sass/_desktop.sass

@@ -213,7 +213,7 @@ $video-section-height: 550px
     display: inline-block
     background-image: url(../images/social_sprite.svg)
     background-repeat: no-repeat
-    background-size: 300px
+    background-size: 350px
     width: 50px
     height: 50px
     border-radius: 5px
@@ -264,6 +264,12 @@ $video-section-height: 550px
     &:hover
       background-position: -250px 100%
 
+  a.youtube
+    background-position: -300px 0
+
+    &:hover
+      background-position: -300px 100%
+
   #community, .gridPage
     #hero
       text-align: left

i18n/en.toml

@@ -25,6 +25,9 @@ other = "Stack Overflow"
 [community_twitter_name]
 other = "Twitter"
 
+[community_youtube_name]
+other = "YouTube"
+
 [deprecation_warning]
 other = " documentation is no longer actively maintained. The version you are currently viewing is a static snapshot. For up-to-date documentation, see the "
 

layouts/partials/footer.html

@@ -15,6 +15,7 @@
             </div>
             <div>
                 <a href="https://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>{{ T "community_stack_overflow_name" }}</span></a>
+                <a href="https://www.youtube.com/kubernetescommunity" class="youtube"><span>{{ T "community_youtube_name" }}</span></a>
                 <a href="https://discuss.kubernetes.io" class="mailing-list"><span>{{ T "community_forum_name" }}</span></a>
                 <a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>{{ T "community_events_calendar" }}</span></a>
             </div>

layouts/partials/header.html

@@ -62,6 +62,7 @@
                     <a href="https://github.com/kubernetes/kubernetes" class="github"><span>{{ T "community_github_name" }}</span></a>
                     <a href="http://slack.k8s.io/" class="slack"><span>{{ T "community_slack_name" }} Slack</span></a>
                     <a href="https://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>{{ T "community_stack_overflow_name" }}</span></a>
+                    <a href="https://www.youtube.com/kubernetescommunity" class="youtube"><span>{{ T "community_youtube_name" }}</span></a>
                     <a href="https://discuss.kubernetes.io" class="mailing-list"><span>{{ T "community_forum_name" }}</span></a>
                     <a href="https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com" class="calendar"><span>{{ T "community_events_calendar" }}</span></a>
                 </div>