diff --git a/themes/secluded/assets/scss/_main.scss b/themes/secluded/assets/scss/_main.scss index 4811ec5..fc06cec 100644 --- a/themes/secluded/assets/scss/_main.scss +++ b/themes/secluded/assets/scss/_main.scss @@ -1,163 +1,174 @@ html { - scroll-behavior: smooth; + scroll-behavior: smooth; } body { - font-family: Heliotrope; - color: $dark; - background: $light; + font-family: Heliotrope; + color: $dark; + background: $light; } hr { - margin: 15px 0; - border: 1px solid $dark; + margin: 15px 0; + border: 1px solid $dark; } code { - background: $button-background; - border-radius: 3px; - padding: 0 4px; + background: $button-background; + border-radius: 3px; + padding: 0 4px; } -code, pre { - font-size: 16px; - font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; - color: $dark; +code, +pre { + font-size: 16px; + font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + color: $dark; } input { - font-family: inherit; - text-align: center; - width: 100%; - height: 35px; - box-sizing: border-box; - box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff; - transition: .15s ease-out; + font-family: inherit; + text-align: center; + width: 100%; + height: 35px; + box-sizing: border-box; + box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff; + transition: 0.15s ease-out; } -input[type=text] { - font-size: inherit; - color: $dark; - text-decoration: italic; - border: 1px solid #9fa6ad; - border-radius: 3px; +input[type="text"] { + font-size: inherit; + color: $dark; + text-decoration: italic; + border: 1px solid #9fa6ad; + border-radius: 3px; } -input[type=text]:focus { +input[type="text"]:focus { } .wrapper { - max-width: 600px; - margin: 0 auto; - font-size: 18px; - line-height: 30px; - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - -moz-hyphens: auto; - hyphens: auto; - text-align: left; + max-width: 600px; + margin: 0 auto; + font-size: 18px; + line-height: 30px; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + -moz-hyphens: auto; + hyphens: auto; + text-align: left; } .content { - h2, p, li, td { - a { - color: $dark; - text-decoration: none; - background-image: linear-gradient(120deg,$gradient-right 0%,$gradient-left 100%); - background-repeat: no-repeat; - background-size: 0 0; - background-position: 100% 21%; - transition: .15s ease-out; - &:hover { - background-size: 100% 100%; - color: $light; - &:after { - color: $gradient-right; - } - } - &::after { - position: relative; - content: "\FEFF°"; - margin-left: 0.10em; - font-size: 90%; - top: -0.10em; - color: $light-highlight; - font-feature-settings: "caps"; - font-variant-numeric: normal; - } + h2, + p, + li, + td { + a { + color: $dark; + text-decoration: none; + background-image: linear-gradient( + 120deg, + $gradient-right 0%, + $gradient-left 100% + ); + background-repeat: no-repeat; + background-size: 0 0; + background-position: 100% 21%; + transition: 0.15s ease-out; + &:hover { + background-size: 100% 100%; + color: $light; + &:after { + color: $gradient-right; } - } - .anchor-tag { - font-size: 70%; + } + &::after { position: relative; - bottom: 2.6px; - background-size: 100% 0; - background-position: 0 150%; - &::after { - content: ""; - } + content: "\FEFF°"; + margin-left: 0.1em; + font-size: 90%; + top: -0.1em; + color: $light-highlight; + font-feature-settings: "caps"; + font-variant-numeric: normal; + } } - .footnote-ref { - background-size: 100% 1.5px; - background-position: 0 90%; - &::after { - content: ""; - } - &:hover { - background-size: 100% 100%; - color: #fff; - } + } + .anchor-tag { + font-size: 70%; + position: relative; + bottom: 2.6px; + background-size: 100% 0; + background-position: 0 150%; + &::after { + content: ""; } - .footnote-backref { - background-size: 100% 1.5px; - background-position: 0 90%; - &::after { - content: ""; - } - &:hover { - background-size: 100% 100%; - color: #fff; - } + } + .footnote-ref { + background-size: 100% 1.5px; + background-position: 0 90%; + &::after { + content: ""; } - .highlight { - code { - padding: 0px !important; - } - pre { - overflow: auto; - border-radius: 5px; - padding: 12px; - background: $button-background !important; - } - a { - background-image: none; - &::after { - content: ""; - } - } + &:hover { + background-size: 100% 100%; + color: #fff; } + } + .footnote-backref { + background-size: 100% 1.5px; + background-position: 0 90%; + &::after { + content: ""; + } + &:hover { + background-size: 100% 100%; + color: #fff; + } + } + .highlight { + code { + padding: 0px !important; + } + pre { + overflow: auto; + border-radius: 5px; + padding: 12px; + background: $button-background !important; + } + a { + background-image: none; + &::after { + content: ""; + } + } + } } .button { - font-family: inherit; - font-style: normal !important; - text-decoration: none !important; - height: 25px; - box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff; - display: inline-block; - color: $dark; - text-shadow: 0 1px 0 #fff; - background-color: #e4e6e8; - border: 1px solid #9fa6ad; - border-radius: 3px; - cursor: pointer; - padding: 0px 4px 4px; + font-family: inherit; + font-style: normal !important; + text-decoration: none !important; + height: 25px; + box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff; + display: inline-block; + color: $dark; + text-shadow: 0 1px 0 #fff; + background-color: #e4e6e8; + border: 1px solid #9fa6ad; + border-radius: 3px; + cursor: pointer; + padding: 0px 4px 4px; } .footer { - padding: 20px 0 20px 0; - text-align: center; - line-height: 30px; - a:visited { - color: $dark; - } - .ring { - font-size: 20px; - } - .boring_stuff { - font-style: italic; - } + padding: 20px 0 20px 0; + text-align: center; + line-height: 30px; + a { + color: $dark; + } + a:visited { + color: $dark; + } + .ring { + font-size: 20px; + } + .boring_stuff { + font-style: italic; + } }