Fixed KubeCon NA Banner mobile layout

kubernetes · Oct 21, 2023 · d8484eb · d8484eb
1 parent adeaea2
commit d8484eb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -807,27 +807,31 @@ body.td-documentation {
   #announcement {
     padding-top: 4rem;
     padding-bottom: 4rem;
-    .announcement-main, aside .announcement-main {
-      padding-top: calc(min(2rem,2em));
-    }
-  }
-}
+    padding-bottom: 0;
+    h4{
+      display: flex;
+      flex-direction: column;
+      text-align: center;
 
-@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;
+      a {
+        font-weight: bold;
       }
+
+      row-gap: 1rem;
+      font-size: 1.5em;
+
+      img {
+        order: 2;
+        margin-bottom: .5rem;
+      }
+    }
+
+    p{
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+    .announcement-main, aside .announcement-main {
+      padding-top: calc(min(2rem,2em));
     }
   }
 }

diff --git a/data/announcements/scheduled.yaml b/data/announcements/scheduled.yaml
@@ -203,7 +203,7 @@ announcements:
     color: #fffff;
   title: |
     <img src ="/images/announcements/kccnc-na-2023-white.svg" style="float: right; height: 80px;" />
-    <a href= "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/">KubeCon + CloudNativeCon NA 2023</a> <em> Chicago, Illinois + Virtual</em>.
+    <a href= "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/">KubeCon + CloudNativeCon NA 2023</a> <em> Chicago, Illinois + Virtual</em>
   message: |
     4 days of incredible opportunities to collaborate, learn + share with the entire community!<br />
     November 6 - November 9, 2023.