Skip to content

Commit 1020b64

Browse files
shiftbotshiftbot
committed
targeting narrow and medium layouts
1 parent 479c282 commit 1020b64

File tree

4 files changed

+207
-51
lines changed

4 files changed

+207
-51
lines changed

‎_site/atom.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<title>Code52</title>
44
<link href="http://www.Code52.org/"/>
55
<link type="application/atom+xml" rel="self" href="http://www.Code52.org/atom.xml"/>
6-
<updated>2012-01-07T13:14:43+11:00</updated>
6+
<updated>2012-01-07T13:33:12+11:00</updated>
77
<id>http://www.Code52.org/</id>
88
<author>
99
<name>Code52 Team</name>

‎_site/css/style.css‎

Lines changed: 102 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,114 @@
1-
body{ font-family: Segoe UI, sans-serif; margin-left:auto; margin-right: auto; width:1100px; }
2-
h1,h2,h3,h4,h5,h6{ font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; font-weight:lighter; margin-bottom:0px; }
3-
h1 { font-size: 3em;}
4-
h2 { font-size: 2.5em;}
5-
a, a:visited { text-decoration: none; color:#13678b;}
6-
a:hover { color:white; background: #13678b}
7-
ul { margin:0; padding:0;}
8-
li { margin:0; padding:0; list-style-type:none;}
9-
10-
.entry ul, .idea ul { margin-left:10px; }
11-
.entry li, .idea li{ margin-left:10px; list-style-type:circle;}
12-
#homelink:hover { background:none; }
13-
#side { float:right;color: #41b1e1; margin-left:50px; }
14-
#side .section { margin-top:50px; padding:0;}
15-
#side .section ul { font-size:2em; }
16-
#content { width:auto;}
1+
body
2+
{
3+
font-family: Segoe UI, sans-serif;
4+
margin-left:auto;
5+
margin-right: auto;
6+
width:1100px;
7+
}
8+
h1,h2,h3,h4,h5,h6
9+
{
10+
font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif;
11+
font-weight: lighter;
12+
margin-bottom:0px;
13+
}
14+
h1
15+
{
16+
font-size: 3em;
17+
}
18+
h2
19+
{
20+
font-size: 2.5em;
21+
}
22+
a, a:visited
23+
{
24+
text-decoration: none;
25+
color:#13678b;
26+
}
27+
a:hover
28+
{
29+
color:white;
30+
background: #13678b
31+
}
32+
ul
33+
{
34+
margin:0;
35+
padding:0;
36+
}
37+
li
38+
{
39+
margin:0;
40+
padding:0;
41+
list-style-type:none;
42+
}
43+
.entry ul, .idea ul
44+
{
45+
margin-left:10px;
46+
}
47+
.entry li, .idea li
48+
{
49+
margin-left:10px;
50+
list-style-type:circle;
51+
}
52+
#homelink:hover
53+
{
54+
background:none;
55+
}
56+
#side
57+
{
58+
float:right;
59+
color: #41b1e1;
60+
margin-left:50px;
61+
}
62+
#side .section
63+
{
64+
margin-top:50px;
65+
padding:0;
66+
}
67+
#side .section ul
68+
{
69+
font-size:2em;
70+
}
71+
#content
72+
{
73+
width:auto;
74+
}
1775
img
1876
{
19-
width: auto !important;
20-
height: auto !important;
21-
max-width: 100%;
77+
width: auto !important;
78+
height: auto !important;
79+
max-width: 100%;
2280
border: none;
2381
}
82+
.postdate
83+
{
84+
font-size: 0.8em;
85+
font-weight: bold;
86+
}
87+
.idea h1, .entry h1
88+
{
89+
margin-bottom: 5px;
90+
}
2491

25-
@media screen and (max-width:750px)
92+
/* min-device-width: 800px instead? */
93+
/* TODO: remove blue and red colours once happy with layouts */
94+
@media screen and (max-width:900px)
2695
{
27-
body { width:auto; margin:10px; }
96+
body { width:auto; margin:10px; color: blue; }
2897
#content { width : 100%; }
29-
#side { float:none; width:100%;}
98+
#side { float:none; width:100%; margin-left:0px; }
99+
#side .section { margin-top:0; }
30100
#side ul { font-size:1em; padding:0px; margin:0px; margin-top:20px;}
31101
#side li { display:inline; }
32102
#homelink img { max-width:40%; }
33103
}
34104

35-
.postdate { font-size: 0.8em; font-weight: bold; }
36-
.idea h1, .entry h1 { margin-bottom: 5px;}
105+
@media screen and (max-width:480px)
106+
{
107+
body { width:auto; margin:10px; color: red; }
108+
#content { width : 100%; }
109+
#side { float:none; width:100%; margin-left:0px; }
110+
#side .section { margin-top:0; }
111+
#side ul { font-size:1em; padding:0px; margin:0px; margin-top:20px;}
112+
#side li { display:inline; }
113+
#homelink img { max-width:40%; }
114+
}

‎_site/rss.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<atom:link href="http://www.Code52.org/rss.xml" rel="self" type="application/rss+xml" />
77
<description></description>
88
<language>en-au</language>
9-
<pubDate>Sat, 07 Jan 2012 13:14:43 +1100</pubDate>
10-
<lastBuildDate>Sat, 07 Jan 2012 13:14:43 +1100</lastBuildDate>
9+
<pubDate>Sat, 07 Jan 2012 13:33:12 +1100</pubDate>
10+
<lastBuildDate>Sat, 07 Jan 2012 13:33:12 +1100</lastBuildDate>
1111

1212

1313
<item>

‎css/style.css‎

Lines changed: 102 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,114 @@
1-
body{ font-family: Segoe UI, sans-serif; margin-left:auto; margin-right: auto; width:1100px; }
2-
h1,h2,h3,h4,h5,h6{ font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif; font-weight:lighter; margin-bottom:0px; }
3-
h1 { font-size: 3em;}
4-
h2 { font-size: 2.5em;}
5-
a, a:visited { text-decoration: none; color:#13678b;}
6-
a:hover { color:white; background: #13678b}
7-
ul { margin:0; padding:0;}
8-
li { margin:0; padding:0; list-style-type:none;}
9-
10-
.entry ul, .idea ul { margin-left:10px; }
11-
.entry li, .idea li{ margin-left:10px; list-style-type:circle;}
12-
#homelink:hover { background:none; }
13-
#side { float:right;color: #41b1e1; margin-left:50px; }
14-
#side .section { margin-top:50px; padding:0;}
15-
#side .section ul { font-size:2em; }
16-
#content { width:auto;}
1+
body
2+
{
3+
font-family: Segoe UI, sans-serif;
4+
margin-left:auto;
5+
margin-right: auto;
6+
width:1100px;
7+
}
8+
h1,h2,h3,h4,h5,h6
9+
{
10+
font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif;
11+
font-weight: lighter;
12+
margin-bottom:0px;
13+
}
14+
h1
15+
{
16+
font-size: 3em;
17+
}
18+
h2
19+
{
20+
font-size: 2.5em;
21+
}
22+
a, a:visited
23+
{
24+
text-decoration: none;
25+
color:#13678b;
26+
}
27+
a:hover
28+
{
29+
color:white;
30+
background: #13678b
31+
}
32+
ul
33+
{
34+
margin:0;
35+
padding:0;
36+
}
37+
li
38+
{
39+
margin:0;
40+
padding:0;
41+
list-style-type:none;
42+
}
43+
.entry ul, .idea ul
44+
{
45+
margin-left:10px;
46+
}
47+
.entry li, .idea li
48+
{
49+
margin-left:10px;
50+
list-style-type:circle;
51+
}
52+
#homelink:hover
53+
{
54+
background:none;
55+
}
56+
#side
57+
{
58+
float:right;
59+
color: #41b1e1;
60+
margin-left:50px;
61+
}
62+
#side .section
63+
{
64+
margin-top:50px;
65+
padding:0;
66+
}
67+
#side .section ul
68+
{
69+
font-size:2em;
70+
}
71+
#content
72+
{
73+
width:auto;
74+
}
1775
img
1876
{
19-
width: auto !important;
20-
height: auto !important;
21-
max-width: 100%;
77+
width: auto !important;
78+
height: auto !important;
79+
max-width: 100%;
2280
border: none;
2381
}
82+
.postdate
83+
{
84+
font-size: 0.8em;
85+
font-weight: bold;
86+
}
87+
.idea h1, .entry h1
88+
{
89+
margin-bottom: 5px;
90+
}
2491

25-
@media screen and (max-width:750px)
92+
/* min-device-width: 800px instead? */
93+
/* TODO: remove blue and red colours once happy with layouts */
94+
@media screen and (max-width:900px)
2695
{
27-
body { width:auto; margin:10px; }
96+
body { width:auto; margin:10px; color: blue; }
2897
#content { width : 100%; }
29-
#side { float:none; width:100%;}
98+
#side { float:none; width:100%; margin-left:0px; }
99+
#side .section { margin-top:0; }
30100
#side ul { font-size:1em; padding:0px; margin:0px; margin-top:20px;}
31101
#side li { display:inline; }
32102
#homelink img { max-width:40%; }
33103
}
34104

35-
.postdate { font-size: 0.8em; font-weight: bold; }
36-
.idea h1, .entry h1 { margin-bottom: 5px;}
105+
@media screen and (max-width:480px)
106+
{
107+
body { width:auto; margin:10px; color: red; }
108+
#content { width : 100%; }
109+
#side { float:none; width:100%; margin-left:0px; }
110+
#side .section { margin-top:0; }
111+
#side ul { font-size:1em; padding:0px; margin:0px; margin-top:20px;}
112+
#side li { display:inline; }
113+
#homelink img { max-width:40%; }
114+
}

0 commit comments

Comments
 (0)