nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: fix mobile layout for width=48rem #676

Browse source 
clumsy solution as long as we still support IE11, otherwise we could have used
media query range syntax
This commit is contained in:
Sören Weber 2023-10-05 08:51:31 +02:00
parent 3c39bffe70
commit d2cfca4b2e
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
6 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/partials/logo.html
View file

@ -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;

2
static/css/format-print.css
View file

@ -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;
}

6
static/css/ie.css
View file

@ -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;
}

18
static/css/theme.css
View file

@ -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;

4
static/css/variant.css
View file

@ -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);
}

4
static/js/theme.js
View file

@ -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 ) );