Merge pull request #30536 from jlbutler/merged-main-dev-1.23

Merged main dev 1.23, integration branch sync

Author: k8s-ci-robot

OWNERS_ALIASES

@@ -35,9 +35,11 @@ aliases:
     - divya-mohan0209
     - jimangel
     - kbhawkey
+    - mehabhalodiya
     - onlydole
     - rajeshdeshpande02
     - sftim
+    - shannonxtreme
     - tengqm
   sig-docs-es-owners: # Admins for Spanish content
     - raelga
@@ -166,6 +168,7 @@ aliases:
     - xichengliudui
     # zhangxiaoyu-zidif
   sig-docs-pt-owners: # Admins for Portuguese content
+    - edsoncelio
     - femrtnz
     - jailton
     - jcjesus
@@ -174,6 +177,7 @@ aliases:
     - rikatz
     - yagonobre
   sig-docs-pt-reviews: # PR reviews for Portugese content
+    - edsoncelio
     - femrtnz
     - jailton
     - jcjesus
@@ -221,12 +225,12 @@ aliases:
   # authoritative source: git.k8s.io/community/OWNERS_ALIASES
   committee-steering: # provide PR approvals for announcements
     - cblecker
-    - derekwaynecarr
     - dims
+    - justaugustus
     - liggitt
     - mrbobbytables
-    - nikhita
     - parispittman
+    - tpepper
   # authoritative source: https://git.k8s.io/sig-release/OWNERS_ALIASES
   sig-release-leads:
     - cpanato # SIG Technical Lead

README.md

@@ -146,7 +146,8 @@ Learn more about SIG Docs Kubernetes community and meetings on the [community pa
 
 You can also reach the maintainers of this project at:
 
-- [Slack](https://kubernetes.slack.com/messages/sig-docs) [Get an invite for this Slack](https://slack.k8s.io/)
+- [Slack](https://kubernetes.slack.com/messages/sig-docs)
+  - [Get an invite for this Slack](https://slack.k8s.io/)
 - [Mailing List](https://groups.google.com/forum/#!forum/kubernetes-sig-docs)
 
 ## Contributing to the docs

assets/scss/_base.scss

@@ -810,11 +810,10 @@ section#cncf {
   }
 }
 
-.td-search {
-  header > .header-filler {
-    height: $hero-padding-top;
-    background-color: black;
-  }
+// Header filler size adjustment
+
+.header-hero.filler {
+  height: $hero-padding-top;
 }
 
 // Docs specific
@@ -859,17 +858,6 @@ section#cncf {
 
 /* DOCUMENTATION */
 
-body.td-documentation {
-    header > .header-filler {
-      height: $hero-padding-top;
-      background-color: black;
-    }
-    /* Special case for if an announcement is active */
-    header section#announcement ~ .header-filler {
-      display: none;
-    }
-}
-
 // nav-tabs and tab-content
 .nav-tabs {
   border-bottom: none !important;

assets/scss/_custom.scss

@@ -26,6 +26,10 @@ $announcement-size-adjustment: 8px;
   }
 }
 
+.header-hero #quickstartButton.button {
+  margin-top: 1em;
+}
+
 section {
   .main-section {
     @media only screen and (min-width: 1024px) {
@@ -34,8 +38,11 @@ section {
   }
 }
 
-.td-outer {
-  padding: 0 !important;
+body {
+  header + .td-outer {
+    min-height: 50vh;
+    height: auto;
+  }
 }
 
 
@@ -313,33 +320,40 @@ main {
 
 // blockquotes and callouts
 
-.td-content, body {
-  blockquote.callout {
+body {
+  .alert {
+    // Override Docsy styles
     padding: 0.4rem 0.4rem 0.4rem 1rem;
-    border: 1px solid #eee;
-    border-left-width: 0.5em;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-radius: 0.25em;
+    border-left-width: 0.5em; // fallback in case calc() is missing
     background: #fff;
     color: #000;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
   }
-  blockquote.callout {
-    border-radius: calc(1em/3);
+  // Set minimum width and radius for alert color
+  .alert {
+      border-left-width: calc(max(0.5em, 4px));
+      border-top-left-radius: calc(max(0.5em, 4px));
+      border-bottom-left-radius: calc(max(0.5em, 4px));
   }
-  .callout.caution {
+  .alert.callout.caution {
     border-left-color: #f0ad4e;
   }
-
-  .callout.note {
+  .alert.callout.note {
     border-left-color: #428bca;
   }
-
-  .callout.warning {
+  .alert.callout.warning {
     border-left-color: #d9534f;
   }
+  .alert.third-party-content {
+    border-left-color: #444;
+  }
 
-
-  h1:first-of-type + blockquote.callout {
+  h1:first-of-type + .alert.callout {
     margin-top: 1.5em;
   }
 }
@@ -367,7 +381,7 @@ main {
   background: #f8f9cb;
 }
 
-.deprecation-warning {
+.deprecation-warning, .pageinfo.deprecation-warning {
     padding: 20px;
     margin: 20px 0;
     background-color: #faf5b6;
@@ -554,34 +568,6 @@ main.content {
   }
 }
 
-/* ANNOUNCEMENTS */
-section#fp-announcement ~ .header-hero {
-    padding: $announcement-size-adjustment  0;
-
-    > div {
-       margin-top: $announcement-size-adjustment;
-       margin-bottom: $announcement-size-adjustment;
-    }
-
-    h1, h2, h3, h4, h5 {
-      margin: $announcement-size-adjustment 0;
-    }
-}
-
-section#announcement ~ .header-hero {
-    padding: #{$announcement-size-adjustment / 2} 0;
-
-    > div {
-       margin-top: #{$announcement-size-adjustment / 2};
-       margin-bottom: #{$announcement-size-adjustment / 2};
-       padding-bottom: #{$announcement-size-adjustment / 2};
-    }
-
-    h1, h2, h3, h4, h5 {
-      margin: #{$announcement-size-adjustment / 2} 0;
-    }
-}
-
 /* DOCUMENTATION */
 
 /* Don't show lead text */
@@ -607,12 +593,12 @@ body.td-documentation {
 
 @media print {
   /* Do not print announcements */
-  #announcement, section#announcement, #fp-announcement, section#fp-announcement {
+  #announcement {
     display: none;
   }
 }
 
-#announcement, #fp-announcement {
+#announcement {
   > * {
     color: inherit;
     background: inherit;
@@ -629,42 +615,90 @@ body.td-documentation {
   }
 }
 
-#announcement {
-  padding-top: 105px;
-  padding-bottom: 25px;
-}
-
 .header-hero {
   padding-top: 40px;
 }
 
-/* Extra announcement height only for landscape viewports */
-@media (min-aspect-ratio: 8/9) {
-  #fp-announcement {
-    min-height: 25vh;
+#announcement {
+  .announcement-main {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0px;
+
+    // for padding-top see _size.scss
+    padding-bottom: calc(max(2em, 2rem));
+
+    max-width: calc(min(1200px - 8em, 80vw));
+  }
+
+
+  /* always white */
+  h1, h2, h3, h4, h5, h6, p * {
+    color: #ffffff;
+    background: transparent;
+
+    img.event-logo {
+      display: inline-block;
+      max-height: calc(min(80px, 8em));
+      max-width: calc(min(240px, 33vw));
+      float: right;
+    }
   }
 }
 
-#fp-announcement aside {
-  padding-top: 115px;
-  padding-bottom: 25px;
+#announcement + .header-hero {
+  padding-top: 2em;
 }
 
-.announcement {
-  .content {
-    margin-bottom: 0px;
+// Extra padding for anything except wide viewports
+@media (min-width: 992px) {
+  #announcement aside { // more specific
+    .announcement-main {
+      padding-top: calc(max(8em, 8rem));
+    }
   }
+}
 
+@media (max-width: 768px) {
+  #announcement {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    .announcement-main, aside .announcement-main {
+      padding-top: calc(min(2rem,2em));
+    }
+  }
+}
 
-  > p {
-    .gridPage #announcement .content p,
-    .announcement > h4,
-    .announcement > h3 {
-      color: #ffffff;
+@media (max-width: 480px) {
+  #announcement {
+    padding-bottom: 0.5em;
+  }
+  #announcement aside {
+    h1, h2, h3, h4, h5, h6 {
+      img.event-logo {
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 0.75em;
+        display: block;
+        max-height: initial;
+        max-width: calc(min(calc(100vw - 2em), 240px));
+        float: initial;
+      }
     }
   }
 }
 
+#announcement + .header-hero.filler {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  #announcement + .header-hero {
+    display: none;
+  }
+}
+
+
 // Match Docsy-imposed max width on text body
 @media (min-width: 1200px) {
   body.td-blog main .td-content > figure {
@@ -721,3 +755,13 @@ figure {
     }
   }
 }
+
+// Indent definition lists
+dl {
+  padding-left: 1.5em;
+
+  // Add vertical space before definitions
+  > *:not(dt) + dt, dt:first-child {
+    margin-top: 1.5em;
+  }
+}

assets/scss/_size.scss

@@ -18,3 +18,11 @@ section,
   line-height: $vendor-strip-height;
   font-size: $vendor-strip-font-size;
 }
+
+#announcement {
+  min-height: $hero-padding-top;
+
+  .announcement-main {
+    padding-top: calc(max(8em, 8rem, #{$hero-padding-top} / 3));
+  }
+}