From 6481e8d9bc03f0ec11a9ac387c5ecc951d918399 Mon Sep 17 00:00:00 2001
From: Danielle McLean <dani@00dani.me>
Date: Sat, 11 Nov 2017 17:07:40 +1100
Subject: [PATCH] Tweak the cards' layout, there's more room for extra stuff
 this way

---
 home/static/home/css/index.styl              |  7 ++++
 home/templates/home/index.html               | 38 ++++++++++++--------
 lemoncurry/static/lemoncurry/css/layout.styl |  6 ++++
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/home/static/home/css/index.styl b/home/static/home/css/index.styl
index 32cc983..d00601e 100644
--- a/home/static/home/css/index.styl
+++ b/home/static/home/css/index.styl
@@ -10,6 +10,13 @@ main
 		margin-bottom 1rem
 		.p-note > :last-child
 			margin-bottom 0
+		li.list-group-item
+			background-color $base01
+			text-align center
+			> a
+				margin-right 1rem
+				&:last-child
+					margin-right 0
 	@media (min-width $md)
 		flex-direction row-reverse
 		align-items unset
diff --git a/home/templates/home/index.html b/home/templates/home/index.html
index 8794276..38d9c95 100644
--- a/home/templates/home/index.html
+++ b/home/templates/home/index.html
@@ -13,36 +13,44 @@
 	<article class="h-card card p-author">
 		<a class="u-uid u-url" href="{{ uri }}" hidden></a>
 		{% if user.avatar %}<img class="card-img-top u-photo" src="{{ user.avatar.url }}" alt="{{ user.first_name }} {{ user.last_name }}" />{% endif %}
+
 		<div class="card-body">
 			<h4 class="card-title p-name">
 				<span class="p-given-name">{{ user.first_name }}</span> <span class="p-family-name">{{ user.last_name }}</span>
 			</h4>
-			{% for key in user.keys.all %}
-			<h6 class="card-subtitle">
-				<a class="u-key" href="{{ key.file.url }}">
-					<i class="fa fa-key"></i>
-					{{ key.pretty_print }}
-				</a>
-			</h6>
-			{% endfor %}
 			{% if user.note %}<div class="p-note">{{ user.note | markdown }}</div>{% endif %}
 		</div>
 
 		<div class="card-footer">
 			<ul class="profiles">
-				<li>
-					<a class="u-email" rel="me" href="mailto:{{ user.email }}"><i class="fa fa-envelope"></i> {{ user.email }}</a>
+				<li><a class="u-email" rel="me" href="mailto:{{ user.email }}">
+						<i class="fa fa-envelope"></i> {{ user.email }}
+				</a></li>
+				{% if user.xmpp %}<li><a class="u-impp" rel="me" href="xmpp:{{ user.xmpp }}">
+						<i class="openwebicons-xmpp"></i> {{ user.xmpp }}
+				</a></li>{% endif %}
+			</ul>
+		</div>
+
+		<div class="card-footer">
+			<ul class="profiles">
+				{% for key in user.keys.all %}<li>
+					<a class="u-key" href="{{ key.file.url }}">
+						<i class="fa fa-key"></i> {{ key.pretty_print }}
+					</a>
 				</li>
-				{% if user.xmpp %}
-				<li>
-					<a class="u-impp" rel="me" href="xmpp:{{ user.xmpp }}"><i class="openwebicons-xmpp"></i> {{ user.xmpp }}</a>
-				</li>
-				{% endif %}
+				{% endfor %}
+			</ul>
+		</div>
+
+		<div class="card-footer">
+			<ul class="profiles">
 				{% for profile in user.profiles.all %}<li>
 					<a class="u-url" rel="me" href="{{ profile.url }}"><i class="{{ profile.site.icon }}"></i> {{ profile.name }}</a>
 				</li>{% endfor %}
 			</ul>
 		</div>
+
 		<script class="p-json-ld" type="application/ld+json">{{ user.json_ld | jsonify }}</script>
 	</article>
 </aside>
diff --git a/lemoncurry/static/lemoncurry/css/layout.styl b/lemoncurry/static/lemoncurry/css/layout.styl
index 81eec56..9a764b6 100644
--- a/lemoncurry/static/lemoncurry/css/layout.styl
+++ b/lemoncurry/static/lemoncurry/css/layout.styl
@@ -64,6 +64,12 @@ body
 
 .card
 	background-color $base02
+
+	.card-footer
+		background-color $base01
+		&:nth-of-type(odd)
+			background-color $base02
+
 	&.h-card
 		max-width 25rem
 		position sticky