1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

markdown fixes, docs styling

This commit is contained in:
codecalm
2020-02-02 15:05:55 +01:00
parent b402764696
commit 9e9f866aee
13 changed files with 236 additions and 198 deletions

10
.github/CODE_OF_CONDUCT.md vendored Normal file
View File

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

View File

@@ -3,6 +3,7 @@ source "https://rubygems.org"
gem "jekyll"
group :jekyll_plugins do
gem 'jekyll-toc'
gem "jekyll-random"
gem "jekyll-tidy"
gem "jekyll-timeago"

View File

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

View File

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

View File

@@ -2,12 +2,20 @@
layout: default
---
<div class="row row justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="card">
<div class="card-body p-md-7">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-9">
<div class="card card-lg">
<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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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 */
}

43
scss/ui/_markdown.scss Normal file
View File

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

View File

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