Merge pull request #49167 from shurup/upgrade-kubecon-section

Redesign KubeCon links on the main page

Author: k8s-ci-robot

assets/scss/_base.scss

@@ -545,16 +545,27 @@ section#cncf {
     margin-bottom: 20px;
   }
 
-  #desktopKCButton {
-    position: absolute;
+  // All #desktopKCButton blocks are left for back compatibility and
+  // should be removed later, leaving .desktopKCButton only
+  // See https://github.com/kubernetes/website/pull/49167 for details
+  #desktopKCButton, .desktopKCButton {
+    display: inline-block;
     font-size: 18px;
     background-color: $dark-grey;
     border-radius: 8px;
     color: $white;
+    padding: 2px 8px;
+    margin: 5px;
+  }
+  
+  #desktopKCButton {
+    display: inline;
+    position: absolute;
     padding: 20px 10px 20px 10px;
+    margin: 0;
   }
 
-  #desktopKCButton:hover{
+  #desktopKCButton:hover, .desktopKCButton:hover{
     background-color: #ffffff;
     color: #326ce5;
     transition: 150ms;
@@ -567,7 +578,7 @@ section#cncf {
     border-radius: 8px;
     color: $primary;
     padding: 15px 30px 15px 80px;
-    margin-bottom: 15px;
+    margin-bottom: 35px;
 
     &:before {
       content: "";

assets/scss/_desktop.scss

@@ -1,6 +1,6 @@
 $main-max-width: 1200px;
 $vendor-strip-height: 44px;
-$video-section-height: 550px;
+$video-section-height: 580px;
 
 @media screen and (min-width: 1024px) {
 
@@ -96,4 +96,4 @@ $video-section-height: 550px;
       min-height: 260px;
     }
   }
-}
+}

assets/scss/_tablet.scss

@@ -136,7 +136,7 @@ $video-section-height: 400px;
   #video {
     height: $video-section-height;
     display: block;
-    height: 500px;
+    height: 550px;
 
     & > .light-text {
       display: block;

content/en/_index.html

@@ -42,20 +42,16 @@
 
 {{< blocks/section id="video" background-image="kub_video_banner_homepage" >}}
 <div class="light-text">
-<h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
+    <h2>The Challenges of Migrating 150+ Microservices to Kubernetes</h2>
         <p>By Sarah Wells, Technical Director for Operations and Reliability, Financial Times</p>
         <button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
-        <br>
-        <br>
-        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/" button id="desktopKCButton">Attend KubeCon + CloudNativeCon North America on November 12-15</a>
-        <br>
-        <br>
-        <br>
-        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-india/" button id="desktopKCButton">Attend KubeCon + CloudNativeCon India on December 11-12</a>
-        <br>
-        <br>
-        <br>
-        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/" button id="desktopKCButton">Attend KubeCon + CloudNativeCon Europe on April 1-4, 2025</a>
+
+    <h3>Attend upcoming KubeCon + CloudNativeCon events</h3>
+        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/" class="desktopKCButton"><strong>Europe</strong> (London, Apr 1-4)</a>
+        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-china/" class="desktopKCButton"><strong>China</strong> (Hong Kong, Jun 10-11)</a>
+        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-japan/" class="desktopKCButton"><strong>Japan</strong> (Tokyo, Jun 16-17)</a>
+        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-india/" class="desktopKCButton"><strong>India</strong> (Hyderabad, Aug 6-7)</a>
+        <a href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america-2025/" class="desktopKCButton"><strong>North America</strong> (Atlanta, Nov 10-13)</a>
 </div>
 <div id="videoPlayer">
     <iframe data-url="https://www.youtube.com/embed/H06qrNmGqyE?autoplay=1" frameborder="0" allowfullscreen></iframe>