Skip to content

Commit 5b9c3bf

Browse files
hojberghojberg
committed
Merge pull request hojberg#2 from hojberg/refresh_design
made it pretty
2 parents 9f927b9 + 1c2277f commit 5b9c3bf

File tree

4 files changed

+73
-52
lines changed

4 files changed

+73
-52
lines changed

‎public/css/app.css‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,53 @@
11
/* =BASE
22
====================================================== */
3-
html, body { background: url(../img/blueprintbg.png); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
4-
body { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; }
5-
a { 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; margin-bottom: 10px; padding: 0; }
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: 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: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
910

1011
/* =LAYOUT
1112
====================================================== */
12-
#content { width: 800px; margin: auto; padding: 100px; }
13-
#footer { text-align: center; margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
14-
.clr { overflow: hidden; }
15-
16-
.preview_and_configuration { float: left; width: 320px; }
13+
#content { width: 800px; margin: auto; padding: 100px; padding-bottom: 60px;
14+
/* white radial gradient background */
15+
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
16+
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)));
17+
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
18+
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
19+
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
20+
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
21+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 );
22+
}
23+
#footer { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
24+
border-top: 1px solid rgba(0, 0, 0, 0.15);
25+
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
26+
}
27+
.clr { overflow: hidden; }
28+
29+
.preview_and_configuration { float: left; width: 395px; }
1730

1831
/* =MODULES
1932
====================================================== */
33+
/* preview */
34+
.arrow_box { padding: 40px; width: 280px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
35+
36+
/* logo */
37+
.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); }
2038

2139
/* configuration */
22-
.configuration { margin-top: 30px; }
23-
.configuration ol li { margin-bottom: 5px; }
24-
.configuration ol label { display: inline-block; width: 100px; }
40+
.configuration { margin-top: 15px; }
41+
.configuration .section { float: left; width: 195px; }
42+
.configuration .section li { margin-bottom: 5px; }
43+
.configuration .section label { display: inline-block; width: 100px; }
2544

2645
.configuration .size,
27-
.configuration .border_width { width: 30px; }
46+
.configuration .border_width { width: 30px; }
2847

2948
.configuration .color,
30-
.configuration .border_color { width: 60px; }
49+
.configuration .border_color { width: 60px; }
3150

3251
/* result_code */
33-
.result_code { resize: none; border: 0; padding: 10px; float: right; width: 380px; height: 370px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; 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 rgba(0, 0, 0, 0.2); }
52+
.result_code { resize: none; border: 0; padding: 10px; float: right; width: 380px; height: 370px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; 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 rgba(0, 0, 0, 0.2); }
3453

35-
/* preview */
36-
.arrow_box { color: #fff; padding: 40px; width: 280px; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

‎public/img/noisebg.png‎

11.9 KB
Loading

‎public/index.html‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,42 @@
1515
<div class='preview'>
1616
<style class='preview_styles'></style>
1717
<div class='arrow_box'>
18-
css arrow please!
18+
<h1 class='logo'>css arrow please!</h1>
1919
</div>
2020
</div>
2121
<form class='configuration'>
22-
<h1>Arrow configuration</h1>
23-
<ol>
24-
<li>
25-
<label>Position</label>
26-
<select class='position'>
27-
<option value='top'>Top</option>
28-
<option value='right'>Right</option>
29-
<option value='bottom'>Bottom</option>
30-
<option value='left'>Left</option>
31-
</select>
32-
</li>
33-
<li>
34-
<label>Size</label>
35-
<input class='size' />
36-
</li>
37-
<li>
38-
<label>Color</label>
39-
<input class='color' />
40-
</li>
41-
<li>
42-
<label>Border width</label>
43-
<input class='border_width' />
44-
</li>
45-
<li>
46-
<label>Border color</label>
47-
<input class='border_color' />
48-
</li>
49-
</ol>
22+
<h2>Arrow configuration</h2>
23+
<div class='clr'>
24+
<ol class='section'>
25+
<li>
26+
<label>Position</label>
27+
<select class='position'>
28+
<option value='top'>Top</option>
29+
<option value='right'>Right</option>
30+
<option value='bottom'>Bottom</option>
31+
<option value='left'>Left</option>
32+
</select>
33+
</li>
34+
<li>
35+
<label>Size</label>
36+
<input class='size' />
37+
</li>
38+
<li>
39+
<label>Color</label>
40+
<input class='color' />
41+
</li>
42+
</ol>
43+
<ol class='section'>
44+
<li>
45+
<label>Border width</label>
46+
<input class='border_width' />
47+
</li>
48+
<li>
49+
<label>Border color</label>
50+
<input class='border_color' />
51+
</li>
52+
</ol>
53+
</div>
5054
</form>
5155
</div>
5256
<textarea class='result_code' readonly='readonly'></textarea>

‎public/js/lib/models/arrow.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -239,10 +239,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
239239

240240
Arrow.ATTRS = {
241241
position: 'top',
242-
size: 10,
243-
color: '#8ebf37',
244-
borderWidth: 1,
245-
borderColor: '#4d710d'
242+
size: 30,
243+
color: '#88b7d5',
244+
borderWidth: 4,
245+
borderColor: '#c2e1f5'
246246
};
247247

248248
// Expose

0 commit comments

Comments
 (0)