mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
mobile: better work with percentage #210
as it is unclear yet if vh is what we really need here
This commit is contained in:
parent
a332394c06
commit
5b216ebf82
1 changed files with 18 additions and 19 deletions
|
@ -44,8 +44,8 @@
|
|||
}
|
||||
|
||||
html {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -56,11 +56,11 @@ body {
|
|||
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
||||
font-size: 16.25px;
|
||||
font-weight: 300;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
line-height: 1.574;
|
||||
overflow: hidden; /* to avoid browser scrollbar to flicker before we create our own */
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body #body-inner.chapter h1 {
|
||||
|
@ -110,10 +110,10 @@ th {
|
|||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 15.25px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
line-height: 1.574;
|
||||
min-height: 100vh;
|
||||
min-height: 100%;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
|
@ -354,14 +354,14 @@ th {
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
margin-left: 300px;
|
||||
min-height: 100vh;
|
||||
min-width: calc( 100vw - 300px);
|
||||
max-width: calc( 100vw - 300px);
|
||||
min-height: 100%;
|
||||
min-width: calc( 100% - 300px);
|
||||
max-width: calc( 100% - 300px);
|
||||
overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
|
||||
position: relative; /* PS */
|
||||
width: calc( 100vw - 300px);
|
||||
width: calc( 100% - 300px);
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
|
@ -1044,9 +1044,9 @@ span.nav i{
|
|||
}
|
||||
#body {
|
||||
margin-left: 230px;
|
||||
min-width: calc( 100vw - 230px);
|
||||
max-width: calc( 100vw - 230px);
|
||||
width: calc( 100vw - 230px);
|
||||
min-width: calc( 100% - 230px);
|
||||
max-width: calc( 100% - 230px);
|
||||
width: calc( 100% - 230px);
|
||||
}
|
||||
}
|
||||
@media only all and (max-width: 47.938em) {
|
||||
|
@ -1059,9 +1059,9 @@ span.nav i{
|
|||
}
|
||||
.mobile-support #body {
|
||||
margin-left: 0;
|
||||
min-width: 100vw;
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-support.sidebar-flyout {
|
||||
overflow: hidden;
|
||||
|
@ -1084,7 +1084,6 @@ span.nav i{
|
|||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.copy-to-clipboard-button {
|
||||
|
@ -1313,7 +1312,7 @@ option {
|
|||
|
||||
#TableOfContents {
|
||||
font-size: 13px !important;
|
||||
max-height: 85vh;
|
||||
max-height: 85%;
|
||||
overflow: auto;
|
||||
padding: 15px 5px !important;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue