profile cards

pages/_data/menu.yml

@@ -106,6 +106,9 @@ extra:
     blog:
       title: Blog cards
       url: blog.html
+    snippets:
+      title: Snippets
+      url: snippets.html
     search-results:
       title: Search results
       url: search-results.html

pages/_includes/cards/profile.html

-<div class="card card-profile">
-   <div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
+<div class="card">
    <div class="card-body text-center">
-      <img class="card-profile-img" src="{{ site.data.people[4].photo }}">
-
       <h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
 
       <p class="mb-4">

pages/snippets.html

@@ -2,6 +2,7 @@
 title: Snippets
 page-title: Snippets
 page-title-right: date
+menu: extra.snippets
 ---
 
 <div class="row">

pages/tmp.html

@@ -7,8 +7,13 @@ menu: a.b.c
 	<div class="col-md-6 col-xl-4">
 		{% assign person = site.data.people[0] %}
 		<div class="card">
-			<div class="card-body">
-				<h3 class="card-title">{{ person.full_name }}</h3>
+			<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>
 		{% include cards/user-info.html %}

scss/_variables.scss

@@ -158,8 +158,8 @@ $spacers: (
   2: $spacer * .5,
   3: $spacer,
   4: $spacer * 1.5,
-  5: $spacer * 2,
-  6: $spacer * 3,
+  5: $spacer * 3,
+  6: $spacer * 4.5,
   7: $spacer * 6,
   8: $spacer * 9,
   9: $spacer * 12,
@@ -189,6 +189,13 @@ $container-max-widths: (
   xl: 1200px
 ) !default;
 
+$embed-responsive-aspect-ratios: (
+  '2by1': (
+    x: 2,
+    y: 1
+  )
+) !default;
+
 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
 $alert-bg-level: -8 !default;

scss/ui/_cards.scss

@@ -330,23 +330,19 @@ Card chart
   height: 3.5rem;
 }
 
-/*
-Card profile
+/**
+Card avatar
  */
-.card-profile {
-  .card-header {
-    height: 9rem;
-    background-size: cover;
-  }
+.card-avatar {
+  box-shadow: 0 0 0 .5rem $card-bg;
 }
 
-.card-profile-img {
-  max-width: 6rem;
-  margin-top: -5rem;
-  margin-bottom: 1rem;
-  border: 3px solid #ffffff;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+/*
+Card img top
+ */
+.card-img-top,
+.card-img-bottom {
+  border-radius: inherit;
 }
 
 /*

scss/utils/_background.scss

@@ -7,3 +7,9 @@
   color: #fff;
   background-color: $light-black;
 }
+
+.bg-cover {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}