Skip to content

Commit eff86e5

Browse files
hojberghojberg
committed
Add banner for programming-is-collaboration.com
1 parent 3ebb1c6 commit eff86e5

File tree

1 file changed

+237
-36
lines changed

1 file changed

+237
-36
lines changed

‎public/css/app.css‎

Lines changed: 237 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,263 @@
11
/* =BASE
22
====================================================== */
3-
html, body { background: url(../img/noisebg.png); }
4-
body { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
5-
a { color: #fff; color: rgba(255, 255, 255, 0.7); }
6-
ul, ol, form { margin: 0; padding: 0; }
7-
ul, ol { list-style-type: none; }
8-
h1 { margin: 0; padding: 0; }
9-
h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: #626569; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
10-
input { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
11-
input[type='radio'] { border: 0; }
3+
html,
4+
body {
5+
background: url(../img/noisebg.png);
6+
}
7+
body {
8+
font-size: 18px;
9+
font-family: "Terminal Dosis", sans-serif;
10+
padding: 0;
11+
margin: 0;
12+
color: #fff;
13+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
14+
}
15+
a {
16+
color: #fff;
17+
color: rgba(255, 255, 255, 0.7);
18+
}
19+
ul,
20+
ol,
21+
form {
22+
margin: 0;
23+
padding: 0;
24+
}
25+
ul,
26+
ol {
27+
list-style-type: none;
28+
}
29+
h1 {
30+
margin: 0;
31+
padding: 0;
32+
}
33+
h2 {
34+
margin: 0;
35+
margin-bottom: 10px;
36+
padding: 0;
37+
font-weight: normal;
38+
font-size: 30px;
39+
color: #626569;
40+
color: rgba(0, 0, 0, 0.4);
41+
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
42+
}
43+
input {
44+
font-size: 14px;
45+
border: 1px solid #777;
46+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2),
47+
0 1px 1px 0 rgba(255, 255, 255, 0.3);
48+
border-radius: 4px;
49+
padding: 3px;
50+
-webkit-background-clip: padding-box;
51+
}
52+
input[type="radio"] {
53+
border: 0;
54+
}
1255

1356
/* =LAYOUT
1457
====================================================== */
15-
#content { width: 800px; margin: auto; padding: 50px; padding-bottom: 60px;
58+
#banner {
59+
width: 780px;
60+
margin: auto;
61+
margin-top: 20px;
62+
padding: 10px;
63+
display: block;
64+
text-align: center;
65+
background: rgba(0, 0, 0, 0.3);
66+
color: #fff;
67+
border-radius: 4px;
68+
text-decoration: none;
69+
transition: all 0.2s;
70+
}
71+
72+
#banner:hover {
73+
background: #333;
74+
}
75+
76+
#content {
77+
width: 800px;
78+
margin: auto;
79+
padding: 50px;
80+
padding-bottom: 60px;
1681
/* white radial gradient background */
17-
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
18-
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0)));
19-
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
20-
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
21-
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
22-
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
82+
background: -moz-radial-gradient(
83+
center,
84+
ellipse cover,
85+
rgba(255, 255, 255, 0.5) 0%,
86+
rgba(255, 255, 255, 0) 70%
87+
);
88+
background: -webkit-gradient(
89+
radial,
90+
center center,
91+
0px,
92+
center center,
93+
100%,
94+
color-stop(0%, rgba(255, 255, 255, 0.5)),
95+
color-stop(70%, rgba(255, 255, 255, 0))
96+
);
97+
background: -webkit-radial-gradient(
98+
center,
99+
ellipse cover,
100+
rgba(255, 255, 255, 0.5) 0%,
101+
rgba(255, 255, 255, 0) 70%
102+
);
103+
background: -o-radial-gradient(
104+
center,
105+
ellipse cover,
106+
rgba(255, 255, 255, 0.5) 0%,
107+
rgba(255, 255, 255, 0) 70%
108+
);
109+
background: -ms-radial-gradient(
110+
center,
111+
ellipse cover,
112+
rgba(255, 255, 255, 0.5) 0%,
113+
rgba(255, 255, 255, 0) 70%
114+
);
115+
background: radial-gradient(
116+
center,
117+
ellipse cover,
118+
rgba(255, 255, 255, 0.5) 0%,
119+
rgba(255, 255, 255, 0) 70%
120+
);
121+
}
122+
#footer {
123+
padding-top: 10px;
124+
font-size: 13px;
125+
color: rgba(255, 255, 255, 0.7);
126+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
127+
border-top: 1px solid #797f85;
128+
border-top-color: rgba(0, 0, 0, 0.15);
129+
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
130+
vertical-align: top;
131+
text-align: center;
132+
}
133+
#footer a {
134+
vertical-align: top;
135+
color: #fff;
136+
}
137+
#footer span {
138+
vertical-align: top;
139+
}
140+
.clr:after {
141+
clear: both;
142+
content: ".";
143+
display: block;
144+
height: 0;
145+
visibility: hidden;
146+
line-height: 0;
147+
font-size: 0;
23148
}
24-
#footer { padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid #797f85; border-top-color: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; text-align: center; }
25-
#footer a { vertical-align: top; color: #fff; }
26-
#footer span { vertical-align: top;}
27-
.clr:after { clear:both; content:"."; display: block; height:0; visibility: hidden; line-height:0; font-size:0; }
28149

29-
.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
150+
.ir {
151+
border: 0;
152+
font: 0/0 a;
153+
text-shadow: none;
154+
color: transparent;
155+
background-color: transparent;
156+
}
30157

31-
.description { margin-bottom: 50px; font-size: 16px; text-align: center; }
158+
.description {
159+
margin-bottom: 50px;
160+
font-size: 16px;
161+
text-align: center;
162+
}
32163

33-
.preview_and_configuration { float: left; width: 395px; }
164+
.preview_and_configuration {
165+
float: left;
166+
width: 395px;
167+
}
34168

35169
/* =MODULES
36170
====================================================== */
37171
/* preview */
38-
.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; }
172+
.arrow_box {
173+
padding: 40px;
174+
width: 280px;
175+
height: 100px;
176+
border-radius: 6px;
177+
}
39178

40179
/* logo */
41-
.logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
180+
.logo {
181+
color: #ddf8c6;
182+
text-align: center;
183+
font-size: 54px;
184+
line-height: 54px;
185+
font-weight: bold;
186+
text-transform: uppercase;
187+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
188+
}
42189

43190
/* configuration */
44-
.configuration { margin-top: 20px; }
45-
.configuration .section { float: left; width: 195px; font-size: 20px }
46-
.configuration .section.positions { width: 140px; margin-left: 14px }
47-
.configuration .section li { margin-bottom: 5px; }
48-
.configuration .section label { display: inline-block; width: 112px; }
191+
.configuration {
192+
margin-top: 20px;
193+
}
194+
.configuration .section {
195+
float: left;
196+
width: 195px;
197+
font-size: 20px;
198+
}
199+
.configuration .section.positions {
200+
width: 140px;
201+
margin-left: 14px;
202+
}
203+
.configuration .section li {
204+
margin-bottom: 5px;
205+
}
206+
.configuration .section label {
207+
display: inline-block;
208+
width: 112px;
209+
}
49210

50211
.configuration .size,
51-
.configuration .border_width { width: 28px; text-align: right; }
212+
.configuration .border_width {
213+
width: 28px;
214+
text-align: right;
215+
}
52216

53-
.configuration .color { width: 65px; text-align: center }
217+
.configuration .color {
218+
width: 65px;
219+
text-align: center;
220+
}
54221

55-
.configuration .unit { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }
222+
.configuration .unit {
223+
font-size: 14px;
224+
color: rgba(0, 0, 0, 0.4);
225+
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
226+
margin-left: 5px;
227+
}
56228

57229
/* css_result */
58-
.css_result { position: relative; float: right; width: 402px; }
59-
.css_result .code { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: #8c9196; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid #696d72; border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
230+
.css_result {
231+
position: relative;
232+
float: right;
233+
width: 402px;
234+
}
235+
.css_result .code {
236+
white-space: pre;
237+
padding: 10px;
238+
display: block;
239+
width: 380px;
240+
font-size: 12px;
241+
font-family: "Courier new";
242+
font-weight: bold;
243+
background: #8c9196;
244+
background: rgba(0, 0, 0, 0.15);
245+
border-radius: 4px;
246+
color: #fff;
247+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
248+
border: 1px solid #696d72;
249+
border-color: rgba(0, 0, 0, 0.2);
250+
box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3),
251+
inset 0 1px 5px rgba(0, 0, 0, 0.1);
252+
}
60253

61254
/* fork_me */
62-
.fork_me { position: absolute; top: 0; right: 0; display: block; width: 149px; height: 149px; background: url(../img/fork.png); }
255+
.fork_me {
256+
position: absolute;
257+
top: 0;
258+
right: 0;
259+
display: block;
260+
width: 149px;
261+
height: 149px;
262+
background: url(../img/fork.png);
263+
}

0 commit comments

Comments
 (0)