-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
122 lines (108 loc) · 3.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Advanced Responsive Web Design with Sass+Compass</title>
<meta name="description" content="Training assets for Advanced RWD with Sass+Compass">
<meta name="author" content="Chris Ruppel, Sam Richard, Ian Carrico, Mason Wendell">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style>
@import url("http://fonts.googleapis.com/css?family=Rambla:400,700,400itali");
html {
background: #66b360;
padding: 1em 2em;
}
body {
text-align: center;
max-width: 42em;
margin: 1em auto;
padding: 2em 3em;
color: #444;
background: #f3f3f3;
box-shadow: inset 0 0 1.4em #020, 0 0 4em rgba(255,255,255,.8);
font-family: "Rambla", sans-serif;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
h1 {margin-top: 0; }
ul,li {text-align: left; }
a {color: #66b360; }
a:visited {color: #065300; }
abbr {cursor: help; }
p.small {
font-size: .8em;
}
/* -- resize me :) -- */
body::after {
content: 'resize me \00A0 \00A0 :)';
font-size: 3em;
color: #000;
opacity: .025;
text-shadow: 0 0 .4em #fff;
position: absolute;
bottom: 2em;
left: 50%;
margin-left: -3em;
-webkit-animation: pulse 4s linear 5;
-moz-animation: pulse 4s linear 5;
-ms-animation: pulse 4s linear 5;
-o-animation: pulse 4s linear 5;
animation: pulse 4s linear 5;
}
/* -- le keyframes -- */
@-webkit-keyframes pulse {50% {opacity: .2; }}
@-moz-keyframes pulse {50% {opacity: .2; }}
@-ms-keyframes pulse {50% {opacity: .2; }}
@-o-keyframes pulse {50% {opacity: .2; }}
@keyframes pulse {50% {opacity: .2; }}
@-webkit-keyframes throb {50% {border-radius: 5em 12em; }}
@-moz-keyframes throb {50% {border-radius: 5em 12em; }}
@-ms-keyframes throb {50% {border-radius: 5em 12em; }}
@-o-keyframes throb {50% {border-radius: 5em 12em; }}
@keyframes throb {50% {border-radius: 5em 12em; }}
/* -- le queries de media -- */
@media (min-width: 26em) {
body {
text-align: left;
margin-top: 2em;
padding: 2em 5em;
border-radius: 2em 4em;
}
}
@media (min-width: 44em) {
body {
margin-top: 3em;
padding: 2em 4em 2em 8em;
border-radius: 2em 9em;
}
}
@media (min-width: 61em) {
body {
margin-top: 3.5em;
padding: 2em 3em 2em 13em;
border-radius: 2em 17em;
-webkit-animation: throb 5.5s ease-in-out 5;
-moz-animation: throb 5.5s ease-in-out 5;
-ms-animation: throb 5.5s ease-in-out 5;
-o-animation: throb 5.5s ease-in-out 5;
animation: throb 5.5s ease-in-out 5;
}
}
</style>
</head>
<body>
<h1>Advanced <abbr title="Responsive Web Design">RWD</abbr> with Sass+Compass</h1>
<h2>Welcome to the <em>worst</em> training ever!</h2>
<h3>Website located at: <a href="http://fourkitchens.github.io/advanced-rwd/">fourkitchens.github.io/advanced-rwd/</a></h3>
<ul>
<li><a href="slides/">Slides for Today's Training</a></li>
<li><a href="https://github.com/fourkitchens/responsive-training-site">Code for Today's Training</a></li>
<li><a href="http://fourkitchens.github.io/responsive-training-site/">Example of Finished Site</a></li>
</ul>
<p>Brought to you by <a href="http://twitter.com/Snugug">Sam Richard</a>, <a href="http://twitter.com/iamcarrico">Ian Carrico</a>, and <a href="http://twitter.com/rupl">Chris Ruppel</a></p>
</body>
</html>