Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

More mobile optimization.

  • Loading branch information...
commit 74fd050f4ad2ecc2734689d9e0420b56f9fff27e 1 parent 8fd87a0
Peter Sobot authored

Showing 2 changed files with 73 additions and 63 deletions. Show diff stats Hide diff stats

  1. +1 1  source/index.haml
  2. +72 62 source/style.sass
2  source/index.haml
@@ -7,7 +7,7 @@
7 7 :type => "text/css" }
8 8 %link{:href => "style.css", :rel => "stylesheet", :type => "text/css"}
9 9 %link{:href => "favicon.png", :rel => "shortcut icon", :type => "image/png"}
10   - %meta{:content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport"}
  10 + %meta{ :name => "viewport", :content => "width = device-width" }
11 11 %script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
12 12 :type => "text/javascript" }
13 13 %script{:src => "ingredients.json", :type => "text/javascript"}
134 source/style.sass
@@ -9,68 +9,78 @@ $width: 500px
9 9 padding: $corner
10 10 @include border-radius($corner)
11 11
12   -body
13   - text-align: center
14   - background: url(background.png)
15   - font-family: Nunito, Helvetica, sans-serif
16   - .container
17   - width: 500px
18   - margin: 0 auto
19   - button
20   - margin: 30px 0
21   - @include big-border
22   - @include button(shiny, #fff)
23   - font-size: 1.5em
24   - font-weight: bold
25   - display: block
  12 +@mixin all($width)
  13 + body
  14 + text-align: center
  15 + background: url(background.png)
  16 + font-family: Nunito, Helvetica, sans-serif
  17 + .container
26 18 width: $width
27   - h1
28   - font-size: 7em
29   - line-height: 0.6em
30   - .error
31   - color: red
32   - font-weight: 300
33   - display: none
34   - .choose
35   - ol.ingredients
36   - list-style-type: none
37   - padding: 0
38   - li
39   - input
40   - @include big-border
41   - width: $width - 2*$corner
42   - .results
43   - display: none
  19 + margin: 0 auto
  20 + button
  21 + margin: 30px 0
  22 + @include big-border
  23 + @include button(shiny, #fff)
  24 + font-size: 1.5em
  25 + font-weight: bold
  26 + display: block
  27 + width: $width
44 28 h1
45   - font-weight: normal
46   - font-size: 5em
47   - line-height: 0.8em
  29 + font-size: 7em
  30 + line-height: 0.6em
  31 + .error
  32 + color: red
  33 + font-weight: 300
  34 + display: none
  35 + .choose
  36 + ol.ingredients
  37 + list-style-type: none
  38 + padding: 0
  39 + li
  40 + input
  41 + @include big-border
  42 + width: $width - 2*$corner
  43 + .results
  44 + display: none
  45 + h1
  46 + font-weight: normal
  47 + font-size: 5em
  48 + line-height: 0.8em
  49 + span
  50 + font-weight: bold
  51 + text-decoration: underline
  52 + a.box
  53 + display: block
  54 + background: rgba(255, 255, 255, 0.5)
  55 + border: 4px solid #444
  56 + color: #222
  57 + text-decoration: none
  58 + @include border-radius($corner)
  59 + &:hover
  60 + background-color: rgba(255, 255, 255, 0.8)
  61 + @include transition(background-color 1.0s ease)
  62 + h2
  63 + padding: 10px
  64 + img
  65 + width: 100%
  66 + @include border-bottom-radius($corner/2)
  67 + .footer
  68 + opacity: 0.5
  69 + padding: 50px 0
  70 + a
  71 + color: #555
  72 + a.punchfork
  73 + text-decoration: none
  74 + img
  75 + margin-bottom: -6px
48 76 span
49   - font-weight: bold
50   - text-decoration: underline
51   - a.box
52   - display: block
53   - background: rgba(255, 255, 255, 0.5)
54   - border: 4px solid #444
55   - color: #222
56   - text-decoration: none
57   - @include border-radius($corner)
58   - &:hover
59   - background-color: rgba(255, 255, 255, 0.8)
60   - @include transition(background-color 1.0s ease)
61   - h2
62   - padding: 10px
63   - img
64   - width: 100%
65   - @include border-bottom-radius($corner/2)
66   - .footer
67   - opacity: 0.5
68   - padding: 50px 0
69   - a
70   - color: #555
71   - a.punchfork
72   - text-decoration: none
73   - img
74   - margin-bottom: -6px
75   - span
76   - padding: 0 15px
  77 + padding: 0 15px
  78 +
  79 +@include all($width)
  80 +
  81 +// iPhone
  82 +@media only screen and (max-width: 480px)
  83 + @include all(400px)
  84 + .footer
  85 + img
  86 + display: none

0 comments on commit 74fd050

Please sign in to comment.
Something went wrong with that request. Please try again.