added breakpoints

jaxgeller · Jan 25, 2015 · 7b8c0cd · 7b8c0cd
1 parent 1fdf74b
commit 7b8c0cd
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 2 deletions.
diff --git a/src/style/_home.scss b/src/style/_home.scss
@@ -2,11 +2,23 @@
   float: left;
   width: 450px;
   background: url("images/arrow-right.svg") right 197px no-repeat;
+
+  @include mobile {
+    float: none;
+    margin: 0 auto;
+    width: 100%;
+    background: none;
+  }
 }
 
 .headings {
   @include clearfix;
   margin-bottom: 80px;
+
+  @include mobile() {
+    text-align: center;
+    margin-bottom: 0;
+  }
 }
 
 .isogrammer {
@@ -15,12 +27,28 @@
   background: url("images/logo.svg") center center no-repeat;
   float: left;
   margin: 0 25px 0 0;
+
+  @include mobile {
+    float: none;
+    position: absolute;
+    left: 50%;
+    margin-left: -87px;
+  }
 }
 
 .tagline {
   font-weight: 100;
   float: left;
   line-height: 1.9;
+
+  @include mobile {
+    float: none;
+    position: absolute;
+    left: 50%;
+    margin-left: -150px;
+    width: 300px;
+    margin-top: 40px;
+  }
 }
 
 .isogram-input {
@@ -35,22 +63,57 @@
   @include placeholder {
     color: white;
   }
+
+  @include mobile {
+    width: 300px;
+    position: absolute;
+    left: 50%;
+    margin-left: -150px;
+    text-align: center;
+    margin-top: 100px;
+  }
 }
 
 .warning {
   margin: 20px auto 180px auto;
   height: 20px;
   @include animation(flash 4s ease-in-out infinite);
+
+  @include mobile {
+    display: none;
+  }
 }
 
 .credits {
   font-size: 14px;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.credits-mobile {
+  display: none;
+
+  @include mobile {
+    display: block;
+    text-align: center;
+    margin-top: 30px;
+  }
 }
 
+
 .script-output {
   float: right;
   margin-top: 100px;
+  max-width: 570px;
   @include size(570px auto);
+
+  @include mobile {
+    float: none;
+    margin: 225px auto 0 auto;
+    width: 80%;
+  }
 }
 
 .output-top {
@@ -60,7 +123,6 @@
   background: url("images/logo-ga.svg") #8FA3AD 20px center no-repeat;
 }
 
-
 .output-bottom {
   border-radius: 0 0 3px 3px;
   background-color: #F7F6F4;
@@ -71,6 +133,13 @@
   padding: 20px;
   overflow: hidden;
   letter-spacing: -0.8px;
+
+  @include mobile {
+    overflow-x: scroll;
+    padding: 10px;
+    font-size: 10px;
+    letter-spacing: -1.25px;
+  }
 }
 
 .active {

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
@@ -2,4 +2,9 @@
   @include clearfix;
   @include size(1050px auto);
   margin: 100px auto 0 auto;
+
+  @include mobile {
+    width: 100%;
+    margin-top: 50px;
+  }
 }
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin mobile($size: $mobile) {
+  @media screen and (max-width: $size) {
+    @content;
+  }
+}
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -1,8 +1,12 @@
+$red: #FF2750;
+$mobile: 1080px;
+
 @import "normalize";
 @import "bourbon/bourbon";
+@import "mixins";
 @import "animations";
 
-$red: #FF2750;
+
 
 // defaults
 *,

diff --git a/src/views/index.jade b/src/views/index.jade
@@ -34,6 +34,10 @@ html
             ga('create', 'UIDHERE', 'auto');
             ga('send', 'pageview');
           &lt;/script&gt;
+
+      p.credits-mobile by&nbsp;
+        a(href="https://twitter.com/jaxgeller") @jaxgeller
+
     script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js")
     script(src="main.js")