From: James Bunton Date: Sun, 17 Feb 2013 00:16:17 +0000 (+1100) Subject: Use CSS media queries and em unit for buttons X-Git-Url: https://code.delx.au/countdown-timer/commitdiff_plain/fb54bb0c62718afcd5338137de5c2ba7095f2444 Use CSS media queries and em unit for buttons --- diff --git a/index.html b/index.html index 1f4e0e2..21fbae8 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Countdown Timer diff --git a/timer.css b/timer.css index 8e7769b..84a19ac 100644 --- a/timer.css +++ b/timer.css @@ -27,7 +27,6 @@ html, body { } #display, #alarm-text { - font-size: 10em; font-family: Verdana, Arial, Lucida, Helvetica, sans-serif; text-shadow: 0.03em 0.03em #cccccc; border: 0.02em #cccccc solid; @@ -35,6 +34,60 @@ html, body { margin: 0.2em; } +@media only screen and (min-width: 200px) { + #display, #alarm-text { + font-size: 1.5em; + } +} + +@media only screen and (min-width: 300px) { + #display, #alarm-text { + font-size: 3em; + } +} + +@media only screen and (min-width: 400px) { + #display, #alarm-text { + font-size: 4em; + } +} + +@media only screen and (min-width: 500px) { + #display, #alarm-text { + font-size: 5em; + } +} + +@media only screen and (min-width: 600px) { + #display, #alarm-text { + font-size: 6em; + } +} + +@media only screen and (min-width: 700px) { + #display, #alarm-text { + font-size: 7em; + } +} + +@media only screen and (min-width: 800px) { + #display, #alarm-text { + font-size: 8em; + } +} + +@media only screen and (min-width: 1000px) { + #display, #alarm-text { + font-size: 10em; + } +} + +@media only screen and (min-width: 1400px) { + #display, #alarm-text { + font-size: 10em; + } +} + #alarm-text { text-decoration: blink; } @@ -53,25 +106,24 @@ html, body { button { - -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; - box-shadow: inset 0px 1px 0px 0px #ffffff; + -moz-box-shadow: inset 0em 0.1em 0em 0em #ffffff; + -webkit-box-shadow: inset 0em 0.1em 0em 0em #ffffff; + box-shadow: inset 0em 0.1em 0em 0em #ffffff; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color: #ededed; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border-radius: 6px; - border: 1px solid #dcdcdc; + -moz-border-radius: 0.4em; + -webkit-border-radius: 0.4em; + border-radius: 0.4em; + border: 0.1em solid #dcdcdc; display: inline-block; color: #777777; font-family: arial; - font-size: 15px; font-weight: bold; - padding: 6px 24px; + padding: 0.4em 1.5em; text-decoration: none; - text-shadow: 1px 1px 0px #ffffff; + text-shadow: 0.1em 0.1em 0em #ffffff; } button:hover { @@ -83,19 +135,19 @@ button:hover { button:active { position:relative; - top:1px; + top:0.1em; } button.action { - -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe; - -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe; - box-shadow: inset 0px 1px 0px 0px #97c4fe; + -moz-box-shadow: inset 0em 0.1em 0em 0em #97c4fe; + -webkit-box-shadow: inset 0em 0.1em 0em 0em #97c4fe; + box-shadow: inset 0em 0.1em 0em 0em #97c4fe; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) ); background: -moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0'); background-color: #3d94f6; - border: 1px solid #337fed; - text-shadow: 1px 1px 0px #1570cd; + border: 0.1em solid #337fed; + text-shadow: 0.1em 0.1em 0em #1570cd; color: #ffffff; }