From c76f1dd184183b718be34615daed4f210e629852 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sun, 12 Jan 2020 22:42:06 +0100
Subject: [PATCH] profile cards

---
 pages/_data/menu.yml               |  3 +++
 pages/_includes/cards/profile.html |  5 +----
 pages/snippets.html                |  1 +
 pages/tmp.html                     |  9 +++++++--
 scss/_variables.scss               | 11 +++++++++--
 scss/ui/_cards.scss                | 24 ++++++++++--------------
 scss/utils/_background.scss        |  6 ++++++
 7 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index c23ebfd74..f94527110 100644
--- a/pages/_data/menu.yml
+++ b/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
diff --git a/pages/_includes/cards/profile.html b/pages/_includes/cards/profile.html
index 1f8db961e..f5c91b63f 100644
--- a/pages/_includes/cards/profile.html
+++ b/pages/_includes/cards/profile.html
@@ -1,8 +1,5 @@
-<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">
diff --git a/pages/snippets.html b/pages/snippets.html
index 07674534c..0b23f02cf 100644
--- a/pages/snippets.html
+++ b/pages/snippets.html
@@ -2,6 +2,7 @@
 title: Snippets
 page-title: Snippets
 page-title-right: date
+menu: extra.snippets
 ---
 
 <div class="row">
diff --git a/pages/tmp.html b/pages/tmp.html
index 05764946c..d3ec2b384 100644
--- a/pages/tmp.html
+++ b/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 %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index a581fa7d1..e5bf625a3 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index b18f9f926..f0e27d691 100644
--- a/scss/ui/_cards.scss
+++ b/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;
 }
 
 /*
diff --git a/scss/utils/_background.scss b/scss/utils/_background.scss
index 6f39c26b4..c834fc6b4 100644
--- a/scss/utils/_background.scss
+++ b/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;
+}