diff --git a/public/css/app.css b/public/css/app.css index fd1c778..cbfac1f 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,36 +1,53 @@ /* =BASE ====================================================== */ -html, body { background: url(../img/blueprintbg.png); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } -body { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; } -a { color: rgba(255, 255, 255, 0.7); } -ul, ol, form { margin: 0; padding: 0; } -ul, ol { list-style-type: none; } -h1 { margin: 0; margin-bottom: 10px; padding: 0; } +html, body { background: url(../img/noisebg.png); } +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); } +a { color: rgba(255, 255, 255, 0.7); } +ul, ol, form { margin: 0; padding: 0; } +ul, ol { list-style-type: none; } +h1 { margin: 0; padding: 0; } +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); } /* =LAYOUT ====================================================== */ -#content { width: 800px; margin: auto; padding: 100px; } -#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); } -.clr { overflow: hidden; } - -.preview_and_configuration { float: left; width: 320px; } +#content { width: 800px; margin: auto; padding: 100px; padding-bottom: 60px; + /* white radial gradient background */ + background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); + 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))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); + background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); + background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); + background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); +} +#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); + border-top: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); +} +.clr { overflow: hidden; } + +.preview_and_configuration { float: left; width: 395px; } /* =MODULES ====================================================== */ +/* preview */ +.arrow_box { padding: 40px; width: 280px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } + +/* logo */ +.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); } /* configuration */ -.configuration { margin-top: 30px; } -.configuration ol li { margin-bottom: 5px; } -.configuration ol label { display: inline-block; width: 100px; } +.configuration { margin-top: 15px; } +.configuration .section { float: left; width: 195px; } +.configuration .section li { margin-bottom: 5px; } +.configuration .section label { display: inline-block; width: 100px; } .configuration .size, -.configuration .border_width { width: 30px; } +.configuration .border_width { width: 30px; } .configuration .color, -.configuration .border_color { width: 60px; } +.configuration .border_color { width: 60px; } /* result_code */ -.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); } +.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); } -/* preview */ -.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); } diff --git a/public/img/noisebg.png b/public/img/noisebg.png index 2a1c299..881e0eb 100644 Binary files a/public/img/noisebg.png and b/public/img/noisebg.png differ diff --git a/public/index.html b/public/index.html index ae18f5f..52b0def 100644 --- a/public/index.html +++ b/public/index.html @@ -15,38 +15,42 @@
- css arrow please! +

css arrow please!

-

Arrow configuration

-
    -
  1. - - -
    2. -
  2. - - -
    3. -
  3. - - -
    4. -
  4. - - -
    5. -
  5. - - -
    6. -
+

Arrow configuration

+
+
    +
  1. + + +
    2. +
  2. + + +
    3. +
  3. + + +
    4. +
+
    +
  1. + + +
    2. +
  2. + + +
    3. +
+
diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js index 41e4f9f..6155395 100644 --- a/public/js/lib/models/arrow.js +++ b/public/js/lib/models/arrow.js @@ -239,10 +239,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; Arrow.ATTRS = { position: 'top', - size: 10, - color: '#8ebf37', - borderWidth: 1, - borderColor: '#4d710d' + size: 30, + color: '#88b7d5', + borderWidth: 4, + borderColor: '#c2e1f5' }; // Expose