Merge main into dev-1.35 to keep in sync

Author: Urvashi0109

OWNERS_ALIASES

@@ -67,6 +67,7 @@ aliases:
     - salaxander
     - SayakMukhopadhyay
     - tengqm
+    - Urvashi0109 # RT 1.35 Doc Lead
   sig-docs-en-reviews: # PR reviews for English content
     - dipesh-rawat
     - divya-mohan0209
@@ -200,8 +201,12 @@ aliases:
     - stormqueen1990
   sig-docs-vi-owners: # Admins for Vietnamese content
     - truongnh1992
+    - khanhtc1202
+    - ntheanh201
   sig-docs-vi-reviews: # PR reviews for Vietnamese content
     - truongnh1992
+    - khanhtc1202
+    - ntheanh201
   sig-docs-ru-owners: # Admins for Russian content
     - Arhell
     - kirkonru

SECURITY_CONTACTS

@@ -11,11 +11,9 @@
 # INSTRUCTIONS AT https://kubernetes.io/security/
 
 divya-mohan0209
-reylejano
-sftim
-tengqm
-onlydole
-kbhawkey
+katcosgrove
+lmktfy
 natalisucks
+reylejano
 salaxander
-katcosgrove
+tengqm

assets/images/site-blocks/video_banner_homepage_XNZvGHlpJ_4.jpeg

@@ -312,21 +312,14 @@ $ocean-nodes-h3-margin-bottom: 30px;
 
 // Video thingy
 #video {
-  width: 100%;
   position: relative;
   overflow: hidden;
-  background-position: center center;
-  background-size: cover;
 
-  & > .light-text {
-    display: none;
-    // position: absolute;
-    // top: 50%;
-    // left: 75%;
-    width: 500px;
+  & > .video-text-optional {
+    width: 30vw;
     padding-top: 2rem;
-    // transform: translate(-50%, -50%);
     color: white;
+    margin-right: 70vw;
   }
 
   h2 {
@@ -366,59 +359,22 @@ $ocean-nodes-h3-margin-bottom: 30px;
   }
 
   #desktopShowVideoButton {
-    position: relative;
-    font-size: 24px;
+    font-size: 1.8rem;
     background-color: white;
     border-radius: 8px;
-    color: $primary;
-    padding: 15px 30px 15px 80px;
-    margin-bottom: 35px;
-
-    &:before {
-      content: "";
-      position: absolute;
-      @include pureCenter(40px);
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 10px 0 10px 20px;
-      border-color: transparent transparent transparent $primary;
-    }
+    color: $secondary;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
 
     &:hover::before {
       border-color: transparent transparent transparent $dark-grey;
     }
   }
 
   #desktopShowVideoButton:hover{
-    color: $dark-grey;
+    color: $primary;
     transition: 150ms;
   }
-
-  #mobileShowVideoButton {
-    @include pureCenter;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    background-color: transparent;
-    border: 5px solid rgba(255, 255, 255, 0.2);
-    overflow: visible;
-
-    &:after {
-      @include pureCenter;
-      left: 40px;
-      content: "";
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 20px 0 20px 30px;
-      border-color: transparent transparent transparent #ffffff;
-    }
-  }
-}
-
-#video:has(#desktopKCButton) {
-  height: 580px;
 }
 
 #videoPlayer {
@@ -427,8 +383,13 @@ $ocean-nodes-h3-margin-bottom: 30px;
   display: none;
 
   iframe {
-    @include pureCenter;
-    @include maintain-aspect-ratio;
+    width: 100%;
+    max-height: 100vh;
+    aspect-ratio: 16 / 9;
+    position: fixed;
+    top: 50%;
+    left:50%;
+    transform: translate(-50%, -50%); 
   }
 
   #closeButton {

assets/js/sidebar-tree.js

@@ -96,6 +96,31 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
   }
 }
 
+section#upcoming-events {
+  color: $white;
+  background: $secondary;
+  text-align: center;
+  padding-top: 4rem;
+  padding-bottom: 2rem;
+  h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  > div {
+    margin: 1.5em;
+    padding: 0.5em 0 0.5em 0;
+    a, a:hover {
+      color: $white;
+      background: transparent;
+      font-size: 1.5rem;
+      text-decoration: underline;
+      strong {
+        color: $white;
+        background: transparent;
+      }
+    }
+  }
+}
+
 .section-feature#kubeweekly {
 
   a.kubeweekly-signup, a.kubeweekly-signup:hover {
@@ -271,21 +296,41 @@ footer {
   }
 }
 
-
 @media (max-width: 799px) {
-  footer ul.footer-icons {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: flex-start;
-    row-gap: 0.5em;
-  }
-  footer div.order-1 ul.footer-icons {
-    margin-left: auto;
-  }
-  footer div.order-3 ul.footer-icons {
-    margin-right: auto;
-  }
+footer ul.footer-icons {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  row-gap: 0.5em;
+}
+
+footer div.order-1 ul.footer-icons {
+  align-items: flex-start;
+  margin-left: 0;
+  margin-right: auto;
+}
+
+footer div.order-3 ul.footer-icons {
+  align-items: flex-end;
+  margin-left: auto;
+  margin-right: 0;
+}
+
+// These character icons are bigger than the others and creates an offset, this restores centeredness
+.fa-laptop-code {
+  font-size: 1.1rem;
+}
+.fa-youtube {
+  font-size: 1.3rem;
+}
+.fa-envelope {
+  font-size: 1.3rem;
+}
+
+// Makes the text column wider on mobile while leaving the inline bootstrap code for desktop
+footer .row > .order-1 { flex: 0 0 16.6667%; max-width: 16.6667%; }
+footer .row > .order-2 { flex: 0 0 66.6667%; max-width: 66.6667%; }
+footer .row > .order-3 { flex: 0 0 16.6667%; max-width: 16.6667%; }
 }
 
 /* SIDE-DRAWER MENU */
@@ -400,6 +445,68 @@ footer {
   }
 }
 
+.td-home section#video {
+  display: block;
+  clear: both;
+  min-height: 24rem;
+} 
+
+
+.td-home section#video.section-with-bgimage {
+  background: #13110f; // match video
+  background-position: 65% center, left center;
+  background-repeat: no-repeat, repeat;
+  background-size: auto 100%, cover;
+  .video-text-optional {
+    padding-left: calc(max(10vw, 5rem));
+
+    button::before, button::after {
+      color: $secondary;
+      padding-left:  0.5rem;
+      padding-right: 0.5rem;
+    }
+    button:dir(ltr)::before {
+      content: "▶︎ ";
+    }
+    button:dir(rtl)::after {
+      content: " ▶︎";
+    }
+    
+    h2, h3, h4, h5, h6, p {
+      visibility: hidden; // the background has the same works
+      font-size: inherit;
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .td-home section#video.section-with-bgimage {
+    background-size: contain, cover;
+    .video-text-optional {
+      padding: 0.5rem;
+      padding-top: 40%;
+      width: 100%;   
+    }
+    button {
+      min-width: calc(min(90vw,20rem));
+      font-size: 1.2rem;
+      margin-bottom: 3em;
+    }
+  }
+}
+
+@media (max-width: 10cm) {
+  .td-home section#video {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 640px) and (orientation: portrait) {
+  .td-home section#video {
+    display: none;
+  }
+}
+
 /* COMMUNITY */
 
 body.cid-community {

assets/scss/_base.scss

@@ -29,13 +29,6 @@
   height: 100vh;
 }
 
-@mixin pureCenter($left: 50%, $top: 50%) {
-  position: absolute;
-  top: $top;
-  left: $left;
-  transform: translate(-50%, -50%);
-}
-
 @mixin maintain-aspect-ratio(
   $width-factor: 16,
   $height-factor: 9,

assets/scss/_custom.scss

@@ -118,21 +118,6 @@ $vendor-strip-font-size: 16px;
     }
   }
 
-  #video {
-    display: block;
-
-    & > .light-text {
-      display: block;
-      float: right;
-      text-align: left;
-      margin: 0 5% 15px 0;
-    }
-
-    &:dir(rtl) > .light-text {
-      text-align: right;
-    }
-  }
-
   #mobileShowVideoButton {
     display: none;
   }

assets/scss/_reset.scss

@@ -7,7 +7,4 @@
 class: gridPage
 body_class: caseStudies
 cid: caseStudies
-menu:
-  main:
-    weight: 60
 ---

assets/scss/_tablet.scss

@@ -77,7 +77,7 @@ minikube dashboard --url
 1. পড পরিচালনা ও ডিপ্লয়মেন্ট তৈরি করতে `kubectl create` কমান্ডটি চালান। এই পডগুলি প্রদত্ত Docker ইমেজ এর উপর ভিত্তি করে কন্টেইনার চালায়।
 
     ```shell
-    kubectl create deployment hello-node --image=k8s.gcr.io/echoserver:1.4
+    kubectl create deployment hello-node --image=registry.k8s.io/e2e-test-images/agnhost:2.53 -- /agnhost netexec --http-port=8080
     ```
 
 2. ডিপ্লয়মেন্টটি দেখুন: