fix: responsive layout

tomastrajan · May 28, 2017 · 8e45e71 · 8e45e71
1 parent fda5089
commit 8e45e71
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/app/static/about/about.component.scss b/src/app/static/about/about.component.scss
@@ -8,8 +8,11 @@
   right: 0;
   overflow-y: auto;
 
-  .container {
+  h1 {
     margin-top: 100px;
+    text-align: center;
+    font-size: 3em;
+    text-transform: uppercase;
   }
 
   .actions {
@@ -31,14 +34,21 @@
     }
   }
 
-  h1 {
-    text-align: center;
-    font-size: 3em;
-    text-transform: uppercase;
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: url('../../../assets/intro.jpg') no-repeat center top;
+    background-size: cover;
+    opacity: .6;
+    content: "";
+    z-index: 0;
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, toolbar)) {
+@media (max-width: $toolbar-breakpoint) {
   .background {
     top: 56px;
   }
@@ -52,15 +62,15 @@
   }
 }
 
-.background::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: url('../../../assets/intro.jpg') no-repeat center top;
-  background-size: cover;
-  opacity: .6;
-  content: "";
-  z-index: 0;
+@media (max-width: map-get($grid-breakpoints, sm)) {
+  .background {
+    h1 {
+      margin-top: 40px;
+      line-height: 1em;
+    }
+    .get-started {
+      width: auto;
+      margin: 40px auto 0 auto;
+    }
+  }
 }
diff --git a/src/app/static/about/about.component.scss-theme.scss b/src/app/static/about/about.component.scss-theme.scss
@@ -12,8 +12,5 @@
     background-color: mat-color($foreground, text);
   }
 
-  .get-started {
-    //border: 1px solid mat-color($background, background);
-  }
 }
 
diff --git a/src/styles-variables.scss b/src/styles-variables.scss
@@ -1,7 +1,8 @@
+$toolbar-breakpoint: 600px;
+
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
-  toolbar: 600px,
   md: 768px,
   lg: 992px,
   xl: 1200px