@import “normalize”; @import “rouge-github”; @import “variables”; @import url('fonts.googleapis.com/css?family=Open+Sans:400,700');
@mixin large {
@media screen and (min-width: #{$large-breakpoint}) { @content; }
}
@mixin medium {
@media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) { @content; }
}
@mixin small {
@media screen and (max-width: #{$medium-breakpoint}) { @content; }
}
-
{ box-sizing: border-box;
}
body {
padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: $body-text-color;
}
skip-to-content {
height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; &:focus { position: fixed; top: 10px; left: 10px; height: auto; width: auto; background: invert($body-link-color); outline: thick solid invert($body-link-color); }
}
a {
color: $body-link-color; text-decoration: none; &:hover { color: $body-link-color-hover; text-decoration: none; }
}
.btn {
display: inline-block; margin-bottom: 1rem; color: rgba($color-thunder, 0.8); background-color: rgba($color-thunder, 0.08); border-color: rgba($color-thunder, 0.4); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; &:hover { color: rgba($color-thunder, 0.8); text-decoration: none; background-color: rgba($color-thunder, 0.2); border-color: rgba($color-thunder, 0.3); } + .btn { margin-left: 1rem; } @include large { padding: 0.75rem 1rem; } @include medium { padding: 0.6rem 0.9rem; font-size: 0.9rem; } @include small { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; + .btn { margin-top: 1rem; margin-left: 0; } }
}
.page-header {
color: $header-heading-color; text-align: center; background-color: $header-bg-color; background: $beer; background-repeat: no-repeat; @include large { padding: 5rem 6rem; } @include medium { padding: 3rem 4rem; } @include small { padding: 2rem 1rem; } * { position: relative; z-index: 12; }
}
.project-name {
margin-top: 0; margin-bottom: 0.1rem; @include large { font-size: 3.25rem; } @include medium { font-size: 2.25rem; } @include small { font-size: 1.75rem; }
}
.project-tagline {
margin-bottom: 2rem; font-weight: normal; opacity: 0.7; @include large { font-size: 1.25rem; } @include medium { font-size: 1.15rem; } @include small { font-size: 1rem; }
}
.main-content {
word-wrap: break-word; :first-child { margin-top: 0; } @include large { max-width: 64rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } @include medium { padding: 2rem 4rem; font-size: 1.1rem; } @include small { padding: 2rem 1rem; font-size: 1rem; } kbd { background-color: #fafbfc; border: 1px solid #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; box-shadow: inset 0 -1px 0 #959da5; color: #444d56; display: inline-block; font-size: 11px; line-height: 10px; padding: 3px 5px; vertical-align: middle; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; color: $section-headings-color; } p { margin-bottom: 1em; } code { padding: 2px 4px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9rem; color: $code-text-color; background-color: $code-bg-color; border-radius: 0.3rem; } pre { padding: 0.8rem; margin-top: 0; margin-bottom: 1rem; font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace; color: $code-text-color; word-wrap: normal; background-color: $code-bg-color; border: solid 1px $border-color; border-radius: 0.3rem; > code { padding: 0; margin: 0; font-size: 0.9rem; color: $code-text-color; word-break: normal; white-space: pre; background: transparent; border: 0; } } .highlight { margin-bottom: 1rem; pre { margin-bottom: 0; word-break: normal; } } .highlight pre, pre { padding: 0.8rem; overflow: auto; font-size: 0.9rem; line-height: 1.45; border-radius: 0.3rem; -webkit-overflow-scrolling: touch; } pre code, pre tt { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; &:before, &:after { content: normal; } } ul, ol { margin-top: 0; } blockquote { padding: 0 1rem; margin-left: 0; color: $blockquote-text-color; border-left: 0.3rem solid $blockquote-bar-color; > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } } table { display: block; width: 100%; overflow: auto; word-break: normal; word-break: keep-all; // For Firefox to horizontally scroll wider tables. -webkit-overflow-scrolling: touch; th { font-weight: bold; } th, td { padding: 0.5rem 1rem; border: 1px solid $table-border-color; } } dl { padding: 0; dt { padding: 0; margin-top: 1rem; font-size: 1rem; font-weight: bold; } dd { padding: 0; margin-bottom: 1rem; } } hr { height: 2px; padding: 0; margin: 1rem 0; background-color: $hr-border-color; border: 0; }
}
.site-footer {
padding-top: 2rem; margin-top: 2rem; border-top: solid 1px $hr-border-color; @include large { font-size: 1rem; } @include medium { font-size: 1rem; } @include small { font-size: 0.9rem; }
}
.site-footer-owner {
display: block; font-weight: bold;
}
.site-footer-credits {
color: $blockquote-text-color;
}
.bubble-container {
position: relative;
}