diff --git a/.gitignore b/.gitignore index fd6fbac5c..32e90a219 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ tmp/ /svg-tmp/ /dist/ /dist-html/ +/components/ diff --git a/build/capture-components.sh b/build/capture-components.sh new file mode 100755 index 000000000..48adf159b --- /dev/null +++ b/build/capture-components.sh @@ -0,0 +1,9 @@ +for file in ../pages/_components/*.md +do + file="$(basename -- $file)" + file="${file%.md}" + url="http://localhost:3001/components/$file.html" + echo $url + + capture-website $url --element="#component-wrapper" --scale-factor=2 > ../components/$file.png +done diff --git a/pages/_components/card-with-image.md b/pages/_components/card-with-image.md new file mode 100644 index 000000000..bc392e708 --- /dev/null +++ b/pages/_components/card-with-image.md @@ -0,0 +1,6 @@ +--- +title: Card with side image +columns: 2 +--- + +{% include_cached cards/card-image.html title="Card with side image" %} diff --git a/pages/_components/empty.md b/pages/_components/empty.md index c6cf020f4..f5d50a114 100644 --- a/pages/_components/empty.md +++ b/pages/_components/empty.md @@ -2,4 +2,4 @@ title: Empty state --- -{% include ui/empty.html %} +{% include ui/empty.html illustration=true %} diff --git a/pages/_includes/cards/card-image.html b/pages/_includes/cards/card-image.html index 9475f38ea..0c4c25977 100644 --- a/pages/_includes/cards/card-image.html +++ b/pages/_includes/cards/card-image.html @@ -1,7 +1,7 @@
- {{ include.img-alt | default: 'Card side image' }} + {{ include.img-alt | default: 'Card side image' }}
diff --git a/pages/_includes/cards/comments.html b/pages/_includes/cards/comments.html index 65a5313b9..e21c467ad 100644 --- a/pages/_includes/cards/comments.html +++ b/pages/_includes/cards/comments.html @@ -10,10 +10,10 @@ {% include ui/avatar.html person=person status="green" %}
-
-
+
+
{{ person.full_name }} -
+
{{ forloop.index | random_date_ago: 23 | timeago }}

diff --git a/pages/_layouts/component.html b/pages/_layouts/component.html index a2dfdb2fa..ae164ff82 100644 --- a/pages/_layouts/component.html +++ b/pages/_layouts/component.html @@ -15,14 +15,20 @@ page-title: Tabler components

-
-
0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}> - {{ content }} -
-
+
+
+
+
+
0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}> + {{ content }} +
+
+
-
- {{ content | highlight_tidy: 'html' }} +
+ {{ content | highlight_tidy: 'html' }} +
+
diff --git a/scss/_variables.scss b/scss/_variables.scss index 029f8ad97..44d4cc0e0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,10 +1,10 @@ // FONTS -$font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-base: "Nunito", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $font-family-serif: "Georgia", "Times New Roman", times, serif !default; $font-icons: "tabler-webfont" !default; // EXTERNAL FONTS -$google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap" !default; +$google-font-url: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap" !default; $icon-fonts: () !default; // COLORS @@ -40,11 +40,11 @@ $cyan: #17a2b8 !default; $black: #000000 !default; $white: #ffffff !default; -$light: #f0f2f5 !default; -$dark: #021f34 !default; +$light: #f5f7fb !default; +$dark: #505061 !default; -$body-bg: #f5f7fb !default; -$body-color: #45535f !default; +$body-bg: $light !default; +$body-color: $dark !default; $text-muted: #8a91a5 !default; @@ -103,14 +103,15 @@ $avatar-sizes: ( ) !default; //Fonts -$font-size-base: 1rem !default; +$font-size-base: .9375rem !default; $font-weight-base: 400 !default; -$line-height-base: 1.5 !default; +$line-height-base: 1.6 !default; $border-radius: 3px !default; //Typography -$headings-color: $dark !default; +$headings-color: #021f34 !default; +$headings-font-weight: 600 !default; $small-font-size: 87.5% !default; @@ -325,6 +326,17 @@ $flag-sizes: ( //Utilities $utilities: ( + "object": ( + property: object-fit, + class: object, + values: ( + contain: contain, + cover: cover, + fill: fill, + scale-down: scale-down, + none: none, + ) + ), "spacing": ( property: letter-spacing, class: tracking, diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index 9060b9514..ad892e971 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -9,12 +9,13 @@ html { } body { + height: 100%; overflow-y: scroll; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; + text-rendering: optimizeLegibility; font-feature-settings: "liga" 0; - height: 100%; } body *::-webkit-scrollbar { diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 9e858108b..2e599aaf2 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -13,6 +13,12 @@ } } +.card-sm { + .card-body { + padding: .75rem; + } +} + .card-group { margin-bottom: $card-group-margin; } @@ -145,7 +151,7 @@ .card-title { display: block; font-size: $h4-font-size; - font-weight: 500; + font-weight: $headings-font-weight; @at-root a#{&}:hover { color: inherit; diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index 3c806884b..5b4ae7cb2 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -20,6 +20,8 @@ h6, .h4, .h5, .h6 { + letter-spacing: -.012em; + a { color: inherit; }