@import "normalize"; @import "rouge-github"; @import "variables"; @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; } a { color: $body-link-color; text-decoration: none; &:hover { text-decoration: underline; } } .btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); 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(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 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-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color); @include large { padding: 5rem 6rem; } @include medium { padding: 3rem 4rem; } @include small { padding: 2rem 1rem; } small a { color: $header-heading-color; } } .project-name { margin-top: 0; margin-bottom: 0.1rem; a { text-decoration: none; color: $header-heading-color; } @include large { font-size: 3.25rem; } @include medium { font-size: 2.25rem; } @include small { font-size: 1.75rem; } } .project-tagline { font-weight: normal; opacity: 0.7; margin-bottom: 0; @include large { font-size: 1.25rem; } @include medium { font-size: 1.15rem; } @include small { font-size: 1rem; } } .project-torlink { opacity: 0.7; a { text-decoration: underline; } } .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; } 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 $border-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; } } aside nav { text-align: center; margin: 0 auto; ul { padding: 0; list-style: none; li { display: inline-block; width: 180px; a { color: $header-heading-color; font-weight: bold; } } } } #post-list { ul { padding: 0; list-style: none; li { .post-list-meta { display: block; } margin-bottom: 25px; } } } #post-navigation { text-align: center; .post-nav-prev { width: 30%; display: inline-block; } .post-nav-next { width:30%; display: inline-block; } } .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; }