@import “normalize”; @import 'github-markdown'; @import 'rouge-github';
$breakpoint: 767px !default;
-
{ box-sizing: border-box;
}
@mixin large {
@media screen and (min-width: #{$breakpoint + 1}) { @content; }
}
@mixin small {
@media screen and (max-width: #{$breakpoint}) { @content; }
}
.limiter {
min-width: 200px; max-width: 1000px; margin: 0 auto; padding-right: 10px; padding-left: 10px;
}
.float-right {
float: right;
}
.markdown-body {
@extend .limiter; padding: 45px 10px;
}
@media (max-width: 767px) {
.markdown-body { padding: 15px; }
}
body {
// font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
header {
padding: 1em 0; background-color: $header_background; color: $header_color; h1, h2 { margin: 0; a { color: inherit; } } h1 { text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3); } h2 { font-size: 1em; } @include large { .btn { margin-top: 10px; } }
}
footer {
border-top: $footer_border; padding: 1em 0 4em 0; .owner { opacity: 0.7; transition: opacity 0.6s; &:hover { opacity: 1; transition: opacity 0.6s; } }
}
.main-content {
min-height: 60vh;
}
a {
color: #0366d6; text-decoration: none; &:hover { text-decoration: underline; }
}
.btn {
display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.5); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; text-align: center; &:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.7); } @include large { padding: 0.75rem 1rem; + .btn { margin-left: 10px; } } @include small { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
}