]> code.delx.au - countdown-timer/commitdiff
delx.au / code / countdown-timer / commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8cab894)
Use CSS media queries and em unit for buttons
authorJames Bunton <jamesbunton@delx.net.au>
Sun, 17 Feb 2013 00:16:17 +0000 (11:16 +1100)
committerJames Bunton <jamesbunton@delx.net.au>
Sun, 17 Feb 2013 00:16:17 +0000 (11:16 +1100)
index.html patch | blob | history
timer.css patch | blob | history

diff --git a/index.html b/index.html
index 1f4e0e2dee2be4b92ceeeea70d03416a80d2e4d6..21fbae8ea44658fba322d8e226c1aeeca85b5782 100644 (file)
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
        <meta charset="utf-8">
 <html>
 <head>
        <meta charset="utf-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Countdown Timer</title>
        <link href="timer.css" rel="stylesheet" type="text/css" />
        <script type="application/javascript" src="jquery-1.9.1.min.js"></script>
        <title>Countdown Timer</title>
        <link href="timer.css" rel="stylesheet" type="text/css" />
        <script type="application/javascript" src="jquery-1.9.1.min.js"></script>
diff --git a/timer.css b/timer.css
index 8e7769b902b50f3faac2101be6768e08a9e21ed5..84a19ac8baa175b875bb509bdc8bffb352db01f6 100644 (file)
--- a/timer.css
+++ b/timer.css
@@ -27,7 +27,6 @@ html, body {
 }
 
 #display, #alarm-text {
 }
 
 #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;
        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;
 }
 
        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;
 }
 #alarm-text {
        text-decoration: blink;
 }
@@ -53,25 +106,24 @@ html, body {
 
 
 button {
 
 
 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;
        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;
        display: inline-block;
        color: #777777;
        font-family: arial;
-       font-size: 15px;
        font-weight: bold;
        font-weight: bold;
-       padding: 6px 24px;
+       padding: 0.4em 1.5em;
        text-decoration: none;
        text-decoration: none;
-       text-shadow: 1px 1px 0px #ffffff;
+       text-shadow: 0.1em 0.1em 0em #ffffff;
 }
 
 button:hover {
 }
 
 button:hover {
@@ -83,19 +135,19 @@ button:hover {
 
 button:active {
        position:relative;
 
 button:active {
        position:relative;
-       top:1px;
+       top:0.1em;
 }
 
 button.action {
 }
 
 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;
        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;
 }
 
        color: #ffffff;
 }
 
Simple JavaScript countdown timer.