Created
February 26, 2015 15:54
-
-
Save cjkoepke/1534d3e93e8479b0b87e to your computer and use it in GitHub Desktop.
Basic Styling from the Genesis Child Theme (preview snippet)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* # Imports | |
---------------------------------------------------------------------------------------------------- */ | |
@import url(//fonts.googleapis.com/css?family=Lato:300,400,700); | |
/* # HTML5 Reset | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Baseline Normalize | |
--------------------------------------------- */ | |
/* normalize.css v3.0.1 | MIT License | git.io/normalize */ | |
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#333}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} | |
/* ## Box Sizing | |
--------------------------------------------- */ | |
*, | |
input[type="search"] { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/* ## Float Clearing | |
--------------------------------------------- */ | |
.author-box:before, | |
.clearfix:before, | |
.entry:before, | |
.entry-content:before, | |
.footer-widgets:before, | |
.nav-primary:before, | |
.nav-secondary:before, | |
.pagination:before, | |
.site-container:before, | |
.site-footer:before, | |
.site-header:before, | |
.site-inner:before, | |
.wrap:before { | |
content: " "; | |
display: table; | |
} | |
.author-box:after, | |
.clearfix:after, | |
.entry:after, | |
.entry-content:after, | |
.footer-widgets:after, | |
.nav-primary:after, | |
.nav-secondary:after, | |
.pagination:after, | |
.site-container:after, | |
.site-footer:after, | |
.site-header:after, | |
.site-inner:after, | |
.wrap:after { | |
clear: both; | |
content: " "; | |
display: table; | |
} | |
/* # Defaults | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Typographical Elements | |
--------------------------------------------- */ | |
body { | |
background-color: #f5f5f5; | |
color: #333; | |
font-family: Lato, sans-serif; | |
font-size: 18px; | |
font-weight: 300; | |
line-height: 1.625; | |
margin: 0; | |
} | |
a, | |
button, | |
input:focus, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"], | |
textarea:focus, | |
.button, | |
.gallery img { | |
-webkit-transition: all 0.1s ease-in-out; | |
-moz-transition: all 0.1s ease-in-out; | |
-ms-transition: all 0.1s ease-in-out; | |
-o-transition: all 0.1s ease-in-out; | |
transition: all 0.1s ease-in-out; | |
} | |
::-moz-selection { | |
background-color: #333; | |
color: #fff; | |
} | |
::selection { | |
background-color: #333; | |
color: #fff; | |
} | |
a { | |
color: #e5554e; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #333; | |
} | |
p { | |
margin: 0 0 28px; | |
padding: 0; | |
} | |
ol, | |
ul { | |
margin: 0; | |
padding: 0; | |
} | |
li { | |
list-style-type: none; | |
} | |
b, | |
strong { | |
font-weight: 700; | |
} | |
blockquote, | |
cite, | |
em, | |
i { | |
font-style: italic; | |
} | |
blockquote { | |
margin: 40px; | |
} | |
blockquote::before { | |
content: "\201C"; | |
display: block; | |
font-size: 30px; | |
height: 0; | |
left: -20px; | |
position: relative; | |
top: -10px; | |
} | |
/* ## Headings | |
--------------------------------------------- */ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
color: #333; | |
font-family: Lato, sans-serif; | |
font-weight: 400; | |
line-height: 1.2; | |
margin: 0 0 10px; | |
} | |
h1 { | |
font-size: 36px; | |
} | |
h2 { | |
font-size: 30px; | |
} | |
h3 { | |
font-size: 24px; | |
} | |
h4 { | |
font-size: 20px; | |
} | |
h5 { | |
font-size: 18px; | |
} | |
h6 { | |
font-size: 16px; | |
} | |
/* ## Objects | |
--------------------------------------------- */ | |
embed, | |
iframe, | |
img, | |
object, | |
video, | |
.wp-caption { | |
max-width: 100%; | |
} | |
img { | |
height: auto; | |
} | |
.featured-content img, | |
.gallery img { | |
width: auto; | |
} | |
/* ## Gallery | |
--------------------------------------------- */ | |
.gallery { | |
overflow: hidden; | |
} | |
.gallery-item { | |
float: left; | |
margin: 0 0 28px; | |
text-align: center; | |
} | |
.gallery-columns-2 .gallery-item { | |
width: 50%; | |
} | |
.gallery-columns-3 .gallery-item { | |
width: 33%; | |
} | |
.gallery-columns-4 .gallery-item { | |
width: 25%; | |
} | |
.gallery-columns-5 .gallery-item { | |
width: 20%; | |
} | |
.gallery-columns-6 .gallery-item { | |
width: 16.6666%; | |
} | |
.gallery-columns-7 .gallery-item { | |
width: 14.2857%; | |
} | |
.gallery-columns-8 .gallery-item { | |
width: 12.5%; | |
} | |
.gallery-columns-9 .gallery-item { | |
width: 11.1111%; | |
} | |
.gallery img { | |
border: 1px solid #ddd; | |
height: auto; | |
padding: 4px; | |
} | |
.gallery img:hover { | |
border: 1px solid #999; | |
} | |
/* ## Forms | |
--------------------------------------------- */ | |
input, | |
select, | |
textarea { | |
background-color: #fff; | |
border: 1px solid #ddd; | |
color: #333; | |
font-size: 18px; | |
font-weight: 300; | |
padding: 16px; | |
width: 100%; | |
} | |
input:focus, | |
textarea:focus { | |
border: 1px solid #999; | |
outline: none; | |
} | |
input[type="checkbox"], | |
input[type="image"], | |
input[type="radio"] { | |
width: auto; | |
} | |
::-moz-placeholder { | |
color: #333; | |
font-weight: 300; | |
opacity: 1; | |
} | |
::-webkit-input-placeholder { | |
color: #333; | |
font-weight: 300; | |
} | |
button, | |
input[type="button"], | |
input[type="reset"], | |
input[type="submit"], | |
.button { | |
background-color: #333; | |
border: none; | |
color: #fff; | |
cursor: pointer; | |
font-size: 16px; | |
font-weight: 300; | |
padding: 16px 24px; | |
text-transform: uppercase; | |
width: auto; | |
} | |
.footer-widgets button, | |
.footer-widgets input[type="button"], | |
.footer-widgets input[type="reset"], | |
.footer-widgets input[type="submit"], | |
.footer-widgets .button { | |
background-color: #e5554e; | |
color: #fff; | |
} | |
button:hover, | |
input:hover[type="button"], | |
input:hover[type="reset"], | |
input:hover[type="submit"], | |
.button:hover { | |
background-color: #e5554e; | |
color: #fff; | |
} | |
.entry-content .button:hover { | |
color: #fff; | |
} | |
.footer-widgets button:hover, | |
.footer-widgets input:hover[type="button"], | |
.footer-widgets input:hover[type="reset"], | |
.footer-widgets input:hover[type="submit"], | |
.footer-widgets .button:hover { | |
background-color: #fff; | |
color: #333; | |
} | |
.button { | |
display: inline-block; | |
} | |
input[type="search"]::-webkit-search-cancel-button, | |
input[type="search"]::-webkit-search-results-button { | |
display: none; | |
} | |
/* ## Tables | |
--------------------------------------------- */ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
line-height: 2; | |
margin-bottom: 40px; | |
width: 100%; | |
} | |
tbody { | |
border-bottom: 1px solid #ddd; | |
} | |
td, | |
th { | |
text-align: left; | |
} | |
td { | |
border-top: 1px solid #ddd; | |
padding: 6px 0; | |
} | |
th { | |
font-weight: 400; | |
} | |
/* # Structure and Layout | |
---------------------------------------------------------------------------------------------------- */ | |
/* ## Site Containers | |
--------------------------------------------- */ | |
.site-inner, | |
.wrap { | |
margin: 0 auto; | |
max-width: 1200px; | |
} | |
.site-inner { | |
clear: both; | |
padding-top: 40px; | |
} | |
/* ## Column Widths and Positions | |
--------------------------------------------- */ | |
/* ### Wrapping div for .content and .sidebar-primary */ | |
.content-sidebar-sidebar .content-sidebar-wrap, | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
width: 980px; | |
} | |
.content-sidebar-sidebar .content-sidebar-wrap { | |
float: left; | |
} | |
.sidebar-content-sidebar .content-sidebar-wrap, | |
.sidebar-sidebar-content .content-sidebar-wrap { | |
float: right; | |
} | |
/* ### Content */ | |
.content { | |
float: right; | |
width: 800px; | |
} | |
.content-sidebar .content, | |
.content-sidebar-sidebar .content, | |
.sidebar-content-sidebar .content { | |
float: left; | |
} | |
.content-sidebar-sidebar .content, | |
.sidebar-content-sidebar .content, | |
.sidebar-sidebar-content .content { | |
width: 580px; | |
} | |
.full-width-content .content { | |
width: 100%; | |
} | |
/* ### Primary Sidebar */ | |
.sidebar-primary { | |
float: right; | |
width: 360px; | |
} | |
.sidebar-content .sidebar-primary, | |
.sidebar-sidebar-content .sidebar-primary { | |
float: left; | |
} | |
/* ### Secondary Sidebar */ | |
.sidebar-secondary { | |
float: left; | |
width: 180px; | |
} | |
.content-sidebar-sidebar .sidebar-secondary { | |
float: right; | |
} | |
/* ## Column Classes | |
--------------------------------------------- */ | |
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */ | |
.five-sixths, | |
.four-sixths, | |
.one-fourth, | |
.one-half, | |
.one-sixth, | |
.one-third, | |
.three-fourths, | |
.three-sixths, | |
.two-fourths, | |
.two-sixths, | |
.two-thirds { | |
float: left; | |
margin-left: 2.564102564102564%; | |
} | |
.one-half, | |
.three-sixths, | |
.two-fourths { | |
width: 48.717948717948715%; | |
} | |
.one-third, | |
.two-sixths { | |
width: 31.623931623931625%; | |
} | |
.four-sixths, | |
.two-thirds { | |
width: 65.81196581196582%; | |
} | |
.one-fourth { | |
width: 23.076923076923077%; | |
} | |
.three-fourths { | |
width: 74.35897435897436%; | |
} | |
.one-sixth { | |
width: 14.52991452991453%; | |
} | |
.five-sixths { | |
width: 82.90598290598291%; | |
} | |
.first { | |
clear: both; | |
margin-left: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment