From 1b237d69dbc309e59fe49a823ad868ac726e9cb2 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 04:03:36 -0500 Subject: Add background --- assets/css/application.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 255ff68..c2c8aee 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -1,6 +1,11 @@ /* Application */ /* General global styles */ +body { + background: url('../images/background.png') repeat; +} + + #samples { margin: 3em 2em; } \ No newline at end of file -- cgit v1.2.3 From 738d0e4cfd6906cceb0908670410325bf4417bc2 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 04:41:13 -0500 Subject: Semi-style header Include a bunch of fonts to experiment & see what looks best. --- assets/css/application.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index c2c8aee..4b3396b 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -1,8 +1,18 @@ /* Application */ /* General global styles */ + +/* . Layout . */ body { background: url('../images/background.png') repeat; + padding: 0 2em; +} + + +header { + font-family: neoretrodrawregular, znikomitno24regular, seasideresortnfregular, itsadzokes01regular, sans-serif; + font-size: 80px; + margin: 0.2em 0 0.4em; } -- cgit v1.2.3 From 5cd1a609f386959f402078587fe3f4ffb692c70f Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 04:41:49 -0500 Subject: Style URL input --- assets/css/application.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 4b3396b..369aa9b 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -16,6 +16,13 @@ header { } +.url-input { + width: 80%; + padding: 0.3em 0.4em; + font-size: 1.5em; +} + + #samples { margin: 3em 2em; } \ No newline at end of file -- cgit v1.2.3 From 4c43e2c5785a5fd7cab85b19c62a0122cb60b3f0 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:11:32 -0500 Subject: Style the '+' URL button --- assets/css/application.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 369aa9b..074f5fb 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -25,4 +25,56 @@ header { #samples { margin: 3em 2em; +} + + +/* . Buttons . */ +.button { + border-width: 1px; + border-style: solid; + cursor: pointer; + padding: 0.05em 0.4em 0.2em; + position: relative; + top: -0.07em; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); + box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); + -webkit-transition: all 150ms linear; + -moz-transition: all 150ms linear; + -o-transition: all 150ms linear; + -ms-transition: all 150ms linear; + transition: all 150ms linear; +} + +.button:active { + top: 0; + -webkit-box-shadow: 0px 0px 1px 0px rgba(40, 150, 44, 1); + box-shadow: 0px 0px 1px 0px rgba(40, 150, 44, 1); +} + +.button:focus { + outline: none; +} + +.button.green { + background-color: #34bf39; + border-color: #2faf34; + color: #eee; + text-shadow: 0px 1px 2px rgba(0,0,0,0.9); +} + +.button.green:hover { + background-color: #39d740; + color: #fff; +} + +.button.green:active { + background-color: #2ea732; + color: #ddd; +} + +.button.green.large { + font-size: 2em; + line-height: 1; } \ No newline at end of file -- cgit v1.2.3 From 50e47a4d0a3ef6126a8ee1ade651f911c5372dde Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:21:02 -0500 Subject: Style keyboard key inputs --- assets/css/application.css | 43 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 074f5fb..b8236af 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -16,6 +16,13 @@ header { } +#samples { + margin: 3em 2em; +} + + + +/* . Inputs . */ .url-input { width: 80%; padding: 0.3em 0.4em; @@ -23,10 +30,42 @@ header { } -#samples { - margin: 3em 2em; +.key { /* http://cssdeck.com/labs/apple-keyboard-via-css3 */ + display: block; + color: #aaa; + font: bold 9pt Helvetica, sans-serif; + text-decoration: none; + text-align: center; + width: 44px; + height: 41px; + margin: 5px; + background: #eff0f2; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #f5f5f5; + -webkit-box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + -moz-box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + text-shadow: 0px 1px 0px #f5f5f5; } +.key-input { + border: none; +} + + /* . Buttons . */ .button { -- cgit v1.2.3 From b968c0e152118f0e4fcf1e9d222f2f3662fb0245 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:28:37 -0500 Subject: Improve key input styles --- assets/css/application.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index b8236af..3d5bd9b 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -33,7 +33,7 @@ header { .key { /* http://cssdeck.com/labs/apple-keyboard-via-css3 */ display: block; color: #aaa; - font: bold 9pt Helvetica, sans-serif; + font: bold 18pt Helvetica, sans-serif; text-decoration: none; text-align: center; width: 44px; @@ -65,6 +65,10 @@ header { border: none; } +.key-input:hover { + background: #dddee0; +} + /* . Buttons . */ -- cgit v1.2.3 From d901f34d4ee100a021425b7b066cbc22b40f67bd Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:52:04 -0500 Subject: Fix side margins Don't indent the sample editor progress bars. --- assets/css/application.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 3d5bd9b..7f751f7 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -5,7 +5,7 @@ /* . Layout . */ body { background: url('../images/background.png') repeat; - padding: 0 2em; + padding: 0 2.8em; } @@ -17,7 +17,7 @@ header { #samples { - margin: 3em 2em; + margin: 3em 0; } -- cgit v1.2.3 From f06d084d179746f53b5b969628f119195366769c Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 06:14:15 -0500 Subject: Improve styling of drag handles --- assets/css/application.css | 1 + 1 file changed, 1 insertion(+) (limited to 'assets/css/application.css') diff --git a/assets/css/application.css b/assets/css/application.css index 7f751f7..0de3a55 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -6,6 +6,7 @@ body { background: url('../images/background.png') repeat; padding: 0 2.8em; + font-family: Helvetica, sans-serif; } -- cgit v1.2.3