docs fixes

pages/_includes/svg.svg

@@ -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>

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 %}

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

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;
   }

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 {

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);
 }
 

scss/ui/_markdown.scss

@@ -21,7 +21,6 @@ Markdown
     h1, h2, h3, h4, h5, h6 {
       margin-top: 2rem;
       color: $body-color;
-      font-weight: 400;
     }
   }