|
|
@@ -6,25 +6,11 @@ Stylesheet: Base Mobile Stylesheet
|
|
|
|
|
|
Be light and don't over style since everything here will be
|
|
|
loaded by mobile devices. You want to keep it as minimal as
|
|
|
-possible. This is called by itself and is the only one called
|
|
|
-for devices that are smaller than 480px so that the mobile
|
|
|
-version pulls ONLY the css it needs. This means it's screamingly
|
|
|
-fast on mobile connections.
|
|
|
-
|
|
|
-For more info, check out this great link on the topic:
|
|
|
-http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
|
|
|
+possible. This is called at the top of the main stylsheet
|
|
|
+and will be used across all viewports.
|
|
|
|
|
|
******************************************************************/
|
|
|
|
|
|
-/*********************
|
|
|
-IMPORTING STYLES
|
|
|
-*********************/
|
|
|
-
|
|
|
-/* import reset */
|
|
|
-@import "normalize";
|
|
|
-/* import mixins */
|
|
|
-@import "mixins";
|
|
|
-
|
|
|
/*********************
|
|
|
GENERAL STYLES
|
|
|
*********************/
|
|
|
@@ -41,41 +27,41 @@ WORDPRESS BODY CLASSES
|
|
|
style a page via class
|
|
|
********************/
|
|
|
|
|
|
-.rtl {}
|
|
|
-.home {} /* home page */
|
|
|
-.blog {}
|
|
|
-.archive {} /* archive page */
|
|
|
-.date {} /* date archive page */
|
|
|
- .date-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
-.search {} /* search page */
|
|
|
- .search-results {} /* search result page */
|
|
|
- .search-no-results {} /* no results search page */
|
|
|
- .search-paged-1 {} /* individual paged search (i.e. body.search-paged-3) */
|
|
|
-.error404 {} /* 404 page */
|
|
|
-.single {} /* single post page */
|
|
|
- .postid-1 {} /* individual post page by id (i.e. body.postid-73) */
|
|
|
- .single-paged-1 {} /* individual paged single (i.e. body.single-paged-3) */
|
|
|
-.attachment {} /* attatchment page */
|
|
|
- .attachmentid-1 {} /* individual attatchment page (i.e. body.attachmentid-763) */
|
|
|
- .attachment-mime-type {} /* style mime type pages */
|
|
|
-.author {} /* author page */
|
|
|
- .author-nicename {} /* user nicename (i.e. body.author-samueladams) */
|
|
|
- .author-paged-1 {} /* paged author archives (i.e. body.author-paged-4) for page 4 */
|
|
|
-.category {} /* category page */
|
|
|
- .category-1 {} /* individual category page (i.e. body.category-6) */
|
|
|
- .category-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
-.tag {} /* tag page */
|
|
|
- .tag-slug {} /* individual tag page (i.e. body.tag-news) */
|
|
|
- .tag-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
-.page-template {} /* custom page template page */
|
|
|
- .page-template-page-php {} /* individual page template (i.e. body.page-template-contact-php */
|
|
|
- .page-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
- .page-parent {}
|
|
|
- .page-child {}
|
|
|
- .parent-pageid-1 {} /* replace the number to the corresponding page number */
|
|
|
-.logged-in {} /* if user is logged in */
|
|
|
-.paged {} /* paged items like search results or archives */
|
|
|
- .paged-1 {} /* individual paged (i.e. body.paged-3) */
|
|
|
+.rtl {} /* for sites that are read right to left (i.e. hebrew) */
|
|
|
+.home {} /* home page */
|
|
|
+.blog {} /* blog template page */
|
|
|
+.archive {} /* archive page */
|
|
|
+.date {} /* date archive page */
|
|
|
+ .date-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
+.search {} /* search page */
|
|
|
+ .search-results {} /* search result page */
|
|
|
+ .search-no-results {} /* no results search page */
|
|
|
+ .search-paged-1 {} /* individual paged search (i.e. body.search-paged-3) */
|
|
|
+.error404 {} /* 404 page */
|
|
|
+.single {} /* single post page */
|
|
|
+ .postid-1 {} /* individual post page by id (i.e. body.postid-73) */
|
|
|
+ .single-paged-1 {} /* individual paged single (i.e. body.single-paged-3) */
|
|
|
+.attachment {} /* attatchment page */
|
|
|
+ .attachmentid-1 {} /* individual attatchment page (i.e. body.attachmentid-763) */
|
|
|
+ .attachment-mime-type {} /* style mime type pages */
|
|
|
+.author {} /* author page */
|
|
|
+ .author-nicename {} /* user nicename (i.e. body.author-samueladams) */
|
|
|
+ .author-paged-1 {} /* paged author archives (i.e. body.author-paged-4) for page 4 */
|
|
|
+.category {} /* category page */
|
|
|
+ .category-1 {} /* individual category page (i.e. body.category-6) */
|
|
|
+ .category-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
+.tag {} /* tag page */
|
|
|
+ .tag-slug {} /* individual tag page (i.e. body.tag-news) */
|
|
|
+ .tag-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
+.page-template {} /* custom page template page */
|
|
|
+ .page-template-page-php {} /* individual page template (i.e. body.page-template-contact-php */
|
|
|
+ .page-paged-1 {} /* replace the number to the corresponding page number */
|
|
|
+ .page-parent {} /* parent page template */
|
|
|
+ .page-child {} /* child page template */
|
|
|
+ .parent-pageid-1 {} /* replace the number to the corresponding page number */
|
|
|
+.logged-in {} /* if user is logged in */
|
|
|
+.paged {} /* paged items like search results or archives */
|
|
|
+ .paged-1 {} /* individual paged (i.e. body.paged-3) */
|
|
|
|
|
|
/*********************
|
|
|
LAYOUT & GRID STYLES
|
|
|
@@ -100,11 +86,11 @@ LINK STYLES
|
|
|
*********************/
|
|
|
|
|
|
a, a:visited {
|
|
|
- color: #f01d4f;
|
|
|
+ color: $bones-pink;
|
|
|
|
|
|
/* on hover */
|
|
|
&:hover, &:focus {
|
|
|
- color: #f05e81;
|
|
|
+ color: lighten($bones-pink, 9%);
|
|
|
}
|
|
|
|
|
|
/* on click */
|
|
|
@@ -129,6 +115,7 @@ H1, H2, H3, H4, H5 STYLES
|
|
|
|
|
|
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
|
|
|
font-family: sans-serif;
|
|
|
+ text-rendering : optimizelegibility;
|
|
|
font-weight: 500;
|
|
|
/*
|
|
|
if you're going to use webfonts, be sure to check your weights
|
|
|
@@ -180,82 +167,84 @@ HEADER SYTLES
|
|
|
NAVIGATION STYLES
|
|
|
*********************/
|
|
|
|
|
|
-.nav {}
|
|
|
+/*
|
|
|
+all navs have a .nav class applied via
|
|
|
+the wp_menu function, this is so we can
|
|
|
+easily just write on group of styles for
|
|
|
+the navs on the site and our css is cleaner
|
|
|
+and moe scalable.
|
|
|
+*/
|
|
|
|
|
|
- /* .menu is clearfixed inside mixins.less */
|
|
|
- .menu {
|
|
|
- margin: 1.1em 0;
|
|
|
-
|
|
|
- ul {
|
|
|
-
|
|
|
- li {
|
|
|
+.nav {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-bottom: 0;
|
|
|
+
|
|
|
+ li {
|
|
|
|
|
|
- a {
|
|
|
- display: block;
|
|
|
- text-decoration: none;
|
|
|
- padding: 10px 10px;
|
|
|
- background-color: #eee;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
-
|
|
|
- /*
|
|
|
- remember this is for mobile ONLY, so there's no need
|
|
|
- to even declare hover styles here, you can do it in
|
|
|
- the style.less file where it's relevant. We want to
|
|
|
- keep this file as small as possible!
|
|
|
- */
|
|
|
- &:hover, &:focus {
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ padding: 10px 10px;
|
|
|
+ background-color: #eee;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+ /*
|
|
|
+ remember this is for mobile ONLY, so there's no need
|
|
|
+ to even declare hover styles here, you can do it in
|
|
|
+ the style.scss file where it's relevant. We want to
|
|
|
+ keep this file as small as possible!
|
|
|
+ */
|
|
|
+ &:hover, &:focus {
|
|
|
|
|
|
- &:first-child {}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:last-child {}
|
|
|
+ &:first-child {}
|
|
|
+
|
|
|
+ &:last-child {}
|
|
|
|
|
|
- /*
|
|
|
- so you really have to rethink your dropdowns for mobile.
|
|
|
- you don't want to have it expand too much because the
|
|
|
- screen is so small. How you manage your menu should
|
|
|
- depend on the project. Here's some great info on it:
|
|
|
- http://www.alistapart.com/articles/organizing-mobile/
|
|
|
- */
|
|
|
- ul.sub-menu,
|
|
|
- ul.children {
|
|
|
+ /*
|
|
|
+ so you really have to rethink your dropdowns for mobile.
|
|
|
+ you don't want to have it expand too much because the
|
|
|
+ screen is so small. How you manage your menu should
|
|
|
+ depend on the project. Here's some great info on it:
|
|
|
+ http://www.alistapart.com/articles/organizing-mobile/
|
|
|
+ */
|
|
|
+ ul.sub-menu,
|
|
|
+ ul.children {
|
|
|
|
|
|
- li {
|
|
|
+ li {
|
|
|
|
|
|
- a {
|
|
|
- padding-left: 30px;
|
|
|
+ a {
|
|
|
+ padding-left: 30px;
|
|
|
|
|
|
- &:hover,
|
|
|
- &:focus {}
|
|
|
+ &:hover,
|
|
|
+ &:focus {}
|
|
|
|
|
|
- &:link {}
|
|
|
+ &:link {}
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- &:first-child {}
|
|
|
+ &:first-child {}
|
|
|
|
|
|
- &:last-child {}
|
|
|
+ &:last-child {}
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- } /* end .menu ul li */
|
|
|
+ } /* end .menu li */
|
|
|
|
|
|
- /* highlight current page */
|
|
|
- li.current-menu-item,
|
|
|
- li.current_page_item,
|
|
|
- li.current-page-ancestor {
|
|
|
+ /* highlight current page */
|
|
|
+ li.current-menu-item,
|
|
|
+ li.current_page_item,
|
|
|
+ li.current-page-ancestor {
|
|
|
|
|
|
- a {}
|
|
|
+ a {}
|
|
|
|
|
|
- } /* end current highlighters */
|
|
|
+ } /* end current highlighters */
|
|
|
|
|
|
- } /* end .menu ul */
|
|
|
-
|
|
|
- } /* end .menu */
|
|
|
+} /* end .nav */
|
|
|
|
|
|
|
|
|
/*********************
|
eddiemachado