Merge pull request #45869 from sftim/20240414_vanillaify_content_partners

Ready partners page for vanilla Docsy

Author: k8s-ci-robot

assets/scss/_custom.scss

@@ -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;