markdown fixes, docs styling

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,10 @@
+# Tabler UI Community Conduct Guideline
+
+The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
+
+This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tabler project. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
+
+- Participants will be tolerant of opposing views.
+- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behaviour which can be reasonably considered harassment will not be tolerated.

Gemfile

@@ -3,10 +3,11 @@ source "https://rubygems.org"
 gem "jekyll"
 
 group :jekyll_plugins do
-  gem "jekyll-random"
+	gem 'jekyll-toc'
-  gem "jekyll-tidy"
+	gem "jekyll-random"
-  gem "jekyll-timeago"
+	gem "jekyll-tidy"
-  gem 'jekyll-redirect-from'
+	gem "jekyll-timeago"
+	gem 'jekyll-redirect-from'
 end
 
 gem 'wdm', '>= 0.1.1' if Gem.win_platform?

_config.yml

@@ -12,6 +12,7 @@ dark-theme: false
 
 plugins:
   - jekyll-random
+  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
@@ -100,22 +101,20 @@ keep_files:
   - css/ui-kit.css
   - css/dark.css
   - css/rtl.css
-#- js/ui-kit.js
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
+toc:
+  min_level: 2
+  max_level: 2
+  list_class: list-unstyled
 
 #collections:
 #  docs:

pages/_includes/layout/navbar-primary.html

@@ -1,4 +1,4 @@
-{% assign breakpoint = 'md' %}
+{% assign breakpoint = 'lg' %}
 <nav class="navbar navbar-vertical navbar-expand-{{ breakpoint }} navbar-dark navbar-primary" id="navbar-primary">
 	<div class="container">
 		{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
@@ -7,19 +7,19 @@
 			Lorem ipsum
 		</div>
 
-		<div class="d-none-navbar-vertical text-green">
+		<div class="d-none-navbar-vertical">
 			only horizontal
 		</div>
 
-		<div class="d-none-navbar-vertical-narrow text-red">
+		<div class="d-none-navbar-vertical-narrow">
 			hide narrow
 		</div>
 
-		<div class="d-none-navbar-horizontal text-blue">
+		<div class="d-none-navbar-horizontal">
 			only sidebar
 		</div>
 
-		<div style="opacity: .64;">Lorem ipsum</div>
+		<div class="text-muted">Lorem ipsum</div>
 	</div>
 </nav>
 

pages/_layouts/markdown.html

@@ -2,12 +2,20 @@
 layout: default
 ---
 
-<div class="row row justify-content-center">
+<div class="row justify-content-center">
-	<div class="col-lg-10 col-xl-8">
+	<div class="col-lg-10 col-xl-9">
-		<div class="card">
+		<div class="card card-lg">
-			<div class="card-body p-md-7">
+			<div class="card-body markdown">
 				{{ content }}
 			</div>
 		</div>
 	</div>
+	{% if page.toc %}
+	<div class="d-none d-xl-block col-xl-3">
+		<div class="sticky-top py-4">
+			<h5 class="subheader">On this page</h5>
+			{{ content | toc_only }}
+		</div>
+	</div>
+	{% endif %}
 </div>

scss/_tabler-core.scss

@@ -46,7 +46,8 @@
 @import "ui/tables";
 @import "ui/toasts";
 @import "ui/toolbar";
-@import "ui/typo";
+@import "ui/type";
+@import "ui/markdown";
 @import "ui/charts";
 
 @import "ui/examples";

scss/_variables.scss

@@ -5,6 +5,7 @@ $assets-base: ".." !default;
 $google-font: "Source Sans Pro" !default;
 
 $font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
+$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 // EXTERNAL FONTS
@@ -27,10 +28,10 @@ $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
 $gray-300: mix($light, $dark, 94%) !default;
 $gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 79%) !default;
+$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 63%) !default;
+$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 45%) !default;
+$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 22%) !default;
+$gray-800: mix($light, $dark, 16%) !default;
 $gray-900: $dark !default;
 
 $blue: #206bc4 !default;
@@ -51,8 +52,9 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: mix($body-color, #fff, 64%) !default;
+$text-muted-opacity: .64 !default;
-$border-color: rgba(mix($body-color, #fff, 64%), .24) !default;
+$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
+$border-color: rgba($text-muted, .24) !default;
 
 $hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;
@@ -131,7 +133,7 @@ $headings-font-weight: $font-weight-bold !default;
 $small-font-size: 87.5% !default;
 
 $h1-font-size: (26em / 15) !default;
-$h2-font-size: (23em / 15) !default;
+$h2-font-size: (22em / 15) !default;
 $h3-font-size: (18em / 15) !default;
 $h4-font-size: (15em / 15) !default;
 $h5-font-size: (13em / 15) !default;
@@ -139,7 +141,7 @@ $h6-font-size: (11em / 15) !default;
 
 $blockquote-font-size: $h4-font-size !default;
 
-$code-font-size: 80% !default;
+$code-font-size: $h6-font-size !default;
 $code-color: $primary !default;
 
 $lead-font-size: $h4-font-size !default;

scss/layout/_core.scss

@@ -1,6 +1,7 @@
 // stylelint-disable property-no-vendor-prefix
 html {
   font-size: 16px;
+  scroll-behavior: smooth;
 }
 
 body {

scss/layout/_mainnav.scss

@@ -120,6 +120,11 @@ Navbar colors
   background: $sidenav-dark-bg;
   color: $sidenav-dark-color;
 
+  .text-muted {
+    color: inherit !important;
+    opacity: $text-muted-opacity;
+  }
+
   .navbar-brand-autodark {
     filter: brightness(0) invert(1);
   }

scss/ui/_cards.scss

@@ -316,7 +316,6 @@ Card code
   padding: 0;
 
   .highlight {
-    @extend .highlight-dark;
     margin: 0;
     border: 0;
   }

scss/ui/_highlight.scss

@@ -1,11 +1,19 @@
+$code-green: #b5f4a5;
+$code-yellow: #ffe484;
+$code-purple: #d9a9ff;
+$code-red: #ff8383;
+$code-blue: #93ddfd;
+$code-white: #ffffff;
+$code-gray: #a0aec0;
+
 .highlight {
   max-height: 40rem;
   margin: 1rem 0 2rem;
   overflow: auto;
   font-size: $font-size-base;
-  background: #fcfcfc;
+  background: $dark;
-  border: 1px solid $border-color;
+  border-radius: $border-radius;
-  border-radius: 3px;
+  color: #ffffff;
 
   pre {
     height: 100%;
@@ -17,269 +25,256 @@
 
   // stylelint-disable selector-class-pattern
   .hll {
-    background-color: #ffc;
+    background-color: #ffffcc;
   }
+
   .c {
-    color: #999;
+    color: $code-gray;
   }
+
   .k {
-    color: #069;
+    color: $code-purple;
   }
+
   .o {
-    color: #555;
+    color: #555555;
   }
+
   .cm {
-    color: #999;
+    color: #999999;
   }
+
   .cp {
-    color: #099;
+    color: #009999;
   }
+
   .c1 {
-    color: #999;
+    color: #999999;
   }
+
   .cs {
-    color: #999;
+    color: #999999;
   }
+
   .gd {
-    background-color: #fcc;
+    background-color: #ffcccc;
-    border: 1px solid #c00;
+    border: 1px solid #cc0000;
   }
+
   .ge {
     font-style: italic;
   }
+
   .gr {
-    color: #f00;
+    color: #ff0000;
   }
+
   .gh {
-    color: #030;
+    color: #003300;
   }
+
   .gi {
-    background-color: #cfc;
+    background-color: #ccffcc;
-    border: 1px solid #0c0;
+    border: 1px solid #00cc00;
   }
+
   .go {
-    color: #aaa;
+    color: #aaaaaa;
   }
+
   .gp {
-    color: #009;
+    color: #000099;
   }
+
   .gu {
-    color: #030;
+    color: #003300;
   }
+
   .gt {
-    color: #9c6;
+    color: #99cc66;
   }
+
   .kc {
-    color: #069;
+    color: #006699;
   }
+
   .kd {
-    color: #069;
+    color: #006699;
   }
+
   .kn {
-    color: #069;
+    color: #006699;
   }
+
   .kp {
-    color: #069;
+    color: #006699;
   }
+
   .kr {
-    color: #069;
+    color: #006699;
   }
+
   .kt {
-    color: #078;
+    color: #007788;
   }
+
   .m {
-    color: #f60;
+    color: $code-red;
   }
+
   .s {
     color: #d44950;
   }
+
   .na {
     color: #4f9fcf;
   }
-  .nb {
+
-    color: #366;
+  .nc {
+    color: #00aa88;
   }
-  .nc { color: #0a8; }
+
   .no {
-    color: #360;
+    color: #336600;
   }
+
   .nd {
-    color: #99f;
+    color: #9999ff;
   }
+
   .ni {
-    color: #999;
+    color: #999999;
   }
+
   .ne {
-    color: #c00;
+    color: #cc0000;
   }
+
   .nf {
-    color: #c0f;
+    color: #cc00ff;
   }
+
   .nl {
-    color: #99f;
+    color: $code-yellow;
   }
+
   .nn {
-    color: #0cf;
+    color: #00ccff;
   }
+
   .nt {
-    color: #2f6f9f;
+    color: $code-yellow;
   }
+
   .nv {
-    color: #033;
+    color: #003333;
   }
+
   .ow {
-    color: #000;
+    color: #000000;
   }
+
   .w {
-    color: #bbb;
+    color: #bbbbbb;
   }
+
   .mf {
-    color: #f60;
+    color: #ff6600;
   }
+
   .mh {
-    color: #f60;
+    color: #ff6600;
   }
+
   .mi {
-    color: #f60;
+    color: #ff6600;
   }
+
   .mo {
-    color: #f60;
+    color: #ff6600;
   }
+
   .sb {
-    color: #c30;
+    color: #cc3300;
   }
+
   .sc {
-    color: #c30;
+    color: #cc3300;
   }
+
   .sd {
     font-style: italic;
-    color: #c30;
+    color: #cc3300;
   }
+
   .s2 {
-    color: #c30;
+    color: #cc3300;
   }
+
   .se {
-    color: #c30;
+    color: #cc3300;
   }
+
   .sh {
-    color: #c30;
+    color: #cc3300;
   }
+
   .si {
-    color: #a00;
+    color: #aa0000;
   }
+
   .sx {
-    color: #c30;
+    color: #cc3300;
   }
+
   .sr {
-    color: #3aa;
+    color: #33aaaa;
   }
+
   .s1 {
-    color: #c30;
+    color: #cc3300;
   }
+
   .ss {
-    color: #fc3;
+    color: #ffcc33;
   }
+
   .bp {
-    color: #366;
+    color: #336666;
   }
+
   .vc {
-    color: #033;
+    color: #003333;
   }
+
   .vg {
-    color: #033;
+    color: #003333;
   }
+
   .vi {
-    color: #033;
+    color: #003333;
   }
+
   .il {
-    color: #f60;
+    color: #ff6600;
   }
 
   .css .o,
   .css .o + .nt,
   .css .nt + .nt {
-    color: #999;
+    color: #999999;
   }
 
   .language-bash:before,
   .language-sh:before {
-    color: #009;
+    color: #000099;
     content: "$ ";
     user-select: none;
   }
 
   .language-powershell:before {
-    color: #009;
+    color: #000099;
     content: "PM> ";
     user-select: none;
   }
-}
+}
-
-.highlight-dark {
-  color: $white;
-  background: $dark;
-  border-color: transparent;
-
-  .c { color: #75715e; } /* Comment */
-  .err { color: #960050; background-color: #1e0010; } /* Error */
-  .k { color: #66d9ef; } /* Keyword */
-  .l { color: #ae81ff; } /* Literal */
-  .n { color: #f8f8f2; } /* Name */
-  .o { color: #f92672; } /* Operator */
-  .p { color: #f8f8f2; } /* Punctuation */
-  .cm { color: #75715e; } /* Comment.Multiline */
-  .cp { color: #75715e; } /* Comment.Preproc */
-  .c1 { color: #75715e; } /* Comment.Single */
-  .cs { color: #75715e; } /* Comment.Special */
-  .ge { font-style: italic; } /* Generic.Emph */
-  .gs { font-weight: $font-weight-bold; } /* Generic.Strong */
-  .kc { color: #66d9ef; } /* Keyword.Constant */
-  .kd { color: #66d9ef; } /* Keyword.Declaration */
-  .kn { color: #f92672; } /* Keyword.Namespace */
-  .kp { color: #66d9ef; } /* Keyword.Pseudo */
-  .kr { color: #66d9ef; } /* Keyword.Reserved */
-  .kt { color: #66d9ef; } /* Keyword.Type */
-  .ld { color: #e6db74; } /* Literal.Date */
-  .m { color: #ae81ff; } /* Literal.Number */
-  .s { color: #e6db74; } /* Literal.String */
-  .na { color: #a6e22e; } /* Name.Attribute */
-  .nb { color: #f8f8f2; } /* Name.Builtin */
-  .nc { color: #a6e22e; } /* Name.Class */
-  .no { color: #66d9ef; } /* Name.Constant */
-  .nd { color: #a6e22e; } /* Name.Decorator */
-  .ni { color: #f8f8f2; } /* Name.Entity */
-  .ne { color: #a6e22e; } /* Name.Exception */
-  .nf { color: #a6e22e; } /* Name.Function */
-  .nl { color: #f8f8f2; } /* Name.Label */
-  .nn { color: #f8f8f2; } /* Name.Namespace */
-  .nx { color: #a6e22e; } /* Name.Other */
-  .py { color: #f8f8f2; } /* Name.Property */
-  .nt { color: #f92672; } /* Name.Tag */
-  .nv { color: #f8f8f2; } /* Name.Variable */
-  .ow { color: #f92672; } /* Operator.Word */
-  .w { color: #f8f8f2; } /* Text.Whitespace */
-  .mf { color: #ae81ff; } /* Literal.Number.Float */
-  .mh { color: #ae81ff; } /* Literal.Number.Hex */
-  .mi { color: #ae81ff; } /* Literal.Number.Integer */
-  .mo { color: #ae81ff; } /* Literal.Number.Oct */
-  .sb { color: #e6db74; } /* Literal.String.Backtick */
-  .sc { color: #e6db74; } /* Literal.String.Char */
-  .sd { color: #e6db74; } /* Literal.String.Doc */
-  .s2 { color: #e6db74; } /* Literal.String.Double */
-  .se { color: #ae81ff; } /* Literal.String.Escape */
-  .sh { color: #e6db74; } /* Literal.String.Heredoc */
-  .si { color: #e6db74; } /* Literal.String.Interpol */
-  .sx { color: #e6db74; } /* Literal.String.Other */
-  .sr { color: #e6db74; } /* Literal.String.Regex */
-  .s1 { color: #e6db74; } /* Literal.String.Single */
-  .ss { color: #e6db74; } /* Literal.String.Symbol */
-  .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
-  .vc { color: #f8f8f2; } /* Name.Variable.Class */
-  .vg { color: #f8f8f2; } /* Name.Variable.Global */
-  .vi { color: #f8f8f2; } /* Name.Variable.Instance */
-  .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
-
-  .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-  .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-  .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
-}

scss/ui/_markdown.scss

@@ -0,0 +1,43 @@
+/**
+Markdown
+ */
+.markdown {
+  font-size: 1rem;
+  color: $gray-800;
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  > {
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 2rem;
+      color: $body-color;
+      font-weight: 400;
+    }
+  }
+
+  >h2 {
+    margin-bottom: 1rem;
+
+    &:before {
+      content: '';
+      padding-top: 2rem;
+      margin-top: -2rem;
+      display: block;
+    }
+  }
+
+  >hr {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  > table {
+    @extend .table, .table-bordered;
+  }
+}

scss/ui/_type.scss

@@ -51,6 +51,10 @@ blockquote {
   }
 }
 
+hr {
+  margin: 2rem 0;
+}
+
 dl {
   dd {
     &:last-child {
@@ -60,7 +64,7 @@ dl {
 }
 
 code {
-  padding: 3px;
+  padding: 2px 4px;
   background: rgba($code-color, .03);
   border: 1px solid rgba($code-color, .064);
   border-radius: $border-radius;
@@ -77,14 +81,11 @@ code {
 pre {
   padding: 1rem;
   overflow: auto;
-  font-size: 85%;
+  font-size: $code-font-size;
   hyphens: none;
-  line-height: 1.45;
+  line-height: 1.5;
-  color: $gray-800;
   tab-size: 3;
-  background-color: #f8fafc;
   border-radius: $border-radius;
-  -webkit-font-smoothing: auto;
 }
 
 img {
@@ -130,31 +131,4 @@ Antialiasing
   -moz-osx-font-smoothing: auto;
 }
 
-/**
-Markdown
- */
-.markdown {
-  //font-size: 1rem;
 
-  > :first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  > {
-    h1, h2, h3, h4, h5, h6 {
-      margin-top: 2rem;
-    }
-  }
-
-  hr {
-    margin: 2rem 0;
-  }
-
-  table {
-    @extend .table, .table-bordered;
-  }
-}