fix: responsive layout

tomastrajan · Jul 24, 2017 · 27db236 · 27db236
1 parent 224c44d
commit 27db236
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
diff --git a/src/app/static/about/about.component.scss b/src/app/static/about/about.component.scss
@@ -1,15 +1,10 @@
 @import 'styles-variables';
 
 .background {
-  position: absolute;
-  top: 64px;
-  left: 0;
-  bottom: 140px;
-  right: 0;
-  overflow-y: auto;
+  padding: 100px 0;
+  position: relative;
 
   h1 {
-    margin-top: 100px;
     text-align: center;
     font-size: 3em;
     text-transform: uppercase;
@@ -18,6 +13,7 @@
   .actions {
     text-align: center;
     margin: 50px;
+    z-index: 1;
 
     span {
       display: inline-block;
@@ -32,10 +28,12 @@
 
   .get-started {
     width: 700px;
-    margin: 50px auto;
+    margin: 50px auto 0 auto;
+    padding-bottom: 50px;
     font-size: 0.9em;
     letter-spacing: .01px;
     overflow-wrap: break-word;
+    z-index: 1;
 
     code {
       display: inline-block;
@@ -45,27 +43,32 @@
     }
   }
 
+
   &::before {
-    position: fixed;
-    top: 64px;
+    position: absolute;
+    top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: url('../../../assets/intro.jpg') no-repeat center top;
     background-size: cover;
-    opacity: .8;
+    opacity: .7;
     content: "";
+    z-index: 0;
   }
-}
-
-@media (max-width: $toolbar-breakpoint) {
-  .background {
-    top: 56px;
 
+  .gradient {
     &::before {
-      top: 56px;
+      position: absolute;
+      top: 60%;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      content: "";
+      z-index: 0;
     }
   }
+
 }
 
 @media (max-width: map-get($grid-breakpoints, md)) {
@@ -79,8 +82,9 @@
 
 @media (max-width: map-get($grid-breakpoints, sm)) {
   .background {
+    padding: 40px 0;
+
     h1 {
-      margin-top: 40px;
       line-height: 1em;
     }
 
@@ -98,7 +102,8 @@
 
     .get-started {
       width: auto;
-      margin: 40px auto;
+      margin: 40px auto 0 auto;
+      padding-bottom: 40px;
     }
   }
 }
diff --git a/src/app/static/about/about.component.scss-theme.scss b/src/app/static/about/about.component.scss-theme.scss
@@ -11,6 +11,16 @@
     .background {
       color: mat-color($foreground, text);
       background-color: mat-color($background, background);
+
+      .gradient {
+        &::before {
+          background: linear-gradient(
+              to bottom,
+              mat-color($background, background, 0) 0%,
+              mat-color($background, background, 1) 100%
+          );
+        }
+      }
     }
   }
 }