forked from mirror/_s
Merge pull request #397 from karmatosed/master
Adds in comments and sections for style.css, props @karmatosed
This commit is contained in:
sixhours
commit
50939d1ee4
395
style.css
395
style.css
|
|
@ -22,10 +22,31 @@ along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normali
|
||||||
and Blueprint http://www.blueprintcss.org/
|
and Blueprint http://www.blueprintcss.org/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
>>> TABLE OF CONTENTS:
|
||||||
|
----------------------------------------------------------------
|
||||||
|
1.0 - Reset
|
||||||
|
2.0 - Typography
|
||||||
|
3.0 - Elements
|
||||||
|
4.0 - Inputs and buttons
|
||||||
|
5.0 - Navigation
|
||||||
|
5.1 - Links
|
||||||
|
5.2 - Menus
|
||||||
|
6.0 - Accessiblity
|
||||||
|
7.0 - Alignments
|
||||||
|
8.0 - Clearings
|
||||||
|
9.0 - Widgets
|
||||||
|
10.0 - Content
|
||||||
|
10.1 - Posts and pages
|
||||||
|
10.2 - Asides
|
||||||
|
10.3 - Comments
|
||||||
|
11.0 - Infinite scroll
|
||||||
|
11.0 - Media
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
/* =Reset
|
/*--------------------------------------------------------------
|
||||||
-------------------------------------------------------------- */
|
1.0 - Reset
|
||||||
|
--------------------------------------------------------------*/
|
||||||
html, body, div, span, applet, object, iframe,
|
html, body, div, span, applet, object, iframe,
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
a, abbr, acronym, address, big, cite, code,
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
|
@ -101,10 +122,9 @@ a img {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
/* =Global
|
2.0 Typography
|
||||||
----------------------------------------------- */
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
body,
|
body,
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
|
|
@ -116,42 +136,12 @@ textarea {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Headings */
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
hr {
|
|
||||||
background-color: #ccc;
|
|
||||||
border: 0;
|
|
||||||
height: 1px;
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text elements */
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
}
|
}
|
||||||
ul, ol {
|
|
||||||
margin: 0 0 1.5em 3em;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style: disc;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
li > ul,
|
|
||||||
li > ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin: 0 1.5em 1.5em;
|
|
||||||
}
|
|
||||||
b, strong {
|
b, strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
@ -206,6 +196,36 @@ small {
|
||||||
big {
|
big {
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
3.0 Elements
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
hr {
|
||||||
|
background-color: #ccc;
|
||||||
|
border: 0;
|
||||||
|
height: 1px;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
margin: 0 0 1.5em 3em;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
li > ul,
|
||||||
|
li > ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
margin: 0 1.5em 1.5em;
|
||||||
|
}
|
||||||
figure {
|
figure {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -216,10 +236,10 @@ table {
|
||||||
th {
|
th {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
img {
|
|
||||||
height: auto; /* Make sure images are scaled correctly. */
|
/*--------------------------------------------------------------
|
||||||
max-width: 100%; /* Adhere to container width. */
|
4.0 Inputs and buttons
|
||||||
}
|
--------------------------------------------------------------*/
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
|
|
@ -315,7 +335,12 @@ textarea {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links */
|
/*--------------------------------------------------------------
|
||||||
|
5.0 Navigation
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
5.1 Links
|
||||||
|
--------------------------------------------------------------*/
|
||||||
a {
|
a {
|
||||||
color: royalblue;
|
color: royalblue;
|
||||||
}
|
}
|
||||||
|
|
@ -328,80 +353,9 @@ a:active {
|
||||||
color: midnightblue;
|
color: midnightblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alignment */
|
/*--------------------------------------------------------------
|
||||||
.alignleft {
|
5.2 Menus
|
||||||
display: inline;
|
--------------------------------------------------------------*/
|
||||||
float: left;
|
|
||||||
margin-right: 1.5em;
|
|
||||||
}
|
|
||||||
.alignright {
|
|
||||||
display: inline;
|
|
||||||
float: right;
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
.aligncenter {
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text meant only for screen readers */
|
|
||||||
.screen-reader-text {
|
|
||||||
clip: rect(1px, 1px, 1px, 1px);
|
|
||||||
position: absolute !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen-reader-text:hover,
|
|
||||||
.screen-reader-text:active,
|
|
||||||
.screen-reader-text:focus {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
|
||||||
clip: auto !important;
|
|
||||||
color: #21759b;
|
|
||||||
display: block;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
height: auto;
|
|
||||||
left: 5px;
|
|
||||||
line-height: normal;
|
|
||||||
padding: 15px 23px 14px;
|
|
||||||
text-decoration: none;
|
|
||||||
top: 5px;
|
|
||||||
width: auto;
|
|
||||||
z-index: 100000; /* Above WP toolbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Clearing */
|
|
||||||
.clear:before,
|
|
||||||
.clear:after,
|
|
||||||
.entry-content:before,
|
|
||||||
.entry-content:after,
|
|
||||||
.comment-content:before,
|
|
||||||
.comment-content:after,
|
|
||||||
.site-header:before,
|
|
||||||
.site-header:after,
|
|
||||||
.site-content:before,
|
|
||||||
.site-content:after,
|
|
||||||
.site-footer:before,
|
|
||||||
.site-footer:after {
|
|
||||||
content: '';
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear:after,
|
|
||||||
.entry-content:after,
|
|
||||||
.comment-content:after,
|
|
||||||
.site-header:after,
|
|
||||||
.site-content:after,
|
|
||||||
.site-footer:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* =Menu
|
|
||||||
----------------------------------------------- */
|
|
||||||
|
|
||||||
.main-navigation {
|
.main-navigation {
|
||||||
clear: both;
|
clear: both;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -451,13 +405,11 @@ a:active {
|
||||||
.main-navigation .current_page_item a,
|
.main-navigation .current_page_item a,
|
||||||
.main-navigation .current-menu-item a {
|
.main-navigation .current-menu-item a {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small menu */
|
/* Small menu */
|
||||||
.menu-toggle {
|
.menu-toggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.menu-toggle,
|
.menu-toggle,
|
||||||
.main-navigation.toggled .nav-menu {
|
.main-navigation.toggled .nav-menu {
|
||||||
|
|
@ -468,11 +420,120 @@ a:active {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.site-main [class*="navigation"] {
|
||||||
|
margin: 0 0 1.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
[class*="navigation"] .nav-previous {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
[class*="navigation"] .nav-next {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
6.0 Accessibility
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
/* Text meant only for screen readers */
|
||||||
|
.screen-reader-text {
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
position: absolute !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* =Content
|
.screen-reader-text:hover,
|
||||||
----------------------------------------------- */
|
.screen-reader-text:active,
|
||||||
|
.screen-reader-text:focus {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||||
|
clip: auto !important;
|
||||||
|
color: #21759b;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
height: auto;
|
||||||
|
left: 5px;
|
||||||
|
line-height: normal;
|
||||||
|
padding: 15px 23px 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
top: 5px;
|
||||||
|
width: auto;
|
||||||
|
z-index: 100000; /* Above WP toolbar */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
7.0 Alignments
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.alignleft {
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
}
|
||||||
|
.alignright {
|
||||||
|
display: inline;
|
||||||
|
float: right;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
.aligncenter {
|
||||||
|
clear: both;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
8.0 Clearings
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.clear:before,
|
||||||
|
.clear:after,
|
||||||
|
.entry-content:before,
|
||||||
|
.entry-content:after,
|
||||||
|
.comment-content:before,
|
||||||
|
.comment-content:after,
|
||||||
|
.site-header:before,
|
||||||
|
.site-header:after,
|
||||||
|
.site-content:before,
|
||||||
|
.site-content:after,
|
||||||
|
.site-footer:before,
|
||||||
|
.site-footer:after {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear:after,
|
||||||
|
.entry-content:after,
|
||||||
|
.comment-content:after,
|
||||||
|
.site-header:after,
|
||||||
|
.site-content:after,
|
||||||
|
.site-footer:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
9.0 Widgets
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.widget {
|
||||||
|
margin: 0 0 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure select elements fit in widgets */
|
||||||
|
.widget select {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search widget */
|
||||||
|
.widget_search .search-submit {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
10.0 Content
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
10.1 Posts and pages
|
||||||
|
--------------------------------------------------------------*/
|
||||||
.sticky {
|
.sticky {
|
||||||
}
|
}
|
||||||
.hentry {
|
.hentry {
|
||||||
|
|
@ -496,19 +557,39 @@ a:active {
|
||||||
margin: 0 0 1.5em;
|
margin: 0 0 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
/* =Asides
|
10.2 Asides
|
||||||
----------------------------------------------- */
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.blog .format-aside .entry-title,
|
.blog .format-aside .entry-title,
|
||||||
.archive .format-aside .entry-title {
|
.archive .format-aside .entry-title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
10.3 Comments
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.comment-content a {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.bypostauthor {
|
||||||
|
}
|
||||||
|
|
||||||
/* =Media
|
/*--------------------------------------------------------------
|
||||||
----------------------------------------------- */
|
11.0 Infinite scroll
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
/* Globally hidden elements when Infinite Scroll is supported and in use. */
|
||||||
|
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
|
||||||
|
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
|
||||||
|
.infinity-end.neverending .site-footer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
12.0 Media
|
||||||
|
--------------------------------------------------------------*/
|
||||||
.page-content img.wp-smiley,
|
.page-content img.wp-smiley,
|
||||||
.entry-content img.wp-smiley,
|
.entry-content img.wp-smiley,
|
||||||
.comment-content img.wp-smiley {
|
.comment-content img.wp-smiley {
|
||||||
|
|
@ -550,71 +631,9 @@ a:active {
|
||||||
}
|
}
|
||||||
.site-main .gallery-columns-4 .gallery-item img {
|
.site-main .gallery-columns-4 .gallery-item img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make sure embeds and iframes fit their containers */
|
/* Make sure embeds and iframes fit their containers */
|
||||||
embed,
|
embed,
|
||||||
iframe,
|
iframe,
|
||||||
object {
|
object {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =Navigation
|
|
||||||
----------------------------------------------- */
|
|
||||||
|
|
||||||
.site-main [class*="navigation"] {
|
|
||||||
margin: 0 0 1.5em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
[class*="navigation"] .nav-previous {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
[class*="navigation"] .nav-next {
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* =Comments
|
|
||||||
----------------------------------------------- */
|
|
||||||
|
|
||||||
.comment-content a {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
.bypostauthor {
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* =Widgets
|
|
||||||
----------------------------------------------- */
|
|
||||||
|
|
||||||
.widget {
|
|
||||||
margin: 0 0 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make sure select elements fit in widgets */
|
|
||||||
.widget select {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search widget */
|
|
||||||
.widget_search .search-submit {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* =Infinite Scroll
|
|
||||||
----------------------------------------------- */
|
|
||||||
|
|
||||||
/* Globally hidden elements when Infinite Scroll is supported and in use. */
|
|
||||||
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
|
|
||||||
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
|
|
||||||
.infinity-end.neverending .site-footer {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Reference in New Issue