Add Discord Dark theme, badge justification, fix search text color an…

…d hide arrow icon from TOC
ReWrite-Media · Oct 24, 2020 · c7cba72 · c7cba72
1 parent 6ece3e5
commit c7cba72
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/_includes/head_custom.html b/_includes/head_custom.html
@@ -3,13 +3,15 @@
 {% endif %}
 <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | absolute_url }}"/>
 <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-dark.css' | absolute_url }}"/>
+<link rel="stylesheet" href="{{ '/assets/css/discord-dark.css' | absolute_url }}"/>
 <script>
     const CONTRIBUTORS_URL = "https://api.github.com/repos/SirLich/bedrock-wiki/commits";
     const DEFAULT_THEME = "Default";
     let allThemes = {
         "Default": "{{ '/assets/css/just-the-docs-default.css' | absolute_url }}",
         "Dark": "{{ '/assets/css/just-the-docs-dark.css' | absolute_url }}",
-        "Light": "{{ '/assets/css/just-the-docs-light.css' | absolute_url }}"
+        "Light": "{{ '/assets/css/just-the-docs-light.css' | absolute_url }}",
+        "Discord Dark": "{{ '/assets/css/discord-dark.css' | absolute_url }}"
     };
 
     /*
@@ -68,6 +70,32 @@
             background-color: 1E1E1E;
         }
         `,
+        "Discord Dark": `
+        .highlight .nl {
+            color: #9CDCFE;
+        }
+        .highlight .s2 {
+            color: #ce9178;
+        }
+        .highlight .mi, .highlight .mf {
+            color: #b5cea8;
+        }
+        .highlight .kc {
+            color: #569cd6;
+        }
+        .highlight .p {
+            color: #C8C8C8;
+        }
+        .highlight .err {
+            color: #6A9955;
+        }
+        pre.highlight, figure.highlight {
+            background-color: 1E1E1E;
+        }
+        code {
+            background-color: 1E1E1E;
+        }
+        `,
         "Light": ""
     };
     let theme = "";

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -64,7 +64,7 @@
         {%- if node.has_children -%}
         <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
         {%- endif -%}
-        <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}{%- if node.badge != nil -%}<span class="label label-{{node.badge_color}}">{{ node.badge }}</span>{%- endif -%}</a>
+        <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{%- if node.badge != nil and node.badge_justification == "left"-%}<span class="label label-{{node.badge_color}}">{{ node.badge }}</span>{%- endif -%}{{ node.title }}{%- if node.badge != nil and (node.badge_justification == nil or node.badge_justification == "right")-%}<span class="label label-{{node.badge_color}}">{{ node.badge }}</span>{%- endif -%}</a>
         {%- if node.has_children -%}
         {%- assign children_list = pages_list | where: "parent", node.title -%}
         <ul class="nav-list ">
@@ -74,14 +74,14 @@
                 {%- if child.has_children -%}
                 <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
                 {%- endif -%}
-                <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}{%- if child.badge != nil -%}<span class="label label-{{child.badge_color}}">{{ child.badge }}</span>{%- endif -%}</a>
+                <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{%- if child.badge != nil and child.badge_justification == "left"-%}<span class="label label-{{child.badge_color}}">{{ child.badge }}</span>{%- endif -%}{{ child.title }}{%- if child.badge != nil and (child.badge_justification == nil or child.badge_justification == "right")-%}<span class="label label-{{child.badge_color}}">{{ child.badge }}</span>{%- endif -%}</a>
                 {%- if child.has_children -%}
                 {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
                 <ul class="nav-list">
                     {%- for grand_child in grand_children_list -%}
                     {%- unless grand_child.nav_exclude -%}
                     <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
-                        <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}{%- if grand_child.badge != nil -%}<span class="label label-{{grand_child.badge_color}}">{{ grand_child.badge }}</span>{%- endif -%}</a>
+                        <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{%- if grand_child.badge != nil and grand_child.badge_justification == "left"-%}<span class="label label-{{grand_child.badge_color}}">{{ node.badge }}</span>{%- endif -%}{{ grand_child.title }}{%- if grand_child.badge != nil and (grand_child.badge_justification == nil or grand_child.badge_justification == "right")-%}<span class="label label-{{grand_child.badge_color}}">{{ grand_child.badge }}</span>{%- endif -%}</a>
                     </li>
                     {%- endunless -%}
                     {%- endfor -%}

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -137,4 +137,15 @@
 .nav-list-link .label {
   padding-top: 0;
   padding-bottom: 0;
+}
+
+.search-input {
+  color: $body-text-color;
+}
+
+details#toc summary::-webkit-details-marker {
+  display:none;
+}
+details#toc  > summary {
+  list-style: none;
 }
diff --git a/assets/css/discord-dark.scss b/assets/css/discord-dark.scss
@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="discord_dark" %}