diff --git a/css/weather-icons.css b/css/weather-icons.css new file mode 100644 index 0000000..2fc851d --- /dev/null +++ b/css/weather-icons.css @@ -0,0 +1,327 @@ +/*! + * Weather Icons Beta 1 + * Weather themed icons for Bootstrap + * ------------------------------------------------------------------------------ + * Maintained at http://erikflowers.github.io/weather-icons + * http://twitter.com/Erik_UX + * + * License + * ------------------------------------------------------------------------------ + * - Fpmt licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + * - CSS and LESS are licensed under MIT License - + * http://opensource.org/licenses/mit-license.html + * - Documentation licensed under CC BY 3.0 - + * http://creativecommons.org/licenses/by/3.0/ + * - Inspired by and works great as a companion with Font Aweosme + * "Font Awesome by Dave Gandy - http://fontawesome.io" + * + * Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com + * Weather Icons gives full credit for inspiration to Font Awesome and makes no + * claim to invention, intellectual property, or ownership of methodology. + * + * Support Open Source! + * + * ------------------------------------------------------------------------------ + * Email: erik@helloerik.com + * Twitter: http://twitter.com/Erik_UX + */ +@font-face { + font-family: 'weather'; + src: url('../font/weathericons-regular-webfont.eot'); + src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/weathericons-regular-webfont.woff') format('woff'), url('../font/weathericons-regular-webfont.ttf') format('truetype'), url('../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg'); + font-weight: normal; + font-style: normal; +} +[class^="wi-"], +[class*=" wi-"] { + font-family: weather; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + text-transform: none; + -webkit-font-smoothing: antialiased; + *margin-right: .3em; +} +[class^="wi-"]:before, +[class*=" wi-"]:before { + text-decoration: inherit; + display: inline-block; + speak: none; +} +.wi-day-cloudy-gusts:before { + content: "\f000"; +} +.wi-day-cloudy-windy:before { + content: "\f001"; +} +.wi-day-cloudy:before { + content: "\f002"; +} +.wi-day-fog:before { + content: "\f003"; +} +.wi-day-hail:before { + content: "\f004"; +} +.wi-day-lightning:before { + content: "\f005"; +} +.wi-day-rain-mix:before { + content: "\f006"; +} +.wi-day-rain-wind:before { + content: "\f007"; +} +.wi-day-rain:before { + content: "\f008"; +} +.wi-day-showers:before { + content: "\f009"; +} +.wi-day-snow:before { + content: "\f00a"; +} +.wi-day-sprinkle:before { + content: "\f00b"; +} +.wi-day-sunny-overcast:before { + content: "\f00c"; +} +.wi-day-sunny:before { + content: "\f00d"; +} +.wi-day-storm-showers:before { + content: "\f00e"; +} +.wi-day-thunderstorm:before { + content: "\f010"; +} +.wi-cloudy-gusts:before { + content: "\f011"; +} +.wi-cloudy-windy:before { + content: "\f012"; +} +.wi-cloudy:before { + content: "\f013"; +} +.wi-fog:before { + content: "\f014"; +} +.wi-hail:before { + content: "\f015"; +} +.wi-lightning:before { + content: "\f016"; +} +.wi-rain-mix:before { + content: "\f017"; +} +.wi-rain-wind:before { + content: "\f018"; +} +.wi-rain:before { + content: "\f019"; +} +.wi-showers:before { + content: "\f01a"; +} +.wi-snow:before { + content: "\f01b"; +} +.wi-sprinkle:before { + content: "\f01c"; +} +.wi-storm-showers:before { + content: "\f01d"; +} +.wi-thunderstorm:before { + content: "\f01e"; +} +.wi-windy:before { + content: "\f021"; +} +.wi-night-alt-cloudy-gusts:before { + content: "\f022"; +} +.wi-night-alt-cloudy-windy:before { + content: "\f023"; +} +.wi-night-alt-hail:before { + content: "\f024"; +} +.wi-night-alt-lightning:before { + content: "\f025"; +} +.wi-night-alt-rain-mix:before { + content: "\f026"; +} +.wi-night-alt-rain-wind:before { + content: "\f027"; +} +.wi-night-alt-rain:before { + content: "\f028"; +} +.wi-night-alt-showers:before { + content: "\f029"; +} +.wi-night-alt-snow:before { + content: "\f02a"; +} +.wi-night-alt-sprinkle:before { + content: "\f02b"; +} +.wi-night-alt-storm-showers:before { + content: "\f02c"; +} +.wi-night-alt-thunderstorm:before { + content: "\f02d"; +} +.wi-night-clear:before { + content: "\f02e"; +} +.wi-night-cloudy-gusts:before { + content: "\f02f"; +} +.wi-night-cloudy-windy:before { + content: "\f030"; +} +.wi-night-cloudy:before { + content: "\f031"; +} +.wi-night-hail:before { + content: "\f032"; +} +.wi-night-lightning:before { + content: "\f033"; +} +.wi-night-rain-mix:before { + content: "\f034"; +} +.wi-night-rain-wind:before { + content: "\f035"; +} +.wi-night-rain:before { + content: "\f036"; +} +.wi-night-showers:before { + content: "\f037"; +} +.wi-night-snow:before { + content: "\f038"; +} +.wi-night-sprinkle:before { + content: "\f039"; +} +.wi-night-storm-showers:before { + content: "\f03a"; +} +.wi-night-thunderstorm:before { + content: "\f03b"; +} +.wi-celcius:before { + content: "\f03c"; +} +.wi-cloud-down:before { + content: "\f03d"; +} +.wi-cloud-refresh:before { + content: "\f03e"; +} +.wi-cloud-up:before { + content: "\f040"; +} +.wi-cloud:before { + content: "\f041"; +} +.wi-degrees:before { + content: "\f042"; +} +.wi-down-left:before { + content: "\f043"; +} +.wi-down:before { + content: "\f044"; +} +.wi-fahrenheit:before { + content: "\f045"; +} +.wi-horizon-alt:before { + content: "\f046"; +} +.wi-horizon:before { + content: "\f047"; +} +.wi-left:before { + content: "\f048"; +} +.wi-lightning:before { + content: "\f016"; +} +.wi-night-fog:before { + content: "\f04a"; +} +.wi-refresh-alt:before { + content: "\f04b"; +} +.wi-refresh:before { + content: "\f04c"; +} +.wi-right:before { + content: "\f04d"; +} +.wi-sprinkles:before { + content: "\f04e"; +} +.wi-strong-wind:before { + content: "\f050"; +} +.wi-sunrise:before { + content: "\f051"; +} +.wi-sunset:before { + content: "\f052"; +} +.wi-thermometer-exterior:before { + content: "\f053"; +} +.wi-thermometer-internal:before { + content: "\f054"; +} +.wi-thermometer:before { + content: "\f055"; +} +.wi-tornado:before { + content: "\f056"; +} +.wi-up-right:before { + content: "\f057"; +} +.wi-up:before { + content: "\f058"; +} +.wi-wind-east:before { + content: "\f059"; +} +.wi-wind-north-east:before { + content: "\f05a"; +} +.wi-wind-north-west:before { + content: "\f05b"; +} +.wi-wind-north:before { + content: "\f05c"; +} +.wi-wind-south-east:before { + content: "\f05d"; +} +.wi-wind-south-west:before { + content: "\f05e"; +} +.wi-wind-south:before { + content: "\f060"; +} +.wi-wind-west:before { + content: "\f061"; +} diff --git a/font/weathericons-regular-webfont.eot b/font/weathericons-regular-webfont.eot new file mode 100755 index 0000000..d9f8a71 Binary files /dev/null and b/font/weathericons-regular-webfont.eot differ diff --git a/font/weathericons-regular-webfont.svg b/font/weathericons-regular-webfont.svg new file mode 100755 index 0000000..9c8d899 --- /dev/null +++ b/font/weathericons-regular-webfont.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/font/weathericons-regular-webfont.ttf b/font/weathericons-regular-webfont.ttf new file mode 100755 index 0000000..e10fbc8 Binary files /dev/null and b/font/weathericons-regular-webfont.ttf differ diff --git a/font/weathericons-regular-webfont.woff b/font/weathericons-regular-webfont.woff new file mode 100755 index 0000000..af1d7bb Binary files /dev/null and b/font/weathericons-regular-webfont.woff differ diff --git a/src/index.jade b/src/index.jade index 70c35db..ca27a01 100644 --- a/src/index.jade +++ b/src/index.jade @@ -6,11 +6,20 @@ html(lang="en") meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no') script(src='//code.jquery.com/jquery-latest.min.js') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js') script(src='//use.typekit.net/xmb4mjl.js') - script + script. try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js') script(src='js/scripts.js') link(rel='stylesheet', href='css/styles.css') //- link(rel='stylesheet', href='css/weather.css') + script. + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-547519-12', 'erikflowers.github.io'); + ga('send', 'pageview'); + + body header .container @@ -20,27 +29,75 @@ html(lang="en") .icon i.wi-day-cloudy - section.share-bar - .container - .row - .col-sm-6.col-offset-3 - |share + //- section.share-bar + //- .container + //- .row + //- .col-sm-6.col-offset-3 + //- |share section.content.container.intro .row - .col-sm-8 - p Weather Icons is a font of 92 weather themed icons, ready to be dropped right into Bootstrap or any other project. Inspired by Font Awesome, they are infinitley scalable and any CSS that can be applied to text can be applied to them. - p The icon designs are originally by XXX. The font has been modified slightly for icon-font usage, and turned into a HTML/LESS plugin by me. - p Verions 0.1 - .col-sm-4 - a.download.btn.btn-primary.btn-large(href="#") - i.wi-lightning - | Download Here + .col-sm-12 + p.intro-icons + i.wi-day-lightning + i.wi-night-thunderstorm + i.wi-day-snow + i.wi-sprinkles + i.wi-day-sunny + i.wi-cloudy + i.wi-night-rain-mix + i.wi-sunset + i.wi-sunrise + i.wi-day-cloudy-windy + i.wi-night-rain + i.wi-night-alt-snow + p.headline Weather Icons is a font of 92 weather themed icons, ready to be dropped right into + a(href="http://getbootstrap.com") Bootstrap + | or any other project. + i.wi-cloudy + p Inspired by + a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome, they work in essentially the same way. + |. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element: + code <i class="wi-day-lightning"> + |. At this time, there are no other effects/mixins to do advanced icon manipulation yet. + + + .download-share + .container + .row.download-here + .download-button + a.download.btn.btn-primary.btn-large(href="https://github.com/erikflowers/weather-icons") + |Download Beta 1 + i.wi-cloud + + + .row.social + .col-sm-12 + p + a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - Bootstrap ready weather themed font icon!', data-via='Erik_UX', data-count='none') Tweet + script. + !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); + + a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX + script + !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); + + + a.twitter-follow-button(href='https://twitter.com/artill', data-show-count='false', data-lang='en') Follow @artill + script + !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); + + iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='75', height='20') + iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='73', height='20') + iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&type=follow&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='165', height='20') + + + section.content.container.iconExamples .row .col-sm-12 - h2 Day + h2 Day / Sunny .row .col-sm-4 .example @@ -111,7 +168,7 @@ html(lang="en") .class wi-day-thunderstorm .row .col-sm-12 - h2 Neutral + h2 Neutral / Cloudy .row .col-sm-4 .example @@ -175,7 +232,7 @@ html(lang="en") .row .col-sm-12 - h2 Night + h2 Night / Moons .row .col-sm-4 .example @@ -287,7 +344,7 @@ html(lang="en") .row .col-sm-12 - h2 Misc + h2 Miscellaneous Weather .row .col-sm-4 .example @@ -437,12 +494,33 @@ html(lang="en") i.wi-windy .class wi-windy + + .container + .row + .col-sm-12 + .beta + .title Version Beta 1 + p This is my first attempt at a Bootstrap/web ready icon-font, so there will be updates and improvements. It is best to download the repo from Github if you want to keep up to date. Please report any issues or requests to the + a(href="https://github.com/erikflowers/weather-icons/issues") repository here + p The icon designs are originally by + a(href="https://twitter.com/artill") Lukas Bischoff. + |The font has been modified slightly for icon-font usage, and turned into a HTML/CSS/LESS addon by + a(href="http://www.helloerik.com/") me (Erik). + footer .container .row-fluid - .col-sm-12 - p - i.wi-day-cloudy - |The Weather Icons 0.1 project created and maintained by Erik Flowers. Original artwork by XXX. - p Weather Icons are designed to work with Bootstrap, but can work with any project. - p LESS/HTML implementation inspired and heavily influenced by Font Awesome + .col-sm-12 + p The Weather Icons project created and maintained by + a(href="http://www.twitter.com/Erik_UX") Erik Flowers + |. Original artwork by + a(href="http://www.twitter.com/artill") Lukas Bischoff. + p LESS/HTML implementation inspired and heavily influenced by + a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome. + p Weather Icons licensed under + a("http://scripts.sil.org/OFL") SIL OFL 1.1 + | — Code licensed under + a("http://opensource.org/licenses/mit-license.html") MIT License + | — Documentation licensed under + a("http://creativecommons.org/licenses/by/3.0/") CC BY 3.0 + diff --git a/src/less/main.less b/src/less/main.less index f66df3c..317827d 100644 --- a/src/less/main.less +++ b/src/less/main.less @@ -1,7 +1,7 @@ body { font-family: @copy; font-weight: @light; - font-size: 16px; + font-size: 14px; color: hsl(0, 0%, 20%); } @@ -11,42 +11,102 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { header { - height: 400px; - padding-top: 130px; + position: relative; + height: 100px; + padding-top: 0px; background: url("img/sky.jpg") top center no-repeat fixed; - .icon { - color: hsl(0, 0%, 100%); - font-size: 300px; - margin-left: 100px; - float: left; - line-height: .65em; - text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); + border-bottom: 10px solid hsl(0, 0%, 25%); + @media (min-width: @screen-tablet) { + height: 300px; } h1 { float: left; font-family: @hairline; font-weight: @ultraLight; - font-size: 60px; - margin-top: 100px; + font-size: 40px; + margin-top: 40px; margin-left: 0px; color: hsl(0, 0%, 100%); + text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .9); + @media (min-width: @screen-tablet) { + font-size: 60px; + margin-top: 180px; + } + } + .icon { + position: absolute; + right: 20px; + top: 40px; + //bottom: 10px; + color: hsl(0, 0%, 100%); + font-size: 55px; + margin-left: 100px; + //margin-top: 120px; + float: left; + line-height: .65em; text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); + @media (min-width: @screen-tablet) { + font-size: 200px; + top: 100px; + } } } footer { height: 200px; background-color: hsl(0, 0%, 20%); - margin-top: 100px; + margin-top: 30px; color: hsl(0, 0%, 100%); padding-top: 15px; font-weight: @normal; + a { + color: hsl(0, 0%, 70%); + } } .buttons { font-size: 100px; } +.intro-icons { + font-size: 15px; + color: hsl(208, 56%, 47%); + i { + margin-right: 10px; + } + @media (min-width: @screen-tablet) { + font-size: 25px; + i { + margin-right: 10px; + } + } + @media (min-width: @screen-desktop) { + font-size: 35px; + i { + margin-right: 10px; + } + } +} + +.headline { + font-size: 25px; + line-height: 1.3em; + margin-bottom: 30px; +} + +.social { + margin-top: 15px; + p { + margin-bottom: 0px; + text-align: center; + } +} + + +.download-here { + margin-top: 20px; + +} .download { display: block; @@ -54,16 +114,26 @@ footer { } .intro { - font-size: 20px; + font-size: 18px; margin-top: 30px; font-weight: @normal; } - -.share-bar { - padding: 20px 0px; - background-color: hsl(0, 0%, 90%); - border-top: 1px solid hsl(0, 0%, 70%); - border-bottom: 1px solid hsl(0, 0%, 70%); +.beta { + margin-top: 20px; + color: hsl(0, 0%, 50%); + .title { + color: hsl(0, 0%, 50%); + font-weight: @semibold; + font-size: 20px; + } + p { + font-weight: @normal; + font-size: 15px; + } +} +.download-button { + .make-column(4); + .make-column-offset(4); } .banner { @@ -132,3 +202,166 @@ footer { font-weight: @semibold; } } +.iconExamples { + .clearfix; + h2 { + font-family: @hairline; + font-weight: @ultraLight; + color: hsl(217, 51%, 47%); + } + .example { + @fontsize: 20px; + .clearfix; + text-align: center; + margin: 10px 3px; + .icon { + font-size: @fontsize; + float: left; + width: 35px; + i { + //background-color: hsl(120, 100%, 70%); + } + } + .class { + text-align: center; + font-size: @fontsize - 3px; + float: left; + margin-top: 0px; + font-weight: 400; + margin-left: 10px; + color: hsl(0, 0%, 20%); + } + } +} + + +.weatherseparator { + padding-bottom: 10px; + border-bottom: 1px solid hsla(0, 0%, 100%, .2); + margin-bottom: 50px; + .clearfix; +} + +.row-fluid { + .clearfix; +} + +.examples { + font-family: 'weather'; + font-size: 50px; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + text-transform: none; + -webkit-font-smoothing: antialiased; +} + +.weather { + //width: 400px; + margin: 0px auto; + //border: 1px solid hsl(207, 39%, 15%); + font-family: @hairline; + .relative { + position: relative; + } + .currently { + float: left; + font-size: 30px; + font-weight: 100; + margin-top: 5px; + .opacity(.8); + } + .mainTemp { + float: left; + .clearfix; + .temp { + font-size: 70px; + line-height: 1em; + font-weight: @ultraLight; + float: left; + margin-right: 5px; + } + .highLow { + float: left; + font-size: 22px; + line-height: 1em; + margin-top: 5px; + font-weight: @ultraLight; + text-align: center; + .opacity(.5); + .clearfix; + .high { + margin-top: 10px; + margin-bottom: 5px; + } + .low {} + } + } + .mainIcon { + font-size: 110px; + .opacity(.5); + line-height: .3em; + float: right; + } + .icon { + position: absolute; + top: 0px; + left: 100px; + color: hsl(0, 0%, 100%); + .opacity(.3); + z-index: 9; + font-size: 130px; + line-height: 1em; + margin-top: -20px; + text-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.4); + text-align: right; + } + + .tomorrow { + font-size: 18px; + font-weight: @light; + line-height: 1em; + margin-top: 20px; + .clearfix; + .day { + float: left; + .name { + .opacity(.5); + display: inline-block; + margin-right: 10px; + } + .condition { + display: inline-block; + } + } + .temps { + float: right; + .clearfix; + .tomorrow-icon { + font-size: 40px; + margin-right: 5px; + .opacity(.5); + } + .high { + display: inline-block; + margin-right: 10px; + } + .low { + display: inline-block; + margin-right: 0px; + .opacity(.5); + } + } + } +} + +.download-share { + padding: 20px 0px 30px 0px; + border-top: 1px solid hsl(0, 0%, 90%); + border-bottom: 1px solid hsl(0, 0%, 90%); + background-color: hsl(0, 0%, 95%); + margin-top: 30px; + + .box-shadow(inset 0px 0px 15px hsla(0, 0%, 0%, .1)) +} + diff --git a/src/less/weather-icons/weather.less b/src/less/weather-icons/weather.less index 87b23a6..88ff421 100644 --- a/src/less/weather-icons/weather.less +++ b/src/less/weather-icons/weather.less @@ -1,163 +1,32 @@ +/*! + * Weather Icons Beta 1 + * Weather themed icons for Bootstrap + * ------------------------------------------------------------------------------ + * Maintained at http://erikflowers.github.io/weather-icons + * http://twitter.com/Erik_UX + * + * License + * ------------------------------------------------------------------------------ + * - Fpmt licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + * - CSS and LESS are licensed under MIT License - + * http://opensource.org/licenses/mit-license.html + * - Documentation licensed under CC BY 3.0 - + * http://creativecommons.org/licenses/by/3.0/ + * - Inspired by and works great as a companion with Font Aweosme + * "Font Awesome by Dave Gandy - http://fontawesome.io" + * + * Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com + * ------------------------------------------------------------------------------ + * Email: erik@helloerik.com + * Twitter: http://twitter.com/Erik_UX + */ + @import "variables.less"; @import "icon-classes.less"; +// Include anything you need to make the Weather Icons styled here // -.iconExamples { - .clearfix; - h2 { - font-family: @hairline; - font-weight: @ultraLight; - color: hsl(217, 51%, 47%); - } - .example { - @fontsize: 18px; - .clearfix; - text-align: center; - margin: 10px 3px; - .icon { - font-size: @fontsize; - float: left; - width: 35px; - i { - //background-color: hsl(0, 0%, 97%); - } - } - .class { - text-align: center; - font-size: @fontsize; - float: left; - margin-top: 0px; - font-weight: @normal; - margin-left: 10px; - color: hsl(0, 0%, 20%); - } - } -} - - -.weatherseparator { - padding-bottom: 10px; - border-bottom: 1px solid hsla(0, 0%, 100%, .2); - margin-bottom: 50px; - .clearfix; -} - -.row-fluid { - .clearfix; -} - -.examples { - font-family: 'weather'; - font-size: 50px; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - text-transform: none; - -webkit-font-smoothing: antialiased; -} - -.weather { - //width: 400px; - margin: 0px auto; - //border: 1px solid hsl(207, 39%, 15%); - font-family: @hairline; - .relative { - position: relative; - } - .currently { - float: left; - font-size: 30px; - font-weight: 100; - margin-top: 5px; - .opacity(.8); - } - .mainTemp { - float: left; - .clearfix; - .temp { - font-size: 70px; - line-height: 1em; - font-weight: @ultraLight; - float: left; - margin-right: 5px; - } - .highLow { - float: left; - font-size: 22px; - line-height: 1em; - margin-top: 5px; - font-weight: @ultraLight; - text-align: center; - .opacity(.5); - .clearfix; - .high { - margin-top: 10px; - margin-bottom: 5px; - } - .low {} - } - } - .mainIcon { - font-size: 110px; - .opacity(.5); - line-height: .3em; - float: right; - } - .icon { - position: absolute; - top: 0px; - left: 100px; - color: hsl(0, 0%, 100%); - .opacity(.3); - z-index: 9; - font-size: 130px; - line-height: 1em; - margin-top: -20px; - text-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.4); - text-align: right; - } - - .tomorrow { - font-size: 18px; - font-weight: @light; - line-height: 1em; - margin-top: 20px; - .clearfix; - .day { - float: left; - .name { - .opacity(.5); - display: inline-block; - margin-right: 10px; - } - .condition { - display: inline-block; - } - } - .temps { - float: right; - .clearfix; - .tomorrow-icon { - font-size: 40px; - margin-right: 5px; - .opacity(.5); - } - .high { - display: inline-block; - margin-right: 10px; - } - .low { - display: inline-block; - margin-right: 0px; - .opacity(.5); - } - } - } -} - -.clearthis { - .clearfix; -} diff --git a/weather icons/icon-classes.less b/weather icons/icon-classes.less new file mode 100644 index 0000000..cc2c7a6 --- /dev/null +++ b/weather icons/icon-classes.less @@ -0,0 +1,127 @@ +@font-face { + font-family: 'weather'; + src: url('@{WeatherIconPath}/weathericons-regular-webfont.eot'); + src: url('@{WeatherIconPath}/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('@{WeatherIconPath}/weathericons-regular-webfont.woff') format('woff'), + url('@{WeatherIconPath}/weathericons-regular-webfont.ttf') format('truetype'), + url('@{WeatherIconPath}/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="wi-"], +[class*=" wi-"] { + font-family: weather; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + text-transform: none; + -webkit-font-smoothing: antialiased; + *margin-right: .3em; +} +[class^="wi-"]:before, +[class*=" wi-"]:before { + text-decoration: inherit; + display: inline-block; + speak: none; +} + +// Day +.wi-day-cloudy-gusts:before { content: @day-cloudy-gusts ; } // day cloudy strong winds +.wi-day-cloudy-windy:before { content: @day-cloudy-windy ; } // day cloudy windy +.wi-day-cloudy:before { content: @day-cloudy ; } // day cloudy +.wi-day-fog:before { content: @day-fog ; } // day fog +.wi-day-hail:before { content: @day-hail ; } // day hail +.wi-day-lightning:before { content: @day-lightning ; } // day lightning +.wi-day-rain-mix:before { content: @day-rain-mix ; } // day rain mix +.wi-day-rain-wind:before { content: @day-rain-wind ; } // day rain wind +.wi-day-rain:before { content: @day-rain ; } // day rain +.wi-day-showers:before { content: @day-showers ; } // day showers +.wi-day-snow:before { content: @day-snow ; } // day snow +.wi-day-sprinkle:before { content: @day-sprinkle ; } // day sprinkle +.wi-day-sunny-overcast:before { content: @day-sunny-overcast ; } // day sunny overcast +.wi-day-sunny:before { content: @day-sunny ; } // day sunny +.wi-day-storm-showers:before { content: @day-storm-showers ; } // day thunderstorm showers +.wi-day-thunderstorm:before { content: @day-thunderstorm ; } // day thunderstorm +// Neutral- +.wi-cloudy-gusts:before { content: @cloudy-gusts ; } // neutral cloudy strong winds +.wi-cloudy-windy:before { content: @cloudy-windy ; } // neutral cloudy windy +.wi-cloudy:before { content: @cloudy ; } // neutral cloudy +.wi-fog:before { content: @fog ; } // neutral fog +.wi-hail:before { content: @hail ; } // neutral hail +.wi-lightning:before { content: @lightning ; } // neutral lightning +.wi-rain-mix:before { content: @rain-mix ; } // neutral rain mix +.wi-rain-wind:before { content: @rain-wind ; } // neutral rain wind +.wi-rain:before { content: @rain ; } // neutral rain +.wi-showers:before { content: @showers ; } // neutral showers +.wi-snow:before { content: @snow ; } // neutral snow +.wi-sprinkle:before { content: @sprinkle ; } // neutral sprinkle +.wi-storm-showers:before { content: @storm-showers ; } // neutral thunderstorm showers +.wi-thunderstorm:before { content: @thunderstorm ; } // neutral thunderst +.wi-windy:before { content: @windy ; } // windy +// Night +.wi-night-alt-cloudy-gusts:before { content: @night-alt-cloudy-gusts ; } // night alt cloudy strong winds +.wi-night-alt-cloudy-windy:before { content: @night-alt-cloudy-windy ; } // night alt cloudy windy +.wi-night-alt-hail:before { content: @night-alt-hail ; } // night alt hail +.wi-night-alt-lightning:before { content: @night-alt-lightning ; } // night alt lightning +.wi-night-alt-rain-mix:before { content: @night-alt-rain-mix ; } // night alt rain mix +.wi-night-alt-rain-wind:before { content: @night-alt-rain-wind ; } // night alt rain wind +.wi-night-alt-rain:before { content: @night-alt-rain ; } // night alt rain +.wi-night-alt-showers:before { content: @night-alt-showers ; } // night alt showers +.wi-night-alt-snow:before { content: @night-alt-snow ; } // night alt snow +.wi-night-alt-sprinkle:before { content: @night-alt-sprinkle ; } // night alt sprinkle +.wi-night-alt-storm-showers:before { content: @night-alt-storm-showers ; } // night alt thunderstorm showers +.wi-night-alt-thunderstorm:before { content: @night-alt-thunderstorm ; } // night alt thunderstorm +.wi-night-clear:before { content: @night-clear ; } // night clear +.wi-night-cloudy-gusts:before { content: @night-cloudy-gusts ; } // night cloudy strong winds +.wi-night-cloudy-windy:before { content: @night-cloudy-windy ; } // night cloudy windy +.wi-night-cloudy:before { content: @night-cloudy ; } // night cloudy +.wi-night-hail:before { content: @night-hail ; } // night hail +.wi-night-lightning:before { content: @night-lightning ; } // night lightning +.wi-night-rain-mix:before { content: @night-rain-mix ; } // night rain mix +.wi-night-rain-wind:before { content: @night-rain-wind ; } // night rain wind +.wi-night-rain:before { content: @night-rain ; } // night rain +.wi-night-showers:before { content: @night-showers ; } // night showers +.wi-night-snow:before { content: @night-snow ; } // night snow +.wi-night-sprinkle:before { content: @night-sprinkle ; } // night sprinkle +.wi-night-storm-showers:before { content: @night-storm-showers ; } // night thunderstorm showers +.wi-night-thunderstorm:before { content: @night-thunderstorm ; } // night thunderst +// Misc +.wi-celcius:before { content: @celcius ; } // celsius +.wi-cloud-down:before { content: @cloud-down ; } // cloud down +.wi-cloud-refresh:before { content: @cloud-refresh ; } // cloud refresh +.wi-cloud-up:before { content: @cloud-up ; } // cloud up +.wi-cloud:before { content: @cloud ; } // cloud +.wi-degrees:before { content: @degrees ; } // degrees +.wi-down-left:before { content: @down-left ; } // down left +.wi-down:before { content: @down ; } // down +.wi-fahrenheit:before { content: @fahrenheit ; } // fahrenheit +.wi-horizon-alt:before { content: @horizon-alt ; } // horizon alt +.wi-horizon:before { content: @horizon ; } // horizon +.wi-left:before { content: @left ; } // left +.wi-lightning:before { content: @lightning ; } // lightning +.wi-night-fog:before { content: @night-fog ; } // night fog +.wi-refresh-alt:before { content: @refresh-alt ; } // refresh alt +.wi-refresh:before { content: @refresh ; } // refresh +.wi-right:before { content: @right ; } // right +.wi-sprinkles:before { content: @sprinkles ; } // sprinkles +.wi-strong-wind:before { content: @strong-wind ; } // strong wind +.wi-sunrise:before { content: @sunrise ; } // sunrise +.wi-sunset:before { content: @sunset ; } // sunset +.wi-thermometer-exterior:before { content: @thermometer-exterior ; } // thermometer exterior +.wi-thermometer-internal:before { content: @thermometer-internal ; } // thermometer internal +.wi-thermometer:before { content: @thermometer ; } // thermometer +.wi-tornado:before { content: @tornado ; } // tornado +.wi-up-right:before { content: @up-right ; } // up right +.wi-up:before { content: @up ; } // up +.wi-wind-east:before { content: @wind-east ; } // wind east +.wi-wind-north-east:before { content: @wind-north-east ; } // wind north east +.wi-wind-north-west:before { content: @wind-north-west ; } // wind north west +.wi-wind-north:before { content: @wind-north ; } // wind north +.wi-wind-south-east:before { content: @wind-south-east ; } // wind south east +.wi-wind-south-west:before { content: @wind-south-west ; } // wind south west +.wi-wind-south:before { content: @wind-south ; } // wind south +.wi-wind-west:before { content: @wind-west ; } // wind west + + + diff --git a/weather icons/variables.less b/weather icons/variables.less new file mode 100644 index 0000000..3c60910 --- /dev/null +++ b/weather icons/variables.less @@ -0,0 +1,96 @@ +// Variables +@WeatherIconPath: "../font"; +@WeatherIconVersion: "1.0.0"; + +@day-cloudy-gusts: "\f000"; // day cloudy gusts +@day-cloudy-windy: "\f001"; // day cloudy windy +@day-cloudy: "\f002"; // day cloudy +@day-fog: "\f003"; // day fog +@day-hail: "\f004"; // day hail +@day-lightning: "\f005"; // day lightning +@day-rain-mix: "\f006"; // day rain mix +@day-rain-wind: "\f007"; // day rain wind +@day-rain: "\f008"; // day rain +@day-showers: "\f009"; // day showers +@day-snow: "\f00a"; // day snow +@day-sprinkle: "\f00b"; // day sprinkle +@day-sunny-overcast: "\f00c"; // day sunny overcast +@day-sunny: "\f00d"; // day sunny +@day-storm-showers: "\f00e"; // day storm showers +@day-thunderstorm: "\f010"; // day thunderstorm +@cloudy-gusts: "\f011"; // neutral cloudy gusts +@cloudy-windy: "\f012"; // neutral cloudy windy +@cloudy: "\f013"; // neutral cloudy +@fog: "\f014"; // neutral fog +@hail: "\f015"; // neutral hail +@lightning: "\f016"; // neutral lightning +@rain-mix: "\f017"; // neutral rain mix +@rain-wind: "\f018"; // neutral rain wind +@rain: "\f019"; // neutral rain +@showers: "\f01a"; // neutral showers +@snow: "\f01b"; // neutral snow +@sprinkle: "\f01c"; // neutral sprinkle +@storm-showers: "\f01d"; // neutral storm showers +@thunderstorm: "\f01e"; // neutral thunderstorm +@windy: "\f021"; // windy +@night-alt-cloudy-gusts: "\f022"; // night alt cloudy gusts +@night-alt-cloudy-windy: "\f023"; // night alt cloudy windy +@night-alt-hail: "\f024"; // night alt hail +@night-alt-lightning: "\f025"; // night alt lightning +@night-alt-rain-mix: "\f026"; // night alt rain mix +@night-alt-rain-wind: "\f027"; // night alt rain wind +@night-alt-rain: "\f028"; // night alt rain +@night-alt-showers: "\f029"; // night alt showers +@night-alt-snow: "\f02a"; // night alt snow +@night-alt-sprinkle: "\f02b"; // night alt sprinkle +@night-alt-storm-showers: "\f02c"; // night alt storm showers +@night-alt-thunderstorm: "\f02d"; // night alt thunderstorm +@night-clear: "\f02e"; // night clear +@night-cloudy-gusts: "\f02f"; // night cloudy gusts +@night-cloudy-windy: "\f030"; // night cloudy windy +@night-cloudy: "\f031"; // night cloudy +@night-hail: "\f032"; // night hail +@night-lightning: "\f033"; // night lightning +@night-rain-mix: "\f034"; // night rain mix +@night-rain-wind: "\f035"; // night rain wind +@night-rain: "\f036"; // night rain +@night-showers: "\f037"; // night showers +@night-snow: "\f038"; // night snow +@night-sprinkle: "\f039"; // night sprinkle +@night-storm-showers: "\f03a"; // night storm showers +@night-thunderstorm: "\f03b"; // night thunderstorm +@celcius: "\f03c"; // celsius +@cloud-down: "\f03d"; // cloud down +@cloud-refresh: "\f03e"; // cloud refresh +@cloud-up: "\f040"; // cloud up +@cloud: "\f041"; // cloud +@degrees: "\f042"; // degrees +@down-left: "\f043"; // down left +@down: "\f044"; // down +@fahrenheit: "\f045"; // fahrenheit +@horizon-alt: "\f046"; // horizon alt +@horizon: "\f047"; // horizon +@left: "\f048"; // left +@_reserved_: "\f049"; // _reserved_ +@night-fog: "\f04a"; // night fog +@refresh-alt: "\f04b"; // refresh alt +@refresh: "\f04c"; // refresh +@right: "\f04d"; // right +@sprinkles: "\f04e"; // sprinkles +@strong-wind: "\f050"; // strong wind +@sunrise: "\f051"; // sunrise +@sunset: "\f052"; // sunset +@thermometer-exterior: "\f053"; // thermometer exterior +@thermometer-internal: "\f054"; // thermometer internal +@thermometer: "\f055"; // thermometer +@tornado: "\f056"; // tornado +@up-right: "\f057"; // up right +@up: "\f058"; // up +@wind-east: "\f059"; // wind east +@wind-north-east: "\f05a"; // wind north east +@wind-north-west: "\f05b"; // wind north west +@wind-north: "\f05c"; // wind north +@wind-south-east: "\f05d"; // wind south east +@wind-south-west: "\f05e"; // wind south west +@wind-south: "\f060"; // wind south +@wind-west: "\f061"; // wind west \ No newline at end of file diff --git a/weather icons/weather-icons.less b/weather icons/weather-icons.less new file mode 100644 index 0000000..635f951 --- /dev/null +++ b/weather icons/weather-icons.less @@ -0,0 +1,34 @@ +/*! + * Weather Icons Beta 1 + * Weather themed icons for Bootstrap + * ------------------------------------------------------------------------------ + * Maintained at http://erikflowers.github.io/weather-icons + * http://twitter.com/Erik_UX + * + * License + * ------------------------------------------------------------------------------ + * - Fpmt licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + * - CSS and LESS are licensed under MIT License - + * http://opensource.org/licenses/mit-license.html + * - Documentation licensed under CC BY 3.0 - + * http://creativecommons.org/licenses/by/3.0/ + * - Inspired by and works great as a companion with Font Aweosme + * "Font Awesome by Dave Gandy - http://fontawesome.io" + * + * Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com + * Weather Icons gives full credit for inspiration to Font Awesome and makes no + * claim to invention, intellectual property, or ownership of methodology. + * + * Support Open Source! + * + * ------------------------------------------------------------------------------ + * Email: erik@helloerik.com + * Twitter: http://twitter.com/Erik_UX + */ + +@import "variables.less"; +@import "icon-classes.less"; + +// Include anything you need to make the Weather Icons styled here // +