Created
August 21, 2010 01:06
-
-
Save markupboy/541559 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div.page { | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.56, rgba(0,0,0,1)), color-stop(0.12, rgba(0,0,0,0.85))); | |
height: 1008px; | |
padding-top: 16px; | |
position: relative; | |
width: 768px; | |
} | |
#header { | |
background: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0.18, rgb(191,83,6)), | |
color-stop(0.59, rgb(252,113,6)) | |
); | |
-webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.25); | |
color: rgba(255,255,255,0.95); | |
font-size: 3em; | |
letter-spacing: 0.5px; | |
line-height: 2; | |
margin: 0 16px 16px; | |
overflow: hidden; | |
padding: 0px 15px; | |
text-shadow: -1px 2px 4px rgba(0,0,0,0.6); | |
text-transform: uppercase; | |
-webkit-border-radius: 5px; | |
} | |
#header h1 { | |
float: left; | |
} | |
#header h2 { | |
float: right; | |
} | |
#weather { | |
display: block; | |
height: 50px; | |
margin: 0 16px 40px; | |
position: relative; | |
} | |
#weather-today { | |
background: -webkit-gradient( | |
linear, | |
left bottom, | |
left top, | |
color-stop(0.12, rgb(37,52,71)), | |
color-stop(0.56, rgb(58,82,113)) | |
); | |
float: left; | |
height: 50px; | |
position: relative; | |
width: 31.9%; | |
-webkit-border-radius: 5px; | |
-webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.25); | |
} | |
#weather-today h1 { | |
background: -20px -7px no-repeat; | |
color: rgba(255,255,255,0.95); | |
font-size: 7em; | |
padding-left: 85px; | |
line-height: 1; | |
position: absolute; | |
text-shadow: -1px 2px 6px rgba(0,0,0,0.6); | |
top: -13px; | |
} | |
#weather-today h1 span { | |
font-size: .7em; | |
position: relative; | |
top: -15px; | |
} | |
#weather-today.rain h1 { | |
background-image: url(/assets/img/weather/icons/rain.png); | |
} | |
#weather-today.snow h1 { | |
background-image: url(/assets/img/weather/icons/snow.png); | |
} | |
#weather-today.lightning h1 { | |
background-image: url(/assets/img/weather/icons/lightening.png); | |
} | |
#weather-today.partly-cloudy h1 { | |
background-image: url(/assets/img/weather/icons/partlycloudy.png); | |
background-position: -20px -37px; | |
} | |
#weather-today.cloudy h1 { | |
background-image: url(/assets/img/weather/icons/cloudy.png); | |
} | |
#weather-today.sunny h1 { | |
background-image: url(/assets/img/weather/icons/sun.png); | |
} | |
#weather-today p { | |
color: rgba(255,255,255,.5); | |
position: absolute; | |
right: 3.25%; | |
text-align: right; | |
text-shadow: -1px 2px 2px rgba(0,0,0,0.2); | |
} | |
#weather-today p.high { | |
top: 8px; | |
} | |
#weather-today p.low { | |
top: 25px; | |
} | |
#weather-forecast { | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.12, rgb(37,52,71)), color-stop(0.56, rgb(58,82,113))); | |
float: right; | |
height: 50px; | |
overflow: hidden; | |
width: 66%; | |
-webkit-border-radius: 5px; | |
-webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.25); | |
} | |
#weather-forecast li { | |
border-left: 1px solid rgba(0,0,0,.2); | |
border-right: 1px solid rgba(110,140,179,0.2); | |
float: left; | |
height: 50px; | |
width: 19.78%; | |
} | |
#weather-forecast > li:first-child { | |
border-left: none; | |
} | |
#weather-forecast > li:last-child { | |
width: 19.9%; | |
border-right: none; | |
} | |
#weather-forecast li h1 { | |
background: rgba(110,140,179,0.4); | |
font-weight: bold; | |
text-align: center; | |
text-shadow: -1px 2px 6px rgba(0,0,0,0.6); | |
text-transform: uppercase; | |
} | |
#weather-forecast li p { | |
background: 10px -1px no-repeat; | |
font-size: 2em; | |
line-height: 32px; | |
padding-left: 26px; | |
position: relative; | |
text-align: center; | |
text-shadow: -1px 2px 6px rgba(0,0,0,0.6); | |
} | |
#weather-forecast li.snow p { | |
background-image: url(/assets/img/weather/minis/snow.png); | |
} | |
#weather-forecast li.lightning p { | |
background-image: url(/assets/img/weather/minis/lightning.png); | |
} | |
#weather-forecast li.cloudy p { | |
background-image: url(/assets/img/weather/minis/clouds.png); | |
} | |
#weather-forecast li.sunny p { | |
background-image: url(/assets/img/weather/minis/sun.png); | |
} | |
#weather-forecast li.rain p { | |
background-image: url(/assets/img/weather/minis/cloud-rain.png); | |
} | |
#weather-forecast li.partly-cloudy p { | |
background-image: url(/assets/img/weather/minis/sun-cloud.png); | |
} | |
#harvest { | |
margin: 0 16px 40px; | |
padding-top: 15px; | |
position: relative; | |
} | |
#harvest ul { | |
border-bottom: 1px solid rgba(255,255,255,.25); | |
overflow: hidden; | |
margin-bottom: 4px; | |
padding-left: 9%; | |
width: 91%; | |
} | |
#harvest ul li { | |
display: block; | |
float: left; | |
font-size: 1.8em; | |
height: 200px; | |
margin: 0 5px; | |
opacity: .95; | |
position: relative; | |
text-align: center; | |
text-shadow: 0px 1px 2px #000; | |
text-transform: uppercase; | |
width: 12%; | |
} | |
#harvest ul > li:first-child { | |
margin-left: 0; | |
} | |
#harvest ul > li:last-child { | |
margin-right: 0; | |
} | |
#harvest ul li.last-week { | |
opacity: 0.5; | |
} | |
#harvest ul li span { | |
display: block; | |
width: 100%; | |
} | |
#harvest ul li span.empty { | |
opacity: 0; | |
} | |
#harvest ul li span.nobill { | |
background: #f39f43; | |
-webkit-box-shadow: 0px -2px 5px rgba(0,0,0,.25); | |
} | |
#harvest ul li span.bill { | |
background: rgb(252,113,6); | |
-webkit-box-shadow: 0px -2px 5px rgba(0,0,0,.25); | |
} | |
#harvest ul li span.overlay { | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.12, rgba(0,0,0,1)), color-stop(0.56, rgba(150,150,150,0))); | |
bottom: 0; | |
opacity: 0.25; | |
position: absolute; | |
left: 0; | |
} | |
#harvest #labels { | |
border: none; | |
height: 25px; | |
} | |
#harvest #graph { | |
border-top: 1px dotted rgba(255,255,255,.15); | |
border-bottom: 1px dotted rgba(255,255,255,.15); | |
height: 100px; | |
left: 0; | |
overflow: visible; | |
position: absolute; | |
top: 12px; | |
} | |
#harvest #graph li { | |
color: rgba(255,255,255,.50); | |
font-size: 1.0em; | |
height: 12px; | |
left: 0px; | |
position: absolute; | |
text-align: left; | |
} | |
#harvest #graph li.low { | |
top: 185px; | |
left: 3px; | |
} | |
#harvest #graph li.mid { | |
top: 83px; | |
} | |
#harvest #graph li.top { | |
top: -17px; | |
} | |
#harvest .graph-segment { | |
border-top: 1px dotted rgba(255,255,255,.1); | |
border-bottom: 1px dotted rgba(255,255,255,.1); | |
display: block; | |
height: 100px; | |
left: 0; | |
overflow: visible; | |
position: absolute; | |
width: 100%; | |
} | |
#harvest #gs2 { | |
top: 32px; | |
} | |
#harvest #gs3 { | |
top: 52px; | |
} | |
#harvest #gs4 { | |
top: 72px; | |
} | |
#harvest #gs5 { | |
top: 92px; | |
} | |
#unfuddle { | |
overflow: hidden; | |
margin: 0 16px 25px; | |
position: relative; | |
} | |
#unfuddle .tickets li { | |
float: left; | |
height: 25px; | |
margin-bottom: 3px; | |
margin-right: 3px; | |
padding: 0; | |
overflow: hidden; | |
text-shadow: 0px 1px 2px #000; | |
width: 49.6%; | |
} | |
#unfuddle .tickets h1 { | |
background: rgba(200,200,200,.15); | |
-webkit-border-radius: 5px; | |
float: left; | |
font-size: 1.2em; | |
line-height: 25px; | |
height: 24px; | |
margin-right: 2px; | |
text-align: center; | |
width: 35px; | |
} | |
#unfuddle .tickets p { | |
background: rgba(200,200,200,.15); | |
-webkit-border-radius: 5px; | |
font-size: 1.2em; | |
line-height: 24px; | |
margin-left: 37px; | |
padding-left: 5px; | |
} | |
#unfuddle .tickets .late h1, | |
#unfuddle .tickets .late p { | |
background: rgba(191,40,41,.65); | |
} | |
#unfuddle .tickets li.blank { | |
opacity: 0.65; | |
} | |
#unfuddle .overlay { | |
position: absolute; | |
top: 12px; | |
width: 100%; | |
} | |
#unfuddle .overlay li { | |
border-bottom: 1px solid rgba(0,0,0,.2); | |
border-top: 1px solid rgba(255,255,255,0.1); | |
float: left; | |
height: 0px; | |
margin: 0 3px 25px 0; | |
width: 49.6%; | |
} | |
#work-at-a-glance { | |
clear: both; | |
height: 225px; | |
margin: 0 16px 0px; | |
} | |
#work-at-a-glance > div:first-child { | |
margin-left: 0; | |
} | |
#work-at-a-glance > div:last-child { | |
margin-right: 0; | |
} | |
#mail, | |
#feeds, | |
#calendar { | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.12, rgba(255,255,255,.05)), color-stop(0.56, rgba(255,255,255,.1))); | |
display: block; | |
float: left; | |
height: 200px; | |
margin: 0 8px 25px; | |
overflow: hidden; | |
position: relative; | |
-webkit-border-radius: 5px; | |
width: 31.9%; | |
-webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.25); | |
} | |
#mail p, | |
#feeds p { | |
height: 200px; | |
left: 50%; | |
margin: -100px 0 0 -100px; | |
position: absolute; | |
top: 50%; | |
width:200px; | |
} | |
#mail p span, | |
#feeds p span { | |
background: url(/assets/img/sticker.png); | |
display: block; | |
font-size: 2.8em; | |
height: 68px; | |
left: 120px; | |
letter-spacing: -2px; | |
line-height: 68px; | |
position: absolute; | |
text-align: center; | |
text-shadow: 1px 2px 3px rgba(0,0,0,.5); | |
top: 16px; | |
-webkit-transform: rotate(-8deg); | |
width: 70px; | |
} | |
#mail p { | |
background: url(/assets/img/mail.png) center center no-repeat; | |
} | |
#feeds p { | |
background: url(/assets/img/rss.png) center center no-repeat; | |
} | |
#feeds p span { | |
left: 108px; | |
} | |
#calendar h1 { | |
background: rgba(241,109,7,.9); | |
font-size: 1.4em; | |
margin-bottom: 2px; | |
text-shadow: 0px 2px 4px rgba(0,0,0,0.6); | |
text-transform: uppercase; | |
text-align: center; | |
-webkit-border-top-left-radius: 5px; | |
-webkit-border-top-right-radius: 5px; | |
} | |
#calendar li { | |
background: rgba(150,150,150,0.1); | |
font-size: 1.2em; | |
margin-bottom: 2px; | |
padding: 3px 7px; | |
text-shadow: 0px 2px 4px rgba(0,0,0,0.6); | |
} | |
#calendar li.header { | |
background: rgba(150,150,150,0.2); | |
position: relative; | |
} | |
#calendar li.header span.overlay { | |
background: rgba(255,255,255,.05); | |
display: block; | |
height: 50%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
#calendar li em { | |
float: right; | |
font-size: .8em; | |
font-style: normal; | |
opacity: .6; | |
} | |
#calendar div.overlay { | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.12, rgba(0,0,0,0.85)), color-stop(0.56, rgba(0,0,0,.1))); | |
bottom: 0; | |
display: none; | |
height: 130px; | |
left: 0; | |
opacity: .6; | |
position: absolute; | |
width: 100%; | |
} | |
#countdown { | |
color: rgba(180,180,180,1); | |
font-size: 2.2em; | |
margin-bottom: 30px; | |
text-align: center; | |
text-transform: uppercase; | |
text-shadow: 0px 1px 2px #000; | |
} | |
#countdown strong { | |
color: rgba(255,255,255,1); | |
} | |
.twitter-feed { | |
background: rgba(255,255,255,0.1); | |
clear: both; | |
height: 40px; | |
overflow: hidden; | |
position: relative; | |
} | |
.twitter-feed ul { | |
left: 0; | |
position: absolute; | |
width: 10000px; | |
-webkit-transition: -webkit-transform 1s linear | |
} | |
.twitter-feed li { | |
float: left; | |
font-size: 1.4em; | |
line-height: 40px; | |
margin: 0 6px; | |
text-shadow: 0px 1px 2px #000; | |
} | |
.twitter-feed li span { | |
margin-right: 6px; | |
} | |
.twitter-feed li:first-child span { | |
display: none; | |
} | |
#twitter-user-feed { | |
background: rgba(255,255,255,0.15); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment