diff options
Diffstat (limited to 'assets/sass/style.sass')
| -rw-r--r-- | assets/sass/style.sass | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/assets/sass/style.sass b/assets/sass/style.sass new file mode 100644 index 0000000..1562eb4 --- /dev/null +++ b/assets/sass/style.sass @@ -0,0 +1,211 @@ +@import "variables" +@import "colors/{{ site.Params.colortheme }}" +@import "util" +@import "mixins" +@import "extend" +@import "fonts" + +// global-reset() + +*, *:before, *:after + box-sizing: border-box + +html + margin: 0 + padding: 0 + height: 100% + border-top: 2px solid $color-text + -webkit-text-size-adjust: 100% + -ms-text-size-adjust: 100% + +body + margin: 0 + height: 100% + background-color: $color-background + color: $color-text + font-display: swap // @stylint ignore + font-weight: 400 + font-size: $font-size + font-family: $font-family-body + line-height: $line-height + text-rendering: geometricPrecision + flex: 1 + + @include antialias() + + @extend $base-style !optional + +.content + position: relative + display: flex + flex-direction: column + min-height: 100% + overflow-wrap: break-word + + p + @include hyphens(auto) + + code + @include hyphens(manual) + + a + color: $color-text + text-decoration: none + + @include underline(5px, $color-text) + + &:hover + background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link) + + a.icon + background: none + + &:hover + color: $color-link + + h1 a, .h1 a, h2 a, h3 a, h4 a, h5 a, h6 a + background: none + color: inherit + text-decoration: none + + h1 a:hover, .h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover + @include underline(6px, $color-link) + + h6 + a + background: none + color: inherit + text-decoration: none + + h6 + a:hover + @include underline(6px, $color-link) + +@media (min-width: 540px) + .image-wrap + flex-direction: row + margin-bottom: 2rem + + .image-block + flex: 1 0 35% + margin-right: 2rem + + p + flex: 1 0 65% + +.max-width + max-width: $page-width + +@media (max-width: 480px) + // smaller margins at smaller screen widths + .px3 + padding-right: 1rem + padding-left: 1rem + + .my4 + margin-top: 2rem + margin-bottom: 2rem + +@media (min-width: 480px) + p + text-align: justify + +@import "partial/header" +@import "partial/post/actions_desktop" +@import "partial/post/actions_mobile" +@import "partial/index" +@import "partial/article" +@import "partial/archive" +@import "partial/comments" +@import "partial/footer" +@import "partial/pagination" +@import "partial/search" +@import "partial/tags" +@import "partial/tooltip" +@import "partial/categories" +// Code +// @import "highlight/" + $highlight + +pre + overflow-x: auto + padding: 10px 15px + padding-bottom: 0 + border: 1px dotted $color-border + border-radius: 4px + font-size: 13px + font-family: $font-family-mono + line-height: 22px + -webkit-border-radius: 4px + + code + display: block + padding: 0 + border: none + +code + padding: 0 5px + border: 1px dotted $color-border + border-radius: 2px + -webkit-border-radius: 2px + +.highlight + overflow-x: auto + margin: 1rem 0 + padding: 10px 15px + border-radius: 4px + background: $color-background-code + font-family: $font-family-mono + // color: $color-accent-3 + -webkit-border-radius: 4px + + figcaption + margin: -5px 0 5px + color: $color-meta-code + font-size: .9em + zoom: 1 + + a + float: right + color: $color-meta-code + font-style: italic + font-size: .8em + @include underline(10px, $color-link) + + a:hover + color: lighten($color-meta-code,20%) + + &:before + content: "" + display: table + + &:after + clear: both + + &:hover + .btn-copy + opacity: 1 + + .btn-copy + font-size: 1.2rem + position: absolute + right: 20px + opacity: 0 + transition: opacity 0.2s ease-in + &:hover + color: $color-accent-1 + + pre + margin: 0 + padding: 0 + border: none + background: none + + table + width: auto + + td.gutter + text-align: right + opacity: .2 + + .line + height: 22px |