| #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; |
| } |
| |
| .community-section #h2 { |
| font-weight: 200; |
| margin-top: 1em; |
| margin-bottom: 0.5em; |
| text-align: center; |
| letter-spacing: 0.15em; |
| text-transform: uppercase; |
| } |
| |
| /* .community-section h2:before, |
| .community-section h2:after { |
| background-color: #aaaaaa; |
| content: ""; |
| display: inline-block; |
| height: 1px; |
| position: relative; |
| vertical-align: middle; |
| width: 35%; |
| } |
| |
| .community-section h2:before { |
| right: 0.5em; |
| margin-left: -50%; |
| } |
| |
| .community-section h2:after { |
| left: 0.5em; |
| margin-right: -50%; |
| } */ |
| |
| .community-section, #navigation-items { |
| /* max-width: min(85vw,100em); */ |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .community-section { |
| width: 100%; |
| padding: 4em 0; |
| justify-content: space-evenly; |
| align-items: baseline; |
| align-content: space-between; |
| min-height: 10em; |
| text-align: center; /* overridden for paragraphs */ |
| background-color: #eee; |
| } |
| |
| .community-section:first-child { |
| padding-top: max(3vh,1.5em); |
| } |
| |
| #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 */ |
| #navigation-items { |
| padding-left: calc((100vw - min(85vw,120em))/2); |
| padding-right: calc((100vw - min(85vw,120em))/2); |
| } |
| |
| #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; |
| } |
| |
| .community-section > p:not(.community-simple) { |
| line-height: 1.5em; |
| text-align: initial; |
| } |
| |
| .community-section#introduction, |
| .community-section#introduction > p { |
| line-height: 1.75em; |
| font-weight: 300; |
| letter-spacing: 0.04em; |
| } |
| |
| #gallery { |
| display: flex; |
| max-width: 100vw; |
| gap: 0.75rem; |
| justify-content: center; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| #gallery img { |
| display: block; |
| flex-basis: 0; |
| flex-grow: 0; |
| height: min(20em, 90vh); |
| } |
| |
| /* see media queries later in file */ |
| #gallery img.community-gallery-mobile { |
| display: none; |
| } |
| |
| |
| |
| |
| .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; |
| } |
| |
| .community-section#values { |
| width: 100vw; |
| max-width: initial; |
| background-image: url('/images/community/event-bg.jpg'); |
| color: #fff; |
| padding: 2em; |
| margin-top: 3em; |
| } |
| .community-section#values { |
| padding-left: calc((100vw - min(75vw,120em))/2); |
| padding-right: calc((100vw - min(75vw,120em))/2); |
| } |
| |
| .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); |
| } |
| |
| .community-section#meetups { |
| padding-left: calc((100vw - min(75vw,100em))/2); |
| padding-right: calc((100vw - min(75vw,100em))/2); |
| } |
| |
| 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; |
| } |
| |
| a.community-cta-button > span.community-cta { |
| color: inherit; |
| background: transparent; |
| |
| letter-spacing: 0.02em; |
| font-weight: bold; |
| text-transform: uppercase; |
| } |
| |
| .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; |
| } |
| |
| #videos { |
| width: 100vw; |
| max-width: initial; |
| padding: 0.5em 5vw 5% 5vw; /* fallback in case calc() fails */ |
| background-color: #eeeeee; |
| margin-top: 4em; |
| } |
| |
| #videos { |
| padding-left: calc((100vw - min(95vw,160em))/2); |
| padding-right: calc((100vw - min(95vw,160em))/2); |
| } |
| |
| #videos .container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: max(12px,2em); |
| max-width: 95vw; |
| justify-content: center; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| .video { |
| width: min(80vw,max(31%, 24em)); |
| flex-basis: 31%; |
| flex-shrink: 1; |
| } |
| |
| .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; |
| } |
| |
| .video iframe { |
| min-width: 95%; |
| height: auto; |
| aspect-ratio: 16 / 9; |
| } |
| |
| #resources .container { |
| width: 100%; |
| display: flex; |
| flex-wrap: none; |
| gap: 2em; |
| justify-content: center; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| #resources .container > .community-resource { |
| background-color: #fff; |
| border-radius: 4px; |
| flex-basis: auto; |
| width: 100%; |
| flex-shrink: 1; |
| padding: 12px 8px; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| } |
| |
| #resources .container > .community-resource img { |
| max-height: min(6em, 50vh); |
| width: auto; |
| display: block; |
| margin: 1em auto 0.75em auto; |
| } |
| |
| #resources .container > .community-resource a { |
| text-transform: uppercase; |
| } |
| |
| .resourcebox { |
| height: 100%; |
| min-height: 370px; |
| } |
| |
| |
| |
| |
| .community-section.community-frame { |
| width: 100vw; |
| } |
| |
| .community-section.community-frame .twittercol1 { |
| width: 100%; |
| } |
| |
| details > summary { |
| color: #303030; |
| } |
| |
| #cncf-code-of-conduct-intro, |
| #cncf-code-of-conduct { |
| max-width: min(90vw, 100em); |
| padding-left: 0.5em; |
| padding-right: 0.5em; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| #cncf-code-of-conduct { |
| padding-bottom: 8em; |
| padding-top: 0.25em; |
| margin-top: 0; |
| } |
| |
| /* duplication not needed */ |
| #values-legacy h1 { |
| display: none; |
| } |
| |
| #values-legacy h2, |
| #cncf-code-of-conduct h2 { |
| margin-top: 0.25em; |
| margin-bottom: 1em; |
| color: #0662EE; |
| } |
| |
| #values-legacy h2:before, |
| #values-legacy h2:after, |
| #cncf-code-of-conduct h2:before, |
| #cncf-code-of-conduct h2:after { |
| display: none; /* skip decoration */ |
| } |
| |
| |
| @media only screen and (max-width: 640px) { |
| #navigation-items { |
| justify-content: flex-start; |
| text-align: left; |
| gap: min(2px,0.125em); |
| } |
| #navigation-items div.community-nav-item { |
| width: 100%; |
| text-align: left; |
| min-height: initial; |
| flex-shrink: 0; |
| } |
| .video { |
| max-width: 80vw; |
| flex-basis: auto; |
| } |
| #resources .container { |
| flex-wrap: wrap; |
| } |
| #resources .container .community-resource { |
| max-width: min(80vw, 24rem); |
| } |
| a.community-cta-button { |
| font-size: 1.5rem; |
| } |
| } |
| |
| @media only screen and (max-width: 1024px) { |
| #gallery img.community-gallery-desktop { |
| display: none; |
| } |
| #gallery img.community-gallery-mobile { |
| display: initial; |
| max-width: 95vw; |
| height: auto; |
| } |
| .video { |
| flex-basis: max(30em,80vw); |
| max-width: max(32em, 75vw); |
| } |
| .video .videocta { |
| padding-bottom: 0.5em; |
| } |
| } |
| |
| @media only screen and (min-width: 1024px) { |
| br.optional { |
| display: none; |
| } |
| .community-section:not(:first-of-type) { |
| min-height: max(20em,18vh); |
| } |
| .community-section#meetups p:last-of-type { |
| margin-bottom: 6em; /* extra space for background */ |
| } |
| } |