|
@@ -0,0 +1,836 @@
|
|
|
|
|
+/******************************************************************
|
|
|
|
|
+Site Name:
|
|
|
|
|
+Author:
|
|
|
|
|
+
|
|
|
|
|
+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 at the top of the main stylsheet
|
|
|
|
|
+and will be used across all viewports.
|
|
|
|
|
+
|
|
|
|
|
+******************************************************************/
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+GENERAL STYLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+body {
|
|
|
|
|
+ font-family: Georgia, serif;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ color: #565656;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/********************
|
|
|
|
|
+WORDPRESS BODY CLASSES
|
|
|
|
|
+style a page via class
|
|
|
|
|
+********************/
|
|
|
|
|
+
|
|
|
|
|
+.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
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+.wrap {
|
|
|
|
|
+ width: 96%;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+LINK STYLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+a, a:visited {
|
|
|
|
|
+ color: @link-color;
|
|
|
|
|
+
|
|
|
|
|
+ /* on hover */
|
|
|
|
|
+ &:hover, &:focus {
|
|
|
|
|
+ color: @link-hover;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* on click */
|
|
|
|
|
+ &:active {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* mobile tap color */
|
|
|
|
|
+ &:link {
|
|
|
|
|
+ /*
|
|
|
|
|
+ this highlights links on iPhones/iPads.
|
|
|
|
|
+ so it basically works like the :hover selector
|
|
|
|
|
+ for mobile devices.
|
|
|
|
|
+ */
|
|
|
|
|
+ -webkit-tap-highlight-color : rgba( 0, 0, 0, 0.3 );
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/******************************************************************
|
|
|
|
|
+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
|
|
|
|
|
+ http://css-tricks.com/watch-your-font-weight/
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+ /* removing text decoration from all headline links */
|
|
|
|
|
+ a {
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h1, .h1 {
|
|
|
|
|
+ font-size: 2.5em;
|
|
|
|
|
+ line-height: 1.333em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h2, .h2 {
|
|
|
|
|
+ font-size: 1.75em;
|
|
|
|
|
+ line-height: 1.4em;
|
|
|
|
|
+ margin-bottom: 0.375em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h3, .h3 {
|
|
|
|
|
+ font-size: 1.125em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h4, .h4 {
|
|
|
|
|
+ font-size: 1.1em;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+h5, .h5 {
|
|
|
|
|
+ font-size: 0.846em;
|
|
|
|
|
+ line-height: 2.09em;
|
|
|
|
|
+ text-transform: uppercase;
|
|
|
|
|
+ letter-spacing: 2px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+HEADER SYTLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+.header {}
|
|
|
|
|
+
|
|
|
|
|
+ #logo {}
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+NAVIGATION STYLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+/*
|
|
|
|
|
+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.
|
|
|
|
|
+*/
|
|
|
|
|
+
|
|
|
|
|
+.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.scss file where it's relevant. We want to
|
|
|
|
|
+ keep this file as small as possible!
|
|
|
|
|
+ */
|
|
|
|
|
+ &:hover, &:focus {
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &: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 {
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+
|
|
|
|
|
+ a {
|
|
|
|
|
+ padding-left: 30px;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+
|
|
|
|
|
+ &:link {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:first-child {}
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .menu li */
|
|
|
|
|
+
|
|
|
|
|
+ /* highlight current page */
|
|
|
|
|
+ li.current-menu-item,
|
|
|
|
|
+ li.current_page_item,
|
|
|
|
|
+ li.current-page-ancestor {
|
|
|
|
|
+
|
|
|
|
|
+ a {}
|
|
|
|
|
+
|
|
|
|
|
+ } /* end current highlighters */
|
|
|
|
|
+
|
|
|
|
|
+} /* end .nav */
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+POSTS & CONTENT STYLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+#content {
|
|
|
|
|
+ margin-top: 2.2em;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ .hentry {
|
|
|
|
|
+
|
|
|
|
|
+ header {}
|
|
|
|
|
+
|
|
|
|
|
+ footer {}
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .hentry */
|
|
|
|
|
+
|
|
|
|
|
+ .single-title,
|
|
|
|
|
+ .page-title {}
|
|
|
|
|
+
|
|
|
|
|
+ .single-title {}
|
|
|
|
|
+
|
|
|
|
|
+ .page-title {}
|
|
|
|
|
+
|
|
|
|
|
+ .archive-title { }
|
|
|
|
|
+
|
|
|
|
|
+ /* want to style individual post classes? Booya! */
|
|
|
|
|
+ .post-id {} /* post by id (i.e. post-3) */
|
|
|
|
|
+ .post {} /* general post style */
|
|
|
|
|
+ .page {} /* general article on a page style */
|
|
|
|
|
+ .attachment {} /* general style on an attatchment */
|
|
|
|
|
+ .sticky {} /* sticky post style */
|
|
|
|
|
+ .hentry {} /* hentry class */
|
|
|
|
|
+ .category-slug {} /* style by category (i.e. category-videos) */
|
|
|
|
|
+ .tag-slug {} /* style by tag (i.e. tag-news) */
|
|
|
|
|
+
|
|
|
|
|
+ /* post meta */
|
|
|
|
|
+ .byline {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+
|
|
|
|
|
+ time {}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* entry content */
|
|
|
|
|
+ .entry-content {
|
|
|
|
|
+
|
|
|
|
|
+ p {}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ ul, ol, table, dl {}
|
|
|
|
|
+
|
|
|
|
|
+ ul, ol {
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ ul {
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ ol {
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ blockquote {
|
|
|
|
|
+
|
|
|
|
|
+ &:before {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ dl {}
|
|
|
|
|
+
|
|
|
|
|
+ dt {}
|
|
|
|
|
+
|
|
|
|
|
+ dd {
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+ font-size: 0.9em;
|
|
|
|
|
+ color: #787878;
|
|
|
|
|
+ margin-bottom: 1.5em;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ margin: 0 0 1.5em 0;
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /*
|
|
|
|
|
+ image alignment on a screen this size may be
|
|
|
|
|
+ a bit difficult. It's set to start aligning
|
|
|
|
|
+ and floating images at the next breakpoint,
|
|
|
|
|
+ but it's up to you. Feel free to change it up.
|
|
|
|
|
+ */
|
|
|
|
|
+ .alignleft, img.alignleft {}
|
|
|
|
|
+ .alignright, img.alignright {}
|
|
|
|
|
+ .aligncenter, img.aligncenter {}
|
|
|
|
|
+
|
|
|
|
|
+ video, object {
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ pre {
|
|
|
|
|
+ background: #eee;
|
|
|
|
|
+ border: 1px solid #cecece;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .entry-content */
|
|
|
|
|
+
|
|
|
|
|
+ .wp-caption {
|
|
|
|
|
+ background: #eee;
|
|
|
|
|
+ padding: 5px;
|
|
|
|
|
+
|
|
|
|
|
+ /* images inside wp-caption */
|
|
|
|
|
+ img {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ p.wp-caption-text {
|
|
|
|
|
+ font-size: 0.85em;
|
|
|
|
|
+ margin: 4px 0 7px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .wp-caption */
|
|
|
|
|
+
|
|
|
|
|
+ /* image gallery styles */
|
|
|
|
|
+ .gallery {
|
|
|
|
|
+
|
|
|
|
|
+ dl {
|
|
|
|
|
+
|
|
|
|
|
+ a {}
|
|
|
|
|
+
|
|
|
|
|
+ img {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ dt {}
|
|
|
|
|
+
|
|
|
|
|
+ dd {}
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .gallery */
|
|
|
|
|
+
|
|
|
|
|
+ /* gallery caption styles */
|
|
|
|
|
+ .gallery-caption {}
|
|
|
|
|
+
|
|
|
|
|
+ .size-full {}
|
|
|
|
|
+ .size-large {}
|
|
|
|
|
+ .size-medium {}
|
|
|
|
|
+ .size-thumbnail {}
|
|
|
|
|
+
|
|
|
|
|
+/******************************************************************
|
|
|
|
|
+PAGE NAVI STYLES
|
|
|
|
|
+******************************************************************/
|
|
|
|
|
+
|
|
|
|
|
+.page-navigation,
|
|
|
|
|
+.wp-prev-next {
|
|
|
|
|
+ margin: 1.1em 0 2.2em;
|
|
|
|
|
+}
|
|
|
|
|
+ .bones_page_navi {
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ a {
|
|
|
|
|
+ padding: 3px 6px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ color: #f01d4f;
|
|
|
|
|
+ text-decoration: underline;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* current page link */
|
|
|
|
|
+ li.bpn-current {
|
|
|
|
|
+ padding: 3px 6px;
|
|
|
|
|
+ border-bottom: 2px solid #f01d4f;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ a {
|
|
|
|
|
+ /* hovering on current page link */
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .bones_page_navi .bpn-current */
|
|
|
|
|
+
|
|
|
|
|
+ /* common styles for page-navi links */
|
|
|
|
|
+ li.bpn-prev-link,
|
|
|
|
|
+ li.bpn-next-link {
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+
|
|
|
|
|
+ a {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* remove the bg on end links */
|
|
|
|
|
+ li.bpn-prev-link a:hover,
|
|
|
|
|
+ li.bpn-next-link a:hover,
|
|
|
|
|
+ li.bpn-first-page-link a:hover,
|
|
|
|
|
+ li.bpn-last-page-link a:hover {
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* previous link */
|
|
|
|
|
+ li.bpn-prev-link {
|
|
|
|
|
+ a {
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* next page link */
|
|
|
|
|
+ li.bpn-next-link {
|
|
|
|
|
+ a {
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* first page link */
|
|
|
|
|
+ li.bpn-first-page-link {
|
|
|
|
|
+ a {
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* last page link */
|
|
|
|
|
+ li.bpn-last-page-link {
|
|
|
|
|
+ a {
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .bones_page_navi */
|
|
|
|
|
+
|
|
|
|
|
+ /* fallback previous & next links */
|
|
|
|
|
+ .wp-prev-next {
|
|
|
|
|
+
|
|
|
|
|
+ ul {}
|
|
|
|
|
+
|
|
|
|
|
+ .prev-link {
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .next-link {
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .wp-prev-next */
|
|
|
|
|
+
|
|
|
|
|
+/******************************************************************
|
|
|
|
|
+COMMENT STYLES
|
|
|
|
|
+******************************************************************/
|
|
|
|
|
+
|
|
|
|
|
+/* h3 comment title */
|
|
|
|
|
+#comments {
|
|
|
|
|
+
|
|
|
|
|
+ /* number of comments span */
|
|
|
|
|
+ span {}
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.comment-nav {
|
|
|
|
|
+
|
|
|
|
|
+ ul {
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+.commentlist {
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ clear: both;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ list-style-type: none;
|
|
|
|
|
+ margin-bottom: 1.5em;
|
|
|
|
|
+ padding: 0.7335em 10px;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ ul.children {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ /* variations */
|
|
|
|
|
+ .comment {}
|
|
|
|
|
+ .alt {}
|
|
|
|
|
+ .odd {}
|
|
|
|
|
+ .even {}
|
|
|
|
|
+ .depth-1 {} /* change number for different depth */
|
|
|
|
|
+ .byuser {}
|
|
|
|
|
+ .bypostauthor {}
|
|
|
|
|
+ .comment-author-admin {}
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .commentlist li ul.children */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ li[class*=depth-] {
|
|
|
|
|
+ margin-top: 1.1em;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ li.depth-1 {
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ li:not(.depth-1) {
|
|
|
|
|
+ margin-right: -10px;
|
|
|
|
|
+ margin-left: -10px;
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ padding-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ li.depth-2 {}
|
|
|
|
|
+ li.depth-3 {}
|
|
|
|
|
+ li.depth-4 {}
|
|
|
|
|
+ li.depth-5 {}
|
|
|
|
|
+
|
|
|
|
|
+ /* general comment classes */
|
|
|
|
|
+ .alt {}
|
|
|
|
|
+ .odd {
|
|
|
|
|
+ background: #eee;
|
|
|
|
|
+ }
|
|
|
|
|
+ .even {
|
|
|
|
|
+ background: #fefefe;
|
|
|
|
|
+ }
|
|
|
|
|
+ .parent {}
|
|
|
|
|
+ .comment {}
|
|
|
|
|
+ .children {}
|
|
|
|
|
+ .pingback {}
|
|
|
|
|
+ .bypostauthor {}
|
|
|
|
|
+ .comment-author {}
|
|
|
|
|
+ .comment-author-admin {}
|
|
|
|
|
+ .thread-alt {}
|
|
|
|
|
+ .thread-odd {}
|
|
|
|
|
+ .thread-even {}
|
|
|
|
|
+
|
|
|
|
|
+ /* vcard */
|
|
|
|
|
+ .vcard {
|
|
|
|
|
+ margin-left: 50px;
|
|
|
|
|
+
|
|
|
|
|
+ cite.fn {
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+
|
|
|
|
|
+ a.url {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ time {
|
|
|
|
|
+ float: right;
|
|
|
|
|
+
|
|
|
|
|
+ a {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ text-decoration: underline;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ img.photo {}
|
|
|
|
|
+
|
|
|
|
|
+ img.avatar {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 10px;
|
|
|
|
|
+ padding: 2px;
|
|
|
|
|
+ border: 1px solid #cecece;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .commentlist .vcard */
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /* comment meta */
|
|
|
|
|
+ .comment-meta {
|
|
|
|
|
+
|
|
|
|
|
+ a {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .commentmetadata {
|
|
|
|
|
+
|
|
|
|
|
+ a {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* comment content */
|
|
|
|
|
+ .comment_content {
|
|
|
|
|
+ margin-left: 50px;
|
|
|
|
|
+
|
|
|
|
|
+ p {
|
|
|
|
|
+ margin: 0.7335em 0 1.5em;
|
|
|
|
|
+ font-size: 1em;
|
|
|
|
|
+ line-height: 1.5em;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .commentlist .comment_content */
|
|
|
|
|
+
|
|
|
|
|
+ /* comment reply link */
|
|
|
|
|
+ .comment-reply-link {
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ background: #4598bb;
|
|
|
|
|
+ padding: 3px 5px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ opacity: 0.65;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ font-size: 0.9em;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover,
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .commentlist .comment-reply-link */
|
|
|
|
|
+
|
|
|
|
|
+} /* end .commentlist */
|
|
|
|
|
+
|
|
|
|
|
+/******************************************************************
|
|
|
|
|
+COMMENT FORM STYLES
|
|
|
|
|
+******************************************************************/
|
|
|
|
|
+
|
|
|
|
|
+.respond-form {
|
|
|
|
|
+ margin: 1.5em 10px;
|
|
|
|
|
+ padding-bottom: 2.2em;
|
|
|
|
|
+
|
|
|
|
|
+ form {
|
|
|
|
|
+ margin: 0.75em 0;
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+ list-style-type: none;
|
|
|
|
|
+ clear: both;
|
|
|
|
|
+ margin-bottom: 0.7335em;
|
|
|
|
|
+
|
|
|
|
|
+ label,
|
|
|
|
|
+ small {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ input[type=text],
|
|
|
|
|
+ input[type=email],
|
|
|
|
|
+ input[type=url],
|
|
|
|
|
+ textarea {
|
|
|
|
|
+ padding: 3px 6px;
|
|
|
|
|
+ background: #efefef;
|
|
|
|
|
+ border: 2px solid #cecece;
|
|
|
|
|
+ line-height: 1.5em;
|
|
|
|
|
+
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* form validation */
|
|
|
|
|
+ &:invalid {
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ border-color: #fbc2c4;
|
|
|
|
|
+ background-color: #f6e7eb;
|
|
|
|
|
+ -webkit-box-shadow: none;
|
|
|
|
|
+ -moz-box-shadow: none;
|
|
|
|
|
+ -ms-box-shadow: none;
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ input[type=text],
|
|
|
|
|
+ input[type=email],
|
|
|
|
|
+ input[type=url] {
|
|
|
|
|
+ max-width: 400px;
|
|
|
|
|
+ min-width: 250px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ textarea {
|
|
|
|
|
+ resize: none;
|
|
|
|
|
+ width: 97.3%;
|
|
|
|
|
+ height: 150px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ /* comment submit button */
|
|
|
|
|
+ #submit {}
|
|
|
|
|
+
|
|
|
|
|
+ /* comment form title */
|
|
|
|
|
+ #comment-form-title {
|
|
|
|
|
+ margin: 0 0 1.1em;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* cancel comment reply link */
|
|
|
|
|
+ #cancel-comment-reply {
|
|
|
|
|
+ a {}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* logged in comments */
|
|
|
|
|
+ .comments-logged-in-as {}
|
|
|
|
|
+
|
|
|
|
|
+ /* allowed tags */
|
|
|
|
|
+ #allowed_tags {
|
|
|
|
|
+ margin: 1.5em 10px 0.7335em 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* no comments */
|
|
|
|
|
+ .nocomments {
|
|
|
|
|
+ margin: 0 20px 1.1em;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+SIDEBARS & ASIDES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+.sidebar {}
|
|
|
|
|
+
|
|
|
|
|
+ .widgettitle {}
|
|
|
|
|
+
|
|
|
|
|
+ .widget {
|
|
|
|
|
+
|
|
|
|
|
+ ul {
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+
|
|
|
|
|
+ &:first-child {}
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {}
|
|
|
|
|
+
|
|
|
|
|
+ a {}
|
|
|
|
|
+
|
|
|
|
|
+ /* deep nesting */
|
|
|
|
|
+ ul {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+/*********************
|
|
|
|
|
+FOOTER STYLES
|
|
|
|
|
+*********************/
|
|
|
|
|
+
|
|
|
|
|
+.footer {
|
|
|
|
|
+ clear: both;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+ /*
|
|
|
|
|
+ if you checked out the link above:
|
|
|
|
|
+ http://www.alistapart.com/articles/organizing-mobile/
|
|
|
|
|
+ you'll want to style the footer nav
|
|
|
|
|
+ a bit more in-depth. Remember to keep
|
|
|
|
|
+ it simple because you'll have to
|
|
|
|
|
+ override these styles for the desktop
|
|
|
|
|
+ view.
|
|
|
|
|
+ */
|
|
|
|
|
+ .footer-links {
|
|
|
|
|
+
|
|
|
|
|
+ ul {
|
|
|
|
|
+
|
|
|
|
|
+ li {}
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } /* end .footer-links */
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ .copyright {}
|
|
|
|
|
+
|