From e49c25cc17e83927498b1a7cbaa832e9100b5f36 Mon Sep 17 00:00:00 2001
From: Dmitry Shurupov <dmitry.shurupov@palark.com>
Date: Thu, 19 Dec 2024 17:26:54 +0700
Subject: [PATCH] Redesign KubeCon links on the main page

Signed-off-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
---
 assets/scss/_base.scss    | 19 +++++++++++++++----
 assets/scss/_desktop.scss |  4 ++--
 assets/scss/_tablet.scss  |  2 +-
 content/en/_index.html    | 20 ++++++++------------
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index d8de9f9d89..177885a114 100644
--- a/assets/scss/_base.scss
+++ b/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: "";
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
index 101faca5af..8ae9bf2dfb 100644
--- a/assets/scss/_desktop.scss
+++ b/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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
index 69385b022b..89b05ce86f 100644
--- a/assets/scss/_tablet.scss
+++ b/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;
diff --git a/content/en/_index.html b/content/en/_index.html
index 789c9a9fc6..b43caf3b3d 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -42,20 +42,16 @@ To download Kubernetes, visit the [download](/releases/download/) section.
 
 {{< 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>