1
0
Эх сурвалжийг харах

Give the app UI a maximum width for better readability

Fixes #125.
Thibaut 11 жил өмнө
parent
commit
eabd270a94

+ 4 - 1
assets/stylesheets/components/_app.scss

@@ -1,9 +1,12 @@
 ._app {
   position: relative;
   z-index: 1;
+  max-width: 80rem;
   height: 100%;
   padding-top: $headerHeight;
   overflow: hidden;
+  background: white;
+  box-shadow: 1px 0 #c4c9cc, 1px 0 1px rgba(black, .15);
   -webkit-transition: opacity .2s;
           transition: opacity .2s;
   @extend %border-box;
@@ -26,7 +29,7 @@
     line-height: 1;
     margin-top: -.75em;
     font-size: 4rem;
-    color: #ccc;
+    color: #c8c8c8;
     text-align: center;
     letter-spacing: -.125rem;
     opacity: 0;

+ 6 - 0
assets/stylesheets/components/_mobile.scss

@@ -4,6 +4,7 @@
 
 ._mobile {
   font-size: 100%;
+  background: white;
 
   // Layout
 
@@ -11,6 +12,11 @@
 
   ._app, ._container, ._content { overflow: visible; }
 
+  ._app {
+    max-width: none;
+    box-shadow: none;
+  }
+
   ._container {
     margin: 0;
     border: 0;

+ 1 - 1
assets/stylesheets/global/_base.scss

@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: white;
+  background: #fafafa;
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 }