Update and restyle community page

- Use new styles (and remove inline CSS)
- Fix some hyperlinks
- Wording tweaks
- Link to Server Fault, not Stack Overflow
This commit is contained in:
Tim Bannister
2022-02-08 11:26:12 +00:00
parent e993de5dc6
commit afc338c0bf
9 changed files with 219 additions and 269 deletions
+183 -257
View File
@@ -1,257 +1,183 @@
--- ---
title: Community title: Community
layout: basic layout: basic
cid: community cid: community
--- community_styles_migrated: true
---
<div class="newcommunitywrapper"> <img
<div class="banner1"> id="banner"
<img src="/images/community/kubernetes-community-final-02.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" class="desktop"> srcset="/images/community/kubernetes-community-final-02.jpg 1500w, /images/community/kubernetes-community-02-mobile.jpg 900w"
<img src="/images/community/kubernetes-community-02-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" class="mobile"> sizes="(max-width: 900px) 900px, (max-width: 1920px) 1500px"
</div> src="/images/community/kubernetes-community-final-02.jpg"
alt="Kubernetes conference photo">
<div class="intro">
<br class="mobile"> <div class="community-section" id="introduction">
<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. <p>The Kubernetes community users, contributors, and the culture we've
<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> built together — is one of the biggest reasons for the meteoric rise of
<br class="mobile"> this open source project. Our culture and values continue to grow and change
</div> 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>
<div class="community__navbar"> <p> We are the people who file issues and pull requests, attend SIG meetings,
Kubernetes meetups, and KubeCon, advocate for its adoption and innovation,
<a href="https://www.kubernetes.dev/">Contributor Community</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; run <code>kubectl get pods</code>, and contribute in a thousand other vital
<a href="#values">Community Values</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ways. Read on to learn how you can get involved and become part of this amazing
<a href="#conduct">Code of conduct </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; community.</p>
<a href="#videos">Videos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
<a href="#discuss">Discussions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#events">Events and meetups</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div id="navigation-items">
<a href="#news">News</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="community-nav-item external-link">
<a href="/releases">Releases</a> <a href="https://www.kubernetes.dev/">Contributor community</a>
</div>
</div> <div class="community-nav-item">
<br class="mobile"><br class="mobile"> <a href="#values">Community values</a>
<div class="imagecols"> </div>
<br class="mobile"> <div class="community-nav-item">
<div class="imagecol"> <a href="#conduct">Code of conduct</a>
<img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop"> </div>
</div> <div class="community-nav-item">
<a href="#videos">Videos</a>
<div class="imagecol"> </div>
<img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop"> <div class="community-nav-item">
</div> <a href="#discuss">Discussions</a>
</div>
<div class="imagecol" style="margin-right:0% important"> <div class="community-nav-item">
<img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-right:0% important" class="desktop"> <a href="#meetups">Meetups</a>
</div> </div>
<img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-bottom:3%" class="mobile"> <div class="community-nav-item">
<a name="values"></a> <a href="#news">News</a>
</div> </div>
<div class="community-nav-item">
<div><a name="values"></a></div> <a href="/releases">Releases</a>
<div class="conduct"> </div>
<div class="conducttext"> </div>
<br class="mobile"><br class="mobile">
<br class="tablet"><br class="tablet"> <div class="community-section" id="gallery">
<div class="conducttextnobutton" style="margin-bottom:2%"><h1>Community Values</h1> <img src="/images/community/kubernetes-community-final-03.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
The Kubernetes Community values are the keystone to the ongoing success of the project.<br> <img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
These principles guide every aspect of the Kubernetes project. <img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-desktop">
<br> <img src="/images/community/kubernetes-community-04-mobile.jpg" alt="Kubernetes conference gallery photo" class="community-gallery-mobile">
<a href="/community/values/"> </div>
<br class="mobile"><br class="mobile">
<span class="fullbutton"> <div class="community-section" id="values">
READ MORE <h2>Community Values</h2>
</span> <p>The Kubernetes Community values are the keystone to the ongoing success of the project.<br class="optional"/>
</a> These principles guide every aspect of the Kubernetes project.</p>
</div><a name="conduct"></a> <a href="https://www.kubernetes.dev/community/values/" class="community-cta-button">
</div> <span class="community-cta">Read more</span>
</div> </a>
</div>
<div class="community-section" id="conduct">
<div class="conduct"> <h2>Code of Conduct</h2>
<div class="conducttext"> <p>The Kubernetes community values respect and inclusiveness, and enforces a Code of Conduct in all interactions.</p>
<br class="mobile"><br class="mobile"> <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="tablet"><br class="tablet"> <a href="/community/code-of-conduct/" class="community-cta-button">
<div class="conducttextnobutton" style="margin-bottom:2%"><h1>Code of Conduct</h1> <span class="community-cta">Read more</span>
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>. </a>
<br> </div>
<a href="https://kubernetes.io/community/code-of-conduct/">
<br class="mobile"><br class="mobile"> <div id="videos" class="community-section">
<h2>Videos</h2>
<span class="fullbutton">
READ MORE <p class="community-simple">Kubernetes is on YouTube, a lot. Subscribe for a wide range of&nbsp;topics.</p>
</span>
</a> <div class="container">
</div><a name="videos"></a> <div class="video youtube">
</div> <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>
</div> <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg">
<span class="videocta">Watch monthly office hours&nbsp;&#9654;</span>
</a>
</div>
<div class="videos">
<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=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ" title="Weekly community meetings" allow="camera 'none'; microphone 'none'; geolocation 'none'; fullscreen https://www.youtube.com/"></iframe>
<h1 style="margin-top:0px">Videos</h1> <a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ">
<span class="videocta">Watch weekly community meetings&nbsp;&#9654;</span>
<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> </a>
</div>
<div class="videocontainer">
<div class="video youtube" id="discuss">
<div class="video"> <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">
<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> <span class="videocta">Watch a talk from a community member&nbsp;&#9654;</span>
</a>
<a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3azFUvYJjGn45YbF6C-uIg"> </div>
<div class="videocta"> </div>
Watch monthly office hours&nbsp;&#9654;</div> </div>
</a>
</div> <div id="resources" class="community-section">
<h2>Discussions</h2>
<div class="video">
<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> <p class="community-simple">We talk a lot. Find us and join the conversation on any of these&nbsp;platforms.</p>
<a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP1pkHsbPjzAewvMgGUpkCnJ">
<div class="videocta"> <div class="container">
Watch weekly community meetings&nbsp;&#9654; <div class="community-resource">
</div> <a href="https://discuss.kubernetes.io/">
</a> <img src="/images/community/discuss.png" alt="Forum">
</div> </a>
<a href="https://discuss.kubernetes.io/">Community forums&nbsp;&#9654;</a>
<div class="video"> <p>Topic-based technical discussions that bridge docs,
troubleshooting, and so much&nbsp;more.</p>
<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> </div>
<a href="https://www.youtube.com/playlist?list=PL69nYSiGNLP3QpQrhZq_sLYo77BVKv09F"> <div id="twitter" class="community-resource">
<div class="videocta"> <a href="https://twitter.com/kubernetesio">
Watch a talk from a community member&nbsp;&#9654; <img src="/images/community/twitter.png" alt="Twitter">
</div> </a>
<a href="https://twitter.com/kubernetesio">Twitter&nbsp;&#9654;</a>
</a> <p><em>#kubernetesio</em></p>
<a name="discuss"></a> <p>Real-time announcements of blog posts, events, news, ideas.</p>
</div> </div>
</div>
</div> <div id="github" class="community-resource">
<a href="https://github.com/kubernetes/kubernetes">
<img src="/images/community/github.png" alt="GitHub">
<div class="resources"> </a>
<br class="mobile"><br class="mobile"> <a href="https://github.com/kubernetes/kubernetes">GitHub&nbsp;&#9654;</a>
<br class="tablet"><br class="tablet"> <p>All the project and issue tracking, plus of course code.</p>
<h1 style="padding-top:1%">Discussions</h1> </div>
<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 id="server-fault" class="community-resource">
<a href="https://serverfault.com/questions/tagged/kubernetes">
<div class="resourcecontainer"> <img src="/images/community/serverfault.png" alt="Server Fault">
</a>
<div class="resourcebox"> <a href="https://serverfault.com/questions/tagged/kubernetes">Server Fault&nbsp;&#9654;</a>
<img src="/images/community/discuss.png" alt=Forum" style="width:80%;padding-bottom:2%"> <p>Kubernetes-related discussion on Server Fault. Ask a question, or answer one.</p>
<a href="https://discuss.kubernetes.io/" style="color:#0662EE;display:block;margin-top:1%"> </div>
forum&nbsp;&#9654;
</a> <div id="slack" class="community-resource">
<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://kubernetes.slack.com/">
Topic-based technical discussions that bridge docs, StackOverflow, and so much&nbsp;more <img src="/images/community/slack.png" alt="Slack">
</div> </a>
</div> <a href="https://kubernetes.slack.com/">Slack&nbsp;&#9654;</a>
<p>With 170+ channels, you'll find one that fits your needs.</p>
<div class="resourcebox"> <details><summary><em>Need an invitation?</em></summary>
<img src="/images/community/twitter.png" alt="Twitter" style="width:80%;padding-bottom:2%"> Visit <a href="https://slack.k8s.io/">https://slack.k8s.io/</a>
<a href="https://twitter.com/kubernetesio" style="color:#0662EE;display:block;margin-top:1%"> for an invitation.</details>
twitter&nbsp;&#9654; </div>
</a> </div>
<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> <div class="community-section" id="events">
<div class="container">
<div class="resourcebox"> <h2>Upcoming Events</h2>
<img src="/images/community/github.png" alt="GitHub" style="width:80%;padding-bottom:2%"> {{< upcoming-events >}}
<a href="https://github.com/kubernetes/kubernetes" style="color:#0662EE;display:block;margin-top:1%"> </div>
github&nbsp;&#9654; </div>
</a>
<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%"> <div class="community-section" id="meetups">
All the project and issue tracking, plus of course code <h2>Global community</h2>
</div> <p>
</div> 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.
</p>
<div class="resourcebox"> <a href="https://www.meetup.com/topics/kubernetes/" class="community-cta-button">
<img src="/images/community/stack.png" alt="Stack Overflow" style="width:80%;padding-bottom:2%"> <span class="community-cta">Find a meetup</span>
<a href="https://stackoverflow.com/search?q=kubernetes" style="color:#0662EE;display:block;margin-top:1%"> </a>
stack overflow&nbsp;&#9654; </div>
</a>
<div class="resourceboxtext" style="font-size:12px;text-transform:none !important;font-weight:300;line-height:1.4em;color:#333333;margin-top:4%"> <div class="community-section community-frame" id="news">
Technical troubleshooting for any use&nbsp;case <h2>Recent News</h2>
<a name="events"></a> <div class="twittercol1">
</div> <a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/kubernetesio?ref_src=twsrc%5Etfw">Tweets by kubernetesio</a>
</div> </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>
+4 -1
View File
@@ -1,2 +1,5 @@
The files in this directory have been imported from other sources. Do not The files in this directory have been imported from other sources. Do not
edit them directly, except by replacing them with new versions. 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.
+32 -11
View File
@@ -55,6 +55,10 @@ body.cid-community .community-section {
text-align: center; /* overridden for paragraphs */ text-align: center; /* overridden for paragraphs */
} }
body.cid-community .community-section:first-child {
padding-top: max(3vh,1.5em);
}
body.cid-community #navigation-items { body.cid-community #navigation-items {
padding: 0.25em; padding: 0.25em;
@@ -328,24 +332,41 @@ body.cid-community details > summary {
color: #303030; 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; 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) { @media only screen and (max-width: 640px) {
body.cid-community #navigation-items { body.cid-community #navigation-items {
justify-content: flex-start; justify-content: flex-start;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB