From c7d7aea9ba03b6df44dc739b9a320f7ab6d12932 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 5 Feb 2020 20:50:02 +0100
Subject: [PATCH] docs fixes

---
 pages/_includes/svg.svg          |  5 -----
 pages/_includes/ui/icon.html     |  4 ++++
 pages/_plugins/jekyll-example.rb |  2 +-
 scss/_dark.scss                  |  9 +++++++++
 scss/demo/_examples.scss         | 18 ++++++++++++++++--
 scss/demo/_highlight.scss        |  2 --
 scss/ui/_markdown.scss           |  1 -
 7 files changed, 30 insertions(+), 11 deletions(-)
 delete mode 100644 pages/_includes/svg.svg

diff --git a/pages/_includes/svg.svg b/pages/_includes/svg.svg
deleted file mode 100644
index a3ce39c3f..000000000
--- a/pages/_includes/svg.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-{% assign width = include.width | default: 24 %}
-{% assign height = include.height | default: 24 %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ width }}" height="{{ height }}"{% if include.class %} class="{{ include.class }}"{% endif%}>
-  <rect width="{{ width }}" height="{{ height }}" x="0" y="0" fill="#ddd"></rect>
-</svg>
diff --git a/pages/_includes/ui/icon.html b/pages/_includes/ui/icon.html
index 5a818b9bf..835f3c5bb 100644
--- a/pages/_includes/ui/icon.html
+++ b/pages/_includes/ui/icon.html
@@ -20,5 +20,9 @@
 
 {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
 
+{% if 1 == 2 %}
+<!-- SVG icon -->
+{% else %}
 {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
+{% endif %}
 {% endremoveemptylines %}
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index 333d0c655..02a372dc4 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -81,7 +81,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      '<div class="example' + (@options[:columns] ? ' example-bg' : '') + (@options[:class] ? ' ' + @options[:class] : "") + '"' + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : '') + '><div class="example-content">' + (@options[:columns] ? '<div class="example-column example-column-' + @options[:columns] + '">' : '') + (@options[:wrapper] ? '<div class="' + @options[:wrapper] + '">' : '') + (@options[:"max-width"] ? '<div style="max-width: ' + @options[:"max-width"] + 'px; margin: 0 auto;">' : '') + output + (@options[:wrapper] ? "</div>" : '') + (@options[:columns] ? "</div>" : '') + (@options[:"max-width"] ? '</div>' : '') + '</div></div>'
     end
 
   end
diff --git a/scss/_dark.scss b/scss/_dark.scss
index 04ecbe4e0..6d04d67fd 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -43,6 +43,10 @@ $dark-text: $light;
     box-shadow: 0 0 0 1px $dark-darken;
   }
 
+  .highlight {
+    background-color: $dark-darken;
+  }
+
   .avatar {
     background-color: $dark-lighten;
   }
@@ -51,6 +55,11 @@ $dark-text: $light;
     box-shadow: 0 0 0 2px $dark;
   }
 
+  .markdown,
+  .markdown>* {
+    color: inherit;
+  }
+
   .apexcharts-text {
     fill: $dark-text;
   }
diff --git a/scss/demo/_examples.scss b/scss/demo/_examples.scss
index 84c614a56..7e2e13a90 100644
--- a/scss/demo/_examples.scss
+++ b/scss/demo/_examples.scss
@@ -1,8 +1,18 @@
 .example {
   padding: 2rem;
-  margin: 1rem 0 0;
+  margin: 2rem 0;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
+
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+}
+
+.example-content {
+  font-size: $font-size-base;
+  color: $body-color;
+  flex: 1;
 }
 
 .example-bg {
@@ -10,13 +20,17 @@
 }
 
 .example-code {
-  margin-top: 0;
+  margin: 2rem 0;
   border-top: none;
 
   pre {
     margin: 0;
     border-radius: 0 0 3px 3px;
   }
+
+  .example + & {
+    margin-top: -2rem;
+  }
 }
 
 .example-column {
diff --git a/scss/demo/_highlight.scss b/scss/demo/_highlight.scss
index d0697ac17..e0f42280b 100644
--- a/scss/demo/_highlight.scss
+++ b/scss/demo/_highlight.scss
@@ -15,8 +15,6 @@ pre.highlight,
   background: $dark;
   border-radius: $border-radius;
   color: #ffffff;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
   @include scrollbar(true);
 }
 
diff --git a/scss/ui/_markdown.scss b/scss/ui/_markdown.scss
index b39cc57be..3a3a52272 100644
--- a/scss/ui/_markdown.scss
+++ b/scss/ui/_markdown.scss
@@ -21,7 +21,6 @@ Markdown
     h1, h2, h3, h4, h5, h6 {
       margin-top: 2rem;
       color: $body-color;
-      font-weight: 400;
     }
   }