From d2cfca4b2e86603a173f6db57a98ca0204f07f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 5 Oct 2023 08:51:31 +0200 Subject: [PATCH] theme: fix mobile layout for width=48rem #676 clumsy solution as long as we still support IE11, otherwise we could have used media query range syntax --- layouts/partials/logo.html | 4 ++-- static/css/format-print.css | 2 +- static/css/ie.css | 6 +++--- static/css/theme.css | 18 +++++++++--------- static/css/variant.css | 4 ++-- static/js/theme.js | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index 1da5abab8a..40eea2fc16 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -29,7 +29,7 @@ margin-inline-end: .5rem; width: 40.5%; } - @media only all and (max-width: 60rem) { + @media only all and (max-width: 59.999rem) { a#R-logo { font-size: 1.5625rem; margin-top: -.1875rem; @@ -51,7 +51,7 @@ margin-right: .5rem; } } - @media only all and (-ms-high-contrast:none) and (max-width: 60rem) { + @media only all and (-ms-high-contrast:none) and (max-width: 59.999rem) { #R-logo svg { margin-left: -1.47rem; margin-right: .5rem; diff --git a/static/css/format-print.css b/static/css/format-print.css index 38caa3d9b8..41720844dd 100644 --- a/static/css/format-print.css +++ b/static/css/format-print.css @@ -39,7 +39,7 @@ pre:not(.mermaid) { /* we don't need the buttons while printing */ display: none; } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { #R-body .topbar-breadcrumbs { visibility: visible; } diff --git a/static/css/ie.css b/static/css/ie.css index 80bf42136b..518e425f37 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -88,12 +88,12 @@ .topbar-content { left: 1rem; } - @media screen and (max-width: 60rem) { + @media screen and (max-width: 59.999rem) { #R-body { margin-left: 14.375rem; } } - @media screen and (max-width: 48rem) { + @media screen and (max-width: 47.999rem) { .mobile-support #R-sidebar { left: -14.375rem; } @@ -228,7 +228,7 @@ #R-body .topbar-sidebar-divider { border-left-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-TOPBAR-SEPARATOR-color) */ } - @media screen and (max-width: 48rem) { + @media screen and (max-width: 47.999rem) { #R-body .topbar-sidebar-divider { border-left-color: transparent; } diff --git a/static/css/theme.css b/static/css/theme.css index 824041fc7e..4481b77082 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -384,12 +384,12 @@ dd { padding: 0 3.25rem 4rem 3.25rem; position: relative; /* PS */ } -@media screen and (max-width: 60rem) { +@media screen and (max-width: 59.999rem) { #R-body-inner { padding: 0 2rem 1rem 2rem; } } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { #R-body-inner { padding: 0 1.25rem .375rem 1.25rem; } @@ -444,12 +444,12 @@ body:not(.print) #R-body .narrow .flex-block-wrapper { body:not(.print) #R-body-inner.narrow { padding: 2rem 9.75rem; } -@media screen and (max-width: 60rem) { +@media screen and (max-width: 6059.999remrem) { body:not(.print) #R-body-inner.narrow { padding: 1rem 6.5rem; } } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { body:not(.print) #R-body-inner.narrow { padding: .375rem 3.25rem; } @@ -487,12 +487,12 @@ body:not(.print) #R-body-inner.narrow h1 { border-bottom: 4px solid rgba( 134, 134, 134, .125 ); font-size: 3.5rem; } -@media only screen and (min-width: 48rem) and (max-width: 60rem) { +@media only screen and (min-width: 48rem) and (max-width: 59.999rem) { body:not(.print) #R-body-inner.narrow h1 { font-size: 2.8rem; } } -@media only screen and (max-width: 48rem) { +@media only screen and (max-width: 47.999rem) { body:not(.print) #R-body-inner.narrow h1 { font-size: 2.5rem; } @@ -1066,7 +1066,7 @@ html[dir="rtl"] .topbar-button-next i { margin: 0; padding: 0 1rem; } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { .topbar-breadcrumbs { /* we just hide the breadcrumbs instead of display: none; this makes sure that the breadcrumbs are still usable for @@ -1096,7 +1096,7 @@ html[dir="rtl"] .topbar-button-next i { text-decoration: none; } -@media screen and (max-width: 60rem) { +@media screen and (max-width: 59.999rem) { #R-sidebar { min-width: 14.375rem; max-width: 14.375rem; @@ -1109,7 +1109,7 @@ html[dir="rtl"] .topbar-button-next i { width: calc( 100% - 14.375rem); } } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { /* we don't support sidebar flyout in mobile */ .mobile-support #R-sidebar { inset-inline-start: -14.375rem; diff --git a/static/css/variant.css b/static/css/variant.css index 0dcb04c445..3245d209c6 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -256,7 +256,7 @@ table { .topbar-sidebar-divider { border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { .topbar-sidebar-divider { border-inline-start-color: transparent; } @@ -477,7 +477,7 @@ article ul > li > input[type="checkbox"] { #R-header-topbar { border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color); } -@media screen and (max-width: 48rem) { +@media screen and (max-width: 47.999rem) { .mobile-support #R-header-topbar { border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); } diff --git a/static/js/theme.js b/static/js/theme.js index 421844a110..ee8cd8c09f 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1636,9 +1636,9 @@ ready( function(){ moveTopbarButtons(); adjustEmptyTopbarContents(); } - var mqs = window.matchMedia( 'only screen and (max-width: 48rem)' ); + var mqs = window.matchMedia( 'only screen and (max-width: 47.999rem)' ); mqs.addEventListener( 'change', onWidthChange.bind( null, setWidthS ) ); - var mqm = window.matchMedia( 'only screen and (min-width: 48rem) and (max-width: 60rem)' ); + var mqm = window.matchMedia( 'only screen and (min-width: 48rem) and (max-width: 59.999rem)' ); mqm.addEventListener( 'change', onWidthChange.bind( null, setWidthM ) ); var mql = window.matchMedia( 'only screen and (min-width: 60rem)' ); mql.addEventListener( 'change', onWidthChange.bind( null, setWidthL ) );