Merge pull request #48308 from sftim/20241012_main_page_feature_boxes

Restyle feature boxes on main page and ready for vanilla Docsy

Author: k8s-ci-robot

assets/scss/_base.scss

@@ -437,12 +437,6 @@ $ocean-nodes-h3-margin-bottom: 30px;
 // video
 $video-section-height: 200px;
 
-// features
-$features-h3-margin-bottom: 20px;
-$feature-box-div-width: 100%;
-$feature-box-margin-bottom: 0;
-$feature-box-div-margin-bottom: 40px;
-
 // Home-specific
 
 .td-home {
@@ -687,47 +681,58 @@ section#cncf {
 }
 
 // Features
-#features {
-  padding-top: 140px;
+body.td-home section.features-container {
+  padding: 0; // reset
+  padding-top: 140px; // make room for logo
+
   background-color: $light-grey;
   background-image: url(/images/wheel.svg);
   background-position: center 60px;
   background-repeat: no-repeat;
   background-size: 60px;
-}
 
-.feature-box {
-  //padding: 50px 0
-  width: 100%;
-  overflow: hidden;
-  clear: both;
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
+  padding-bottom: 2em;
 
-  h4 {
-    line-height: normal;
-    margin-bottom: 15px;
+  .k8s-features-heading {
+    color: $primary;
+    text-align: center;
   }
 
   & > div {
-    background-color: #daeaf9;
-    border-radius: 20px;
-    padding: 25px;
-  }
-}
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: stretch;
+    gap: 1.2rem;
 
-#features {
-  h3 {
-    margin-bottom: $features-h3-margin-bottom;
-  }
+    margin-top: 1.8em;
+
+    max-width: clamp(75em, 25cm, 90vw);
+    margin-left: auto;
+    margin-right: auto;
+
+    background: initial;
+
+    & > .feature-box {
+        margin: 0;
+
+        h3 {
+          text-align: center;
+          line-height: normal;
+          font-size: 1.3em;
+          margin-bottom: 1rem;
+        }
+
+        flex-basis: calc(min(75vw, 12.5cm, 35em));
+        flex-shrink: 0;
 
-  .feature-box {
-    margin-bottom: $feature-box-margin-bottom;
+        border-radius: 0.5em;
+        padding: 1em;
+        padding-bottom: 1.2em;
 
-    & > div {
-      width: $feature-box-div-width;
-      margin-bottom: $feature-box-div-margin-bottom;
+        background-color: #daeaf9; // light blue
     }
   }
 }

assets/scss/_custom.scss

@@ -1954,6 +1954,14 @@ body.td-search #search {
   padding: 0.2rem;
 }
 
+
+// handle main page features on narrow viewports
+@media screen and (max-width: 768px) {
+  .features-container div.feature-box {
+     min-width: 80vw;
+  }
+}
+
 @media screen and (max-aspect-ratio: 9/15) {
     gap: 0.4rem;
 }

assets/scss/_tablet.scss

@@ -31,12 +31,6 @@ $vendor-strip-font-size: 16px;
 //video
 $video-section-height: 400px;
 
-//features
-$features-h3-margin-bottom: 40px;
-$feature-box-margin-bottom: 60px;
-$feature-box-div-margin-bottom: 0;
-$feature-box-div-width: 45%;
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -156,29 +150,6 @@ $feature-box-div-width: 45%;
     display: none;
   }
 
-  #features {
-    padding-bottom: 60px;
-
-    .feature-box {
-      margin-bottom: 30px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    h3 {
-      margin-bottom: $features-h3-margin-bottom;
-    }
-
-    .feature-box {
-      & > div {
-        width: $feature-box-div-width;
-        margin-bottom: $feature-box-div-margin-bottom;
-      }
-    }
-  }
-
   #talkToUs {
     #bigSocial {
       div {
@@ -211,4 +182,9 @@ $feature-box-div-width: 45%;
       width: 48%;
     }
   }
+
+  .features-container div.feature-box {
+     min-width: clamp(20rem, 6cm, 90vw);
+     max-width: clamp(90rem, 10cm, 90vw);
+  }
 }

layouts/shortcodes/blocks/kubernetes-features.html

@@ -14,23 +14,22 @@
 Note that markdown can be used in the description.
 
  */}}
-<section id="features">
-    <div class="main-section">
-        <h3 class="center">{{ T "main_kubernetes_features" }}</h3>
+<section class="features-container" id="features">
+    {{- with resources.Get "images/wheel.svg" -}}
+    <img class="kubernetes-logo wheel" src="{{ .RelPermalink }}" alt="">
+    {{- end -}}
+
+    <h2 class="k8s-features-heading">{{ T "main_kubernetes_features" }}</h2>
+    <div>
         {{ $pages := where site.Pages ".Params.feature" "!=" nil }}
-        {{range $i, $p := $pages }}
-        {{ if and (gt $i 0) (modBool $i 2) }}</div>{{ end }}
-        {{ if modBool $i 2 }}
-        <div class="feature-box">
-            {{ end }}
-            <div>
+        {{ range $i, $p := $pages }}
+            <div class="feature-box">
                 {{ with .Params.feature }}
-                <h4><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h4>
+                <h3><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h3>
                 {{ $description := .description | default $p.Params.description }}
                 {{ $description | markdownify }}
                 {{ end }}
             </div>
-     
         {{ end }}
     </div>
 </section>