Merge pull request #31658 from sftim/20220207_revise_community_page_and_styles

Revise community page and styles

assets/scss/_custom.scss

@@ -566,7 +566,8 @@ main.content {
   }
 }
 
-/* COMMUNITY */
+/* COMMUNITY legacy styles */
+/* Leave these in place until localizations are caught up */
 
 .newcommunitywrapper {
   .news {

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__navbar">
-
-<a href="https://www.kubernetes.dev/">Contributor Community</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#values">Community Values</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#conduct">Code of conduct </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#videos">Videos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#discuss">Discussions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#events">Events and meetups</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="#news">News</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<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="community-nav-item">
-  <div class="imagecol">
+    <a href="#values">Community values</a>
-    <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
   </div>
-
+  <div class="community-nav-item">
-  <div class="imagecol" style="margin-right:0% important">
+    <a href="#conduct">Code of conduct</a>
-    <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-right:0% important" class="desktop">
+  </div>
+  <div class="community-nav-item">
+    <a href="#videos">Videos</a>
+  </div>
+  <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>
-  <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-bottom:3%" class="mobile">
-<a name="values"></a>
 </div>
 
-<div><a name="values"></a></div>
+<div class="community-section" id="gallery">
-<div class="conduct">
+  <img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
-<div class="conducttext">
+  <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
-<br class="mobile"><br class="mobile">
+  <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
-<br class="tablet"><br class="tablet">
+  <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-mobile">
-<div class="conducttextnobutton" style="margin-bottom:2%"><h1>Community Values</h1>
+</div>
-The Kubernetes Community values are the keystone to the ongoing success of the project.<br>
+
-These principles guide every aspect of the Kubernetes project.
+<div class="community-section" id="values">
-<br>
+  <h2>Community Values</h2>
-<a href="/community/values/">
+  <p>The Kubernetes Community values are the keystone to the ongoing success of the project.<br class="optional"/>
-<br class="mobile"><br class="mobile">
+  These principles guide every aspect of the Kubernetes project.</p>
-<span class="fullbutton">
+  <a href="https://www.kubernetes.dev/community/values/" class="community-cta-button">
-  READ MORE
+    <span class="community-cta">Read more</span>
-  </span>
   </a>
-  </div><a name="conduct"></a>
+</div>
+
+<div class="community-section" id="conduct">
+  <h2>Code of Conduct</h2>
+  <p>The Kubernetes community values respect and inclusiveness, and enforces a Code of Conduct in all interactions.</p>
+  <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>
+  <a href="/community/code-of-conduct/" class="community-cta-button">
+    <span class="community-cta">Read more</span>
+  </a>
+</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="container">
+    <div class="video youtube">
+      <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>
+      <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg">
+       <span class="videocta">Watch monthly office hours&nbsp;&#9654;</span>
+      </a>
+    </div>
+
+    <div class="video youtube">
+      <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">
+        <span class="videocta">Watch weekly community meetings&nbsp;&#9654;</span>
+      </a>
+    </div>
+
+    <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>
+      <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F">
+        <span class="videocta">Watch a talk from a community member&nbsp;&#9654;</span>
+      </a>
+    </div>
   </div>
+</div>
+
+<div id="resources" class="community-section">
+  <h2>Discussions</h2>
+
+  <p class="community-simple">We talk a lot. Find us and join the conversation on any of these&nbsp;platforms.</p>
+
+  <div class="container">
+    <div class="community-resource">
+      <a href="https://discuss.kubernetes.io/">
+        <img src="/images/community/discuss.png" alt="Forum">
+      </a>
+      <a href="https://discuss.kubernetes.io/">Community forums&nbsp;&#9654;</a>
+      <p>Topic-based technical discussions that bridge docs,
+         troubleshooting, and so much&nbsp;more.</p>
+    </div>
+
+    <div id="twitter" class="community-resource">
+      <a href="https://twitter.com/kubernetesio">
+        <img src="/images/community/twitter.png" alt="Twitter">
+      </a>
+      <a href="https://twitter.com/kubernetesio">Twitter&nbsp;&#9654;</a>
+      <p><em>#kubernetesio</em></p>
+      <p>Real-time announcements of blog posts, events, news, ideas.</p>
+    </div>
+
+    <div id="github" class="community-resource">
+      <a href="https://github.com/kubernetes/kubernetes">
+        <img src="/images/community/github.png" alt="GitHub">
+      </a>
+      <a href="https://github.com/kubernetes/kubernetes">GitHub&nbsp;&#9654;</a>
+      <p>All the project and issue tracking, plus of course code.</p>
+    </div>
+
+    <div id="server-fault" class="community-resource">
+      <a href="https://serverfault.com/questions/tagged/kubernetes">
+        <img src="/images/community/serverfault.png" alt="Server Fault">
+      </a>
+      <a href="https://serverfault.com/questions/tagged/kubernetes">Server Fault&nbsp;&#9654;</a>
+      <p>Kubernetes-related discussion on Server Fault. Ask a question, or answer one.</p>
+    </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 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>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 class="community-section" id="events">
-
+  <div class="container">
-<div class="videos">
+   <h2>Upcoming Events</h2>
-<br class="mobile"><br class="mobile">
+   {{< upcoming-events >}}
-<br class="tablet"><br class="tablet">
+  </div>
-<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">
-Watch monthly office hours&nbsp;&#9654;</div>
-</a>
 </div>
 
-<div class="video">
+<div class="community-section" id="meetups">
-  <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>
+  <h2>Global community</h2>
-<a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ">
+  <p>
-<div class="videocta">
+    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.
-Watch weekly community meetings&nbsp;&#9654;
+  </p>
-</div>
+  <a href="https://www.meetup.com/topics/kubernetes/" class="community-cta-button">
-</a>
+    <span class="community-cta">Find a meetup</span>
-</div>
+  </a>
-
-<div class="video">
-
-<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">
-Watch a talk from a community member&nbsp;&#9654;
-</div>
-
-</a>
-<a name="discuss"></a>
-</div>
-</div>
-</div>
-
-
-<div class="resources">
-<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="resourcecontainer">
-
-<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%">
-Topic-based technical discussions that bridge docs, StackOverflow, and so much&nbsp;more
-</div>
-</div>
-
-<div class="resourcebox">
-<img src="/images/community/twitter.png" alt="Twitter" style="width:80%;padding-bottom:2%">
-<a href="https://twitter.com/kubernetesio" style="color:#0662EE;display:block;margin-top:1%">
-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
-</div>
-</div>
-
-<div class="resourcebox">
-<img src="/images/community/github.png" alt="GitHub" style="width:80%;padding-bottom:2%">
-<a href="https://github.com/kubernetes/kubernetes" style="color:#0662EE;display:block;margin-top:1%">
-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%">
-All the project and issue tracking, plus of course code
-</div>
-</div>
-
-<div class="resourcebox">
-<img src="/images/community/stack.png" alt="Stack Overflow" style="width:80%;padding-bottom:2%">
-<a href="https://stackoverflow.com/search?q=kubernetes" style="color:#0662EE;display:block;margin-top:1%">
-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%">
-  Technical troubleshooting for any use&nbsp;case
-  <a name="events"></a>
-</div>
-</div>
-
-<!--
-<div class="resourcebox">
-
-<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="meetupcol">
-<div class="meetuptext">
-<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>
-<a href="https://www.meetup.com/topics/kubernetes/">
-<div class="button">
-FIND A MEETUP
-</div>
-</a>
-<a name="news"></a>
-</div>
-</div>
-
-
-<!--
-<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>
-</div>
-
-<br>
-<br><br><br><br>
 </div>
 
+<div class="community-section community-frame" id="news">
+  <h2>Recent News</h2>
+  <div class="twittercol1">
+    <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a>
+  </div>
 </div>

content/en/community/code-of-conduct.md

@@ -1,27 +1,29 @@
 ---
-title: Community
+title: Kubernetes Community Code of Conduct
 layout: basic
 cid: community
-css: /css/community.css
+community_styles_migrated: true
 ---
 
-<div class="community_main">
+<div class="community-section" id="cncf-code-of-conduct-intro">
-<h1>Kubernetes Community Code of Conduct</h1>
+<p>
-
 Kubernetes follows the
 <a href="https://github.com/cncf/foundation/blob/master/code-of-conduct.md">CNCF Code of Conduct</a>.
 The text of the CNCF CoC is replicated below, as of
 <a href="https://github.com/cncf/foundation/blob/214585e24aab747fb85c2ea44fbf4a2442e30de6/code-of-conduct.md">commit 214585e</a>.
 If you notice that this is out of date, please
 <a href="https://github.com/kubernetes/website/issues/new">file an issue</a>.
+</p>
 
+<p>
 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 <a href="https://git.k8s.io/community/committee-code-of-conduct">Kubernetes Code of Conduct Committee</a>. 
 You can reach us by email at <a href="mailto:conduct@kubernetes.io">conduct@kubernetes.io</a>.
 Your anonymity will be protected.
+</p>
+</div>
 
-<div class="cncf_coc_container">
+<div id="cncf-code-of-conduct">
 {{< include "/static/cncf-code-of-conduct.md" >}}
 </div>
-</div>

content/en/community/static/OWNERS

@@ -0,0 +1,7 @@
+# See the OWNERS docs at https://go.k8s.io/owners
+
+# Disable inheritance to encourage careful review of any changes here.
+options:
+  no_parent_owners: true
+approvers:
+- sig-docs-leads

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.

content/en/community/values.md

@@ -1,13 +1,18 @@
 ---
-title: Community
+title: Kubernetes Community Values
 layout: basic
 cid: community
-css: /css/community.css
+community_styles_migrated: true
+
+# this page is deprecated
+# canonical page is https://www.kubernetes.dev/community/values/
+sitemap:
+  priority: 0.1
 ---
-
+<div class="community-section" id="values-legacy">
-<div class="community_main">
-
-<div class="cncf_coc_container">
 {{< include "/static/community-values.md" >}}
 </div>
-</div>
+
+<!-- no need to localize this file, nor the contents of the static directory -->
+<!-- if localizing, find the appropriate localized version of the CNCF code of
+     conduct, and link directly to that -->

layouts/community/list.html

@@ -1,4 +1,3 @@
 {{ define "main" }}
-<link rel="stylesheet" type="text/css" href="{{ "css/newcommunity.css" | relURL }}">
+  {{ .Content }}
-    {{ .Content }}
 {{ end }}

layouts/partials/head.html

@@ -92,6 +92,14 @@
 <script async src="{{ "js/mermaid.min.js" | relURL }}"></script>
 {{ end }}
 
+{{- if eq (lower .Params.cid) "community" -}}
+{{- if eq .Params.community_styles_migrated true -}}
+<link href="/css/community.css" rel="stylesheet"><!-- legacy styles -->
+{{- else -}}
+<link href="/css/legacy_community.css" rel="stylesheet">
+{{- end -}}
+<script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+{{- end -}}
 <script src="{{ "js/script.js" | relURL }}"></script>
 {{ with .Params.js }}{{ range (split . ",") }}<script src="{{ (trim . " ") | relURL }}"></script><!-- custom js added -->
 {{ end }}{{ else }}<!-- no custom js detected -->{{ end }}

static/css/community.css

@@ -1,19 +1,425 @@
-div.community_main h1, h2, h3 {
+body.cid-community #banner {
-  border-bottom: 1px solid #cccccc;
+  aspect-ratio: 1500 / 293; /* match source image */
-  margin-bottom: 30px;
+  display: block;
-  padding-bottom: 10px;
+  width: 100%;
-  padding-top: 10px;
+  margin: 0 0 2.5em 0;
+  max-height: min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh);
+  object-fit: cover;
+  overflow: clip;
 }
 
-div.community_main {
+body.cid-community .community-section #h2 {
-  padding: 50px 100px;
+  font-weight: 200;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
 }
 
-div.community_main ul, 
+body.cid-community .community-section h2:before,
-div.community_main li {
+body.cid-community .community-section h2:after {
-  list-style: disc;
+  background-color: #aaaaaa;
-  list-style-position: inside;
+  content: "";
-  padding: 10px 0;
+  display: inline-block;
-  font-size: 16px;
+  height: 1px;
+  position: relative;
+  vertical-align: middle;
+  width: 35%;
+}
+
+body.cid-community .community-section h2:before {
+  right: 0.5em;
+  margin-left: -50%;
+}
+
+body.cid-community .community-section h2:after {
+  left: 0.5em;
+  margin-right: -50%;
+}
+
+body.cid-community .community-section, body.cid-community #navigation-items {
+  max-width: min(85vw,100em);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community .community-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 0.5em 0;
+  justify-content: space-evenly;
+  align-items: baseline;
+  align-content: space-between;
+  min-height: 10em;
+  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;
+
+  width: 100vw;
+  max-width: initial;
+
+  margin-top: 2.5em;
+  margin-bottom: 2.5em;
+
+  gap: 1.25em;
+
+  border-bottom: 1px solid #aaaaaa;
+  border-top: 1px solid #aaaaaa;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* Allow fallback if calc() fails */
+body.cid-community #navigation-items {
+  padding-left: calc((100vw - min(85vw,120em))/2);
+  padding-right: calc((100vw - min(85vw,120em))/2);
+}
+
+body.cid-community #navigation-items .community-nav-item {
+  flex-grow: 1;
+  text-align: center;
+  letter-spacing: 0.08em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  word-spacing: initial;
+  text-decoration: none;
+  text-transform: uppercase;
   font-weight: 400;
+  color: #303030;
+  background: #ffffff;
+  font-size: 1.1em;
+  padding: 0.2em;
+  margin: 0;
+  max-width: 75vw;
+  min-width: 10%;
+  min-height: 2em;
+}
+
+body.cid-community .community-section > p:not(.community-simple) {
+  line-height: 1.5em;
+  text-align: initial;
+}
+
+body.cid-community .community-section#introduction,
+body.cid-community .community-section#introduction > p {
+  line-height: 1.75em;
+  font-weight: 300;
+  letter-spacing: 0.04em;
+}
+
+body.cid-community #gallery {
+  display: flex;
+  max-width: 100vw;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community #gallery img {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 0;
+  height: min(20em, 90vh);
+}
+
+/* see media queries later in file */
+body.cid-community #gallery img.community-gallery-mobile {
+  display: none;
+}
+
+
+
+
+body.cid-community .community-section#events {
+  width: 100vw;
+  max-width: initial;
+  margin-bottom: 0;
+
+  /* no events
+  background-image: url('/images/community/event-bg.jpg');
+  background-size: 100% auto;
+  background-position: center;
+  color: #fff;
+  */
+  display: none;
+}
+
+body.cid-community .community-section#values {
+  width: 100vw;
+  max-width: initial;
+  background-image: url('/images/community/event-bg.jpg');
+  color: #fff;
+  padding: 2em;
+  margin-top: 3em;
+}
+body.cid-community .community-section#values {
+  padding-left: calc((100vw - min(75vw,120em))/2);
+  padding-right: calc((100vw - min(75vw,120em))/2);
+}
+
+body.cid-community .community-section#meetups {
+  width: 100vw;
+  max-width: initial;
+  margin-top: 0;
+
+  background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png');
+  background-position: 80% center, left center;
+  background-repeat: no-repeat, repeat;
+  background-size: auto 100%, cover;
+  color: #fff;
+
+  width: 100vw;
+  /* fallback in case calc() fails */
+  padding: 5vw;
+  padding-bottom: 1em;
+  min-height: min(24em,50vh);
+}
+
+body.cid-community .community-section#meetups {
+  padding-left: calc((100vw - min(75vw,100em))/2);
+  padding-right: calc((100vw - min(75vw,100em))/2);
+}
+
+body.cid-community a.community-cta-button {
+  appearance: button;
+  display: inline-block;
+  margin: 0.75em auto 0 auto; /* gap before button */
+
+  background-color: #0662EE;
+  color: white;
+
+  border-radius: 6px;
+  padding: 0.75em;
+  min-height: 3em;
+  min-width: max(5vw, 9em);
+
+  text-align: center;
+}
+
+body.cid-community a.community-cta-button > span.community-cta {
+  color: inherit;
+  background: transparent;
+
+  letter-spacing: 0.02em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+body.cid-community .fullbutton {
+  appearance: button;
+  display: inline-block;
+  margin: auto;
+  margin-top: 2rem;
+  background-color: #0662EE;
+  color: white;
+  font-size: 1.5em;
+  border-radius: 0.3333em;
+  padding: 0.5em;
+  letter-spacing: 0.07em;
+  font-weight: bold;
+}
+
+body.cid-community #videos {
+  width: 100vw;
+  max-width: initial;
+  padding: 0.5em 5vw 5% 5vw; /* fallback in case calc() fails */
+  background-color: #eeeeee;
+  margin-top: 4em;
+}
+
+body.cid-community #videos {
+  padding-left: calc((100vw - min(95vw,160em))/2);
+  padding-right: calc((100vw - min(95vw,160em))/2);
+}
+
+body.cid-community #videos .container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: max(12px,2em);
+  max-width: 95vw;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+body.cid-community .video {
+  width: min(80vw,max(31%, 24em));
+  flex-basis: 31%;
+  flex-shrink: 1;
+}
+
+body.cid-community .video .videocta {
+  display: block;
+  margin: 0.25em 0 0em 0;
+  text-align: center;
+  padding: 0.25em;
+  padding-bottom: 2em;
+  text-align: center;
+  color: #0662EE;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.06em;
+  line-height: 1.25em;
+  clear: both;
+}
+
+body.cid-community .video iframe {
+  min-width: 95%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+body.cid-community #resources {
+  margin-top: 5%;
+  margin-bottom: 3%;
+}
+
+body.cid-community #resources .container {
+  width: 100%;
+  display: flex;
+  flex-wrap: none;
+  gap: 2em;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+body.cid-community #resources .container > .community-resource {
+  flex-basis: auto;
+  width: 100%;
+  flex-shrink: 1;
+}
+
+body.cid-community #resources .container > .community-resource img {
+  max-height: min(6em, 50vh);
+  width: auto;
+  display: block;
+  margin: 1em auto 0.75em auto;
+}
+
+body.cid-community #resources .container > .community-resource a {
+  text-transform: uppercase;
+}
+
+body.cid-community .resourcebox {
+  height: 100%;
+  min-height: 370px;
+}
+
+
+
+
+body.cid-community .community-section.community-frame {
+  width: 100vw;
+}
+
+body.cid-community .community-section.community-frame .twittercol1 {
+  width: 100%;
+}
+
+body.cid-community details > summary {
+  color: #303030;
+}
+
+body.cid-community #cncf-code-of-conduct-intro,
+body.cid-community #cncf-code-of-conduct {
+  max-width: min(90vw, 100em);
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community #cncf-code-of-conduct {
+  padding-bottom: 8em;
+  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;
+}
+
+body.cid-community #values-legacy h2:before,
+body.cid-community #values-legacy h2:after,
+body.cid-community #cncf-code-of-conduct h2:before,
+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;
+    text-align: left;
+    gap: min(2px,0.125em);
+  }
+  body.cid-community #navigation-items div.community-nav-item {
+    width: 100%;
+    text-align: left;
+    min-height: initial;
+    flex-shrink: 0;
+  }
+  body.cid-community .video {
+    max-width: 80vw;
+    flex-basis: auto;
+  }
+  body.cid-community #resources .container {
+    flex-wrap: wrap;
+  }
+  body.cid-community #resources .container .community-resource {
+    max-width: min(80vw, 24rem);
+  }
+  body.cid-community a.community-cta-button {
+    font-size: 1.5rem;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  body.cid-community #gallery img.community-gallery-desktop {
+    display: none;
+  }
+  body.cid-community #gallery img.community-gallery-mobile {
+    display: initial;
+    max-width: 95vw;
+    height: auto;
+  }
+  body.cid-community .video {
+    flex-basis: max(30em,80vw);
+    max-width: max(32em, 75vw);
+  }
+  body.cid-community .video .videocta {
+    padding-bottom: 0.5em;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  body.cid-community br.optional {
+    display: none;
+  }
+  body.cid-community .community-section:not(:first-of-type) {
+    min-height: max(20em,18vh);
+  }
+  body.cid-community .community-section#meetups p:last-of-type {
+   margin-bottom: 6em; /* extra space for background */
+  }
 }

static/css/legacy_community.css

@@ -1,3 +1,22 @@
+div.community_main h1, h2, h3 {
+  border-bottom: 1px solid #cccccc;
+  margin-bottom: 30px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+div.community_main {
+  padding: 50px 100px;
+}
+
+div.community_main ul, 
+div.community_main li {
+  list-style: disc;
+  list-style-position: inside;
+  padding: 10px 0;
+  font-size: 16px;
+  font-weight: 400;
+}
 .SandboxRoot.env-bp-430 .timeline-Tweet-text {
 
   font-size: 13pt !important;