Created
January 19, 2019 10:59
-
-
Save stborchert/3ba04870e7b1abc1ef0b9ecb2a28e69b to your computer and use it in GitHub Desktop.
Styles for openweathermap
This file contains 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
/** | |
* Custom styles for openweathermap widget. | |
*/ | |
.jowm { | |
font-family: 'Gotham SSm A', 'Gotham SSm B'; | |
padding: .5rem 1rem; | |
} | |
.jowm .weather-icon { | |
color: #ffffff; | |
display: block; | |
font-family: 'fontawesome'; | |
font-size: 5rem; | |
line-height: 5rem; | |
margin: 0 1rem; | |
padding: 0.5rem 0 0 0; | |
text-align: center; | |
} | |
/** | |
\f220: cloudy; | |
\f222: mostly-cloudy-day; | |
\f223: mostly-cloudy-night; | |
\f225: light-rain-day; | |
\f226: light-rain-night; | |
\f227: rain; | |
\f228: heavy-rain; | |
\f231: snow; | |
\f232: heavy-snow; | |
\f233: snow-day; | |
\f234: snow-night; | |
\f235: snow-rain; | |
\f236: heavy-snow-rain; | |
\f237: snow-rain-day; | |
\f238: snow-rain-night; | |
\f244: sleet (Eisregen); | |
\f245: heavy-sleet; | |
\f246: sleet-day; | |
\f247: sleet-night; | |
\f248: haze-sleet; | |
\f249: thunder-day; | |
\f250: haze; | |
\f251: haze-day; | |
\f252: haze-night; | |
\f253: mist-day; | |
\f254: mist-night; | |
\2600: clear-sun; | |
\2601: cloudy; | |
\2607: lightning; | |
\2614: light-rain; | |
\26c5: partly-cloudy; | |
\26c6: rain; | |
\26c8: thunder; | |
\1f319: clear-moon; | |
*/ | |
.jowm .weather-500 .weather-icon:before, | |
.jowm .weather-501 .weather-icon:before { | |
/* light rain */ | |
content: "\f227"; | |
} | |
.jowm .weather-502 .weather-icon:before, | |
.jowm .weather-503 .weather-icon:before, | |
.jowm .weather-504 .weather-icon:before { | |
/* heavy rain */ | |
content: "\f228"; | |
} | |
.jowm .weather-600 .weather-icon:before, | |
.jowm .weather-601 .weather-icon:before { | |
/* snow */ | |
content: "\f233"; | |
} | |
.jowm .weather-721 .weather-icon:before, | |
.jowm .weather-741 .weather-icon:before { | |
/* haze */ | |
content: "\f250"; | |
} | |
.jowm .weather-800 .weather-icon:before { | |
/* clear sky */ | |
content: "\2600"; | |
} | |
.jowm .night .weather-800 .weather-icon:before { | |
/* clear sky */ | |
content: "\1f319"; | |
} | |
.jowm .weather-801 .weather-icon:before { | |
/* few clouds */ | |
content: "\f222"; | |
} | |
.jowm .night .weather-801 .weather-icon:before { | |
/* few clouds */ | |
content: "\f223"; | |
} | |
.jowm .weather-802 .weather-icon:before, | |
.jowm .weather-803 .weather-icon:before, | |
.jowm .weather-804 .weather-icon:before { | |
/* cloudy */ | |
content: "\f220"; | |
} | |
.jowm .night .weather-802 .weather-icon:before, | |
.jowm .night .weather-803 .weather-icon:before, | |
.jowm .night .weather-804 .weather-icon:before { | |
/* cloudy */ | |
content: "\f223"; | |
} | |
.navbar .jowm { | |
background: transparent; | |
float: right; | |
padding: 0; | |
} | |
.navbar .jowm .weather-icon { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
margin: 0 .5rem 0 0; | |
padding: 0; | |
} | |
.navbar .jowm .weather-detailed .temperature { | |
font-size: .8rem; | |
line-height: 1.5rem; | |
margin: 0; | |
padding: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment