nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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; margin-inline-end: .5rem;
width: 40.5%; width: 40.5%;
} }
@media only all and (max-width: 60rem) { @media only all and (max-width: 59.999rem) {
a#R-logo { a#R-logo {
font-size: 1.5625rem; font-size: 1.5625rem;
margin-top: -.1875rem; margin-top: -.1875rem;
@ -51,7 +51,7 @@
margin-right: .5rem; 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 { #R-logo svg {
margin-left: -1.47rem; margin-left: -1.47rem;
margin-right: .5rem; 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 */ /* we don't need the buttons while printing */
display: none; display: none;
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 47.999rem) {
#R-body .topbar-breadcrumbs { #R-body .topbar-breadcrumbs {
visibility: visible; visibility: visible;
} }

6
static/css/ie.css
View file

@ -88,12 +88,12 @@
.topbar-content { .topbar-content {
left: 1rem; left: 1rem;
} }
@media screen and (max-width: 60rem) { @media screen and (max-width: 59.999rem) {
#R-body { #R-body {
margin-left: 14.375rem; margin-left: 14.375rem;
} }
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 47.999rem) {
.mobile-support #R-sidebar { .mobile-support #R-sidebar {
left: -14.375rem; left: -14.375rem;
} }
@ -228,7 +228,7 @@
#R-body .topbar-sidebar-divider { #R-body .topbar-sidebar-divider {
border-left-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-TOPBAR-SEPARATOR-color) */ 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 { #R-body .topbar-sidebar-divider {
border-left-color: transparent; border-left-color: transparent;
} }

18
static/css/theme.css
View file

@ -384,12 +384,12 @@ dd {
padding: 0 3.25rem 4rem 3.25rem; padding: 0 3.25rem 4rem 3.25rem;
position: relative; /* PS */ position: relative; /* PS */
} }
@media screen and (max-width: 60rem) { @media screen and (max-width: 59.999rem) {
#R-body-inner { #R-body-inner {
padding: 0 2rem 1rem 2rem; padding: 0 2rem 1rem 2rem;
} }
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 47.999rem) {
#R-body-inner { #R-body-inner {
padding: 0 1.25rem .375rem 1.25rem; 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 { body:not(.print) #R-body-inner.narrow {
padding: 2rem 9.75rem; padding: 2rem 9.75rem;
} }
@media screen and (max-width: 60rem) { @media screen and (max-width: 6059.999remrem) {
body:not(.print) #R-body-inner.narrow { body:not(.print) #R-body-inner.narrow {
padding: 1rem 6.5rem; padding: 1rem 6.5rem;
} }
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 47.999rem) {
body:not(.print) #R-body-inner.narrow { body:not(.print) #R-body-inner.narrow {
padding: .375rem 3.25rem; 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 ); border-bottom: 4px solid rgba( 134, 134, 134, .125 );
font-size: 3.5rem; 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 { body:not(.print) #R-body-inner.narrow h1 {
font-size: 2.8rem; 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 { body:not(.print) #R-body-inner.narrow h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -1066,7 +1066,7 @@ html[dir="rtl"] .topbar-button-next i {
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
} }
@media screen and (max-width: 48rem) { @media screen and (max-width: 47.999rem) {
.topbar-breadcrumbs { .topbar-breadcrumbs {
/* we just hide the breadcrumbs instead of display: none; /* we just hide the breadcrumbs instead of display: none;
this makes sure that the breadcrumbs are still usable for this makes sure that the breadcrumbs are still usable for
@ -1096,7 +1096,7 @@ html[dir="rtl"] .topbar-button-next i {
text-decoration: none; text-decoration: none;
} }
@media screen and (max-width: 60rem) { @media screen and (max-width: 59.999rem) {
#R-sidebar { #R-sidebar {
min-width: 14.375rem; min-width: 14.375rem;
max-width: 14.375rem; max-width: 14.375rem;
@ -1109,7 +1109,7 @@ html[dir="rtl"] .topbar-button-next i {
width: calc( 100% - 14.375rem); 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 */ /* we don't support sidebar flyout in mobile */
.mobile-support #R-sidebar { .mobile-support #R-sidebar {
inset-inline-start: -14.375rem; inset-inline-start: -14.375rem;

4
static/css/variant.css
View file

@ -256,7 +256,7 @@ table {
.topbar-sidebar-divider { .topbar-sidebar-divider {
border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color); 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 { .topbar-sidebar-divider {
border-inline-start-color: transparent; border-inline-start-color: transparent;
} }
@ -477,7 +477,7 @@ article ul > li > input[type="checkbox"] {
#R-header-topbar { #R-header-topbar {
border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color); 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 { .mobile-support #R-header-topbar {
border-inline-end-color: var(--INTERNAL-MENU-BORDER-color); border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
} }

4
static/js/theme.js
View file

@ -1636,9 +1636,9 @@ ready( function(){
moveTopbarButtons(); moveTopbarButtons();
adjustEmptyTopbarContents(); 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 ) ); 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 ) ); mqm.addEventListener( 'change', onWidthChange.bind( null, setWidthM ) );
var mql = window.matchMedia( 'only screen and (min-width: 60rem)' ); var mql = window.matchMedia( 'only screen and (min-width: 60rem)' );
mql.addEventListener( 'change', onWidthChange.bind( null, setWidthL ) ); mql.addEventListener( 'change', onWidthChange.bind( null, setWidthL ) );