Merge pull request #45869 from sftim/20240414_vanillaify_content_partners
Ready partners page for vanilla Docsypull/45911/head
commit
bddad1a2f6
|
@ -584,23 +584,230 @@ body.td-home #deprecation-warning {
|
|||
#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning {
|
||||
padding-top: 32px;
|
||||
}
|
||||
body.cid-partners > #deprecation-warning {
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
body.cid-partners > #deprecation-warning > .content {
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
body.cid-partners {
|
||||
> #deprecation-warning {
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
width: 100vw;
|
||||
> .content {
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
section#users {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kcsp_section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* COLUMN SETUP */
|
||||
.col {
|
||||
display: block;
|
||||
float:left;
|
||||
margin: 1% 0 1% 1.6%;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.col:first-child { margin-left: 0; }
|
||||
|
||||
|
||||
/* GROUPING */
|
||||
.group:before,
|
||||
.group:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
.group:after {
|
||||
clear:both;
|
||||
}
|
||||
.group {
|
||||
zoom:1; /* For IE 6/7 */
|
||||
}
|
||||
|
||||
/* GRID OF THREE */
|
||||
.span_3_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
.span_2_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
.span_1_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.col-container {
|
||||
display: table; /* Make the container element behave like a table */
|
||||
width: 100%; /* Set full-width to expand the whole page */
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.col-nav {
|
||||
display: table-cell; /* Make elements inside the container behave like table cells */
|
||||
width: 18%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
border: 5px solid white;
|
||||
}
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.col { margin: 1% 0 1% 0%;}
|
||||
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.col-nav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
background-color: #3371e3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#usersGrid a {
|
||||
display: inline-block;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#isvContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#kcspContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#distContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#ktpContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
position: relative;
|
||||
width: 47%;
|
||||
max-width: 48%;
|
||||
min-width: 48%;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.partner-box img {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.partner-box a {
|
||||
color: #3576E3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 568px) {
|
||||
#ktpContainer, #distContainter, #kcspContainer, #isvContainer, #servContainer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 568px) {
|
||||
#ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
body.cid-community > #deprecation-warning > .deprecation-warning {
|
||||
margin-left: 20px;
|
||||
|
|
|
@ -1,201 +0,0 @@
|
|||
/* SECTIONS */
|
||||
.section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.kcsp_section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* COLUMN SETUP */
|
||||
.col {
|
||||
display: block;
|
||||
float:left;
|
||||
margin: 1% 0 1% 1.6%;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.col:first-child { margin-left: 0; }
|
||||
|
||||
|
||||
/* GROUPING */
|
||||
.group:before,
|
||||
.group:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
.group:after {
|
||||
clear:both;
|
||||
}
|
||||
.group {
|
||||
zoom:1; /* For IE 6/7 */
|
||||
}
|
||||
|
||||
/* GRID OF THREE */
|
||||
.span_3_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
.span_2_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
.span_1_of_3 {
|
||||
width: 35%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.col-container {
|
||||
display: table; /* Make the container element behave like a table */
|
||||
width: 100%; /* Set full-width to expand the whole page */
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.col-nav {
|
||||
display: table-cell; /* Make elements inside the container behave like table cells */
|
||||
width: 18%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
border: 5px solid white;
|
||||
}
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.col { margin: 1% 0 1% 0%;}
|
||||
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.col-nav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
background-color: #3371e3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#usersGrid a {
|
||||
display: inline-block;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#isvContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#kcspContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#distContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
#ktpContainer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
position: relative;
|
||||
width: 47%;
|
||||
max-width: 48%;
|
||||
min-width: 48%;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.partner-box img {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.partner-box a {
|
||||
color: #3576E3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 568px) {
|
||||
#ktpContainer, #distContainter, #kcspContainer, #isvContainer, #servContainer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 568px) {
|
||||
#ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partner-box {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.partner-box > div {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
|
@ -4,13 +4,16 @@ bigheader: Kubernetes Partners
|
|||
abstract: Growing the Kubernetes ecosystem.
|
||||
class: gridPage
|
||||
cid: partners
|
||||
body_class: partners
|
||||
menu:
|
||||
main:
|
||||
weight: 40
|
||||
---
|
||||
|
||||
<section id="users">
|
||||
<h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
|
||||
<div class="col-container">
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Kubernetes Certified Service Providers</b>
|
||||
</h5>
|
||||
|
@ -19,10 +22,8 @@ cid: partners
|
|||
<button class="button landscape-trigger landscape-default" data-landscape-types="special--kubernetes-certified-service-provider" id="kcsp">See KCSP Partners</button>
|
||||
<br><br>Interested in becoming a
|
||||
<a href="https://www.cncf.io/certification/kcsp/">KCSP</a>?
|
||||
</center>
|
||||
</div>
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b>
|
||||
</h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.
|
||||
|
@ -30,10 +31,8 @@ cid: partners
|
|||
<button class="button landscape-trigger" data-landscape-types="platform" id="conformance">See Conformance Partners</button>
|
||||
<br><br>Interested in becoming
|
||||
<a href="https://www.cncf.io/certification/software-conformance/">Kubernetes Certified</a>?
|
||||
</center>
|
||||
</div>
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Kubernetes Training Partners</b>
|
||||
</h5>
|
||||
|
@ -42,12 +41,7 @@ cid: partners
|
|||
<button class="button landscape-trigger" data-landscape-types="special--kubernetes-training-partner" id="ktp">See KTP Partners</button>
|
||||
<br><br>Interested in becoming a
|
||||
<a href="https://www.cncf.io/certification/training/">KTP</a>?
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
{{< cncf-landscape helpers=true >}}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
{{< include "partner-style.css" >}}
|
||||
</style>
|
||||
</section>
|
Loading…
Reference in New Issue