/**
* Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
margin: 0; padding: 0;
}
html {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;
}
/**
* Basic styling */
html {
position: relative; min-height: 100%;
}
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; color: var(--text-color); background-color: var(--background-color); -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; letter-spacing: -.022em; margin-bottom: 110px; // 35 + Footer Height word-wrap: break-word;
}
table {
width: 100%; margin: 0 0 20px 0; text-align: left;
}
/**
* Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, %vertical-rhythm {
margin-bottom: $spacing-unit / 2;
}
p+h1, ul+h1, ol+h1, p+h2, ul+h2, ol+h2, p+h3, ul+h3, ol+h3, p+h4, ul+h4, ol+h4, p+h5, ul+h5, ol+h5, p+h6, ul+h6, ol+h6 {
margin-top: 1.4em;
}
/**
* Images */
img {
max-width: 100%; vertical-align: middle;
}
/**
* Figures */
figure {
text-align: center; margin-top: 30px; margin-bottom: 30px;
} figure > img {
-webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; display: block; max-width: 100%; height: auto; margin: 0;
} figcaption {
font-size: $caption-font-size; line-height: 1.52947; font-weight: 600; letter-spacing: -.021em; margin-top: 5px; margin-bottom: 15px; text-align: center
}
/**
* Lists */
ul, ol {
margin-left: 1.17647em;
}
li {
> ul, > ol { margin-bottom: 0; }
}
/**
* Headings */
h1, h2, h3, h4, h5, h6 {
font-weight: $heavy-font-weight; code { font-size: inherit; }
}
// h1 { font-size: 2.2em; } // h2 { font-size: 1.7em; } // h3 { font-size: 1.17em; } // h4 { font-size: 1.12em; } // h5 { font-size: .83em; } // h6 { font-size: .75em; }
/**
* Links */
a {
color: var(--link-color); text-decoration: none; &:visited { color: var(--link-visited-color); } &:hover { color: var(--text-color); opacity: $link-hover-opacity; }
}
/**
* Blockquotes */
blockquote {
color: $grey-color; border-left: 4px solid var(--grey-color-light); padding-left: $spacing-unit / 2; font-size: $blockquote-font-size; letter-spacing: -1px; font-style: italic; > :last-child { margin-bottom: 0; }
}
/**
* Rules */
hr {
border: 0; height: 1px; background: #d6d6d6; margin: 40px 0
}
/**
* Code formatting */
pre, code {
font-family: $monospace-font-family; font-size: 14px;
}
code {
border: 0; padding: 1px 5px;
}
pre {
padding: 20px 20px; overflow-x: auto; word-wrap: normal; > code { // border: 0; padding-right: 0; padding-left: 0; }
}
/**
* Wrapper */
.wrapper {
width: var(--content-width); max-width: 95%; margin-right: auto; margin-left: auto; @extend %clearfix; @include media-query($on-medium) { width: 792px; } @include media-query($on-small) { width: 90%; // Original 87.5% }
}
/**
* Clearfix */
%clearfix:after {
content: ""; display: table; clear: both;
}