From 672add3d8dd81fc78cce8a0194d2f03fa6e29dff Mon Sep 17 00:00:00 2001 From: Amrit Panesar Date: Mon, 20 Oct 2014 14:13:19 -0700 Subject: [PATCH] CSS cleanup, HTML5 doctype/tag Signed-off-by: Amrit Panesar --- Source/index.html | 6 +- Source/style.css | 416 +++++++++++++++++++++++----------------------- 2 files changed, 208 insertions(+), 214 deletions(-) diff --git a/Source/index.html b/Source/index.html index b43ac1e..d0e5638 100644 --- a/Source/index.html +++ b/Source/index.html @@ -1,5 +1,5 @@ - - + + @@ -32,7 +32,7 @@ } else { toddy = "AM"; } - document.getElementById('tod').innerHTML = toddy; + document.getElementById('tod').innerHTML = toddy; } diff --git a/Source/style.css b/Source/style.css index a7bc32f..f95320f 100644 --- a/Source/style.css +++ b/Source/style.css @@ -36,8 +36,7 @@ caption, th, td { text-align: left; font-weight: normal; } -blockquote:before, blockquote:after, -q:before, q:after { +blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { @@ -56,216 +55,211 @@ body { overflow: hidden; } - #bokeh { - width: 1500px; - height: 100%; - margin: 0 auto; - background: #000; - } - - #bokeh #background { - height: 100%; - -webkit-animation-name: fadeInBack; - -webkit-animation-duration: 3s; - } - - - @-webkit-keyframes fadeInBack { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - - - #bokeh #container { - background: url('container.png') no-repeat center center; - height: 100%; - position:relative; - top:-100%; - } - - - - +#bokeh { + width: 1500px; + height: 100%; + margin: 0 auto; + background: #000; +} - #canvas { - width: 100%; - position: absolute; - top:50%; - } +#bokeh #background { + height: 100%; + -webkit-animation-name: fadeInBack; + -webkit-animation-duration: 3s; +} - #box { - background: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0, rgba(0,0,0,0.8)), - color-stop(1, rgba(0,0,0,0.6)) - ); - width: 700px; - height: 300px; - -webkit-border-radius: 15px; - -webkit-box-shadow: #000 0px 0px 50px; - position: absolute; - top:-150px; - left: 50%; - margin-left:-350px; - border: #000 1px solid; - - /*-webkit-animation: fadeClock 1.5s ease-in-out;*/ +@-webkit-keyframes fadeInBack { + from { + opacity: 0; } - - @-webkit-keyframes fadeClock { - 0%{ - opacity: 0.0; - -webkit-transform: scale(0.1); - } - 98%{ - -webkit-transform: scale(1.015); - } - 100% { - -webkit-transform: scale(1); - } - } - - #face { - position: relative; - top: -15px; - } - - #face .flip { - display: inline-block; - width: 210px; - width: 210px; - background: #aaaaaa; - height: 230px; - font-weight: bold; - font-size: 150px; - line-height: 230px; - -webkit-border-radius: 15px; - text-align: center; - border: #fff 1px solid; - -webkit-box-shadow: #000 0px 0px 10px; - } - - .topPortion { - background: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0, #bbbbbb), - color-stop(1, #ffffff) - ); - height: 114px; - margin-bottom: 1px; - -webkit-border-top-left-radius: 15px; - -webkit-border-top-right-radius: 15px; - } - - .bottomPortion { - background: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0, #bbbbbb), - color-stop(1, #ffffff) - ); - height: 115px; - -webkit-border-bottom-left-radius: 15px; - -webkit-border-bottom-right-radius: 15px; - } - - .time { - position: relative; - top:-230px; - color: #353535; - text-shadow: #fff 0px 0px 10px; - text-shadow: inset red 0px 0px 5px; - } - - #face #flipHr { - margin-right: 20px; - } - - #face #flipMin { - margin-right: 20px; - } - - #tod { - position: relative; - top:-420px; - left: 55px; - font-size: 28px; - color: #929292; - } - - - #lower { - margin-top: 25px; - margin-left: 30px; - margin-right: 30px; - color: #fff; - font-size: 22px; - text-align: center; - text-shadow: #000 0px 0px 5px; - } - - #date { - font-size: 30px; - } - - #footer { - position: absolute; - bottom: 50px; - left: 50%; - font-size: 11px; - color #333; - width: 250px; - text-align: center; - margin-left: -125px; - font-family: Georgia, Serif; - } - - #footer a { - color: #666666; - } - - #footer a:hover { - color: #fff; - } - - - #status { - font-size: 12px; - position: absolute; - bottom: 50px; - right: 50px; - } - + to { + opacity: 1; + } +} + +#bokeh #container { + background: url('container.png') no-repeat center center; + height: 100%; + position:relative; + top:-100%; +} + + +#canvas { + width: 100%; + position: absolute; + top:50%; +} + +#box { + background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgba(0,0,0,0.8)), + color-stop(1, rgba(0,0,0,0.6)) + ); + width: 700px; + height: 300px; + -webkit-border-radius: 15px; + -webkit-box-shadow: #000 0px 0px 50px; + position: absolute; + top:-150px; + left: 50%; + margin-left:-350px; + border: #000 1px solid; + + /*-webkit-animation: fadeClock 1.5s ease-in-out;*/ +} + +@-webkit-keyframes fadeClock { + 0%{ + opacity: 0.0; + -webkit-transform: scale(0.1); + } + 98%{ + -webkit-transform: scale(1.015); + } + 100% { + -webkit-transform: scale(1); + } +} + +#face { + position: relative; + top: -15px; +} + +#face .flip { + display: inline-block; + width: 210px; + width: 210px; + background: #aaaaaa; + height: 230px; + font-weight: bold; + font-size: 150px; + line-height: 230px; + -webkit-border-radius: 15px; + text-align: center; + border: #fff 1px solid; + -webkit-box-shadow: #000 0px 0px 10px; +} + +.topPortion { +background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #bbbbbb), + color-stop(1, #ffffff) + ); + height: 114px; + margin-bottom: 1px; + -webkit-border-top-left-radius: 15px; + -webkit-border-top-right-radius: 15px; +} + +.bottomPortion { +background: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #bbbbbb), + color-stop(1, #ffffff) + ); + height: 115px; + -webkit-border-bottom-left-radius: 15px; + -webkit-border-bottom-right-radius: 15px; +} + +.time { + position: relative; + top:-230px; + color: #353535; + text-shadow: #fff 0px 0px 10px; + text-shadow: inset red 0px 0px 5px; +} + +#face #flipHr { + margin-right: 20px; +} + +#face #flipMin { + margin-right: 20px; +} + +#tod { + position: relative; + top:-420px; + left: 55px; + font-size: 28px; + color: #929292; +} + + +#lower { + margin-top: 25px; + margin-left: 30px; + margin-right: 30px; + color: #fff; + font-size: 22px; + text-align: center; + text-shadow: #000 0px 0px 5px; +} + +#date { + font-size: 30px; +} + +#footer { + position: absolute; + bottom: 50px; + left: 50%; + font-size: 11px; + color #333; + width: 250px; + text-align: center; + margin-left: -125px; + font-family: Georgia, Serif; +} + +#footer a { + color: #666666; +} + +#footer a:hover { + color: #fff; +} + + +#status { + font-size: 12px; + position: absolute; + bottom: 50px; + right: 50px; +} + #options { - float: right; - } - - #options a { - font-weight: bold; - display: block; - height: 25px; - width: 25px; - overflow: hidden; - background: url('options.svg') no-repeat; - background-size: 25px 25px; - text-align: left; - -webkit-transition: 0.4s ease-in-out; - line-height: 25px; - color: rgba(0,0,0,0); - text-decoration: none; - } - - #options a:hover { - width: 130px; - color: #fff; - padding-left: 30px; - } \ No newline at end of file + float: right; +} + +#options a { + font-weight: bold; + display: block; + height: 25px; + width: 25px; + overflow: hidden; + background: url('options.svg') no-repeat; + background-size: 25px 25px; + text-align: left; + -webkit-transition: 0.4s ease-in-out; + line-height: 25px; + color: rgba(0,0,0,0); + text-decoration: none; +} + +#options a:hover { + width: 130px; + color: #fff; + padding-left: 30px; +} \ No newline at end of file