revert layout back to scrollable body
This commit is contained in:
parent
2df48b1643
commit
77505fa7c9
43
src/App.scss
43
src/App.scss
@ -1,16 +1,15 @@
|
|||||||
// stylelint-disable rscss/class-format
|
// stylelint-disable rscss/class-format
|
||||||
@import './_variables.scss';
|
@import './_variables.scss';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--navbar-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
overflow: hidden;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow: hidden;
|
|
||||||
max-height: 100vh;
|
|
||||||
max-width: 100vw;
|
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-family: var(--interfaceFont, sans-serif);
|
font-family: var(--interfaceFont, sans-serif);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -19,6 +18,7 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
overscroll-behavior-y: none;
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
@ -26,6 +26,10 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (any-pointer: fine) {
|
@media (any-pointer: fine) {
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
scrollbar-color: var(--btn) transparent;
|
scrollbar-color: var(--btn) transparent;
|
||||||
|
|
||||||
@ -106,35 +110,25 @@ nav {
|
|||||||
box-shadow: var(--topBarShadow);
|
box-shadow: var(--topBarShadow);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: var(--navbar-height);
|
height: var(--navbar-height);
|
||||||
}
|
position: fixed;
|
||||||
|
|
||||||
#app-loaded {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-width: 100vw;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
--navbar-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
overscroll-behavior-y: none;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: sticky;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
grid-area: sidebar;
|
grid-area: sidebar;
|
||||||
|
top: var(--navbar-height);
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-scroller {
|
||||||
|
top: var(--navbar-height);
|
||||||
|
grid-area: content;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notifs-column {
|
#notifs-column {
|
||||||
grid-area: notifs;
|
grid-area: notifs;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-scroller {
|
|
||||||
grid-area: content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-bg-wrapper {
|
.app-bg-wrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -175,7 +169,6 @@ nav {
|
|||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
height: calc(100vh - var(--navbar-height));
|
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
Loading…
Reference in New Issue
Block a user