You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.1 KiB
108 lines
3.1 KiB
6 years ago
|
/*
|
||
|
|
Docs at http://http://simpleweatherjs.com
|
||
|
|
|
||
|
|
Look inspired by http://www.degreees.com/
|
||
|
|
Used for demo purposes.
|
||
|
|
|
||
|
|
Weather icon font from http://fonts.artill.de/collection/artill-weather-icons
|
||
|
|
|
||
|
|
DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
|
||
|
|
*/
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'weather';
|
||
|
|
src: url('artill_clean_icons-webfont.eot');
|
||
|
|
src: url('artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
|
||
|
|
url('artill_clean_icons-webfont.woff') format('woff'),
|
||
|
|
url('artill_clean_icons-webfont.ttf') format('truetype'),
|
||
|
|
url('artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
#weather i {
|
||
|
|
color: #fff;
|
||
|
|
font-family: weather;
|
||
|
|
font-size: 150px;
|
||
|
|
position: absolute;
|
||
|
|
right:30px;
|
||
|
|
top:30px;
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
line-height: 1.0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wicon-0:before { content: ":"; }
|
||
|
|
.wicon-1:before { content: "p"; }
|
||
|
|
.wicon-2:before { content: "S"; }
|
||
|
|
.wicon-3:before { content: "Q"; }
|
||
|
|
.wicon-4:before { content: "S"; }
|
||
|
|
.wicon-5:before { content: "W"; }
|
||
|
|
.wicon-6:before { content: "W"; }
|
||
|
|
.wicon-7:before { content: "W"; }
|
||
|
|
.wicon-8:before { content: "W"; }
|
||
|
|
.wicon-9:before { content: "I"; }
|
||
|
|
.wicon-10:before { content: "W"; }
|
||
|
|
.wicon-11:before { content: "I"; }
|
||
|
|
.wicon-12:before { content: "I"; }
|
||
|
|
.wicon-13:before { content: "I"; }
|
||
|
|
.wicon-14:before { content: "I"; }
|
||
|
|
.wicon-15:before { content: "W"; }
|
||
|
|
.wicon-16:before { content: "I"; }
|
||
|
|
.wicon-17:before { content: "W"; }
|
||
|
|
.wicon-18:before { content: "U"; }
|
||
|
|
.wicon-19:before { content: "Z"; }
|
||
|
|
.wicon-20:before { content: "Z"; }
|
||
|
|
.wicon-21:before { content: "Z"; }
|
||
|
|
.wicon-22:before { content: "Z"; }
|
||
|
|
.wicon-23:before { content: "Z"; }
|
||
|
|
.wicon-24:before { content: "E"; }
|
||
|
|
.wicon-25:before { content: "E"; }
|
||
|
|
.wicon-26:before { content: "3"; }
|
||
|
|
.wicon-27:before { content: "a"; }
|
||
|
|
.wicon-28:before { content: "A"; }
|
||
|
|
.wicon-29:before { content: "a"; }
|
||
|
|
.wicon-30:before { content: "A"; }
|
||
|
|
.wicon-31:before { content: "6"; }
|
||
|
|
.wicon-32:before { content: "1"; }
|
||
|
|
.wicon-33:before { content: "6"; }
|
||
|
|
.wicon-34:before { content: "1"; }
|
||
|
|
.wicon-35:before { content: "W"; }
|
||
|
|
.wicon-36:before { content: "1"; }
|
||
|
|
.wicon-37:before { content: "S"; }
|
||
|
|
.wicon-38:before { content: "S"; }
|
||
|
|
.wicon-39:before { content: "S"; }
|
||
|
|
.wicon-40:before { content: "M"; }
|
||
|
|
.wicon-41:before { content: "W"; }
|
||
|
|
.wicon-42:before { content: "I"; }
|
||
|
|
.wicon-43:before { content: "W"; }
|
||
|
|
.wicon-44:before { content: "a"; }
|
||
|
|
.wicon-45:before { content: "S"; }
|
||
|
|
.wicon-46:before { content: "U"; }
|
||
|
|
.wicon-47:before { content: "S"; }
|
||
|
|
|
||
|
|
#weather h2 {
|
||
|
|
margin: 0 0 8px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 100px;
|
||
|
|
font-weight: 300;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
#weather ul {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#weather li {
|
||
|
|
background: #fff;
|
||
|
|
background: rgba(255,255,255,0.90);
|
||
|
|
padding: 20px;
|
||
|
|
display: inline-block;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#weather .currently {
|
||
|
|
margin: 0 20px;
|
||
|
|
}
|