cards fixes

.gitignore

@@ -19,3 +19,4 @@ tmp/
 /svg-tmp/
 /dist/
 /dist-html/
+/components/

build/capture-components.sh

+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

pages/_components/card-with-image.md

+---
+title: Card with side image
+columns: 2
+---
+
+{% include_cached cards/card-image.html title="Card with side image" %}

pages/_components/empty.md

@@ -2,4 +2,4 @@
 title: Empty state
 ---
 
-{% include ui/empty.html %}
+{% include ui/empty.html illustration=true %}

pages/_includes/cards/card-image.html

 <div class="card">
    <div class="row row-0">
       <div class="col-md-3{% if include.right %} order-md-last{% endif %}">
-         <img src="{{ site.base }}/img/photos/{{ include.img | default: 'ff23569f1a45865d.jpg' }}" class="w-100" alt="{{ include.img-alt | default: 'Card side image' }}">
+         <img src="{{ site.base }}/img/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
       </div>
       <div class="col">
          <div class="card-body">

pages/_includes/cards/comments.html

@@ -10,10 +10,10 @@
             {% include ui/avatar.html person=person status="green" %}
          </div>
          <div class="flex-fill">
-            <div class="d-flex mb-1 mt-n1">
-               <div class="strong d-flex">
+            <div class="d-flex mt-n1">
+               <h5 class="m-0">
                   {{ person.full_name }}
-               </div>
+               </h5>
                <div class="ml-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
             </div>
             <p class="mb-2">

pages/_layouts/component.html

@@ -15,14 +15,20 @@ page-title: Tabler components
       </div>
    </div>
    <div class="col-lg-9">
-      <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh">
-         <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
-            {{ content }}
-         </div>
-      </div>
+      <div class="card">
+         <div class="card-body p-5">
+            <div class="border border-bottom-0 bg-light p-1 rounded-top">
+               <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
+                  <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
+                     {{ content }}
+                  </div>
+               </div>
+            </div>
 
-      <div class="highlight highlight-dark m-0">
-         {{ content | highlight_tidy: 'html' }}
+            <div class="highlight m-0 rounded-0 rounded-bottom">
+               {{ content | highlight_tidy: 'html' }}
+            </div>
+         </div>
       </div>
    </div>
 </div>

scss/_variables.scss

 // 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,

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 {

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;

scss/ui/_typo.scss

@@ -20,6 +20,8 @@ h6,
 .h4,
 .h5,
 .h6 {
+  letter-spacing: -.012em;
+
   a {
     color: inherit;
   }