Started redesign

[bookstack] / resources / assets / sass / styles.scss

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 0fd4f638d6d7317f6e0f1d8fc460c9f8a077573b..421686db0b803c52c2e00e6f808c1829b67fca9f 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -11,21 +11,40 @@
 
 header {
   background-color: #f8f8f8;
-  position: fixed;
   display: block;
   width: 100%;
-  z-index: -1;
+  position: fixed;
+  z-index: 2;
   top: 0;
+  border-bottom: 1px solid #DDD;
+  .padded {
+    padding: $-m;
+  }
+}
+
+#sidebar {
+  position: fixed;
+  background-color: #FFF;
+  height: 100%;
+  top: 0;
+  z-index: 1;
+  padding-top: 63px + $-m;
+  width: 300px;
+  border-right: 1px solid #DDD;
+}
+
+#content {
+  margin-top: 63px;
+  margin-left: 300px;
+  display: block;
+  position: relative;
 }
+
 .logo {
   width: 180px;
   opacity: 0.8;
 }
 
-body {
-  margin-top: 64px;
-}
-
 header hr {
   margin-top: 0;
 }
@@ -46,15 +65,8 @@ header .menu {
   font-size: 1.4em;
 }
 
-.affix {
-  position: fixed;
-}
-
 .page-style {
-  background-color: #FFF;
   padding: $-s $-xxl $-xxl $-xxl;
-  border-radius: 4px;
-  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
   margin-bottom: $-xxl;
   max-width: 100%;
 }
@@ -66,6 +78,9 @@ header .menu {
 .page-content {
   @extend .page-style;
   min-height: 70vh;
+  max-width: 840px;
+  margin-left: auto;
+  margin-right: auto;
   &.right {
     float: right;
   }