Skip to content

Commit 9819d2c

Browse files
Andrew DunkmanAndrew Dunkman
Andrew Dunkman
authored and
Andrew Dunkman
committed
Adapted media queries to support responsive layout
1 parent ca45eac commit 9819d2c

3 files changed

Lines changed: 178 additions & 168 deletions

File tree

‎public/css/app.styl‎

Lines changed: 117 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -4,142 +4,143 @@ html, *
44
margin 0
55
padding 0
66

7+
html
8+
background #262721 url('images/bgpattern.png')
9+
color #D2D8BA
10+
font-weight bold
11+
font-family 'Helvetica Neue', Helvetica, Arial, sans-serif
12+
713
body
8-
font-size 100%
9-
background-color #262721
10-
background url('images/bgpattern.png')
11-
height 100%
14+
margin 0 auto
15+
padding 0 10px
16+
max-width 1200px
17+
1218
a
1319
color #8CC84B
1420
text-decoration none
1521

16-
#wrapper
17-
height 100%
18-
margin 0 auto
19-
max-width 1200px
20-
font-weight bold
21-
color #D2D8BA
22-
font-family 'Helvetica Neue', Helvetica, Arial, sans-serif
23-
text-align center
24-
h1
25-
max-width 100%
26-
text-indent -90000px
27-
form.node-out
28-
margin 25px 0 15px 0
29-
height 40px
30-
position relative
31-
text-align center
32-
input[type=text]
22+
h1
23+
height 200px
24+
max-width 391px
25+
text-indent -90000px
26+
margin 20px auto
27+
background url('images/nodekc-dark.png') no-repeat center center
28+
background-size 391px
29+
30+
form.join
31+
margin 15px auto
32+
padding 0 10px
33+
max-width 391px
34+
35+
input
36+
font-size 100%
37+
line-height: 1.2em
38+
border none
39+
outline none
40+
41+
label
42+
display block
43+
background-color #fff
3344
padding 5px 12px
34-
margin-right 10px
35-
width 240px
45+
margin-right 70px
3646
border-radius(4px)
47+
48+
input[type=email]
49+
width 100%
50+
3751
input[type=submit]
52+
float right
53+
display block
54+
cursor pointer
55+
padding 5px 12px
56+
3857
border-radius(4px)
3958
background-color #8BC84B
4059
color #363730
41-
font-weight bold
42-
padding 6px 12px
43-
display inline-block
44-
outline none
45-
text-align center
4660
text-shadow 0 1px 1px rgba(0,0,0,0.3)
47-
vertical-align baseline
61+
font-weight bold
62+
63+
-webkit-appearance none
64+
&::-moz-focus-inner
65+
padding: 0 !important;
66+
border: 0 none !important;
67+
4868
&:hover
4969
background-color #73A53E
50-
input
51-
font-size 100%
52-
border none
53-
outline none
5470

55-
#panels
56-
max-width 1200px
57-
list-style-type none
58-
li.panel
59-
ul
60-
box-shadow(1px 1px 1px 1px rgba(0, 0, 0, .5))
61-
background-color #222
62-
padding 5px 5px 20px 10px
63-
border-radius(4px)
64-
margin 5px 0 10px 0px
65-
list-style-type none
66-
h2
67-
text-align center
68-
font-size 1.2em
69-
.title
71+
.section
72+
float left
73+
width 33%
74+
75+
ul
76+
padding 5px
77+
margin 10px
78+
list-style-type none
79+
80+
box-shadow(1px 1px 1px 1px rgba(0, 0, 0, .5))
81+
border-radius(4px)
82+
background #222
83+
84+
h2
85+
margin-top 20px
86+
text-align center
87+
font-size 1.2em
88+
line-height 1.2em
89+
90+
a
91+
display block
92+
clear both
93+
color #D2D8BA
94+
95+
&:hover
96+
color #E3E9CB
97+
h3
98+
color #9DD95C
99+
.time
100+
color #999
101+
102+
h3
103+
margin-bottom 3px
104+
color #8CC84B
70105
font-size 1em
71-
width 100%
72-
display block
73-
.teaser
106+
line-height 1.2em
107+
108+
img
109+
float left
110+
width 48px
111+
height 48px
112+
margin 5px 10px 5px 0
113+
background #333
74114
border none
75-
font-size .75em
115+
border-radius(4px)
116+
76117
.time
77118
color #888
78119
font-style italic
79120
float right
80-
clear both
81121
font-size .6em
82-
li.tweets
83-
margin 0 10px
84-
.title
85-
display inline
86-
width auto
87-
li
88-
margin-bottom 5px
89-
clear both
90-
p.teaser
91-
word-wrap break-word
92-
overflow hidden
93-
.avatar
94-
float left
95-
margin-right 10px
96-
img
97-
border-radius(3px)
98-
margin-top 6px
122+
line-height 2.3em
123+
124+
p
99125
border none
100-
@media only screen and (max-width: 320px)
101-
#wrapper
102-
width 320px
103-
h1
104-
margin-top 3px
105-
background url('images/nodekc-dark-small.png') no-repeat center center
106-
width 320px
107-
height 164px
108-
form.node-out
109-
margin 0
110-
margin-top 5px
111-
height 25px
112-
input[type=text]
113-
width 150px
114-
margin 0 4px 0 0
115-
padding 2px
116-
input[type=submit]
117-
padding-left 0px
118-
padding-right 0px
119-
margin-left 0px
120-
font-size .85em
121-
#panels
122-
li.panel
123-
text-align left
124-
margin 0
125-
margin-left 4px
126-
margin-top 8px
127-
width 310px
128-
float none
129-
clear both
130-
@media only screen and (min-width: 321px)
131-
#wrapper
132-
width 95%
133-
h1
134-
margin 20px 0 10px 0
135-
height 200px
136-
min-width 391px
137-
background url('images/nodekc-dark.png') no-repeat center center
138-
#panels
139-
li.panel
140-
float left
141-
width 32%
142-
text-align left
143-
margin-top 15px
144-
li
145-
clear both
126+
font-size .75em
127+
line-height 1.2em
128+
margin-bottom 15px
129+
word-wrap break-word
130+
overflow hidden
131+
132+
@media only screen and (max-width: 1000px)
133+
.section
134+
width 50%
135+
&.tweets
136+
float right
137+
138+
@media only screen and (max-width: 600px)
139+
.section
140+
width auto
141+
float none
142+
h1
143+
height 100px
144+
-moz-background-size 195px
145+
-webkit-background-size 195px
146+
background-size 195px

‎public/css/mixins.styl‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,10 @@ border-radius()
66
box-shadow()
77
-webkit-box-shadow arguments
88
-moz-box-shadow arguments
9-
box-shadow arguments
9+
box-shadow arguments
10+
11+
transition()
12+
-moz-transition arguments
13+
-webkit-transition arguments
14+
-o-transition arguments
15+
transition arguments

‎views/layout.jade‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,62 @@
11
!!! 5
22
html(lang="en")
3-
title NodeKC - Kansas City's Node.js user group
3+
head
4+
title NodeKC - Kansas City's Node.js user group
45

5-
meta(content='True', name='HandheldFriendly')
6-
meta(content='320', name='MobileOptimized')
7-
meta(content='width=device-width, target-densitydpi=160dpi, initial-scale=1.0', name='viewport')
6+
meta(content='True', name='HandheldFriendly')
7+
meta(content='320', name='MobileOptimized')
8+
meta(content='width=device-width, target-densitydpi=160dpi, initial-scale=1.0', name='viewport')
89

9-
script
10-
var _gaq = _gaq || [];
11-
_gaq.push(['_setAccount', 'UA-27907751-4']);
12-
_gaq.push(['_trackPageview']);
10+
script
11+
var _gaq = _gaq || [];
12+
_gaq.push(['_setAccount', 'UA-27907751-4']);
13+
_gaq.push(['_trackPageview']);
1314

14-
(function() {
15-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
16-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
17-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
18-
})();
15+
(function() {
16+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
17+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
18+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
19+
})();
1920

20-
link(rel='stylesheet', href='/css/app.css')
21+
link(rel='stylesheet', href='/css/app.css')
2122

2223
body
23-
#wrapper
24-
h1 NodeKC
25-
26-
form(action='http://groups.google.com/group/kc-nodejs/boxsubscribe').node-out
27-
input(type='text', name='email', placeholder='[email protected]')
28-
29-
input(type='submit', value='join')
30-
31-
ul#panels
32-
li.panel.events
33-
h2 events
34-
ul
35-
each item in events
36-
li
37-
a.title(href=item.url)#{item.title}
38-
if item.details
39-
p.teaser #{item.details}
40-
.time #{item.when}
41-
li.panel.tweets
42-
h2 tweets
43-
44-
ul
45-
each item in tweets
46-
li
47-
a.title(href='http://twitter.com/' + item.created_by) #{item.created_by}
48-
a.avatar(href='http://twitter.com/' + item.created_by, target='_blank')
49-
img(src='http://api.twitter.com/1/users/profile_image/' + item.created_by + '.png', title=item.created_by, target='_blank')
50-
p.teaser #{item.tweet}
51-
.time #{item.timeago}
52-
li.panel.messages
53-
h2 messages
54-
ul
55-
each item in messages
56-
li
57-
a.title(href=item.url)#{item.subject}
58-
p.teaser= item.body
59-
.time #{item.timeago}
24+
25+
h1 NodeKC
26+
27+
form(action='http://groups.google.com/group/kc-nodejs/boxsubscribe').join
28+
input(type='submit', value='join')
29+
label
30+
input(type='email', name='email', placeholder='[email protected]')
31+
32+
.events.section
33+
h2 events
34+
ul
35+
each item in events
36+
li
37+
a(href=item.url)
38+
.time= item.when
39+
h3= item.title
40+
p= item.details
41+
42+
.tweets.section
43+
h2 tweets
44+
ul
45+
each item in tweets
46+
li
47+
a(href='http://twitter.com/' + item.created_by)
48+
img(src='http://api.twitter.com/1/users/profile_image/' + item.created_by + '.png', alt=item.created_by)
49+
.time #{item.timeago}
50+
h3= item.created_by
51+
p= item.tweet
52+
53+
54+
.messages.section
55+
h2 messages
56+
ul
57+
each item in messages
58+
li
59+
a(href=item.url)
60+
.time= item.timeago
61+
h3= item.subject
62+
p= item.body

0 commit comments

Comments
 (0)