From 9e9f866aeec806289c55f610d9e7375dbf46a7bb Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 2 Feb 2020 15:05:55 +0100 Subject: [PATCH] markdown fixes, docs styling --- .github/CODE_OF_CONDUCT.md | 10 + Gemfile | 9 +- _config.yml | 13 +- pages/_includes/layout/navbar-primary.html | 10 +- pages/_layouts/markdown.html | 16 +- scss/_tabler-core.scss | 3 +- scss/_variables.scss | 18 +- scss/layout/_core.scss | 1 + scss/layout/_mainnav.scss | 5 + scss/ui/_cards.scss | 1 - scss/ui/_highlight.scss | 265 ++++++++++----------- scss/ui/_markdown.scss | 43 ++++ scss/ui/{_typo.scss => _type.scss} | 40 +--- 13 files changed, 236 insertions(+), 198 deletions(-) create mode 100644 .github/CODE_OF_CONDUCT.md create mode 100644 scss/ui/_markdown.scss rename scss/ui/{_typo.scss => _type.scss} (76%) diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 000000000..d588a77f5 --- /dev/null +++ b/.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. \ No newline at end of file diff --git a/Gemfile b/Gemfile index c6784b71a..738259c48 100644 --- a/Gemfile +++ b/Gemfile @@ -3,10 +3,11 @@ source "https://rubygems.org" gem "jekyll" group :jekyll_plugins do - gem "jekyll-random" - gem "jekyll-tidy" - gem "jekyll-timeago" - gem 'jekyll-redirect-from' + gem 'jekyll-toc' + gem "jekyll-random" + gem "jekyll-tidy" + gem "jekyll-timeago" + gem 'jekyll-redirect-from' end gem 'wdm', '>= 0.1.1' if Gem.win_platform? diff --git a/_config.yml b/_config.yml index 10c6dbc48..cf9aa1c15 100644 --- a/_config.yml +++ b/_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: diff --git a/pages/_includes/layout/navbar-primary.html b/pages/_includes/layout/navbar-primary.html index e789b0bfc..07656c661 100644 --- a/pages/_includes/layout/navbar-primary.html +++ b/pages/_includes/layout/navbar-primary.html @@ -1,4 +1,4 @@ -{% assign breakpoint = 'md' %} +{% assign breakpoint = 'lg' %} diff --git a/pages/_layouts/markdown.html b/pages/_layouts/markdown.html index e68be8fbb..cc395d608 100644 --- a/pages/_layouts/markdown.html +++ b/pages/_layouts/markdown.html @@ -2,12 +2,20 @@ layout: default --- -
-
-
-
+
+
+
+
{{ content }}
+ {% if page.toc %} +
+
+
On this page
+ {{ content | toc_only }} +
+
+ {% endif %}
\ No newline at end of file diff --git a/scss/_tabler-core.scss b/scss/_tabler-core.scss index e5ee94311..e22f71bed 100644 --- a/scss/_tabler-core.scss +++ b/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"; diff --git a/scss/_variables.scss b/scss/_variables.scss index db424cfd3..3724b71e7 100644 --- a/scss/_variables.scss +++ b/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-600: mix($light, $dark, 63%) !default; -$gray-700: mix($light, $dark, 45%) !default; -$gray-800: mix($light, $dark, 22%) !default; +$gray-500: mix($light, $dark, 78%) !default; +$gray-600: mix($light, $dark, 60%) !default; +$gray-700: mix($light, $dark, 36%) !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; -$border-color: rgba(mix($body-color, #fff, 64%), .24) !default; +$text-muted-opacity: .64 !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; diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index 1a9a16907..f9fb15dea 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -1,6 +1,7 @@ // stylelint-disable property-no-vendor-prefix html { font-size: 16px; + scroll-behavior: smooth; } body { diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss index 3a9f824e8..8f9aa9afa 100644 --- a/scss/layout/_mainnav.scss +++ b/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); } diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 65687d686..9c95f7fdb 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -316,7 +316,6 @@ Card code padding: 0; .highlight { - @extend .highlight-dark; margin: 0; border: 0; } diff --git a/scss/ui/_highlight.scss b/scss/ui/_highlight.scss index 2fd36e117..97018e18c 100644 --- a/scss/ui/_highlight.scss +++ b/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; - border: 1px solid $border-color; - border-radius: 3px; + background: $dark; + border-radius: $border-radius; + 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; - border: 1px solid #c00; + background-color: #ffcccc; + border: 1px solid #cc0000; } + .ge { font-style: italic; } + .gr { - color: #f00; + color: #ff0000; } + .gh { - color: #030; + color: #003300; } + .gi { - background-color: #cfc; - border: 1px solid #0c0; + background-color: #ccffcc; + 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 */ -} +} \ No newline at end of file diff --git a/scss/ui/_markdown.scss b/scss/ui/_markdown.scss new file mode 100644 index 000000000..28c8f31f7 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/scss/ui/_typo.scss b/scss/ui/_type.scss similarity index 76% rename from scss/ui/_typo.scss rename to scss/ui/_type.scss index c0450355b..ce2d04e2d 100644 --- a/scss/ui/_typo.scss +++ b/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; - color: $gray-800; + line-height: 1.5; 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; - } -}