add new breakpoint and adjust header sizes (#1817)

quarkusio · Oct 28, 2023 · c329572 · c329572
1 parent 91612bc
commit c329572
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 79 deletions.
diff --git a/_sass/core/global.scss b/_sass/core/global.scss
@@ -17,7 +17,9 @@ body {
 
 body > div.content {
   padding: 0 13rem;
-  @media screen and (max-width: 1170px) { padding: 0 6rem; }
+  @media screen and (max-width: 1366px) {
+  padding: 0 4rem;
+  }
   @media screen and (max-width: 768px) {
     padding: 0 2rem;
     .navigation-wrapper {
@@ -41,8 +43,8 @@ body > div.content {
 
 .tablet-fullwidth {
   @media screen and (max-width: 768px) {
-    margin-left: -6rem !important;
-    margin-right: -6rem !important;
+    margin-left: -4rem !important;
+    margin-right: -4rem !important;
   }
   @media screen and (max-width: 480px) {
     margin-left: -2rem !important;

diff --git a/_sass/includes/header-navigation.scss b/_sass/includes/header-navigation.scss
@@ -9,7 +9,9 @@
 div.nav-wrapper {
   background-color: $black;
   padding: 0 13rem;
-  @media screen and (max-width: 1170px) { padding: 0 6rem; }
+  @media screen and (max-width: 1366px) { 
+  padding: 0 4rem;
+  }
   @media screen and (max-width: 768px) {
     padding: 0 2rem;
     margin: 0;

diff --git a/_sass/layouts/support.scss b/_sass/layouts/support.scss
@@ -53,7 +53,7 @@
         color: inherit;
         margin-left: 5px;
       }
-     @media screen and (max-width: 1170px) {
+     @media screen and (max-width: 1366px) {
         grid-column: span 6;
       }
       @media screen and (max-width: $breakpoint-m) {

diff --git a/_sass/quarkus.scss b/_sass/quarkus.scss
@@ -30,6 +30,10 @@ h1 {
   font-size: 3rem;
   line-height: 3.75rem;
   font-weight: 700;
+  @media screen and (max-width: 1366px) {
+    font-size: 2.5rem;
+    line-height: 2.75rem;
+  }
   @media screen and (max-width: 768px) {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -40,6 +44,10 @@ h2 {
   font-size: 2rem;
   line-height: 2.5rem;
   font-weight: 400;
+  @media screen and (max-width: 1366px) {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
   @media screen and (max-width: 768px) {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -50,19 +58,27 @@ h3 {
   font-size: 1.5rem;
   line-height: 1.8rem;
   font-weight: 400;
+  @media screen and (max-width: 1366px) {
+    font-size: 1.4rem;
+    line-height: 1.7rem;
+  }
   @media screen and (max-width: 768px) {
     font-size: 1.2rem;
-    line-height: 1.7rem;
+    line-height: 1.5rem;
   }
 }
 
 h4 {
   font-size: 1.125rem;
-  line-height: 1.5rem;
+  line-height: 1.6rem;
   font-weight: 400;
+  @media screen and (max-width: 1366px) {
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+  }
   @media screen and (max-width: 768px) {
     font-size: 1.125rem;
-    line-height: 1.5rem;    
+    line-height: 1.4rem;    
   }
 }
 
@@ -471,9 +487,9 @@ hr {
 .full-width-bg {
   margin: 0 -13rem;
   padding: 0 13rem;
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem;
-    padding: 0 6rem;
+  @media screen and (max-width: 1366px) {
+    margin: 0 -4rem;
+    padding: 0 4rem;
   }
   @media screen and (max-width: 768px) {
     margin: 0 -2rem;
@@ -741,8 +757,8 @@ li {
   background-color: $black;
   }
 
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem;
+  @media screen and (max-width: 1366px) {
+    margin: 0 -4rem;
   }
   @media screen and (max-width: 768px) {
     margin: 0 -2rem;
@@ -754,7 +770,7 @@ li {
 .iframeheight {
   height: 325px;
 
-  @media screen and (max-width: 1170px) {
+  @media screen and (max-width: 1366px) {
     height: 400px;
   }
   @media screen and (max-width: 768px) {
@@ -780,9 +796,9 @@ li {
   padding: .75rem 13rem;
   background-color: $quarkus-blue;
 
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem 2rem -6rem;
-    padding: .75rem 6rem;
+  @media screen and (max-width: 1366px) {
+    margin: 0 -4rem 2rem -4rem;
+    padding: .75rem 4rem;
   }
   @media screen and (max-width: 768px) {
     margin: 0 -2rem 1rem -2rem;
@@ -800,9 +816,9 @@ li {
   padding: .75rem 13rem;
   background-color: $quarkus-blue;
 
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem 2rem -6rem;
-    padding: .75rem 6rem;
+  @media screen and (max-width: 1366px) {
+    margin: 0 -4rem 2rem -4rem;
+    padding: .75rem 4rem;
   }
   @media screen and (max-width: 768px) {
     margin: 0 -2rem 1rem -2rem;
@@ -883,65 +899,6 @@ li {
     }
   }
 
-// Version & Breadcrumb Band
-
-.full-width-version-bg {
-  margin: 0 -13rem 2rem -13rem;
-  padding: .75rem 13rem;
-
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem 2rem -6rem;
-    padding: .75rem 6rem;
-  }
-  @media screen and (max-width: 768px) {
-    margin: 0 -2rem 1rem -2rem;
-    padding: .75rem 2rem;
-  }
-
-  &.grey {
-    background-color: $grey-0 ;
-
-    h1, h2, h3, h4, h5, h6, p, span {
-      color: $dark-blue-alt;
-    }
-    a {
-      color: $link-light-bg;
-    }
-   .guide-dropdown-label {
-    color: $dark-blue-alt;
-    }
-  }
-
-  .returnlink {
-     font-size: 1.1rem;
-     margin: 0;
-     }
-}
-
-.full-width-breadcrumb-bg {
-  margin: 0 -13rem 2rem -13rem;
-  padding: .75rem 13rem;
-  background-color: $quarkus-blue;
-
-  @media screen and (max-width: 1170px) {
-    margin: 0 -6rem 2rem -6rem;
-    padding: .75rem 6rem;
-  }
-  @media screen and (max-width: 768px) {
-    margin: 0 -2rem 1rem -2rem;
-    padding: .75rem 2rem;
-  }
-
-  h1, h2, h3, h4, h5, h6, p, span, i, a {
-     color: $white;
-     }
-
-  .returnlink {
-     font-size: 1.1rem;
-     margin: 0;
-     }
-}
-
 /// guides page styling overrides
 
 .guides {