diff --git a/_sass/core/global.scss b/_sass/core/global.scss index 19450e420a..fa9b097140 100755 --- 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 index e6bd53088f..846b072ce7 100644 --- 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 index ca956f476b..1ee35913af 100644 --- 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 index 1700031085..b2efd06d5d 100644 --- 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 {