|
|
@@ -1752,18 +1752,18 @@ tweeners.
|
|
|
/******************************************************************
|
|
|
Site Name:
|
|
|
Author:
|
|
|
-
|
|
|
+
|
|
|
Stylesheet: 481px and Up Stylesheet
|
|
|
-
|
|
|
+
|
|
|
This stylesheet is loaded for larger devices. It's set to
|
|
|
481px because at 480px it would load on a landscaped iPhone.
|
|
|
This isn't ideal because then you would be loading all those
|
|
|
extra styles on that same mobile connection.
|
|
|
-
|
|
|
+
|
|
|
A word of warning. This size COULD be a larger mobile device,
|
|
|
so you still want to keep it pretty light and simply expand
|
|
|
upon your base.scss styles.
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/
|
|
|
/*
|
|
|
IMPORTANT NOTE ABOUT SASS 3.3 & UP
|
|
|
@@ -1831,15 +1831,15 @@ you can add resource intensive styles.
|
|
|
/******************************************************************
|
|
|
Site Name:
|
|
|
Author:
|
|
|
-
|
|
|
+
|
|
|
Stylesheet: Tablet & Small Desktop Stylesheet
|
|
|
-
|
|
|
+
|
|
|
Here's where you can start getting into the good stuff.
|
|
|
This size will work on iPads, other tablets, and desktops.
|
|
|
So you can start working with more styles, background images,
|
|
|
and other resources. You'll also notice the grid starts to
|
|
|
come into play. Have fun!
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/
|
|
|
/*********************
|
|
|
GENERAL STYLES
|
|
|
@@ -1862,6 +1862,7 @@ you can add resource intensive styles.
|
|
|
/* highlight current page */
|
|
|
/* end current highlighters */ }
|
|
|
.nav ul {
|
|
|
+ background:#323944;
|
|
|
margin-top: 0; }
|
|
|
.nav li {
|
|
|
float: left;
|
|
|
@@ -1885,7 +1886,6 @@ you can add resource intensive styles.
|
|
|
border: 1px solid #ccc;
|
|
|
border-top: 0;
|
|
|
position: absolute;
|
|
|
- overflow: hidden;
|
|
|
visibility: hidden;
|
|
|
z-index: 8999;
|
|
|
/* highlight sub-menu current page */ }
|
|
|
@@ -1906,9 +1906,13 @@ you can add resource intensive styles.
|
|
|
.nav li ul.sub-menu li:last-child a,
|
|
|
.nav li ul.children li:last-child a {
|
|
|
border-bottom: 0; }
|
|
|
- .nav li:hover ul {
|
|
|
+ .nav li ul.sub-menu li ul,
|
|
|
+ .nav li ul.children li ul {
|
|
|
+ top: 0;
|
|
|
+ left: 100%;
|
|
|
+ }
|
|
|
+ .nav li:hover > ul {
|
|
|
top: auto;
|
|
|
- overflow: visible;
|
|
|
visibility: visible; }
|
|
|
|
|
|
/* end .nav */
|
|
|
@@ -1969,12 +1973,12 @@ you can add resource intensive styles.
|
|
|
/******************************************************************
|
|
|
Site Name:
|
|
|
Author:
|
|
|
-
|
|
|
+
|
|
|
Stylesheet: Desktop Stylsheet
|
|
|
-
|
|
|
+
|
|
|
This is the desktop size. It's larger than an iPad so it will only
|
|
|
be seen on the Desktop.
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/
|
|
|
.wrap {
|
|
|
width: 1040px; } }
|
|
|
@@ -1984,14 +1988,14 @@ This is for the larger monitors and possibly full screen viewers.
|
|
|
*********************/
|
|
|
@media only screen and (min-width: 1240px) {
|
|
|
/******************************************************************
|
|
|
- Site Name:
|
|
|
- Author:
|
|
|
-
|
|
|
+ Site Name:
|
|
|
+ Author:
|
|
|
+
|
|
|
Stylesheet: Super Large Monitor Stylesheet
|
|
|
-
|
|
|
+
|
|
|
You can add some advanced styles here if you like. This kicks in
|
|
|
on larger screens.
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/ }
|
|
|
/*********************
|
|
|
RETINA (2x RESOLUTION DEVICES)
|
|
|
@@ -2001,44 +2005,44 @@ 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) {
|
|
|
/******************************************************************
|
|
|
- Site Name:
|
|
|
- Author:
|
|
|
-
|
|
|
+ Site Name:
|
|
|
+ Author:
|
|
|
+
|
|
|
Stylesheet: Retina Screens & Devices Stylesheet
|
|
|
-
|
|
|
+
|
|
|
When handling retina screens you need to make adjustments, especially
|
|
|
if you're not using font icons. Here you can add them in one neat
|
|
|
place.
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/
|
|
|
- /*
|
|
|
-
|
|
|
- EXAMPLE
|
|
|
+ /*
|
|
|
+
|
|
|
+ EXAMPLE
|
|
|
Let's say you have an image and you need to make sure it looks ok
|
|
|
on retina screens. Let's say we have an icon which dimension are
|
|
|
24px x 24px. In your regular stylesheets, it would look something
|
|
|
like this:
|
|
|
-
|
|
|
+
|
|
|
.icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
background: url(img/test.png) no-repeat;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
For retina screens, we have to make some adjustments, so that image
|
|
|
doesn't look blurry. So, taking into account the image above and the
|
|
|
dimensions, this is what we would put in our retina stylesheet:
|
|
|
-
|
|
|
+
|
|
|
.icon {
|
|
|
background: url(img/test@2x.png) no-repeat;
|
|
|
background-size: 24px 24px;
|
|
|
}
|
|
|
-
|
|
|
- So, you would create the same icon, but at double the resolution, meaning
|
|
|
+
|
|
|
+ So, you would create the same icon, but at double the resolution, meaning
|
|
|
it would be 48px x 48px. You'd name it the same, but with a @2x at the end
|
|
|
(this is pretty standard practice). Set the background image so it matches
|
|
|
- the original dimensions and you are good to go.
|
|
|
-
|
|
|
+ the original dimensions and you are good to go.
|
|
|
+
|
|
|
*/ }
|
|
|
/*********************
|
|
|
PRINT STYLESHEET
|
|
|
@@ -2050,13 +2054,13 @@ be set to display none.
|
|
|
/******************************************************************
|
|
|
Site Name:
|
|
|
Author:
|
|
|
-
|
|
|
+
|
|
|
Stylesheet: Print Stylesheet
|
|
|
-
|
|
|
+
|
|
|
This is the print stylesheet. There's probably not a lot
|
|
|
of reasons to edit this stylesheet. If you want to
|
|
|
though, go for it.
|
|
|
-
|
|
|
+
|
|
|
******************************************************************/
|
|
|
* {
|
|
|
background: transparent !important;
|
Brian Gallagher