pleroma-fe

commit: 77505fa7c9f9188ab224e46fafcf5163a45f732b
parent 2df48b16438a5bfaa2650657f605cc58a540abac
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 10 Apr 2022 17:48:02 +0300

revert layout back to scrollable body

Diffstat:
M
src/App.scss
41
+++++++++++++++++------------------------

1 file changed, 17 insertions(+), 24 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -1,16 +1,15 @@
 // stylelint-disable rscss/class-format
 @import './_variables.scss';
 
+:root {
+  --navbar-height: 50px;
+}
+
 html {
   font-size: 14px;
-  overflow: hidden;
-  max-height: 100vh;
 }
 
 body {
-  overflow: hidden;
-  max-height: 100vh;
-  max-width: 100vw;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
@@ -19,6 +18,7 @@ body {
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-y: none;
 
   &.hidden {
     display: none;
@@ -26,6 +26,10 @@ body {
 }
 
 @media (any-pointer: fine) {
+  body {
+    background: var(--bg);
+  }
+
   * {
     scrollbar-color: var(--btn) transparent;
 
@@ -106,35 +110,25 @@ nav {
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   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;
+#sidebar {
+  grid-area: sidebar;
+  top: var(--navbar-height);
   position: sticky;
 }
 
-#sidebar {
-  grid-area: sidebar;
+#main-scroller {
+  top: var(--navbar-height);
+  grid-area: content;
+  position: relative;
 }
 
 #notifs-column {
   grid-area: notifs;
 }
 
-#main-scroller {
-  grid-area: content;
-}
-
 .app-bg-wrapper {
   position: fixed;
   height: 100%;
@@ -175,7 +169,6 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  height: calc(100vh - var(--navbar-height));
   align-content: flex-start;
   flex-wrap: wrap;
   padding: 0 10px;