avatars, lh fixes

_config.yml

@@ -28,6 +28,64 @@ tabler-plugins:
 exclude:
   - .jekyll-cache
 
+  - 400.html
+  - 401.html
+  - 403.html
+  - 404.html
+  - 500.html
+  - 503.html
+  - all.html
+  - blank.html
+  - blog.html
+  - buttons.html
+  - calendar.html
+  - cards.html
+  - carousel.html
+  - changelog.html
+  - charts.html
+  - charts-heatmap.html
+  - components.html
+  - crypto-currencies.html
+  - datatables.html
+  - ./docs.html
+  - dropdowns.html
+  - email.html
+  - empty.html
+  - favicon.ico
+  - flags.html
+  - forgot-password.html
+  - form-elements.html
+  - gallery.html
+  - icons.html
+  - index.html
+  - invoice.html
+  - license.html
+  - lists.html
+  - lookup.html
+  - maintenance.html
+  - maps.html
+  - maps-vector.html
+  - markdown.md
+  - modals.html
+  - music.html
+  - pagination.html
+  - pricing.html
+  - profile.html
+  - ribbons.html
+  - rtl.html
+  - search-results.html
+  - sign-in.html
+  - sign-up.html
+  - sitemap.xml
+  - snippets.html
+  - social.html
+  - store.html
+  - tabs.html
+  - terms-of-service.html
+  - typography.html
+  - users.html
+  - welcome.html
+
 keep_files:
   - css/ui-kit.css
   - css/dark.css
@@ -66,15 +124,15 @@ defaults:
       type: "pages"
     values:
       layout: default
-  - scope:
+#  - scope:
-      type: "docs"
+#      type: "docs"
-    values:
+#    values:
-      layout: docs
+#      layout: docs
-      toc: true
+#      toc: true
-  - scope:
+#  - scope:
-      type: "components"
+#      type: "components"
-    values:
+#    values:
-      layout: component
+#      layout: component
 
 
 colors:

pages/tmp.html

@@ -2,48 +2,28 @@
 menu: a.b.c
 ---
 
-<div class="row">
+<div class="card">
-	<div class="col-xl-4">
+	<div class="card-body">
-		<div class="dropdown show">
+
-			<a href="#" class="btn btn-secondary">Dropdown</a>
+		<div class="row">
-			<div class="dropdown-menu dropdown-menu-card show">
+			<div class="col">
-				<div class="card">
+				<div class="d-flex lh-sm">
-					<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur dolore dolores, earum explicabo id temporibus veritatis. Alias amet aperiam corporis dolore eos, iste magni non omnis perferendis, quos sed.</div>
+					{% include ui/avatar.html person-id=1 class="mr-2" %}
+					<div class="flex-fill">
+						<div class="strong">Paweł Kuna</div>
+						<div class="text-muted">Senior frontend developer</div>
+					</div>
+				</div>
+			</div>
+			<div class="col">
+				<div class="d-flex lh-sm">
+					{% include ui/avatar.html person-id=1 class="mr-2" size="xs" %}
+					<div class="flex-fill">
+						<div class="strong">Paweł Kuna</div>
 					</div>
 				</div>
 			</div>
 		</div>
 
-	<div class="col-md-6 col-xl-4">
-		{% assign person = site.data.people[0] %}
-		<div class="card">
-			<div class="card-img-top embed-responsive embed-responsive-21by9">
-				<div class="embed-responsive-item bg-cover"
-				     style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
-			</div>
-			{% include ui/avatar.html person=person size="xl" class="mt-n5 mx-auto card-avatar" %}
-			<div class="card-body text-center">
-				<h2 class="mb-3">{{ person.full_name }}</h2>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem
-					consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed
-					tempora ut voluptas, voluptatem!</p>
-			</div>
-		</div>
-	</div>
-
-	<div class="col-4">
-		<div class="card card-body">
-			{% include ui/button.html modal-id="simple" text="Open modal" %}
-			{% include ui/modal.html modal-id="simple" %}
-		</div>
-
-		<div class="card card-body">
-			<div>{% include ui/stars.html %}</div>
-			<div>{% include ui/stars.html count=3 %}</div>
-			<div>{% include ui/stars.html color="red" %}</div>
-			<div>{% include ui/stars.html filled=true %}</div>
-			<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
-			<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
-		</div>
 	</div>
 </div>

scss/_utilities.scss

@@ -97,6 +97,12 @@ $utilities: (
     )
   ),
 
+  "leading": (
+    property: line-height,
+    class: leading,
+    values: $spacers
+  ),
+
   "width": (
     property: width,
     class: w,

scss/_variables.scss

@@ -113,7 +113,9 @@ $dark-mode-darken: darken($dark, 3%) !default;
 $dark-mode-lighten: lighten($dark, 3%) !default;
 $dark-mode-text: $light;
 
+$avatar-size: 2.5rem !default;
 $avatar-sizes: (
+  "xs": 1.25rem,
   "sm": 1.5rem,
   "md": 3rem,
   "lg": 4.5rem,
@@ -127,7 +129,7 @@ $body-letter-spacing: null !default;
 
 $line-height-base: 1.6 !default;
 $line-height-sm: 1.3333334 !default;
-$line-height-lg: 2 !default;
+$line-height-lg: 2.1333334 !default;
 
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
@@ -166,7 +168,7 @@ $spacers: (
   2: $spacer * .5,
   3: $spacer,
   4: $spacer * 1.25,
-  5: $spacer * 1.5,
+  5: $spacer * 2,
   6: $spacer * 3,
   7: $spacer * 6,
   8: $spacer * 9,

scss/ui/_avatars.scss

@@ -1,7 +1,7 @@
 .avatar {
   position: relative;
-  width: 2rem;
+  width: $avatar-size;
-  height: 2rem;
+  height: $avatar-size;
   font-size: $h5-font-size;
   display: inline-flex;
   align-items: center;