@charset “utf-8”;
$spacing-unit: 10px; $image-size: 50px; $icon-size: 15px; $link-color: #444;
$on-palm: 768px;
// Use media queries like this: // @include media-query($on-palm) { // .wrapper { // padding-right: $spacing-unit / 2; // padding-left: $spacing-unit / 2; // } // } @mixin media-query($device) {
@media screen and (max-width: $device) { @content; }
}
code.highlighter-rouge {
padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; font-size: 85%; background-color: rgba(0,0,0,0.04); border-radius: 3px;
}
aside {
padding-right: 15px;
}
.t-hackcss { // Main prefix to avoid collisions
&-body-large { font-size: 1.25em; line-height: 1.4; h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; &:after { bottom: 7px; } } h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; } h3 { font-size: 1.17em; font-weight: bold; margin: 1.75rem 0; } a { color: $link-color; border-bottom: 1px solid $link-color; &:hover { color: white; background: $link-color; } } p { margin: 1.75rem 0; } ul, ol { display: block; list-style-type: none; padding-left: 20px; margin: 1.75rem 0; & ul { margin: .75rem 0; list-style-type: none; } } ol { list-style-type: none; } li { display: list-item; padding-left: 0; &:after { left: -16px; } } blockquote { font-size: 1.17em; margin: 1.75rem 0; padding-left: 20px; } pre { margin: 1.75rem 0; white-space: pre; } em { font-size: 1.25rem; font-style: italic; } strong { font-size: 1.25rem; font-style: bold; } hr { border: 0; height: 1px; display: block; background-color: #e2e2e2; margin: 1.75rem 0; } } // navigation.html &-navigation { padding-right: $spacing-unit; } @at-root .hack &-navigation-heading { padding-top: 20px; } // footer.html @at-root body &-footer { padding-bottom: $spacing-unit; } &-social { display: inline-block; } &-social + &-social { padding-left: $spacing-unit; } &-sm-reversed-grid.grid { @include media-query($on-palm) { flex-direction: column-reverse; } } &-icon { display: inline-block; vertical-align: middle; width: $icon-size; height: $icon-size; > svg { width: $icon-size; } } // examples.html &-media { margin-bottom: 1.25rem; } &-media-shift { max-width: $image-size; } &-media-image { display: block; max-width: 100%; height: auto; } &-cards { flex-wrap: wrap; @include media-query($on-palm) { flex-wrap: nowrap; } } &-cards-cell { padding-bottom: $spacing-unit; padding-right: $spacing-unit; } &-cards-text { margin: 0 } &-cards-image { display: block; max-width: 50%; height: auto; margin: 0 auto; } &-cards-link { text-align: center; }
}