Chore: Fix layout issues on narrow screens (konveyor#65)

* Chore: Fix layout issues on narrow screens

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix 2

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: add top margin to privacy policy doc

Signed-off-by: thisisobate <obasiuche62@gmail.com>

---------

Signed-off-by: thisisobate <obasiuche62@gmail.com>

Author: thisisobate

assets/scss/_styles_project.scss

@@ -113,12 +113,22 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @include media-breakpoint-down(sm) { 
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .text-center {
     text-align: center;
 }
 
+.text-center--mobile {
+    @include media-breakpoint-down(lg) { 
+        text-align: center;
+    }
+}
+
 .line-height-1 {
     line-height: 1;
 }
@@ -251,7 +261,7 @@
 .max-w-400px {
     max-width: 400px;
     @include media-breakpoint-down(lg) { 
-        width: 80%;
+        max-width: 100%;
     }
 }
 
@@ -287,12 +297,19 @@
     gap: 4rem;
 }
 
+.gap-3xl--mobile {
+    @include media-breakpoint-down(lg) {
+        gap: 6rem;
+    }
+}
+
 .feature-image {
     width: 500px;
     height: 300px;
     @include media-breakpoint-down(lg) { 
-        width: 80%;
+        width: 100%;
         height: auto;
+        padding-bottom: 1rem;
     }
     img {
         width: 100%;
@@ -303,17 +320,20 @@
 
 .cncf-banner {
     max-width: fit-content;
-    padding: 2rem 7rem 1rem 7rem;
+    padding: 2rem 7rem;
     background-color: #AC945D;
     color: #fff;
     margin: 0 auto;
+    text-align: center;
     border-radius: 10px;
     @include media-breakpoint-down(md) { 
         padding: 1rem 2rem;
+        max-width: 100%;
     }
 
     & p {
         font-size: 1.5rem;
+        margin-bottom: 0px;
         @include media-breakpoint-down(md) { 
             font-size: 1rem;
         }
@@ -322,10 +342,15 @@
 
 .cncf-banner-image {
     padding: 0 1rem;
+    @include media-breakpoint-down(md) { 
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem;
+    }
     img {
         width: 300px;
         @include media-breakpoint-down(md) { 
-            width: 150px;
+            width: 200px;
         }
     }
 }
@@ -450,6 +475,9 @@
 .cta-group {
     display: flex;
     gap: 0.5rem;
+    @include media-breakpoint-down(lg) { 
+        justify-content: center;
+    }
     @media (max-width: 400px) {
         flex-direction: column;
     }
@@ -484,15 +512,16 @@
     }
 }
 
-.sub-menu {
-    @include media-breakpoint-down(sm) { 
-        margin-right: 55px;
-    }
-}
-
 .td-navbar .navbar-nav {
     @include media-breakpoint-down(lg) { 
-        padding-bottom: 3rem;
+        position: absolute;
+        left: 0; 
+        right: 0; 
+        margin-inline: auto; 
+        width: fit-content;
+        z-index: 10000;
+        overflow-x: unset;
+        font-size: 0.8rem;
     }
 }
 
@@ -502,6 +531,12 @@
     }
 }
 
+.td-sidebar {
+    @include media-breakpoint-down(lg) { 
+        padding-top: 1rem;
+    }
+}
+
 .fancy {
     line-height: 0.5;
     text-align: center;
@@ -545,4 +580,8 @@
     @include media-breakpoint-down(md) {
         display: none;
     }
+}
+
+#scope-of-this-notice {
+    margin-top: 4rem;
 }

layouts/home.html

@@ -14,7 +14,7 @@ <h1 class="max-w-700px text-6xl line-height-1 -text-primary m-auto">Accelerate a
   </div>
 </section>
 <h2 class="fancy text-center font-medium -text-primary"><span>Key components of Konveyor</span></h2>
-<section class="max-w-1000px m-auto">
+<section class="max-w-1000px m-auto text-center--mobile">
     {{ range $index, $component := site.Params.components }}
             {{ if not (modBool $index 2) }} 
                 <div class="flex flex-col--mobile flex-reverse align-center--mobile space-between py-120">
@@ -61,7 +61,7 @@ <h2 class="fancy -text-primary"><span>Community Supporters</span></h2>
 </section>
 <section class="max-w-1000px m-auto">
     <h2 class="fancy mb-5 -text-primary text-center"><span>Recent Posts</span></h2>
-    <div class="flex flex-wrap gap-sm m-auto space-between--tablet">
+    <div class="flex flex-wrap gap-sm gap-3xl--mobile m-auto space-between--tablet">
         {{ range first 3 (where .Site.RegularPages "Type" "in" (slice "blog")) }}
             {{ if .Params.featured }}
                 <div>

layouts/partials/navbar.html

@@ -30,11 +30,11 @@
       {{ $activeMenu := $p.HasMenuCurrent "main" . -}}
         <li class="nav-item sub-menu{{if $activeMenu }} active{{end}} dropdown">
           <div class="dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">
                 {{ .Pre }}
                 <span>{{ .Name }}</span>
             </a>
-            <ul class="dropdown-menu dropdown-menu-end -bg-primary">
+            <ul class="dropdown-menu dropdown-menu-lg-end -bg-primary">
                 {{ range .Children }}
                 <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
                 {{ end }}