From 0e9d9003112e319eace538f997219d93065e9389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=95=E3=82=BA=E3=82=AD?= <hades785@gmail.com>
Date: Thu, 4 Mar 2021 12:31:42 +0100
Subject: [PATCH] Add custom styling

---
 _config.yml                 |   3 +
 _includes/extra/styles.scss | 118 +++++++++++++++++++++
 _includes/extra/syntax.scss | 206 ++++++++++++++++++++++++++++++++++++
 3 files changed, 327 insertions(+)
 create mode 100644 _includes/extra/styles.scss
 create mode 100644 _includes/extra/syntax.scss

diff --git a/_config.yml b/_config.yml
index e9189ef..b2d0c4e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -18,3 +18,6 @@ plugins:
   - jemoji
   - jekyll-avatar
   - jekyll-mentions
+
+sass:
+  sass_dir: _includes/extra
\ No newline at end of file
diff --git a/_includes/extra/styles.scss b/_includes/extra/styles.scss
new file mode 100644
index 0000000..038ecec
--- /dev/null
+++ b/_includes/extra/styles.scss
@@ -0,0 +1,118 @@
+@import "syntax.scss";
+
+:root {
+    --background: #0F1419;
+    --background2: #14191F;
+    --background3: #24292F;
+    --text: #C9D1D9;
+    --active: #606060;
+    --accent: #39AFD7;
+
+    --toc-1: #24292F;
+    --toc-2: #282D33;
+    --toc-3: #2C3137;
+    --toc-4: #30353B;
+    --toc-5: #34393F;
+    --toc-6: #383D43;
+    --toc-7: #3C4147;
+    --toc-8: #40454B;
+    --toc-9: #44494F;
+    --toc-10: #484D53;
+    --toc-11: #4C5157;
+    --toc-12: #50555B;
+}
+
+
+.sidebar {
+    background: var(--background2) !important;
+
+    .header {
+        background: var(--background3);
+
+        input {
+            border-color: var(--accent) !important;
+            background: var(--background2) !important;
+        }
+    }
+
+    .toctree {
+        a {
+            color: var(--text) !important;
+
+            &.current {
+                background: var(--active) !important;
+            }
+        }
+
+        .caption {
+            color: var(--accent) !important;
+        }
+    }
+}
+
+body,
+.content-wrap {
+    background: var(--background) !important;
+    color: var(--text) !important;
+}
+
+a,
+.markdown-body a {
+    color: var(--accent);
+}
+
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current="false"]) {
+    color: var(--active) !important;
+}
+
+.btn {
+    background: var(--background3);
+    color: var(--text) !important;
+
+    &:hover {
+        background: #34393F;
+    }
+}
+
+code.highlighter-rouge {
+    background: var(--background3) !important;
+}
+
+.toasts {
+    &.note {
+        background: darken($color: #E7F2FA, $amount: 80%);
+        color: var(--text);
+
+        .title {
+            background: darken($color: #6AB0DE, $amount: 40%);
+        }
+    }
+
+    &.tip {
+        background: darken($color: #DBFAF4, $amount: 80%);
+        color: var(--text);
+
+        .title {
+            background: darken($color: #1ABC9C, $amount: 20%);
+        }
+    }
+
+    &.warning {
+        background: darken($color: #FBE9D9, $amount: 80%);
+        color: var(--text);
+
+        .title {
+            background: darken($color: #F0B37E, $amount: 40%);
+        }
+    }
+
+    &.danger {
+        background: darken($color: #FDF3F2, $amount: 80%);
+        color: var(--text);
+
+        .title {
+            background: darken($color: #F29F97, $amount: 40%);
+        }
+    }
+}
\ No newline at end of file
diff --git a/_includes/extra/syntax.scss b/_includes/extra/syntax.scss
new file mode 100644
index 0000000..c828c13
--- /dev/null
+++ b/_includes/extra/syntax.scss
@@ -0,0 +1,206 @@
+// https://github.com/mgyongyosi/OneDarkJekyll
+
+.highlight,
+pre.highlight {
+    background: #24292F !important;
+    color: #abb2bf !important;
+}
+
+.highlight {
+    pre {
+        background: #24292F !important;
+    }
+    .hll {
+        background: #282c34 !important;
+    }
+    .c {
+        color: #5c6370 !important;
+        font-style: italic !important;
+    }
+    .err {
+        color: #960050 !important;
+        background-color: #1e0010 !important;
+    }
+    .k {
+        color: #c678dd !important;
+    }
+    .l {
+        color: #98c379 !important;
+    }
+    .n {
+        color: #abb2bf !important;
+    }
+    .o {
+        color: #abb2bf !important;
+    }
+    .p {
+        color: #abb2bf !important;
+    }
+    .cm {
+        color: #5c6370 !important;
+        font-style: italic !important;
+    }
+    .cp {
+        color: #5c6370 !important;
+        font-style: italic !important;
+    }
+    .c1 {
+        color: #5c6370 !important;
+        font-style: italic !important;
+    }
+    .cs {
+        color: #5c6370 !important;
+        font-style: italic !important;
+    }
+    .ge {
+        font-style: italic !important;
+    }
+    .gs {
+        font-weight: 700 !important;
+    }
+    .kc {
+        color: #c678dd !important;
+    }
+    .kd {
+        color: #c678dd !important;
+    }
+    .kn {
+        color: #c678dd !important;
+    }
+    .kp {
+        color: #c678dd !important;
+    }
+    .kr {
+        color: #c678dd !important;
+    }
+    .kt {
+        color: #c678dd !important;
+    }
+    .ld {
+        color: #98c379 !important;
+    }
+    .m {
+        color: #d19a66 !important;
+    }
+    .s {
+        color: #98c379 !important;
+    }
+    .na {
+        color: #d19a66 !important;
+    }
+    .nb {
+        color: #e5c07b !important;
+    }
+    .nc {
+        color: #e5c07b !important;
+    }
+    .no {
+        color: #e5c07b !important;
+    }
+    .nd {
+        color: #e5c07b !important;
+    }
+    .ni {
+        color: #e5c07b !important;
+    }
+    .ne {
+        color: #e5c07b !important;
+    }
+    .nf {
+        color: #abb2bf !important;
+    }
+    .nl {
+        color: #e5c07b !important;
+    }
+    .nn {
+        color: #abb2bf !important;
+    }
+    .nx {
+        color: #abb2bf !important;
+    }
+    .py {
+        color: #e5c07b !important;
+    }
+    .nt {
+        color: #e06c75 !important;
+    }
+    .nv {
+        color: #e5c07b !important;
+    }
+    .ow {
+        font-weight: 700 !important;
+    }
+    .w {
+        color: #f8f8f2 !important;
+    }
+    .mf {
+        color: #d19a66 !important;
+    }
+    .mh {
+        color: #d19a66 !important;
+    }
+    .mi {
+        color: #d19a66 !important;
+    }
+    .mo {
+        color: #d19a66 !important;
+    }
+    .sb {
+        color: #98c379 !important;
+    }
+    .sc {
+        color: #98c379 !important;
+    }
+    .sd {
+        color: #98c379 !important;
+    }
+    .s2 {
+        color: #98c379 !important;
+    }
+    .se {
+        color: #98c379 !important;
+    }
+    .sh {
+        color: #98c379 !important;
+    }
+    .si {
+        color: #98c379 !important;
+    }
+    .sx {
+        color: #98c379 !important;
+    }
+    .sr {
+        color: #56b6c2 !important;
+    }
+    .s1 {
+        color: #98c379 !important;
+    }
+    .ss {
+        color: #56b6c2 !important;
+    }
+    .bp {
+        color: #e5c07b !important;
+    }
+    .vc {
+        color: #e5c07b !important;
+    }
+    .vg {
+        color: #e5c07b !important;
+    }
+    .vi {
+        color: #e06c75 !important;
+    }
+    .il {
+        color: #d19a66 !important;
+    }
+    .gu {
+        color: #75715e !important;
+    }
+    .gd {
+        color: #f92672 !important;
+    }
+    .gi {
+        color: #a6e22e !important;
+    }
+}
+