Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

More mobile optimization.

  • Loading branch information...
commit 74fd050f4ad2ecc2734689d9e0420b56f9fff27e 1 parent 8fd87a0
Peter Sobot authored
Showing with 73 additions and 63 deletions.
  1. +1 −1  source/index.haml
  2. +72 −62 source/style.sass
2  source/index.haml
View
@@ -7,7 +7,7 @@
:type => "text/css" }
%link{:href => "style.css", :rel => "stylesheet", :type => "text/css"}
%link{:href => "favicon.png", :rel => "shortcut icon", :type => "image/png"}
- %meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
+ %meta{ :name => "viewport", :content => "width = device-width" }
%script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
:type => "text/javascript" }
%script{:src => "ingredients.json", :type => "text/javascript"}
134 source/style.sass
View
@@ -9,68 +9,78 @@ $width: 500px
padding: $corner
@include border-radius($corner)
-body
- text-align: center
- background: url(background.png)
- font-family: Nunito, Helvetica, sans-serif
- .container
- width: 500px
- margin: 0 auto
- button
- margin: 30px 0
- @include big-border
- @include button(shiny, #fff)
- font-size: 1.5em
- font-weight: bold
- display: block
+@mixin all($width)
+ body
+ text-align: center
+ background: url(background.png)
+ font-family: Nunito, Helvetica, sans-serif
+ .container
width: $width
- h1
- font-size: 7em
- line-height: 0.6em
- .error
- color: red
- font-weight: 300
- display: none
- .choose
- ol.ingredients
- list-style-type: none
- padding: 0
- li
- input
- @include big-border
- width: $width - 2*$corner
- .results
- display: none
+ margin: 0 auto
+ button
+ margin: 30px 0
+ @include big-border
+ @include button(shiny, #fff)
+ font-size: 1.5em
+ font-weight: bold
+ display: block
+ width: $width
h1
- font-weight: normal
- font-size: 5em
- line-height: 0.8em
+ font-size: 7em
+ line-height: 0.6em
+ .error
+ color: red
+ font-weight: 300
+ display: none
+ .choose
+ ol.ingredients
+ list-style-type: none
+ padding: 0
+ li
+ input
+ @include big-border
+ width: $width - 2*$corner
+ .results
+ display: none
+ h1
+ font-weight: normal
+ font-size: 5em
+ line-height: 0.8em
+ span
+ font-weight: bold
+ text-decoration: underline
+ a.box
+ display: block
+ background: rgba(255, 255, 255, 0.5)
+ border: 4px solid #444
+ color: #222
+ text-decoration: none
+ @include border-radius($corner)
+ &:hover
+ background-color: rgba(255, 255, 255, 0.8)
+ @include transition(background-color 1.0s ease)
+ h2
+ padding: 10px
+ img
+ width: 100%
+ @include border-bottom-radius($corner/2)
+ .footer
+ opacity: 0.5
+ padding: 50px 0
+ a
+ color: #555
+ a.punchfork
+ text-decoration: none
+ img
+ margin-bottom: -6px
span
- font-weight: bold
- text-decoration: underline
- a.box
- display: block
- background: rgba(255, 255, 255, 0.5)
- border: 4px solid #444
- color: #222
- text-decoration: none
- @include border-radius($corner)
- &:hover
- background-color: rgba(255, 255, 255, 0.8)
- @include transition(background-color 1.0s ease)
- h2
- padding: 10px
- img
- width: 100%
- @include border-bottom-radius($corner/2)
- .footer
- opacity: 0.5
- padding: 50px 0
- a
- color: #555
- a.punchfork
- text-decoration: none
- img
- margin-bottom: -6px
- span
- padding: 0 15px
+ padding: 0 15px
+
+@include all($width)
+
+// iPhone
+@media only screen and (max-width: 480px)
+ @include all(400px)
+ .footer
+ img
+ display: none
Please sign in to comment.
Something went wrong with that request. Please try again.