|
|
@@ -1,123 +0,0 @@
|
|
|
-/******************************************************************
|
|
|
-Site Name:
|
|
|
-Author:
|
|
|
-
|
|
|
-Stylesheet: Main Stylesheet
|
|
|
-
|
|
|
-Here's where the magic happens. Here, you'll see we are calling in
|
|
|
-the separate media queries. The base mobile goes outside any query
|
|
|
-and is called at the beginning, after that we call the rest
|
|
|
-of the styles inside media queries.
|
|
|
-******************************************************************/
|
|
|
-
|
|
|
-
|
|
|
-//
|
|
|
-// IMPORTING STYLES
|
|
|
-//
|
|
|
-
|
|
|
-// import normalize
|
|
|
-@import "_normalize.less";
|
|
|
-
|
|
|
-// import mixins
|
|
|
-@import "_mixins.less";
|
|
|
-
|
|
|
-/*
|
|
|
-BASE (MOBILE) SIZE
|
|
|
-This are the mobile styles. It's what people see on their phones. If
|
|
|
-you set a great foundation, you won't need to add too many styles in
|
|
|
-the other stylesheets. Remember, keep it light: Speed is Important.
|
|
|
-*/
|
|
|
-
|
|
|
-// styles in base.less
|
|
|
-@import "_base.less";
|
|
|
-
|
|
|
-/*
|
|
|
-LARGER MOBILE DEVICES
|
|
|
-This is for devices like the Galaxy Note or something that's
|
|
|
-larger than an iPhone but smaller than a tablet. Let's call them
|
|
|
-tweeners.
|
|
|
-*/
|
|
|
-@media only screen and (min-width: 481px) {
|
|
|
-
|
|
|
- // styles in 481up.less
|
|
|
- @import "_481up.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|
|
|
-/*
|
|
|
-TABLET & SMALLER LAPTOPS
|
|
|
-This is the average viewing window. So Desktops, Laptops, and
|
|
|
-in general anyone not viewing on a mobile device. Here's where
|
|
|
-you can add resource intensive styles.
|
|
|
-*/
|
|
|
-@media only screen and (min-width: 768px) {
|
|
|
-
|
|
|
- // import grid
|
|
|
- @import "_grid.less";
|
|
|
-
|
|
|
- // styles in 768up.less
|
|
|
- @import "_768up.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|
|
|
-/*
|
|
|
-DESKTOP
|
|
|
-This is the average viewing window. So Desktops, Laptops, and
|
|
|
-in general anyone not viewing on a mobile device. Here's where
|
|
|
-you can add resource intensive styles.
|
|
|
-*/
|
|
|
-@media only screen and (min-width: 1030px) {
|
|
|
-
|
|
|
- // styles in 1030up.less
|
|
|
- @import "_1030up.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|
|
|
-/*
|
|
|
-LARGE VIEWING SIZE
|
|
|
-This is for the larger monitors and possibly full screen viewers.
|
|
|
-*/
|
|
|
-@media only screen and (min-width: 1240px) {
|
|
|
-
|
|
|
- // styles in 1240up.less
|
|
|
- @import "_1240up.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|
|
|
-/*
|
|
|
-RETINA (2x RESOLUTION DEVICES)
|
|
|
-This applies to the retina iPhone (4s) and iPad (2,3) along with
|
|
|
-other displays with a 2x resolution. You can also create a media
|
|
|
-query for retina AND a certain size if you want. Go Nuts.
|
|
|
-*/
|
|
|
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
|
|
- only screen and (min--moz-device-pixel-ratio: 1.5),
|
|
|
- only screen and (min-device-pixel-ratio: 1.5) {
|
|
|
-
|
|
|
- // styles in 2x.less
|
|
|
- @import "_2x.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|
|
|
-/*
|
|
|
-iPHONE 5 MEDIA QUERY
|
|
|
-Want to get fancy for no good reason? Knock yourself out.
|
|
|
-*/
|
|
|
-@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
|
|
|
-
|
|
|
- // iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
-PRINT STYLESHEET
|
|
|
-Feel free to customize this. Remember to add things that won't make
|
|
|
-sense to print at the bottom. Things like nav, ads, and forms should
|
|
|
-be set to display none.
|
|
|
-*/
|
|
|
-@media print {
|
|
|
-
|
|
|
- @import "_print.less";
|
|
|
-
|
|
|
-} // end of media query
|
|
|
-
|