Update and restyle community page

- Use new styles (and remove inline CSS)
- Fix some hyperlinks
- Wording tweaks
- Link to Server Fault, not Stack Overflow

content/en/community/_index.html

@@ -2,256 +2,182 @@
 title: Community
 layout: basic
 cid: community
+community_styles_migrated: true
 ---
+<img
+  id="banner"
+  srcset="/images/community/kubernetes-community-final-02.jpg 1500w, /images/community/kubernetes-community-02-mobile.jpg 900w"
+  sizes="(max-width: 900px) 900px, (max-width: 1920px) 1500px"
+  src="/images/community/kubernetes-community-final-02.jpg"
+  alt="Kubernetes conference photo">
 
-<div class="newcommunitywrapper">
+<div class="community-section" id="introduction">
-<div class="banner1">
+  <p>The Kubernetes community — users, contributors, and the culture we've
-  <img src="/images/community/kubernetes-community-final-02.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" class="desktop">
+  built together — is one of the biggest reasons for the meteoric rise of
-  <img src="/images/community/kubernetes-community-02-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" class="mobile">
+  this open source project. Our culture and values continue to grow and change
+  as the project itself grows and changes. We all work together toward constant
+  improvement of the project and the ways we work on it.</p>
+  <p> We are the people who file issues and pull requests, attend SIG meetings,
+  Kubernetes meetups, and KubeCon, advocate for its adoption and innovation,
+  run <code>kubectl get pods</code>, and contribute in a thousand other vital
+  ways. Read on to learn how you can get involved and become part of this amazing
+  community.</p>
 </div>
 
-<div class="intro">
+<div id="navigation-items">
-<br class="mobile">
+  <div class="community-nav-item external-link">
-<p>The Kubernetes community -- users, contributors, and the culture we've built together -- is one of the biggest reasons for the meteoric rise of this open source project. Our culture and values continue to grow and change as the project itself grows and changes. We all work together toward constant improvement of the project and the ways we work on it.
+    <a href="https://www.kubernetes.dev/">Contributor community</a>
-<br><br>We are the people who file issues and pull requests, attend SIG meetings, Kubernetes meetups, and KubeCon, advocate for its adoption and innovation, run <code>kubectl get pods</code>, and contribute in a thousand other vital ways. Read on to learn how you can get involved and become part of this amazing community.</p>
-<br class="mobile">
   </div>
-
+  <div class="community-nav-item">
-<div class="community__navbar">
+    <a href="#values">Community values</a>
-
+  </div>
-<a href="https://www.kubernetes.dev/">Contributor Community</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <div class="community-nav-item">
-<a href="#values">Community Values</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <a href="#conduct">Code of conduct</a>
-<a href="#conduct">Code of conduct </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  </div>
-<a href="#videos">Videos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <div class="community-nav-item">
-<a href="#discuss">Discussions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <a href="#videos">Videos</a>
-<a href="#events">Events and meetups</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  </div>
-<a href="#news">News</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <div class="community-nav-item">
+    <a href="#discuss">Discussions</a>
+  </div>
+  <div class="community-nav-item">
+    <a href="#meetups">Meetups</a>
+  </div>
+  <div class="community-nav-item">
+    <a href="#news">News</a>
+  </div>
+  <div class="community-nav-item">
     <a href="/releases">Releases</a>
-
   </div>
-<br class="mobile"><br class="mobile">
-<div class="imagecols">
-<br class="mobile">
-  <div class="imagecol">
-    <img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
 </div>
 
-  <div class="imagecol">
+<div class="community-section" id="gallery">
-    <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
+  <img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
+  <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
+  <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
+  <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-mobile">
 </div>
 
-  <div class="imagecol" style="margin-right:0% important">
+<div class="community-section" id="values">
-    <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-right:0% important" class="desktop">
+  <h2>Community Values</h2>
-  </div>
+  <p>The Kubernetes Community values are the keystone to the ongoing success of the project.<br class="optional"/>
-  <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-bottom:3%" class="mobile">
+  These principles guide every aspect of the Kubernetes project.</p>
-<a name="values"></a>
+  <a href="https://www.kubernetes.dev/community/values/" class="community-cta-button">
-</div>
+    <span class="community-cta">Read more</span>
-
-<div><a name="values"></a></div>
-<div class="conduct">
-<div class="conducttext">
-<br class="mobile"><br class="mobile">
-<br class="tablet"><br class="tablet">
-<div class="conducttextnobutton" style="margin-bottom:2%"><h1>Community Values</h1>
-The Kubernetes Community values are the keystone to the ongoing success of the project.<br>
-These principles guide every aspect of the Kubernetes project.
-<br>
-<a href="/community/values/">
-<br class="mobile"><br class="mobile">
-<span class="fullbutton">
-  READ MORE
-  </span>
   </a>
-  </div><a name="conduct"></a>
-  </div>
 </div>
 
-
+<div class="community-section" id="conduct">
-
+  <h2>Code of Conduct</h2>
-<div class="conduct">
+  <p>The Kubernetes community values respect and inclusiveness, and enforces a Code of Conduct in all interactions.</p>
-<div class="conducttext">
+  <p>If you notice a violation of the Code of Conduct at an event or meeting, in <a href="#slack">Slack</a>, or in another communication mechanism, reach out to the Kubernetes Code of Conduct Committee at <a href="mailto:conduct@kubernetes.io">conduct@kubernetes.io</a>. All reports are kept confidential. You can read <a href="https://github.com/kubernetes/community/tree/master/committee-code-of-conduct">about the committee</a> in the Kubernetes community repository on GitHub.</p>
-<br class="mobile"><br class="mobile">
+  <a href="/community/code-of-conduct/" class="community-cta-button">
-<br class="tablet"><br class="tablet">
+    <span class="community-cta">Read more</span>
-<div class="conducttextnobutton" style="margin-bottom:2%"><h1>Code of Conduct</h1>
-The Kubernetes community values respect and inclusiveness, and enforces a Code of Conduct in all interactions. If you notice a violation of the Code of Conduct at an event or meeting, in Slack, or in another communication mechanism, reach out to the Kubernetes Code of Conduct Committee at <a href="mailto:conduct@kubernetes.io" style="color:#0662EE;font-weight:300">conduct@kubernetes.io</a>. All reports are kept confidential. You can read about the committee&nbsp;<a href="https://github.com/kubernetes/community/tree/master/committee-code-of-conduct" style="color:#0662EE;font-weight:300">here</a>.
-<br>
-<a href="https://kubernetes.io/community/code-of-conduct/">
-<br class="mobile"><br class="mobile">
-
-<span class="fullbutton">
-READ MORE
-</span>
   </a>
-</div><a name="videos"></a>
-</div>
 </div>
 
+<div id="videos" class="community-section">
+  <h2>Videos</h2>
 
+  <p class="community-simple">Kubernetes is on YouTube, a lot. Subscribe for a wide range of&nbsp;topics.</p>
 
-<div class="videos">
+  <div class="container">
-<br class="mobile"><br class="mobile">
+    <div class="video youtube">
-<br class="tablet"><br class="tablet">
+      <iframe src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg" title="Monthly office hours" allow="camera 'none'; microphone 'none'; geolocation 'none'; fullscreen https://www.youtube.com/" ></iframe>
-<h1 style="margin-top:0px">Videos</h1>
-
-<div style="margin-bottom:4%;font-weight:300;text-align:center;padding-left:10%;padding-right:10%">We're on YouTube, a lot. Subscribe for a wide range of&nbsp;topics.</div>
-
-<div class="videocontainer">
-
-<div class="video">
-
-  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg" title="Monthly office hours" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-
       <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg">
-<div class="videocta">
+       <span class="videocta">Watch monthly office hours&nbsp;&#9654;</span>
-Watch monthly office hours&nbsp;&#9654;</div>
       </a>
     </div>
 
-<div class="video">
+    <div class="video youtube">
-  <iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ" title="Weekly community meetings" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+      <iframe src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ" title="Weekly community meetings" allow="camera 'none'; microphone 'none'; geolocation 'none'; fullscreen https://www.youtube.com/"></iframe>
       <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ">
-<div class="videocta">
+        <span class="videocta">Watch weekly community meetings&nbsp;&#9654;</span>
-Watch weekly community meetings&nbsp;&#9654;
-</div>
       </a>
     </div>
 
-<div class="video">
+    <div class="video youtube" id="discuss">
-
+      <iframe src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F" title="Talk from a community member" allow="camera 'none'; microphone 'none'; geolocation 'none'; fullscreen https://www.youtube.com/"></iframe>
-<iframe width="100%" height="250" src="https://www.youtube.com/embed/videoseries?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F" title="Talk from a community member" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-
       <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F">
-<div class="videocta">
+        <span class="videocta">Watch a talk from a community member&nbsp;&#9654;</span>
-Watch a talk from a community member&nbsp;&#9654;
-</div>
-
       </a>
-<a name="discuss"></a>
     </div>
   </div>
 </div>
 
+<div id="resources" class="community-section">
+  <h2>Discussions</h2>
 
-<div class="resources">
+  <p class="community-simple">We talk a lot. Find us and join the conversation on any of these&nbsp;platforms.</p>
-<br class="mobile"><br class="mobile">
-<br class="tablet"><br class="tablet">
-<h1 style="padding-top:1%">Discussions</h1>
 
-<div style="font-weight:300;text-align:center">We talk a lot. Find us and join the conversation on any of these&nbsp;platforms.</div>
+  <div class="container">
-
+    <div class="community-resource">
-<div class="resourcecontainer">
+      <a href="https://discuss.kubernetes.io/">
-
+        <img src="/images/community/discuss.png" alt="Forum">
-<div class="resourcebox">
-<img src="/images/community/discuss.png" alt=Forum" style="width:80%;padding-bottom:2%">
-<a href="https://discuss.kubernetes.io/" style="color:#0662EE;display:block;margin-top:1%">
-forum&nbsp;&#9654;
       </a>
-<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%">
+      <a href="https://discuss.kubernetes.io/">Community forums&nbsp;&#9654;</a>
-Topic-based technical discussions that bridge docs, StackOverflow, and so much&nbsp;more
+      <p>Topic-based technical discussions that bridge docs,
-</div>
+         troubleshooting, and so much&nbsp;more.</p>
     </div>
 
-<div class="resourcebox">
+    <div id="twitter" class="community-resource">
-<img src="/images/community/twitter.png" alt="Twitter" style="width:80%;padding-bottom:2%">
+      <a href="https://twitter.com/kubernetesio">
-<a href="https://twitter.com/kubernetesio" style="color:#0662EE;display:block;margin-top:1%">
+        <img src="/images/community/twitter.png" alt="Twitter">
-twitter&nbsp;&#9654;
       </a>
-<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%">Real-time announcements of blog posts, events, news, ideas
+      <a href="https://twitter.com/kubernetesio">Twitter&nbsp;&#9654;</a>
-</div>
+      <p><em>#kubernetesio</em></p>
+      <p>Real-time announcements of blog posts, events, news, ideas.</p>
     </div>
 
-<div class="resourcebox">
+    <div id="github" class="community-resource">
-<img src="/images/community/github.png" alt="GitHub" style="width:80%;padding-bottom:2%">
+      <a href="https://github.com/kubernetes/kubernetes">
-<a href="https://github.com/kubernetes/kubernetes" style="color:#0662EE;display:block;margin-top:1%">
+        <img src="/images/community/github.png" alt="GitHub">
-github&nbsp;&#9654;
       </a>
-<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%">
+      <a href="https://github.com/kubernetes/kubernetes">GitHub&nbsp;&#9654;</a>
-All the project and issue tracking, plus of course code
+      <p>All the project and issue tracking, plus of course code.</p>
-</div>
     </div>
 
-<div class="resourcebox">
+    <div id="server-fault" class="community-resource">
-<img src="/images/community/stack.png" alt="Stack Overflow" style="width:80%;padding-bottom:2%">
+      <a href="https://serverfault.com/questions/tagged/kubernetes">
-<a href="https://stackoverflow.com/search?q=kubernetes" style="color:#0662EE;display:block;margin-top:1%">
+        <img src="/images/community/serverfault.png" alt="Server Fault">
-stack overflow&nbsp;&#9654;
       </a>
-<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%">
+      <a href="https://serverfault.com/questions/tagged/kubernetes">Server Fault&nbsp;&#9654;</a>
-  Technical troubleshooting for any use&nbsp;case
+      <p>Kubernetes-related discussion on Server Fault. Ask a question, or answer one.</p>
-  <a name="events"></a>
+    </div>
+
+    <div id="slack" class="community-resource">
+      <a href="https://kubernetes.slack.com/">
+        <img src="/images/community/slack.png" alt="Slack">
+      </a>
+      <a href="https://kubernetes.slack.com/">Slack&nbsp;&#9654;</a>
+      <p>With 170+ channels, you'll find one that fits your needs.</p>
+      <details><summary><em>Need an invitation?</em></summary>
+        Visit <a href="https://slack.k8s.io/">https://slack.k8s.io/</a>
+        for an invitation.</details>
+    </div>
   </div>
 </div>
 
-<!--
+<div class="community-section" id="events">
-<div class="resourcebox">
+  <div class="container">
-
+   <h2>Upcoming Events</h2>
-<img src="/images/community/slack.png" style="width:80%">
-
-slack&nbsp;&#9654;
-
-<div class="resourceboxtext" style="font-size:11px;text-transform:none !important;font-weight:200;line-height:1.4em;color:#333333;margin-top:4%">
-With 170+ channels, you'll find one that fits your needs.
-</div>
-
-</div>-->
-
-</div>
-</div>
-<div class="events">
-  <br class="mobile"><br class="mobile">
-  <br class="tablet"><br class="tablet">
-<div class="eventcontainer">
- <h1 style="color:white !important">Upcoming Events</h1>
    {{< upcoming-events >}}
   </div>
 </div>
 
-<div class="meetups">
+<div class="community-section" id="meetups">
-<div class="meetupcol">
+  <h2>Global community</h2>
-<div class="meetuptext">
+  <p>
-<h1 style="text-align:left">Global Community</h1>
     With over 150 meetups in the world and growing, go find your local kube people. If one isn't near, take charge and create your own.
-</div>
+  </p>
-<a href="https://www.meetup.com/topics/kubernetes/">
+  <a href="https://www.meetup.com/topics/kubernetes/" class="community-cta-button">
-<div class="button">
+    <span class="community-cta">Find a meetup</span>
-FIND A MEETUP
-</div>
   </a>
-<a name="news"></a>
-</div>
 </div>
 
-
+<div class="community-section community-frame" id="news">
-<!--
+  <h2>Recent News</h2>
-<div class="contributor">
-<div class="contributortext">
-<br>
-<h1 style="text-align:left">
-New Contributors Site
- </h1>
-Text about new contributors site.
-
-<br><br>
-
-<div class="button">
-VISIT SITE
-</div>
-</div>
-</div>
-
--->
-
-<div class="news">
-<br class="mobile"><br class="mobile">
-<br class="tablet"><br class="tablet">
-<h1 style="margin-bottom:2%">Recent News</h1>
-
-<br>
   <div class="twittercol1">
-<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a>
   </div>
-
-<br>
-<br><br><br><br>
-</div>
-
 </div>

content/en/community/static/README.md

@@ -1,2 +1,5 @@
 The files in this directory have been imported from other sources. Do not
 edit them directly, except by replacing them with new versions.
+
+Localization note: you do not need to create localized versions of any of
+                   the files in this directory.

static/css/community.css

@@ -55,6 +55,10 @@ body.cid-community .community-section {
   text-align: center; /* overridden for paragraphs */
 }
 
+body.cid-community .community-section:first-child {
+  padding-top: max(3vh,1.5em);
+}
+
 body.cid-community #navigation-items {
   padding: 0.25em;
 
@@ -328,24 +332,41 @@ body.cid-community details > summary {
   color: #303030;
 }
 
-body.cid-community .cncf_coc_container {
+body.cid-community #cncf-code-of-conduct-intro,
-  padding-left: calc((100vw - min(75vw,100em))/2);
+body.cid-community #cncf-code-of-conduct {
-  padding-right: calc((100vw - min(75vw,100em))/2);
+  max-width: min(90vw, 100em);
-  padding-bottom: 8em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-body.cid-community .cncf_coc_container h1,
+body.cid-community #cncf-code-of-conduct {
-body.cid-community .cncf_coc_container h2 {
+  padding-bottom: 8em;
-  margin-top: 1.5em;
+  padding-top: 0.25em;
+  margin-top: 0;
+}
+
+/* duplication not needed */
+body.cid-community #values-legacy h1 {
+  display: none;
+}
+
+body.cid-community #values-legacy h2,
+body.cid-community #cncf-code-of-conduct h2 {
+  margin-top: 0.25em;
+  margin-bottom: 1em;
   color: #0662EE;
 }
 
-/* no need to repeat the heading */
+body.cid-community #values-legacy h2:before,
-body.cid-community .cncf_coc_container h1:first-child {
+body.cid-community #values-legacy h2:after,
-  visibility: hidden;
+body.cid-community #cncf-code-of-conduct h2:before,
-  margin: 0;
+body.cid-community #cncf-code-of-conduct h2:after {
+  display: none; /* skip decoration */
 }
 
+
 @media only screen and (max-width: 640px) {
   body.cid-community #navigation-items {
     justify-content: flex-start;