framwork ready, need to test the api access

2021-01-18 16:51:36 +01:00
parent 6636ca21c2
commit 40bf13de53
267 changed files with 46809 additions and 4 deletions
@@ -0,0 +1,94 @@
+$side-padding:3em;
+
+body, html{
+  position: relative;
+  width: 100%;
+  height:100%;
+  font-family: sans-serif;
+  font-style: normal;
+  margin:0;
+  padding:0;
+}
+
+body{
+  overflow:hidden;
+}
+
+#root{
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height:100vh;
+  %layout-element{
+    width:100vw;
+    box-sizing:border-box;
+  }
+  header[role="banner"]{
+    z-index:10;
+    flex: 0 0 auto;
+    @extend %layout-element;
+    padding:1em $side-padding 1em $side-padding;
+    @media only screen and (max-width: $small-bp) {
+      padding:1em $side-padding/2 0 $side-padding/2;
+    }
+  }
+  section[role="main-content"]{
+    display: flex;
+    flex:1 1 auto;
+    @extend %layout-element;
+    overflow: hidden;
+    position: relative;
+    >.wrapper{
+      position: relative;
+      padding:0 $side-padding 0 $side-padding;
+      // height:100%; max-height:100%;
+      display: flex;
+      flex: 1;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      >*{
+        @include fade-transition;
+      }
+      @media only screen and (max-width: $small-bp) {
+        overflow-y: auto;
+        padding:0 $side-padding/2 0 $side-padding/2;
+      }
+    }
+    .main-content-layout{
+      position: relative;
+      // https://stackoverflow.com/a/33644245
+      display: flex;
+      flex: 1;
+      >section{
+        max-height: 100%;
+      }
+      >header,
+      >section>.wrapper,
+      >nav{
+        box-sizing: border-box;
+        max-height: 100%;
+        padding-top:1em;
+      }
+      >section>.wrapper,
+      >nav{
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+    @media only screen and (max-width: $small-bp) {
+      .main-content-layout{
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+  footer[role="tools"]{
+    flex:0 0 auto;
+    @extend %layout-element;
+    // padding-bottom: 1em;
+    // >*{
+    //   padding:0.5em 1em;
+    // }
+  }
+}