diff options
author | kimcc <15278020+kimcc@users.noreply.github.com> | 2020-04-16 01:24:45 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-16 01:24:45 +0300 |
commit | a49a6d3f98007643c4c30793324430eb492f3cc6 (patch) | |
tree | 3d2e6289a1a6747ba0720eebf472c41701d25460 /assets | |
parent | 2d4b6d7355b32630cab34337c5d8158ef1acfae7 (diff) | |
parent | bd6a3c34fbbf66df87967069d415a126cd7ee296 (diff) |
Merge branch 'master' into hide-horizontal-scrollbar-on-mobile
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/main.scss | 515 |
1 files changed, 264 insertions, 251 deletions
diff --git a/assets/css/main.scss b/assets/css/main.scss index 5a6dc2c..5405599 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -35,38 +35,38 @@ body { } html { - margin: 0; - line-height: 170%; - -ms-overflow-style: -ms-autohiding-scrollbar; + margin: 0; + line-height: 170%; + -ms-overflow-style: -ms-autohiding-scrollbar; } body { - color: $gray-dark; - font-family: $sans-serif; - margin: 0; - font-size: 1.1rem; + color: $gray-dark; + font-family: $sans-serif; + margin: 0; + font-size: 1.1rem; } // TEXT article p { - a { - text-decoration: underline; - text-decoration-skip-ink: auto; - color: $gray-dark; - } + a { + text-decoration: underline; + text-decoration-skip-ink: auto; + color: $gray-dark; + } } article .post-footer>a { - text-decoration: none; + text-decoration: none; } h1 { - font-size: 1.9em; - padding-top: 0.2em; - margin: 0.5em 0em 0.75em 0em; - font-family: $serif; - font-weight: 600; - line-height: 1.3em; + font-size: 1.9em; + padding-top: 0.2em; + margin: 0.5em 0em 0.75em 0em; + font-family: $serif; + font-weight: 600; + line-height: 1.3em; } h2, @@ -74,422 +74,435 @@ h3, h4, h5, h6 { - margin: 1.25em 0em 0.75em 0em; - font-family: $serif; - font-weight: 600; + margin: 1.25em 0em 0.75em 0em; + font-family: $serif; + font-weight: 600; } h2 { - font-size: 1.25em; - line-height: 1.4em; - - a { - text-decoration: none; - position: relative; - text-shadow: 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white, 2px -2px 0 white, 2px -1px 0 white, 2px 0px 0 white, -2px -2px 0 white, -2px -1px 0 white, -2px 0px 0 white, 1px -2px 0 white, 1px -1px 0 white, 1px 0px 0 white, -1px -2px 0 white, -1px -1px 0 white, -1px 0px 0 white, 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white; - box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 transparent inset; - background-size: 1px 1em; - position: relative; - transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); - - &:hover { - box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 $gray-dark inset; - transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); + font-size: 1.25em; + line-height: 1.4em; + + a { + text-decoration: none; + position: relative; + text-shadow: 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white, 2px -2px 0 white, 2px -1px 0 white, 2px 0px 0 white, -2px -2px 0 white, -2px -1px 0 white, -2px 0px 0 white, 1px -2px 0 white, 1px -1px 0 white, 1px 0px 0 white, -1px -2px 0 white, -1px -1px 0 white, -1px 0px 0 white, 0px -2px 0 white, 0px -1px 0 white, 0px 0px 0 white; + box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 transparent inset; + background-size: 1px 1em; + position: relative; + transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1); + + &:hover { + box-shadow: 0 -1px 0 0 white inset, 0 -2px 0 0 $gray-dark inset; + transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); + } } - } } h5, h6 { - font-weight: 700; - line-height: 1.3em; + font-weight: 700; + line-height: 1.3em; } h4 { - line-height: 1.3em; + line-height: 1.3em; } h3 { - font-size: 1.1em; - line-height: 1.3em; + font-size: 1.1em; + line-height: 1.3em; } p { - margin: 0em 0 1em 0; + margin: 0em 0 1em 0; } // LINKS AND TAGS a { - text-decoration: underline; - text-decoration-skip-ink: auto; - color: $gray-dark; + text-decoration: underline; + text-decoration-skip-ink: auto; + color: $gray-dark; } a, a>svg { - transition: 0.1s cubic-bezier(0.075, 0.82, 0.165, 1); + transition: 0.1s cubic-bezier(0.075, 0.82, 0.165, 1); } a:visited { - color: $gray-dark; + color: $gray-dark; } .color-link { - text-decoration: none; - color: $teal; - font-family: $sans-serif; - margin-right: 1.5em; + text-decoration: none; + color: $teal; + font-family: $sans-serif; + margin-right: 1.5em; } .color-link:visited { - color: $teal; + color: $teal; } .color-link:hover { - color: $teal-darker; + color: $teal-darker; - .color-arrow { - fill: $teal-darker; - } + .color-arrow { + fill: $teal-darker; + } } .tag { - margin-right: 0.75em; - margin-bottom: 1em; - line-height: 1.75em; - color: $gray-light; + margin-right: 0.75em; + margin-bottom: 1em; + line-height: 1.75em; + color: $gray-light; } .tag:visited { - color: $gray-light; + color: $gray-light; } .tag:hover { - color: $gray-medium; + color: $gray-medium; } // ARTICLE FORMATTING time { - margin-right: 1.5em; - color: $gray-light; + margin-right: 1.5em; + color: $gray-light; } hr { - border: 0; - height: 0; - border-bottom: 1px solid $gray-lightest; + border: 0; + height: 0; + border-bottom: 1px solid $gray-lightest; } ul, ol { - margin: 1em 0em; - padding-left: 2em; + margin: 1em 0em; + padding-left: 2em; } li { - line-height: 150%; + line-height: 150%; } mark { - background-color: $highlight; + background-color: $highlight; } blockquote { - border-left: 4px solid $gray-lightest; - padding-left: 1.3em; - margin-left: 0em; - margin-top: 0em; + border-left: 4px solid $gray-lightest; + padding-left: 1.3em; + margin-left: 0em; + margin-top: 0em; - p { - margin-bottom: 0em; - } + p { + margin-bottom: 0em; + } } cite { - font-size: 0.95em; + font-size: 0.95em; } pre { - padding: 1em; - background-color: $gray-background; - max-width: 100%; - overflow: scroll; + padding: 1em; + background-color: $gray-background; + max-width: 100%; + overflow: scroll; } p code, kbd { - font-size: 0.95rem; - background: $gray-background; - padding: 0.2em; + font-size: 0.95rem; + background: $gray-background; + padding: 0.2em; } code, pre, kbd { - font-family: $code; - font-size: 0.95rem; - line-height: 154%; + font-family: $code; + font-size: 0.95rem; + line-height: 154%; } .table-wrapper { - overflow-x: auto; + overflow-x: auto; } table { - max-width: 100%; - border-spacing: 0; + max-width: 100%; + border-spacing: 0; - thead { - background: $gray-background; - } + thead { + background: $gray-background; + } - th, - td { - padding: 0.5em 1em; - border: 1px double $gray-table-border; - } + th, + td { + padding: 0.5em 1em; + border: 1px double $gray-table-border; + } } // TOP NAV nav { - padding: 0.25em 1.5em 1em 1.5em; - max-width: 100%; + padding: 0.25em 1.5em 1em 1.5em; + max-width: 100%; } .site-title { - margin: 1.5em 0em 1em 0em; - text-align: center; - line-height: 1.7em; - - a { - font-family: $serif; - font-size: 1.5em; - text-decoration: none; - margin-top: 0.75em; - } + margin: 1.5em 0em 1em 0em; + text-align: center; + line-height: 1.7em; + + a { + font-family: $serif; + font-size: 1.5em; + text-decoration: none; + margin-top: 0.75em; + } } .nav-menu { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; } .nav-link { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } .description { - font-style: italic; - color: $gray-medium; - text-align: center; - margin-bottom: 3.7em; - margin-top: -0.75em; + font-style: italic; + color: $gray-medium; + text-align: center; + margin-bottom: 3.7em; + margin-top: -0.75em; } // CONTENT .content-container { - padding: 0.5em 1.5em 0em 1.5em; - margin: 0em; - max-width: 100%; + padding: 0.5em 1.5em 0em 1.5em; + margin: 0em; + max-width: 100%; } .paginator { - flex-shrink: 0; - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-top: 1em; - padding-bottom: 1.5em; - align-items: center; - - .older { - margin-left: 1em; - } - - p { - font-size: 0.95rem; - margin: 0px; - } + flex-shrink: 0; + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-top: 1em; + padding-bottom: 1.5em; + align-items: center; + + .older { + margin-left: 1em; + } - a { - text-decoration: none; - color: $teal; - font-size: 0.95rem; - } + p { + font-size: 0.95rem; + margin: 0px; + } + + a { + text-decoration: none; + color: $teal; + font-size: 0.95rem; + } } // ARTICLE CONTENT .article-content { - flex: 1 0 auto; + flex: 1 0 auto; +} + +.article-figure { + margin: 0 0 1em; +} + +.article-image { + max-width: 100%; + margin: 0 0 1em; } .canon { - width: 100%; - height: auto; + width: 100%; + height: auto; } .footnote-ref { - a { - margin-left: 0.3em; - } + a { + margin-left: 0.3em; + } - a::before { - content: "["; - } + a::before { + content: "["; + } - a::after { - content: "]"; - } + a::after { + content: "]"; + } } .emojify { - font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; - font-size: 1.5rem; - vertical-align: middle; + font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; + font-size: 1.5rem; + vertical-align: middle; } // SHORTCODE CONTENT .twitter-tweet { - font-family: $sans-serif !important; - border-left: 4px solid $teal !important; - color: $gray-dark !important; - font-size: 1rem !important; - font-style: italic !important; - margin-left: 0em; - padding-left: 1.3em !important; - - p { - font-size: 1.1em; - font-style: normal; - margin-bottom: 1em; - line-height: 155%; - } - - a { + font-family: $sans-serif !important; + border-left: 4px solid $teal !important; color: $gray-dark !important; - text-decoration: underline !important; - } + font-size: 1rem !important; + font-style: italic !important; + margin-left: 0em; + padding-left: 1.3em !important; + + p { + font-size: 1.1em; + font-style: normal; + margin-bottom: 1em; + line-height: 155%; + } + + a { + color: $gray-dark !important; + text-decoration: underline !important; + } - a:hover, - a:focus { - text-decoration: underline !important; - } + a:hover, + a:focus { + text-decoration: underline !important; + } } .__h_instagram.card { - font-family: $sans-serif !important; - font-size: 1.1em !important; - border: 1px solid $gray-light; - margin-top: 1.2em !important; + font-family: $sans-serif !important; + font-size: 1.1em !important; + border: 1px solid $gray-light; + margin-top: 1.2em !important; } // ARTICLE FOOTER +.kofi-button { + margin: 0.75em 0em 0.5em 0em; +} + .post-footer { - font-size: 0.95rem; - color: $gray-light; - border-bottom: 1px solid $gray-lightest; - padding-bottom: 1.8em; + font-size: 0.95rem; + color: $gray-light; + border-bottom: 1px solid $gray-lightest; + padding-bottom: 1.8em; } .hidden { - visibility: hidden; - border-bottom: 0px solid; + visibility: hidden; + border-bottom: 0px solid; } .page-footer { - padding: 1.5em 0em 2em 0em; - font-size: 0.95rem; - color: $gray-light; - - a { - text-decoration: none; + padding: 1.5em 0em 2em 0em; + font-size: 0.95rem; color: $gray-light; - } + + a { + text-decoration: none; + color: $gray-light; + } } .footer-divider { - color: $gray-lightest; - margin-bottom: 1.5em; + color: $gray-lightest; + margin-bottom: 1.5em; } // ARCHIVES PAGE .archives-list { - padding-left: 0em; + padding-left: 0em; } .archives-list-item { - display: flex; - margin: 0.5em 0em; + display: flex; + margin: 0.5em 0em; } .archives-list-item-date { - width: 60px; - margin-right: 0.25em; - color: $gray-light; + width: 60px; + margin-right: 0.25em; + color: $gray-light; } // 404 PAGE .not-found-title { - margin-bottom: 0em; + margin-bottom: 0em; } // MAIN FOOTER .footer { - visibility: hidden; - height: 0; + visibility: hidden; + height: 0; } .footer-mobile { - margin-top: 2em; - max-width: 100%; - padding: 0em 1.5em 0.75em 1.5em; - overflow: hidden; - - .footer-mobile-links { - display: flex; - justify-content: center; - } + margin-top: 2em; + max-width: 100%; + padding: 0em 1.5em 0.75em 1.5em; + overflow: hidden; + + .footer-mobile-links { + display: flex; + justify-content: center; + } - .divider-bar { - color: $gray-light; - padding: 0em 0.25em; - } + .divider-bar { + color: $gray-light; + padding: 0em 0.25em; + } } footer { - text-align: center; + text-align: center; - .social-icons { - margin: 0 0 1.25em -.5em; - } + .social-icons { + margin: 0 0 1.25em -.5em; + } - .social-icon { - padding: 0.3em 0.5em; - margin: 0.32em 0.1em; - display: inline-block; - height: 2em; - position: relative; - } + .social-icon { + padding: 0.3em 0.5em; + margin: 0.32em 0.1em; + display: inline-block; + height: 2em; + position: relative; + } - .social-icon>svg:hover { - fill: $gray-medium; - } + .social-icon>svg:hover { + fill: $gray-medium; + } - a { - text-decoration: none; - font-size: 0.95rem; - color: $gray-light; - } + a { + text-decoration: none; + font-size: 0.95rem; + color: $gray-light; + } - a:visited { - color: $gray-light; - } + a:visited { + color: $gray-light; + } - a:hover { - color: $gray-medium; - } + a:hover { + color: $gray-medium; + } } // BREAKPOINTS |