diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 7c1b6eef03..8b1262bf35 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -406,11 +406,714 @@ footer {
/* COMMUNITY */
body.cid-community {
+ main > * h1 {
+ visibility: hidden;
+ }
+
section.linkbox {
- max-width: clamp(50%, calc(100em + 2vw), 100vw);
+ max-width: calc(clamp(50%, calc(100em + 2vw), 100vw));
margin-left: auto;
margin-right: auto;
}
+
+ #banner {
+ aspect-ratio: 1500 / 293; /* match source image */
+ display: block;
+ width: 100%;
+ margin: 0 0 2.5em 0;
+ max-height: calc(min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh));
+ object-fit: cover;
+ overflow: clip;
+ min-height: 240px;
+ }
+
+ .newcommunitywrapper .banner1, .banner1.legacy { // legacy style
+ position: relative;
+ float: left;
+ width: 100%;
+ padding-left: 0 !important;
+
+ .desktop {
+ display: block;
+ }
+
+ .mobile {
+ display: none; // don't adapt legacy styles
+ // instead, update the localization
+ }
+ }
+
+ .newcommunitywrapper .intro, .intro.legacy { // legacy style
+ float: left;
+ width: 75%;
+ margin-left: 12.5%;
+ text-align: left;
+ line-height: 1.6em;
+ margin-bottom: 2%;
+ margin-top: 3%;
+ font-weight: 300;
+ letter-spacing: 0.04em;
+ }
+
+ .newcommunitywrapper .conduct, .conduct.legacy { // legacy style
+ float: left;
+ width: 100%;
+ padding-top: 3%;
+ padding-bottom: 3%;
+ text-align: center;
+ font-weight: 300;
+ }
+
+ .newcommunitywrapper .conducttext, .conducttext.legacy { // legacy style
+ float: left;
+ width: 70%;
+ margin-bottom: 3%;
+ margin-left: 15%;
+ text-align: center;
+ font-weight: 300;
+ }
+
+ .newcommunitywrapper .events, .events.legacy { // legacy style
+ background-image: url('/images/community/event-bg.jpg');
+ float: left;
+ width: 100%;
+ margin-top: 3%;
+
+ display: none; // broken
+ }
+
+ .newcommunitywrapper .eventcontainer, .eventscontainer.legac{ // legacy style
+ width: 80%;
+ margin-top: 5%;
+ margin-bottom: 3%;
+ margin-left: 10%;
+ }
+
+ .newcommunitywrapper .event, .event.legacy { // legacy style
+ width: 23%;
+ color: white !important;
+ font-size: 1.1em !important;
+ padding-top: 1%;
+ padding-bottom: 8%;
+ text-align: center;
+ float: left;
+ margin: 1%;
+ a {
+ color: white !important;
+ font-weight: bold !important;
+ display: block;
+ padding-bottom: 2%;
+ }
+ }
+
+ .newcommunitywrapper .imagecols, .imagecols.legacy { // legacy style
+ text-align: center;
+ margin: 0 auto;
+ width: 80%;
+ margin-left: 10%;
+ float: left;
+ margin-bottom: 2%;
+
+ img.desktop {
+ display: block;
+ }
+
+ img.mobile {
+ display: none; // don't adapt legacy styles based on viewport
+ // instead, update the localization
+ }
+ }
+
+ .newcommunitywrapper .imagecol, .imagecol.legacy { // legacy style
+ margin-right: 1%;
+ float: left;
+ width: 32%;
+ }
+
+
+
+ .newcommunitywrapper + .videos, .videos.legacy { // legacy style
+ float: left;
+ width: 100%;
+ padding-top: 5%;
+ padding-bottom: 5%;
+ background-color: #eeeeee;
+ }
+
+ .newcommunitywrapper .videocontainer, .videocontainer.legacy { // legacy style
+ float: left;
+ margin-left: 10%;
+ width: 80%;
+ }
+
+ .newcommunitywrapper .video, .video.legacy { // legacy style
+ margin-right: 2%;
+ float: left;
+ width: 31%;
+ }
+
+ .newcommunitywrapper .videotext, .videotext.legacy { // legacy style
+ margin-top: 3%;
+ text-align: center;
+ padding-top: 4%;
+ }
+
+ .newcommunitywrapper .videocta, .videocta.legacy { // legacy style`
+ text-align: center;
+ padding: 3%;
+ color: #0662EE;
+ text-transform: uppercase;
+ font-weight: bold;
+ letter-spacing: 0.05em;
+ line-height: 1.3em;
+ padding-top: 5%;
+ }
+
+ .newcommunitywrapper .resources, .resources.legacy { // legacy style
+ width: 100%;
+ margin-top: 5%;
+ margin-bottom: 3%;
+ float: left;
+ }
+
+ .newcommunitywrapper .resourcecontainer, .resourcecontainer.legacy { // legacy style
+ width: 90%;
+ margin-top: 3%;
+ margin-left: 10%;
+ }
+
+ .newcommunitywrapper .resourcebox, .resourcebox.legacy { // legacy style
+ float: left;
+ margin: 1%;
+ border: 1px solid grey;
+ padding: 2%;
+ font-size: 1em;
+ color: #0662EE;
+ height: 100%;
+ vertical-align: middle;
+ text-transform: uppercase;
+ font-weight: bold;
+ line-height: 1.3em;
+ letter-spacing: 0.05em;
+ width: 20%;
+ min-height: 330px;
+ text-align: center;
+ }
+
+ .newcommunitywrapper .meetups, .meetups.legacy { // legacy style
+ clear: both;
+ 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;
+ width: 100%;
+ padding: 5%;
+ padding-bottom: 7%;
+ }
+
+ .newcommunitywrapper .meetupcol, .meetupcol.legacy{ // legacy style
+ clear: both;
+ width: 37%;
+ margin-left: 5%;
+ text-align: left;
+ }
+
+ .newcommunitywrapper .meetuptext, .meetuptext.legacy { // legacy style
+ color: white;
+ margin-bottom: 7%;
+ }
+
+ .newcommunitywrapper .news, .news.legacy { // legacy style
+ width: 100%;
+
+ > br { display: none; }
+
+ .twittercol1 {
+ display: flex;
+ justify-content: center;
+ > * {
+ overflow-y: scroll;
+ }
+ margin: 4rem;
+ }
+ }
+
+ .newcommunitywrapper .newscol, .news.legacy { // legacy style
+ float: left;
+ width: 30%;
+ font-weight: 300;
+ }
+
+ /* end of legacy styles */
+
+ .community-section #h2 {
+ font-weight: 200;
+ margin-top: 1em;
+ margin-bottom: 0.5em;
+ text-align: center;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ white-space: nowrap;
+ margin-bottom: 2rem;
+ }
+
+ .community-section h2:before, .community-section h2:after {
+ background-color: #aaa;
+ content: "";
+ display: inline-block;
+ height: 1px;
+ position: relative;
+ vertical-align: middle;
+ width: 100%;
+ }
+
+ .community-section h2:before {
+ margin-right: 0.5em;
+ }
+
+ .community-section h2:after {
+ margin-left: 0.5em;
+ }
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections
+ ------------------------------------- */
+body.cid-community .community-section {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ align-content: space-between;
+
+ min-height: 24em;
+
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 60px;
+
+ text-align: center; /* overridden for paragraphs */
+}
+
+body.cid-community .community-section:first-child {
+ padding-top: calc(max(3vh, 1.5em));
+}
+
+body.cid-community .community-section > * {
+ max-width: 1200px;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections: Navigation
+ ------------------------------------- */
+body.cid-community .community-section, body.cid-community #navigation-items {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+body.cid-community #navigation-items {
+ /*
+ Padding on two sides = (total width - max width) / 2
+
+ If padding on two sides smaller then 60px, then use 60px,
+ otherwise uses the calculated value for padding.
+ */
+ padding: 8px calc(max(calc((100% - 1200px)/2), 60px));
+
+ width: 100%;
+
+ 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;
+ justify-content: center;
+}
+
+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 #navigation-items .community-nav-item a {
+ transition: color 0.2s ease;
+}
+
+body.cid-community .community-section > p:not(.community-simple) {
+ line-height: 1.5em;
+ text-align: initial;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Introduction
+ ------------------------------------- */
+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 .community-section#introduction {
+ padding: 0 60px;
+ min-height: unset;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Conference gallery
+ ------------------------------------- */
+body.cid-community #gallery {
+ max-width: 100%;
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+}
+
+body.cid-community #gallery img {
+ display: block;
+ flex-basis: 0;
+ flex-grow: 0;
+ height: calc(min(20em, 90vh));
+}
+
+/* see media queries later in file */
+body.cid-community #gallery img.community-gallery-mobile {
+ display: none;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Events
+ ------------------------------------- */
+body.cid-community .community-section#events {
+ width: 100%;
+ margin-bottom: 0;
+
+ /* no events
+ background-image: url('/images/community/event-bg.jpg');
+ background-size: 100% auto;
+ background-position: center;
+ color: #fff;
+ */
+ display: none;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Community Values
+ ------------------------------------- */
+body.cid-community .community-section#values {
+ width: 100%;
+ color: #fff;
+ background-image: url('/images/community/event-bg.jpg');
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Meetups
+ ------------------------------------- */
+body.cid-community .community-section#meetups {
+ width: 100%;
+ min-height: calc(min(24em,50vh));
+ margin-top: 0;
+ color: #fff;
+ 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;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - News
+ ------------------------------------- */
+body.cid-community .community-section#news {
+ padding: 12px 12px;
+}
+
+body.cid-community a.community-cta-button {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ min-height: 3em;
+ min-width: calc(max(5vw, 9em));
+ margin: 0.75em auto 0 auto; /* gap before button */
+ padding: 0.75em 1.5em;
+
+ color: white;
+ background-color: #0662EE;
+ border-radius: 6px;
+
+ text-align: center;
+ appearance: button;
+ transition: background-color 0.2s ease;
+}
+
+body.cid-community a.community-cta-button:hover { background-color: #2357b0; }
+
+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;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Videos
+ ------------------------------------- */
+body.cid-community #videos {
+ width: 100%;
+ background-color: #eeeeee;
+}
+
+body.cid-community #videos .container {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: calc(max(12px, 2em));
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+body.cid-community .video {
+ width: calc(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 .videocta:hover {
+ color: #0e58a7;
+}
+body.cid-community .video iframe {
+ min-width: 95%;
+ height: auto;
+ aspect-ratio: 16 / 9;
+}
+
+/* -------------------------------------
+ * Containers and blocks of sections - Discussions
+ ------------------------------------- */
+body.cid-community #resources .container {
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+ 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: calc(min(6em, 50vh));
+ width: auto;
+ display: block;
+ margin: 1em auto 0.75em auto;
+}
+
+body.cid-community #resources .container > .community-resource a {
+ text-transform: uppercase;
+ transition: color 0.2s ease;
+}
+
+body.cid-community .resourcebox {
+ height: 100%;
+ min-height: 370px;
+}
+
+body.cid-community .community-section.community-frame {
+ width: 100%;
+}
+
+body.cid-community .community-section.community-frame .twittercol1 {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+body.cid-community details > summary {
+ color: #303030;
+}
+
+body.cid-community #cncf-code-of-conduct-intro,
+body.cid-community #cncf-code-of-conduct {
+ max-width: calc(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: calc(min(2px, 0.125em));
+ padding: 8px 30px;
+ }
+ 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;
+ flex-direction: column;
+ align-items: center;
+ }
+ body.cid-community #resources .container .community-resource {
+ max-width: calc(min(80vw, 24rem));
+ }
+ body.cid-community a.community-cta-button {
+ font-size: 1.5rem;
+ }
+ body.cid-community a.community-cta-button {
+ padding: 0.5rem 1rem;
+ min-height: 2rem;
+ min-width: 5rem;
+ font-size: 1rem;
+ }
+ body.cid-community .community-section {
+ padding: 30px;
+ }
+ body.cid-community .community-section h2 {
+ /* Smaller title size when screen is small */
+ font-size: 24px;
+ }
+ body.cid-community .community-section#introduction {
+ padding: 0 30px;
+ }
+ body.cid-community .community-section#gallery {
+ min-height: unset;
+ }
+}
+
+@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: calc(max(30em, 80vw));
+ max-width: calc(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: calc(max(20em, 18vh));
+ }
+ body.cid-community .community-section#meetups p:last-of-type {
+ margin-bottom: 6em; /* extra space for background */
+ }
+}
+
+@media only screen and (max-width: 767px) {
+ body.cid-community .community-section h2:before,
+ body.cid-community .community-section h2:after {
+ display: none;
+ }
}
#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning, body.cid-community > #deprecation-warning {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 38e7c4ddd8..97637d10b8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -82,11 +82,6 @@
{{- if eq (lower .Params.cid) "community" -}}
-{{- if eq .Params.community_styles_migrated true -}}
-
-{{- else -}}
-
-{{- end -}}
{{- end -}}
{{ with .Params.js }}{{ range (split . ",") }}
diff --git a/static/css/community.css b/static/css/community.css
deleted file mode 100644
index 2ed9c36491..0000000000
--- a/static/css/community.css
+++ /dev/null
@@ -1,486 +0,0 @@
-body.cid-community #banner {
- aspect-ratio: 1500 / 293; /* match source image */
- display: block;
- width: 100%;
- margin: 0 0 2.5em 0;
- max-height: min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh);
- object-fit: cover;
- overflow: clip;
- min-height: 240px;
-}
-
-body.cid-community .community-section #h2 {
- font-weight: 200;
- margin-top: 1em;
- margin-bottom: 0.5em;
- text-align: center;
- letter-spacing: 0.15em;
- text-transform: uppercase;
-}
-
-/* -------------------------------------
- * Line through styles of Headings
- ------------------------------------- */
-body.cid-community .community-section h2 {
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- white-space: nowrap;
- margin-bottom: 2rem;
-}
-
-body.cid-community .community-section h2:before,
-body.cid-community .community-section h2:after {
- background-color: #aaa;
- content: "";
- display: inline-block;
- height: 1px;
- position: relative;
- vertical-align: middle;
- width: 100%;
-}
-
-body.cid-community .community-section h2:before {
- margin-right: 0.5em;
-}
-
-body.cid-community .community-section h2:after {
- margin-left: 0.5em;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections
- ------------------------------------- */
-body.cid-community .community-section {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- align-content: space-between;
-
- min-height: 24em;
-
- margin-top: 1em;
- margin-bottom: 1em;
- padding: 60px;
-
- text-align: center; /* overridden for paragraphs */
-}
-
-body.cid-community .community-section:first-child {
- padding-top: max(3vh, 1.5em);
-}
-
-body.cid-community .community-section > * {
- max-width: 1200px;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections: Navigation
- ------------------------------------- */
-body.cid-community .community-section, body.cid-community #navigation-items {
- margin-left: auto;
- margin-right: auto;
-}
-
-body.cid-community #navigation-items {
- /*
- Padding on two sides = (total width - max width) / 2
-
- If padding on two sides smaller then 60px, then use 60px,
- otherwise uses the calculated value for padding.
- */
- padding: 8px max(calc((100% - 1200px)/2), 60px);
-
- width: 100%;
-
- 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;
- justify-content: center;
-}
-
-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 #navigation-items .community-nav-item a {
- transition: color 0.2s ease;
-}
-
-body.cid-community .community-section > p:not(.community-simple) {
- line-height: 1.5em;
- text-align: initial;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Introduction
- ------------------------------------- */
-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 .community-section#introduction {
- padding: 0 60px;
- min-height: unset;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Conference gallery
- ------------------------------------- */
-body.cid-community #gallery {
- max-width: 100%;
- display: flex;
- flex-direction: row;
- gap: 0.75rem;
-}
-
-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;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Events
- ------------------------------------- */
-body.cid-community .community-section#events {
- width: 100%;
- margin-bottom: 0;
-
- /* no events
- background-image: url('/images/community/event-bg.jpg');
- background-size: 100% auto;
- background-position: center;
- color: #fff;
- */
- display: none;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Community Values
- ------------------------------------- */
-body.cid-community .community-section#values {
- width: 100%;
- color: #fff;
- background-image: url('/images/community/event-bg.jpg');
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Meetups
- ------------------------------------- */
-body.cid-community .community-section#meetups {
- width: 100%;
- min-height: min(24em,50vh);
- margin-top: 0;
- color: #fff;
- 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;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - News
- ------------------------------------- */
-body.cid-community .community-section#news {
- padding: 12px 12px;
-}
-
-body.cid-community a.community-cta-button {
- display: inline-flex;
- justify-content: center;
- align-items: center;
-
- min-height: 3em;
- min-width: max(5vw, 9em);
- margin: 0.75em auto 0 auto; /* gap before button */
- padding: 0.75em 1.5em;
-
- color: white;
- background-color: #0662EE;
- border-radius: 6px;
-
- text-align: center;
- appearance: button;
- transition: background-color 0.2s ease;
-}
-
-body.cid-community a.community-cta-button:hover { background-color: #2357b0; }
-
-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;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Videos
- ------------------------------------- */
-body.cid-community #videos {
- width: 100%;
- background-color: #eeeeee;
-}
-
-body.cid-community #videos .container {
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- gap: max(12px, 2em);
- 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 .videocta:hover {
- color: #0e58a7;
-}
-body.cid-community .video iframe {
- min-width: 95%;
- height: auto;
- aspect-ratio: 16 / 9;
-}
-
-/* -------------------------------------
- * Containers and blocks of sections - Discussions
- ------------------------------------- */
-body.cid-community #resources .container {
- width: 100%;
- display: flex;
- flex-wrap: nowrap;
- 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;
- transition: color 0.2s ease;
-}
-
-body.cid-community .resourcebox {
- height: 100%;
- min-height: 370px;
-}
-
-body.cid-community .community-section.community-frame {
- width: 100%;
-}
-
-body.cid-community .community-section.community-frame .twittercol1 {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-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);
- padding: 8px 30px;
- }
- 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;
- flex-direction: column;
- align-items: center;
- }
- body.cid-community #resources .container .community-resource {
- max-width: min(80vw, 24rem);
- }
- body.cid-community a.community-cta-button {
- font-size: 1.5rem;
- }
- body.cid-community a.community-cta-button {
- padding: 0.5rem 1rem;
- min-height: 2rem;
- min-width: 5rem;
- font-size: 1rem;
- }
- body.cid-community .community-section {
- padding: 30px;
- }
- body.cid-community .community-section h2 {
- /* Smaller title size when screen is small */
- font-size: 24px;
- }
- body.cid-community .community-section#introduction {
- padding: 0 30px;
- }
- body.cid-community .community-section#gallery {
- min-height: unset;
- }
-}
-
-@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 */
- }
-}
-
-@media only screen and (max-width: 767px) {
- body.cid-community .community-section h2:before,
- body.cid-community .community-section h2:after {
- display: none;
- }
-}