Skip to content

Instantly share code, notes, and snippets.

@mannieschumpert
Last active October 13, 2015 00:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mannieschumpert/4108001 to your computer and use it in GitHub Desktop.
Save mannieschumpert/4108001 to your computer and use it in GitHub Desktop.
TwentyTwelve Sass-ified
/* In making a child theme of Twenty Twelve, I didn't want to use the standard @import in the production CSS.
* Since I'm using Sass, I "Sass-ified" Twenty Twelve so that it could be imported directly into my own stylesheet.
* This way it can be minifed, and I can save an http request. Double win.
* I removed a lot of comments, because the .sass syntax is really particular about formatting.
* I preserved the line numbering just in case the files needed comparing (thus all the blank lines).
*
* (FYI, I'm enqueueing a different stylesheet in the theme files than the one that identifies the theme.)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
margin: 0
padding: 0
border: 0
font-size: 100%
vertical-align: baseline
body
line-height: 1
ol,
ul
list-style: none
blockquote,
q
quotes: none
blockquote:before,
blockquote:after,
q:before,
q:after
content: ''
content: none
table
border-collapse: collapse
border-spacing: 0
caption,
th,
td
font-weight: normal
text-align: left
h1,
h2,
h3,
h4,
h5,
h6
clear: both
html
overflow-y: scroll
font-size: 100%
-webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100%
a:focus
outline: thin dotted
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section
display: block
audio,
canvas,
video
display: inline-block
audio:not([controls])
display: none
del
color: #333
ins
background: #fff9c0
text-decoration: none
hr
background-color: #ccc
border: 0
height: 1px
margin: 24px
margin-bottom: 1.714285714rem
sub,
sup
font-size: 75%
line-height: 0
position: relative
vertical-align: baseline
sup
top: -0.5em
sub
bottom: -0.25em
img
border: 0
-ms-interpolation-mode: bicubic
/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after
clear: both
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after
display: table
content: ""
/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th
font-size: 11px
font-size: 0.785714286rem
line-height: 2.181818182
font-weight: bold
text-transform: uppercase
color: #636363
/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta
font-size: 11px
font-size: 0.785714286rem
line-height: 2.181818182
/* Buttons */
.menu-toggle,
input[type="submit"],
article.post-password-required input[type=submit],
li.bypostauthor cite span
padding: 6px 10px
padding: 0.428571429rem 0.714285714rem
font-size: 11px
font-size: 0.785714286rem
line-height: 1.428571429
font-weight: normal
color: #7c7c7c
background-color: #e6e6e6
background-repeat: repeat-x
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6)
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6)
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6)
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6)
background-image: linear-gradient(top, #f4f4f4, #e6e6e6)
border: 1px solid #d2d2d2
border-radius: 3px
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1)
.menu-toggle,
input[type="submit"],
article.post-password-required input[type=submit]
cursor: pointer
.menu-toggle:hover,
input[type="submit"]:hover,
article.post-password-required input[type=submit]:hover
color: #5e5e5e
background-color: #ebebeb
background-repeat: repeat-x
background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb)
background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb)
background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb)
background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb)
background-image: linear-gradient(top, #f9f9f9, #ebebeb)
.menu-toggle:active,
.menu-toggle.toggled-on,
input[type="submit"]:active,
article.post-password-required input[type=submit]:active,
input[type="submit"].toggled-on
color: #777
background-color: #e1e1e1
background-repeat: repeat-x
background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1)
background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1)
background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1)
background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1)
background-image: linear-gradient(top, #ebebeb, #e1e1e1)
box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4
border: none
li.bypostauthor cite span
color: #fff
background-color: #21759b
background-image: none
border: 1px solid #1f6f93
border-radius: 2px
box-shadow: none
padding: 0
/* Form fields */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea
padding: 6px
padding: 0.428571429rem
font-family: inherit
border: 1px solid #ccc
border-radius: 3px
/* Responsive images */
.entry-content img,
.comment-content img,
.widget img
max-width: 100%
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"]
height: auto
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image
max-width: 100%
height: auto
/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video
max-width: 100%
.entry-content .twitter-tweet-rendered
max-width: 100% !important
/* Images */
.alignleft
float: left
.alignright
float: right
.aligncenter
display: block
margin-left: auto
margin-right: auto
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
border-radius: 3px
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2)
.wp-caption
max-width: 100%
padding: 4px
.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption
font-style: italic
font-size: 12px
font-size: 0.857142857rem
line-height: 2
color: #777
img.wp-smiley,
.rsswidget img
border: 0
border-radius: 0
box-shadow: none
margin-bottom: 0
margin-top: 0
padding: 0
.entry-content dl.gallery-item
margin: 0
.gallery-item a
display: block
width: 90%
.gallery-columns-1 .gallery-item a
max-width: 100%
width: auto
.gallery .gallery-icon img
height: auto
max-width: 90%
padding: 5%
.gallery-columns-1 .gallery-icon img
padding: 3%
/* Navigation */
.site-content nav
clear: both
line-height: 2
overflow: hidden
#nav-above
padding: 24px 0
padding: 1.714285714rem 0
#nav-above
display: none
.paged #nav-above
display: block
.nav-previous,
.previous-image
float: left
width: 50%
.nav-next,
.next-image
float: right
text-align: right
width: 50%
.nav-single + .comments-area,
#comment-nav-above
margin: 48px 0
margin: 3.428571429rem 0
/* Author profiles */
.author .archive-header
margin-bottom: 24px
margin-bottom: 1.714285714rem
.author-info
border-top: 1px solid #ededed
margin: 24px 0
margin: 1.714285714rem 0
padding-top: 24px
padding-top: 1.714285714rem
overflow: hidden
.author-description p
color: #777
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
.author.archive .author-info
border-top: 0
margin: 0 0 48px
margin: 0 0 3.428571429rem
.author.archive .author-avatar
margin-top: 0
/* =Basic structure */
/* Body, links, basics */
html
font-size: 87.5%
body
font-size: 14px
font-size: 1rem
font-family: Helvetica, Arial, sans-serif
text-rendering: optimizeLegibility
color: #444
body.custom-font-enabled
font-family: "Open Sans", Helvetica, Arial, sans-serif
a
outline: none
color: #21759b
a:hover
color: #0f3647
/* Assistive text */
.skip-link,
.screen-reader-text,
.assistive-text
position: absolute !important
clip: rect(1px, 1px, 1px, 1px)
/* Page structure */
.site
padding: 0 24px
padding: 0 1.714285714rem
background-color: #fff
.site-content
margin: 24px 0 0
margin: 1.714285714rem 0 0
.widget-area
margin: 24px 0 0
margin: 1.714285714rem 0 0
/* Header */
.site-header
padding: 24px 0
padding: 1.714285714rem 0
.site-header h1,
.site-header h2
text-align: center
.site-header h1 a,
.site-header h2 a
color: #515151
display: inline-block
text-decoration: none
.site-header h1 a:hover,
.site-header h2 a:hover
color: #21759b
.site-header h1
font-size: 24px
font-size: 1.714285714rem
line-height: 2
.site-header h2
font-weight: normal
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #777
.header-image
margin-top: 24px
margin-top: 1.714285714rem
/* Navigation Menu */
.main-navigation
margin-top: 24px
margin-top: 1.714285714rem
text-align: center
.main-navigation li
margin-top: 24px
margin-top: 1.714285714rem
font-size: 12px
font-size: 0.857142857rem
line-height: 1.42857143
.main-navigation a
color: #5e5e5e
.main-navigation a:hover
color: #21759b
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul
display: none
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle
display: inline-block
/* Banner */
section[role="banner"]
margin-bottom: 48px
margin-bottom: 3.428571429rem
/* Sidebar */
.widget-area .widget
word-wrap: break-word
-webkit-hyphens: auto
-moz-hyphens: auto
hyphens: auto
margin-bottom: 48px
margin-bottom: 3.428571429rem
.widget-area .widget h3
margin-bottom: 24px
margin-bottom: 1.714285714rem
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
.widget-area .widget p
margin-bottom: 24px
margin-bottom: 1.714285714rem
.widget-area .textwidget ul
list-style: disc outside
margin: 0 0 24px
margin: 0 0 1.714285714rem
.widget-area .textwidget li
margin-left: 36px
margin-left: 2.571428571rem
.widget-area .widget a
color: #777
.widget-area .widget a:hover
color: #21759b
/* Footer */
footer[role="contentinfo"]
border-top: 1px solid #ededed
clear: both
font-size: 12px
font-size: 0.857142857rem
line-height: 2
max-width: 960px
max-width: 68.571428571rem
margin-top: 24px
margin-top: 1.714285714rem
margin-left: auto
margin-right: auto
padding: 24px 0
padding: 1.714285714rem 0
footer[role="contentinfo"] a
color: #686868
footer[role="contentinfo"] a:hover
color: #21759b
/* =Main content */
.entry-meta
clear: both
.entry-header
margin-bottom: 24px
margin-bottom: 1.714285714rem
.entry-header img.wp-post-image
margin-bottom: 24px
margin-bottom: 1.714285714rem
.entry-header .entry-title
font-size: 20px
font-size: 1.428571429rem
line-height: 1.2
font-weight: normal
.entry-header .entry-title a
text-decoration: none
.entry-header .entry-format
margin-top: 24px
margin-top: 1.714285714rem
font-weight: normal
.entry-header .comments-link
margin-top: 24px
margin-top: 1.714285714rem
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #777
.comments-link a,
.entry-meta a
color: #777
.comments-link a:hover,
.entry-meta a:hover
color: #21759b
article.sticky .featured-post
border-top: 4px double #ededed
border-bottom: 4px double #ededed
color: #777
font-size: 13px
font-size: 0.928571429rem
line-height: 3.692307692
margin-bottom: 24px
margin-bottom: 1.714285714rem
text-align: center
.entry-content,
.entry-summary
line-height: 1.714285714
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6
margin: 24px 0
margin: 1.714285714rem 0
line-height: 1.714285714
.entry-content h1,
.comment-content h1
font-size: 21px
font-size: 1.5rem
line-height: 1.5
.entry-content h2,
.comment-content h2
font-size: 18px
font-size: 1.285714286rem
line-height: 1.6
.entry-content h3,
.comment-content h3
font-size: 16px
font-size: 1.142857143rem
line-height: 1.846153846
.entry-content h4,
.comment-content h4
font-size: 14px
font-size: 1rem
line-height: 1.846153846
.entry-content h5,
.comment-content h5
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
.entry-content h6,
.comment-content h6
font-size: 12px
font-size: 0.857142857rem
line-height: 1.846153846
.entry-content p,
.entry-summary p,
.comment-content p
margin: 0 0 24px
margin: 0 0 1.714285714rem
line-height: 1.714285714
.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul
margin: 0 0 24px
margin: 0 0 1.714285714rem
line-height: 1.714285714
.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul
margin-bottom: 0
.entry-content ul,
.comment-content ul
list-style: disc outside
.entry-content ol,
.comment-content ol
list-style: decimal outside
.entry-content li,
.comment-content li
margin: 0 0 0 36px
margin: 0 0 0 2.571428571rem
.entry-content blockquote,
.comment-content blockquote
margin-bottom: 24px
margin-bottom: 1.714285714rem
padding: 24px
padding: 1.714285714rem
font-style: italic
.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child
margin-bottom: 0
.entry-content code,
.comment-content code
font-family: Consolas, Monaco, Lucida Console, monospace
font-size: 12px
font-size: 0.857142857rem
line-height: 2
.entry-content pre,
.comment-content pre
border: 1px solid #ededed
color: #666
font-family: Consolas, Monaco, Lucida Console, monospace
font-size: 12px
font-size: 0.857142857rem
line-height: 1.714285714
margin: 24px 0
margin: 1.714285714rem 0
overflow: auto
padding: 24px
padding: 1.714285714rem
.entry-content pre code,
.comment-content pre code
display: block
.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym
border-bottom: 1px dotted #666
cursor: help
.entry-content address,
.comment-content address
display: block
line-height: 1.714285714
margin: 0 0 24px
margin: 0 0 1.714285714rem
img.alignleft
margin: 12px 24px 12px 0
margin: 0.857142857rem 1.714285714rem 0.857142857rem 0
img.alignright
margin: 12px 0 12px 24px
margin: 0.857142857rem 0 0.857142857rem 1.714285714rem
img.aligncenter
margin-top: 12px
margin-top: 0.857142857rem
margin-bottom: 12px
margin-bottom: 0.857142857rem
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video
margin-bottom: 24px
margin-bottom: 1.714285714rem
.entry-content dl,
.comment-content dl
margin: 0 24px
margin: 0 1.714285714rem
.entry-content dt,
.comment-content dt
font-weight: bold
line-height: 1.714285714
.entry-content dd,
.comment-content dd
line-height: 1.714285714
margin-bottom: 24px
margin-bottom: 1.714285714rem
.entry-content table,
.comment-content table
border-bottom: 1px solid #ededed
color: #777
font-size: 12px
font-size: 0.857142857rem
line-height: 2
margin: 0 0 24px
margin: 0 0 1.714285714rem
width: 100%
.entry-content table caption,
.comment-content table caption
font-size: 16px
font-size: 1.142857143rem
margin: 24px 0
margin: 1.714285714rem 0
.entry-content td,
.comment-content td
border-top: 1px solid #ededed
padding: 6px 10px 6px 0
.site-content article
padding-bottom: 24px
padding-bottom: 1.714285714rem
margin-bottom: 72px
margin-bottom: 5.142857143rem
border-bottom: 4px double #ededed
.page-links
clear: both
line-height: 1.714285714
footer.entry-meta
margin-top: 24px
margin-top: 1.714285714rem
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #777
.single-author .entry-meta .by-author
display: none
/* =Archives */
.archive-header,
.page-header
margin-bottom: 48px
margin-bottom: 3.428571429rem
padding-bottom: 22px
padding-bottom: 1.571428571rem
border-bottom: 1px solid #ededed
.archive-meta
color: #777
font-size: 12px
font-size: 0.857142857rem
line-height: 2
margin-top: 22px
margin-top: 1.571428571rem
/* =Single image attachment view */
.article.attachment
overflow: hidden
.image-attachment div.attachment
text-align: center
.image-attachment div.attachment p
text-align: center
.image-attachment div.attachment img
display: block
height: auto
margin: 0 auto
max-width: 100%
.image-attachment .entry-caption
margin-top: 8px
margin-top: 0.571428571rem
/* =Aside post format */
article.format-aside h1
margin-bottom: 24px
margin-bottom: 1.714285714rem
article.format-aside h1 a
text-decoration: none
color: #4d525a
article.format-aside h1 a:hover
color: #2e3542
article.format-aside .aside
padding: 24px 24px 0
padding: 1.714285714rem
background: #d2e0f9
border-left: 22px solid #a8bfe8
article.format-aside p
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #4a5466
article.format-aside blockquote:last-child,
article.format-aside p:last-child
margin-bottom: 0
/* =Post formats */
/* Image posts */
article.format-image footer h1
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
font-weight: normal
article.format-image footer h2
font-size: 11px
font-size: 0.785714286rem
line-height: 2.181818182
article.format-image footer a h2
font-weight: normal
/* Link posts */
article.format-link header
padding: 0 10px
padding: 0 0.714285714rem
float: right
font-size: 11px
font-size: 0.785714286rem
line-height: 2.181818182
font-weight: bold
font-style: italic
text-transform: uppercase
color: #848484
background-color: #ebebeb
border-radius: 3px
article.format-link .entry-content
max-width: 80%
float: left
article.format-link .entry-content a
font-size: 22px
font-size: 1.571428571rem
line-height: 1.090909091
text-decoration: none
/* Quote posts */
article.format-quote .entry-content p
margin: 0
padding-bottom: 24px
padding-bottom: 1.714285714rem
article.format-quote .entry-content blockquote
display: block
padding: 24px 24px 0
padding: 1.714285714rem 1.714285714rem 0
font-size: 15px
font-size: 1.071428571rem
line-height: 1.6
font-style: normal
color: #6a6a6a
background: #efefef
/* Status posts */
.format-status .entry-header
margin-bottom: 24px
margin-bottom: 1.714285714rem
.format-status .entry-header header
display: inline-block
.format-status .entry-header h1
font-size: 15px
font-size: 1.071428571rem
font-weight: normal
line-height: 1.6
margin: 0
.format-status .entry-header h2
font-size: 12px
font-size: 0.857142857rem
font-weight: normal
line-height: 2
margin: 0
.format-status .entry-header header a
color: #777
.format-status .entry-header header a:hover
color: #21759b
.format-status .entry-header img
float: left
margin-right: 21px
margin-right: 1.5rem
/* =Comments */
.comments-title
margin-bottom: 48px
margin-bottom: 3.428571429rem
font-size: 16px
font-size: 1.142857143rem
line-height: 1.5
font-weight: normal
.comments-area article
margin: 24px 0
margin: 1.714285714rem 0
.comments-area article header
margin: 0 0 48px
margin: 0 0 3.428571429rem
overflow: hidden
position: relative
.comments-area article header img
float: left
padding: 0
line-height: 0
.comments-area article header cite,
.comments-area article header time
display: block
margin-left: 85px
margin-left: 6.071428571rem
.comments-area article header cite
font-style: normal
font-size: 15px
font-size: 1.071428571rem
line-height: 1.42857143
.comments-area article header time
line-height: 1.714285714
text-decoration: none
font-size: 12px
font-size: 0.857142857rem
color: #5e5e5e
.comments-area article header a
text-decoration: none
color: #5e5e5e
.comments-area article header a:hover
color: #21759b
.comments-area article header cite a
color: #444
.comments-area article header cite a:hover
text-decoration: underline
.comments-area article header h4
position: absolute
top: 0
right: 0
padding: 6px 12px
padding: 0.428571429rem 0.857142857rem
font-size: 12px
font-size: 0.857142857rem
font-weight: normal
color: #fff
background-color: #0088d0
background-repeat: repeat-x
background-image: -moz-linear-gradient(top, #009cee, #0088d0)
background-image: -ms-linear-gradient(top, #009cee, #0088d0)
background-image: -webkit-linear-gradient(top, #009cee, #0088d0)
background-image: -o-linear-gradient(top, #009cee, #0088d0)
background-image: linear-gradient(top, #009cee, #0088d0)
border-radius: 3px
border: 1px solid #007cbd
.comments-area li.bypostauthor cite span
position: absolute
margin-left: 5px
margin-left: 0.357142857rem
padding: 2px 5px
padding: 0.142857143rem 0.357142857rem
font-size: 10px
font-size: 0.714285714rem
a.comment-reply-link
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #686868
a.comment-reply-link:hover
color: #21759b
.commentlist .pingback
line-height: 1.714285714
margin-bottom: 24px
margin-bottom: 1.714285714rem
.commentlist .children
margin-left: 48px
margin-left: 3.428571429rem
/* Comment form */
#respond
margin-top: 48px
margin-top: 3.428571429rem
#respond h3#reply-title
font-size: 16px
font-size: 1.142857143rem
line-height: 1.5
#respond h3#reply-title #cancel-comment-reply-link
margin-left: 10px
margin-left: 0.714285714rem
font-weight: normal
font-size: 12px
font-size: 0.857142857rem
#respond form
margin: 24px 0
margin: 1.714285714rem 0
#respond form p
margin: 11px 0
margin: 0.785714286rem 0
#respond form p.logged-in-as
margin-bottom: 24px
margin-bottom: 1.714285714rem
#respond form label
display: block
line-height: 1.714285714
#respond form input[type="text"],
#respond form textarea
-moz-box-sizing: border-box
box-sizing: border-box
font-size: 12px
font-size: 0.857142857rem
line-height: 1.714285714
padding: 10px
padding: 0.714285714rem
width: 100%
#respond form p.form-allowed-tags
margin: 0
font-size: 12px
font-size: 0.857142857rem
line-height: 2
color: #5e5e5e
.required
color: red
label ~ span.required
display: block
float: left
margin: -18px 0 0 -16px
margin: -1.285714286rem 0 0 -1.142857143rem
/* =Front page template */
.entry-page-image
margin-bottom: 14px
margin-bottom: 1rem
.template-front-page .site-content article
border: 0
margin-bottom: 0
.template-front-page .widget-area
clear: both
float: none
width: auto
padding-top: 24px
padding-top: 1.714285714rem
border-top: 1px solid #ededed
.template-front-page .widget-area .widget li
margin: 8px 0 0
margin: 0.571428571rem 0 0
font-size: 13px
font-size: 0.928571429rem
line-height: 1.714285714
list-style-type: square
list-style-position: inside
.template-front-page .widget-area .widget li a
color: #777
.template-front-page .widget-area .widget li a:hover
color: #21759b
.template-front-page .widget-area .widget_text img
float: left
margin: 8px 24px 8px 0
margin: 0.571428571rem 1.714285714rem 0.571428571rem 0
/* =Widgets */
.widget-area .widget ul ul
margin-left: 12px
margin-left: 0.857142857rem
.widget_rss li
margin: 12px 0
margin: 0.857142857rem 0
.widget_recent_entries .post-date,
.widget_rss .rss-date
color: #aaa
font-size: 11px
font-size: 0.785714286rem
margin-left: 12px
margin-left: 0.857142857rem
#wp-calendar
margin: 0
width: 100%
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
color: #686868
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption
text-align: left
#wp-calendar #next
padding-right: 24px
padding-right: 1.714285714rem
text-align: right
.widget_search label
display: block
font-size: 13px
font-size: 0.928571429rem
line-height: 1.846153846
.widget_twitter li
list-style-type: none
.widget_twitter .timesince
display: block
text-align: right
/* =Plugins */
img#wpstats
display: block
margin: 0 auto 24px
margin: 0 auto 1.714285714rem
/* =Media queries */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px)
.author-avatar
float: left
margin-top: 8px
margin-top: 0.571428571rem
.author-description
float: right
width: 80%
.site
margin: 0 auto
max-width: 960px
max-width: 68.571428571rem
overflow: hidden
.site-content
float: left
width: 65.104166667%
body.template-front-page .site-content,
body.single-attachment .site-content,
body.full-width .site-content
width: 100%
.widget-area
float: right
width: 26.041666667%
.site-header h1,
.site-header h2
text-align: left
.site-header h1
font-size: 26px
font-size: 1.857142857rem
line-height: 1.846153846
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul
border-bottom: 1px solid #ededed
border-top: 1px solid #ededed
display: inline-block !important
text-align: left
width: 100%
.main-navigation ul
margin: 0
text-indent: 0
.main-navigation li a,
.main-navigation li
display: inline-block
text-decoration: none
.main-navigation li a
border-bottom: 0
color: #6a6a6a
line-height: 3.692307692
text-transform: uppercase
.main-navigation li a:hover
color: #000
.main-navigation li
margin: 0 40px 0 0
margin: 0 2.857142857rem 0 0
position: relative
.main-navigation li ul
display: none
margin: 0
padding: 0
position: absolute
top: 100%
z-index: 1
.main-navigation li ul ul
top: 0
left: 100%
.main-navigation ul li:hover > ul
border-left: 0
display: block
.main-navigation li ul li a
background: #efefef
border-bottom: 1px solid #ededed
display: block
font-size: 11px
font-size: 0.785714286rem
line-height: 2.181818182
padding: 8px 10px
padding: 0.571428571rem 0.714285714rem
width: 180px
width: 12.85714286rem
.main-navigation li ul li a:hover
background: #e3e3e3
color: #444
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a
color: #636363
font-weight: bold
.menu-toggle
display: none
.entry-header .entry-title
font-size: 22px
font-size: 1.571428571rem
#respond form input[type="text"]
width: 46.333333333%
#respond form textarea.blog-textarea
width: 79.666666667%
.template-front-page .site-content,
.template-front-page article
overflow: hidden
.template-front-page.has-post-thumbnail article
float: left
width: 47.916666667%
.entry-page-image
float: right
margin-bottom: 0
width: 47.916666667%
.template-front-page .widget-area .widget,
.template-front-page.two-sidebars .widget-area .front-widgets
float: left
width: 51.875%
margin-bottom: 24px
margin-bottom: 1.714285714rem
.template-front-page .widget-area .widget:nth-child(odd)
clear: right
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets
float: right
width: 39.0625%
margin: 0 0 24px
margin: 0 0 1.714285714rem
.template-front-page.two-sidebars .widget,
.template-front-page.two-sidebars .widget:nth-child(even)
float: none
width: auto
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px)
body
background-color: #e6e6e6
body .site
padding: 0 40px
padding: 0 2.857142857rem
margin-top: 48px
margin-top: 3.428571429rem
margin-bottom: 48px
margin-bottom: 3.428571429rem
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3)
body.custom-background-empty
background-color: #fff
body.custom-background-empty .site,
body.custom-background-white .site
padding: 0
margin-top: 0
margin-bottom: 0
box-shadow: none
/* =Print */
@media print
body
background: none !important
font-size: 10pt
footer a[rel=bookmark]:link:after,
footer a[rel=bookmark]:visited:after
content: " [" attr(href) "] "
a
text-decoration: none
.entry-content img,
.comment-content img,
.author-avatar img,
img.wp-post-image
border-radius: 0
box-shadow: none
.site
clear: both !important
display: block !important
float: none !important
max-width: 100%
position: relative !important
.site-header
margin-bottom: 72px
margin-bottom: 5.142857143rem
text-align: left
.site-header h1
font-size: 21pt
line-height: 1
text-align: left
.site-header h2
font-size: 10pt
text-align: left
.author-avatar,
#colophon,
#respond,
.commentlist .comment-edit-link,
.commentlist .reply,
.entry-header .comments-link,
.entry-meta .edit-link a,
.page-link,
.site-content nav,
.widget-area,
img.header-image,
.main-navigation
display: none
.wrapper
border-top: none
box-shadow: none
.site-content
float: left
margin: 0
width: 100%
.site-content
margin: 0
width: auto
.singular .entry-header .entry-meta
position: static
.singular .site-content,
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular .comments-title
margin: 0
width: 100%
.entry-header .entry-title,
.entry-title,
.singular .entry-title
font-size: 21pt
footer.entry-meta,
footer.entry-meta a
color: #444
font-size: 10pt
.author-description
float: none
width: auto
/* Comments */
.commentlist > li.comment
background: none
position: relative
width: auto
.commentlist .avatar
height: 39px
left: 2.2em
top: 2.2em
width: 39px
.comments-area article header cite,
.comments-area article header time
margin-left: 50px
margin-left: 3.57142857rem
/* =IE 7 and 8 */
.ie .skip-link,
.ie .screen-reader-text,
.ie .assistive-text
clip: rect(1px 1px 1px 1px)
.ie .site
margin: 48px auto
max-width: 960px
.ie .site-content
float: left
width: 65.104166667%
.ie .full-width .site-content
float: none
width: 100%
.ie .widget-area
float: right
width: 26.041666667%
.ie img.size-full,
.ie img.size-large,
.ie img.header-image,
.ie img.wp-post-image
width: auto
@mannieschumpert
Copy link
Author

I'm working on a child theme of TwentyTwelve, but I don't want to use standard CSS @import. Since I'm using Sass, I "sass-ified" the TwentyTwelve stylesheet for inclusion with my custom styles, so that it can be minified and so that I can save an http request. I preserved the line numbering, just in case the files needed to be compared, and removed a lot of the comments manually (Sass syntax is particular about comment style).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment