Skip to content

Commit ed9e46f

Browse files
dynajoedynajoe
committed
mobile improvements
1 parent 814b62d commit ed9e46f

5 files changed

Lines changed: 84 additions & 53 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎public/css/app.css‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ html,
44
padding: 0;
55
}
66
body {
7+
font-size: 100%;
78
background-color: #262721;
89
background: url("images/bgpattern.png");
910
height: 100%;
1011
}
1112
a {
1213
color: #8cc84b;
14+
text-decoration: none;
1315
}
1416
#wrapper {
1517
height: 100%;
@@ -43,7 +45,6 @@ form.node-out input[type=submit] {
4345
border-radius: 4px;
4446
background-color: #8bc84b;
4547
color: #363730;
46-
font-size: 14px;
4748
font-weight: bold;
4849
padding: 6px 12px;
4950
display: inline-block;
@@ -63,9 +64,6 @@ form.node-out input {
6364
#panels {
6465
list-style-type: none;
6566
}
66-
#panels li.panel .title {
67-
font-size: 14px;
68-
}
6967
#panels li.panel ul {
7068
-webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.50);
7169
-moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.50);
@@ -79,71 +77,88 @@ form.node-out input {
7977
list-style-type: none;
8078
}
8179
#panels li.panel h2 {
82-
font-size: 20px;
8380
text-align: center;
81+
font-size: 1.2em;
82+
}
83+
#panels li.panel .title {
84+
font-size: 1em;
85+
width: 100%;
86+
display: block;
87+
}
88+
#panels li.panel .teaser {
89+
border: none;
90+
font-size: 0.75em;
8491
}
8592
#panels li.panel .time {
86-
font-size: 10px;
8793
color: #888;
8894
font-style: italic;
8995
float: right;
90-
height: 14px;
91-
padding-top: 5px;
92-
}
93-
#panels li.panel .teaser {
94-
font-size: 12px;
96+
clear: both;
97+
font-size: 0.6em;
9598
}
96-
#panels .tweets {
99+
#panels li.tweets {
97100
margin: 0 15px;
98101
}
99-
#panels .tweets li {
102+
#panels li.tweets .title {
103+
display: inline;
104+
width: auto;
105+
}
106+
#panels li.tweets li {
100107
margin-bottom: 5px;
101108
clear: both;
102109
}
103-
#panels .tweets li p.teaser {
110+
#panels li.tweets li p.teaser {
104111
word-wrap: break-word;
105112
overflow: hidden;
106113
}
107-
#panels .tweets .avatar {
114+
#panels li.tweets .avatar {
108115
float: left;
109116
margin-right: 10px;
110117
}
111-
#panels .tweets img {
118+
#panels li.tweets img {
112119
-webkit-border-radius: 3px;
113120
-moz-border-radius: 3px;
114121
border-radius: 3px;
115122
margin-top: 6px;
116123
border: none;
117124
}
118-
@media only screen and (max-width: 480px) {
125+
@media only screen and (max-width: 320px) {
119126
#wrapper {
120-
width: 350px;
127+
width: 320px;
121128
}
122129
#wrapper h1 {
123-
margin-top: 5px;
130+
margin-top: 3px;
124131
background: url("images/nodekc-dark-small.png") no-repeat center center;
125-
min-width: 350px;
126-
width: 350px;
132+
width: 320px;
127133
height: 104px;
128134
}
135+
form.node-out {
136+
margin: 0;
137+
margin-top: 5px;
138+
height: 25px;
139+
}
129140
form.node-out input[type=text] {
130-
width: 200px;
141+
width: 150px;
142+
margin: 0 4px 0 0;
143+
padding: 2px;
131144
}
132145
form.node-out input[type=submit] {
133-
padding-left: 3px;
134-
padding-right: 3px;
146+
padding-left: 0px;
147+
padding-right: 0px;
148+
margin-left: 0px;
149+
font-size: 0.85em;
135150
}
136151
#panels li.panel {
137152
text-align: left;
138153
margin: 0;
139-
margin-top: 15px;
140-
width: 350px;
141-
max-width: 350px;
154+
margin-left: 4px;
155+
margin-top: 8px;
156+
width: 310px;
142157
float: none;
143158
clear: both;
144159
}
145160
}
146-
@media only screen and (min-width: 481px) {
161+
@media only screen and (min-width: 321px) {
147162
#wrapper {
148163
width: 95%;
149164
}

‎public/css/app.styl‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ html, *
55
padding 0
66

77
body
8+
font-size 100%
89
background-color #262721
910
background url('images/bgpattern.png')
1011
height 100%
1112
a
1213
color #8CC84B
14+
text-decoration none
1315

1416
#wrapper
1517
height 100%
@@ -35,7 +37,6 @@ form.node-out
3537
border-radius(4px)
3638
background-color #8BC84B
3739
color #363730
38-
font-size 14px
3940
font-weight bold
4041
padding 6px 12px
4142
display inline-block
@@ -53,8 +54,6 @@ form.node-out
5354
#panels
5455
list-style-type none
5556
li.panel
56-
.title
57-
font-size 14px
5857
ul
5958
box-shadow(1px 1px 1px 1px rgba(0, 0, 0, .5))
6059
background-color #222
@@ -63,19 +62,26 @@ form.node-out
6362
margin 5px 0 10px 0px
6463
list-style-type none
6564
h2
66-
font-size 20px
6765
text-align center
66+
font-size 1.2em
67+
.title
68+
font-size 1em
69+
width 100%
70+
display block
71+
.teaser
72+
border none
73+
font-size .75em
6874
.time
69-
font-size 10px
7075
color #888
7176
font-style italic
7277
float right
73-
height 14px
74-
padding-top 5px
75-
.teaser
76-
font-size 12px
77-
.tweets
78+
clear both
79+
font-size .6em
80+
li.tweets
7881
margin 0 15px
82+
.title
83+
display inline
84+
width auto
7985
li
8086
margin-bottom 5px
8187
clear both
@@ -89,31 +95,37 @@ form.node-out
8995
border-radius(3px)
9096
margin-top 6px
9197
border none
92-
@media only screen and (max-width: 480px)
98+
@media only screen and (max-width: 320px)
9399
#wrapper
94-
width 350px
100+
width 320px
95101
h1
96-
margin-top 5px
102+
margin-top 3px
97103
background url('images/nodekc-dark-small.png') no-repeat center center
98-
min-width 350px
99-
width 350px
104+
width 320px
100105
height 104px
101106
form.node-out
107+
margin 0
108+
margin-top 5px
109+
height 25px
102110
input[type=text]
103-
width 200px
111+
width 150px
112+
margin 0 4px 0 0
113+
padding 2px
104114
input[type=submit]
105-
padding-left 3px
106-
padding-right 3px
115+
padding-left 0px
116+
padding-right 0px
117+
margin-left 0px
118+
font-size .85em
107119
#panels
108120
li.panel
109121
text-align left
110-
margin 0
111-
margin-top 15px
112-
width 350px
113-
max-width 350px
122+
margin 0
123+
margin-left 4px
124+
margin-top 8px
125+
width 310px
114126
float none
115127
clear both
116-
@media only screen and (min-width: 481px)
128+
@media only screen and (min-width: 321px)
117129
#wrapper
118130
width 95%
119131

‎public/css/images/nodekc-dark-small.png‎

-1.18 KB
Loading

‎views/layout.jade‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
!!! 5
22
html(lang="en")
33
title NodeKC - Kansas City's Node.js user group
4-
4+
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')
8+
59
script
610
var _gaq = _gaq || [];
711
_gaq.push(['_setAccount', 'UA-27907751-4']);
@@ -22,7 +26,7 @@ html(lang="en")
2226
form(action='http://groups.google.com/group/kc-nodejs/boxsubscribe').node-out
2327
input(type='text', name='email', placeholder='[email protected]')
2428

25-
input(type='submit', value='join nodekc')
29+
input(type='submit', value='join')
2630

2731
ul#panels
2832
li.panel.events

0 commit comments

Comments
 (0)