summaryrefslogtreecommitdiffstats
path: root/assets/scss/_fuji-theme
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/_fuji-theme')
-rw-r--r--assets/scss/_fuji-theme/_base.scss63
-rw-r--r--assets/scss/_fuji-theme/_dark-diff.scss35
-rw-r--r--assets/scss/_fuji-theme/_style.scss311
3 files changed, 409 insertions, 0 deletions
diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss
new file mode 100644
index 0000000..d9a6f7e
--- /dev/null
+++ b/assets/scss/_fuji-theme/_base.scss
@@ -0,0 +1,63 @@
+@mixin light {
+ --color-mode: 'light';
+ --color-primary: #{$light-color-primary};
+ --color-secondary: #{$light-color-secondary};
+ --color-focus: #{$light-color-focus};
+ --color-mute: #{$light-color-mute};
+ --color-font: #{$light-color-font};
+ --color-divider: #{$light-color-divider};
+ --color-bg: #{$light-color-bg};
+ --color-codebg: #{$light-color-codebg};
+}
+
+@mixin dark {
+ --color-mode: 'dark';
+ --color-primary: #{$dark-color-primary};
+ --color-secondary: #{$dark-color-secondary};
+ --color-focus: #{$dark-color-focus};
+ --color-mute: #{$dark-color-mute};
+ --color-font: #{$dark-color-font};
+ --color-divider: #{$dark-color-divider};
+ --color-bg: #{$dark-color-bg};
+ --color-codebg: #{$dark-color-codebg};
+}
+
+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/_style.scss b/assets/scss/_fuji-theme/_style.scss
new file mode 100644
index 0000000..08359a8
--- /dev/null
+++ b/assets/scss/_fuji-theme/_style.scss
@@ -0,0 +1,311 @@
+::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,
+ strong,
+ em {
+ 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 {
+ border-top: $divider;
+}
+
+.post-comment {
+ border-top: $divider;
+
+ span.post-comment-notloaded {
+ padding: 1.5rem 0;
+ color: var(--color-secondary);
+ cursor: pointer;
+
+ &:hover {
+ color: var(--color-focus);
+ }
+ }
+}
+
+// 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;
+ }
+ }
+}
+
+// disqus js styles
+
+#dsqjs {
+ a {
+ text-decoration: none !important;
+ color: var(--color-secondary) !important;
+ }
+
+ a:hover {
+ color: var(--color-focus) !important;
+ }
+
+ .dsqjs-bullet::after {
+ color: var(--color-mute) !important;
+ font-weight: 600 !important;
+ }
+
+ .dsqjs-no-comment {
+ color: var(--color-font) !important;
+ }
+
+ .dsqjs-nav-tab {
+ color: var(--color-mute) !important;
+ }
+
+ .dsqjs-tab-active {
+ color: var(--color-font) !important;
+
+ & > span:after {
+ background-color: var(--color-secondary) !important;
+ }
+ }
+
+ .dsqjs-post-list {
+ .dsqjs-post-avatar {
+ background: var(--color-bg) !important;
+ }
+
+ .dsqjs-post-header {
+ .dsqjs-post-author {
+ color: var(--color-mute) !important;
+ font-weight: 600;
+ }
+
+ .dsqjs-admin-badge {
+ color: var(--color-font) !important;
+ background: var(--color-codebg) !important;
+ }
+
+ .dsqjs-meta {
+ color: var(--color-mute) !important;
+ }
+ }
+ }
+
+ .dsqjs-post-body {
+ color: var(--color-font) !important;
+
+ code,
+ pre {
+ background: var(--color-codebg) !important;
+ }
+
+ blockquote {
+ color: var(--color-codebg) !important;
+ border-left: 0.25em solid var(--color-divider) !important;
+ }
+ }
+
+ .dsqjs-load-more {
+ background: var(--color-mute) !important;
+ color: var(--color-bg) !important;
+ }
+
+ footer {
+ border-top: 2px solid var(--color-divider) !important;
+ font-weight: 600 !important;
+ color: var(--color-mute) !important;
+ }
+
+ .dsqjs-order-radio:checked + .dsqjs-order-label {
+ color: var(--color-font) !important;
+ background-color: var(--color-divider) !important;
+ }
+
+ .dsqjs-order-label {
+ background-color: var(--color-bg) !important;
+ }
+
+ p.dsqjs-has-more a.dsqjs-has-more-btn {
+ color: var(--color-mute) !important;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-18 01:18:28 +0000