Styles for openweathermap

jowm.css

/**
 * 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;
}