whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update and restyle community page

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
content/en/community/_index.html
+120 -194
View File
@@ -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="banner1">
<img src="/images/community/kubernetes-community-final-02.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" class="desktop">
<img src="/images/community/kubernetes-community-02-mobile.jpg" alt="Kubernetes Conference Gallery" style="width:100%;padding-left:0px" 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>
<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">
<br class="mobile">
<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.
<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 id="navigation-items">
<div class="community-nav-item external-link">
<a href="https://www.kubernetes.dev/">Contributor community</a>
</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;
<div class="community-nav-item">
<a href="#values">Community values</a>
</div>
<div class="community-nav-item">
<a href="#conduct">Code of conduct</a>
</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>
<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">
<img src="/images/community/kubernetes-community-final-04.jpg" alt="Kubernetes Conference Gallery" style="width:100%" class="desktop">
<div class="community-section" id="gallery">
<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">
<img src="/images/community/kubernetes-community-final-05.jpg" alt="Kubernetes Conference Gallery" style="width:100%;margin-right:0% important" class="desktop">
</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="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>
<div class="community-section" id="values">
<h2>Community Values</h2>
<p>The Kubernetes Community values are the keystone to the ongoing success of the project.<br class="optional"/>
These principles guide every aspect of the Kubernetes project.</p>
<a href="https://www.kubernetes.dev/community/values/" class="community-cta-button">
<span class="community-cta">Read more</span>
</a>
</div><a name="conduct"></a>
</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>
<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><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">
<br class="mobile"><br class="mobile">
<br class="tablet"><br class="tablet">
<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>
<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">
<div class="videocta">
Watch monthly office hours&nbsp;&#9654;</div>
<span class="videocta">Watch monthly office hours&nbsp;&#9654;</span>
</a>
</div>
<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>
<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">
<div class="videocta">
Watch weekly community meetings&nbsp;&#9654;
</div>
<span class="videocta">Watch weekly community meetings&nbsp;&#9654;</span>
</a>
</div>
<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>
<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">
<div class="videocta">
Watch a talk from a community member&nbsp;&#9654;
</div>
<span class="videocta">Watch a talk from a community member&nbsp;&#9654;</span>
</a>
<a name="discuss"></a>
</div>
</div>
</div>
<div id="resources" class="community-section">
<h2>Discussions</h2>
<div class="resources">
<br class="mobile"><br class="mobile">
<br class="tablet"><br class="tablet">
<h1 style="padding-top:1%">Discussions</h1>
<p class="community-simple">We talk a lot. Find us and join the conversation on any of these&nbsp;platforms.</p>
<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;
<div class="container">
<div class="community-resource">
<a href="https://discuss.kubernetes.io/">
<img src="/images/community/discuss.png" alt="Forum">
</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>
<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 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;
<div id="twitter" class="community-resource">
<a href="https://twitter.com/kubernetesio">
<img src="/images/community/twitter.png" alt="Twitter">
</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>
<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 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;
<div id="github" class="community-resource">
<a href="https://github.com/kubernetes/kubernetes">
<img src="/images/community/github.png" alt="GitHub">
</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>
<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 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;
<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>
<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>
<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>
<!--
<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>
<div class="community-section" id="events">
<div class="container">
<h2>Upcoming Events</h2>
{{< upcoming-events >}}
</div>
</div>
<div class="meetups">
<div class="meetupcol">
<div class="meetuptext">
<h1 style="text-align:left">Global Community</h1>
<div class="community-section" id="meetups">
<h2>Global community</h2>
<p>
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>
</p>
<a href="https://www.meetup.com/topics/kubernetes/" class="community-cta-button">
<span class="community-cta">Find a meetup</span>
</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="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> <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
+3
View File
@@ -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
+32 -11
View File
@@ -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 {
padding-left: calc((100vw - min(75vw,100em))/2);
padding-right: calc((100vw - min(75vw,100em))/2);
padding-bottom: 8em;
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_coc_container h1,
body.cid-community .cncf_coc_container h2 {
margin-top: 1.5em;
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;
}
/* no need to repeat the heading */
body.cid-community .cncf_coc_container h1:first-child {
visibility: hidden;
margin: 0;
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;
static/images/community/discuss.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

static/images/community/kubernetes-community-column.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

static/images/community/serverfault.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

static/images/community/slack.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 32 KiB

static/images/community/stack.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

static/images/community/twitter.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB