From 02c3891865c7741b8f772aea75cc01564d2f0ff4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 1 Jun 2020 15:44:04 +0800 Subject: Remove jQuery --- assets/scss/_fuji-theme/_base.scss | 63 ++++++++++ assets/scss/_fuji-theme/_dark-diff.scss | 35 ++++++ assets/scss/_fuji-theme/_dark.scss | 171 --------------------------- assets/scss/_fuji-theme/_light.scss | 135 --------------------- assets/scss/_fuji-theme/_style.scss | 203 ++++++++++++++++++++++++++++++++ 5 files changed, 301 insertions(+), 306 deletions(-) create mode 100644 assets/scss/_fuji-theme/_base.scss create mode 100644 assets/scss/_fuji-theme/_dark-diff.scss delete mode 100644 assets/scss/_fuji-theme/_dark.scss delete mode 100644 assets/scss/_fuji-theme/_light.scss create mode 100644 assets/scss/_fuji-theme/_style.scss (limited to 'assets/scss/_fuji-theme') diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss new file mode 100644 index 0000000..d35d8b6 --- /dev/null +++ b/assets/scss/_fuji-theme/_base.scss @@ -0,0 +1,63 @@ +@mixin light { + --color-mode: 'light'; + --color-primary: #8aa2d3; // https://irocore.com/aofuji/ + --color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/ + --color-focus: #3b469b; // https://irocore.com/aomurasaki/ + --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ + --color-font: #3f4551; // https://irocore.com/konnezu/ + --color-divider: #e5e2e4; // https://irocore.com/komachinezu/ + --color-bg: #fffffd; // https://irocore.com/shiro/ + --color-codebg: #f6f8fa; // GitHub +} + +@mixin dark { + --color-mode: 'dark'; + --color-primary: #8aa2d3; // https://irocore.com/aofuji/ + --color-secondary: #bab1df; // kai https://irocore.com/fujimurasaki/ + --color-focus: #e6e6e6; // https://irocore.com/shironezumi/ + --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ + --color-font: #c0c0c0; // https://irocore.com/gin-iro/ + --color-divider: #4d5158; // Discord + --color-bg: #2f3136; // Discord + --color-codebg: #414449; // kai GitHub +} + +body[data-theme='auto'] { + @include light(); + + @media (prefers-color-scheme: dark) { + @include dark(); + @import '_dark-diff'; // things different from light + } +} + +body[data-theme='light'] { + @include light(); +} + +body[data-theme='dark'] { + @include dark(); + @import '_dark-diff'; // things different from light +} + +@mixin link-1 { + a { + color: var(--color-primary); + } + + a:hover { + color: var(--color-secondary); + } +} + +@mixin link-2 { + a { + color: var(--color-secondary); + } + + a:hover { + color: var(--color-focus); + } +} + +$divider: 2px solid var(--color-divider); diff --git a/assets/scss/_fuji-theme/_dark-diff.scss b/assets/scss/_fuji-theme/_dark-diff.scss new file mode 100644 index 0000000..55f596f --- /dev/null +++ b/assets/scss/_fuji-theme/_dark-diff.scss @@ -0,0 +1,35 @@ +img { + filter: brightness(60%); +} + +table { + th, + td { + border-color: var(--color-font); + } + + tr { + background-color: var(--color-bg); + border-color: var(--color-font); + + &:nth-child(2n) { + background-color: var(--color-divider); + } + } +} + +#post-aplayer { + background-color: var(--color-divider); +} + +.aplayer .aplayer-info .aplayer-music .aplayer-author { + color: var(--color-font) !important; +} + +.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { + fill: var(--color-font) !important; +} + +.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { + fill: var(--color-focus) !important; +} diff --git a/assets/scss/_fuji-theme/_dark.scss b/assets/scss/_fuji-theme/_dark.scss deleted file mode 100644 index 9be3b61..0000000 --- a/assets/scss/_fuji-theme/_dark.scss +++ /dev/null @@ -1,171 +0,0 @@ -$color-primary-dark: #8aa2d3; // https://irocore.com/aofuji/ -$color-primary-dark-dark: #e6e6e6; // https://irocore.com/shironezumi/ -$color-secondary-dark: #bab1df; // https://irocore.com/fujimurasaki/ -$color-mute-dark: #9ea1a3; // https://irocore.com/suzu-iro/ -$color-font-dark: #c0c0c0; // https://irocore.com/gin-iro/ -$color-divider-dark: #4d5158; // discord -$color-bg-dark: #2f3136; // discord - -$divider-dark: 2px solid $color-divider-dark; - -@mixin link-1 { - a { - color: $color-primary-dark; - } - - a:hover { - color: $color-secondary-dark; - } -} - -@mixin link-2 { - a { - color: $color-secondary-dark; - } - - a:hover { - color: $color-primary-dark-dark; - } -} - -body[data-theme='dark'] { - background-color: $color-bg-dark; - color: $color-font-dark; - - @include link-1(); - - .post-summary, - .post-meta { - @include link-2(); - } - - .pag-current a, - .pag-current a:hover { - color: $color-primary-dark-dark; - } - - .title-sub, - .post-meta { - color: $color-mute-dark; - } - - header, - .page-info { - border-bottom: $divider-dark; - } - - .post + .post, - .pagination, - footer { - border-top: $divider-dark; - } - - .post-meta-archive { - @include link-2(); - - color: $color-mute-dark; - } - - @media screen and (max-width: $width-md) { - .sidebar { - border-top: $divider-dark; - } - } - - // single page part - .post-content { - @include link-2(); - } - - .markdown-body { - h1, - h2, - h3, - h4, - h5, - h6 { - color: $color-primary-dark; - } - - h1, - h2 { - border-bottom: $divider-dark; - } - - blockquote { - color: $color-mute; - } - - img { - border-radius: 2px; - background-color: inherit; // fix white pixels under border-radius - } - - hr { - height: 2px; - } - } - - .post-loading, - .post-comment .utterances-frame, - .post-comment #disqus_thread { - border-top: $divider-dark; - } - - // components - .btn { - div { - background-color: $color-divider-dark; - color: $color-primary-dark; - } - - div:hover { - background-color: $color-primary-dark; - color: $color-divider-dark; - } - - div + div { - border-top: 2px solid $color-bg-dark; - } - } - - // prism.js theme [tomorrow-dark] - @import '../../css/prism-solarizeddark'; - - // diff from light - img { - filter: brightness(60%); - } - - table { - th, - td { - border-color: $color-font-dark; - } - - tr { - background-color: $color-bg-dark; - border-color: $color-font-dark; - - &:nth-child(2n) { - background-color: $color-divider-dark; - } - } - } - - #post-aplayer { - background-color: $color-divider-dark; - } - - .aplayer .aplayer-info .aplayer-music .aplayer-author { - color: $color-font-dark !important; - } - - .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { - fill: $color-font-dark !important; - } - - .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { - fill: $color-primary-dark-dark !important; - } -} diff --git a/assets/scss/_fuji-theme/_light.scss b/assets/scss/_fuji-theme/_light.scss deleted file mode 100644 index 02749ed..0000000 --- a/assets/scss/_fuji-theme/_light.scss +++ /dev/null @@ -1,135 +0,0 @@ -$color-primary: #8aa2d3; // https://irocore.com/aofuji/ -$color-primary-dark: #3b469b; // https://irocore.com/aomurasaki/ -$color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/ -$color-mute: #9ea1a3; // https://irocore.com/suzu-iro/ -$color-font: #3f4551; // https://irocore.com/konnezu/ -$color-divider: #e5e2e4; // https://irocore.com/komachinezu/ -$color-bg: #fffffd; // https://irocore.com/shiro/ - -$divider: 2px solid $color-divider; - -@mixin link-1 { - a { - color: $color-primary; - } - - a:hover { - color: $color-secondary; - } -} - -@mixin link-2 { - a { - color: $color-secondary; - } - - a:hover { - color: $color-primary-dark; - } -} - -body[data-theme='light'] { - background-color: $color-bg; - color: $color-font; - - @include link-1(); - - .post-summary, - .post-meta { - @include link-2(); - } - - .pag-current a, - .pag-current a:hover { - color: $color-primary-dark; - } - - .title-sub, - .post-meta { - color: $color-mute; - } - - header, - .page-info { - border-bottom: $divider; - } - - .post + .post, - .pagination, - footer { - border-top: $divider; - } - - .post-meta-archive { - @include link-2(); - - color: $color-mute; - } - - @media screen and (max-width: $width-md) { - .sidebar { - border-top: $divider; - } - } - - // single page part - .post-content { - @include link-2(); - } - - .markdown-body { - h1, - h2, - h3, - h4, - h5, - h6 { - color: $color-primary; - } - - h1, - h2 { - border-bottom: $divider; - } - - blockquote { - color: $color-mute; - } - - img { - border-radius: 2px; - background-color: inherit; // fix white pixels under border-radius - } - - hr { - height: 2px; - } - } - - .post-loading, - .post-comment .utterances-frame, - .post-comment #disqus_thread { - border-top: $divider; - } - - // components - .btn { - div { - background-color: $color-divider; - - color: $color-primary; - } - - div:hover { - background-color: $color-primary; - color: $color-divider; - } - - div + div { - border-top: 2px solid $color-bg; - } - } - - // prism.js theme [olarized-light] - @import '../../css/prism-solarizedlight'; -} diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss new file mode 100644 index 0000000..b2266e6 --- /dev/null +++ b/assets/scss/_fuji-theme/_style.scss @@ -0,0 +1,203 @@ +::selection, +::-moz-selection { + color: var(--color-bg); + background-color: var(--color-primary); +} + +body { + background-color: var(--color-bg); + color: var(--color-font); + + @include link-1(); +} + +.post-summary, +.post-meta { + @include link-2(); +} + +.pag-current a, +.pag-current a:hover { + color: var(--color-focus); +} + +.title-sub, +.post-meta { + color: var(--color-mute); +} + +header, +.page-info { + border-bottom: $divider; +} + +.post + .post, +.pagination, +footer { + border-top: $divider; +} + +.post-meta-archive { + @include link-2(); + + color: var(--color-mute); +} + +@media screen and (max-width: $width-md) { + .sidebar { + border-top: $divider; + } +} + +// single page part +.post-content { + @include link-2(); +} + +.markdown-body { + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--color-primary); + } + + h1, + h2 { + border-bottom: $divider; + } + + blockquote { + color: var(--color-mute); + } + + img { + border-radius: 2px; + background-color: inherit; // fix white pixels under border-radius + } + + hr { + height: 2px; + } + + pre, + code { + background-color: var(--color-codebg); + } +} + +.post-loading, +.post-comment .utterances-frame, +.post-comment #disqus_thread { + border-top: $divider; +} + +// components +.btn { + div { + background-color: var(--color-divider); + + color: var(--color-primary); + } + + div:hover { + background-color: var(--color-primary); + color: var(--color-divider); + } + + div + div { + border-top: 2px solid var(--color-bg); + } +} + +// prism.js theme [solarized-light] + +code[class*='language-'], +pre[class*='language-'] { + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #93a1a1; /* base1 */ +} + +.token.punctuation { + color: #586e75; /* base01 */ +} + +.token.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #268bd2; /* blue */ +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.url, +.token.inserted { + color: #2aa198; /* cyan */ +} + +.token.entity { + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #859900; /* green */ +} + +.token.function, +.token.class-name { + color: #b58900; /* yellow */ +} + +.token.regex, +.token.important, +.token.variable { + color: #cb4b16; /* orange */ +} + +.token.important, +.token.bold { + font-weight: 600; +} +.token.italic { + font-style: italic; +} + +// fix conflicts of primer css & prism.js style +pre, +code { + .rule { + margin: 0; + border-bottom: none; + overflow: inherit; + + &::before, + &::after { + display: inherit; + clear: inherit; + } + } +} -- cgit v1.2.3