From dc6bf006a095752c722a57186e25850756c764e5 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@qivro.xyz>
Date: Sat, 4 Jul 2020 12:49:03 +0200
Subject: [PATCH] Update id section

---
 static/style.css | 24 ++++++++++++++++++++----
 views/id.pug     | 18 ++++++++----------
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/static/style.css b/static/style.css
index 969911d..07117b2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -140,9 +140,15 @@ blockquote strong em {
     align-items: top;
     flex-wrap: wrap; */
 	position: relative;
-	background: #fff;
+	background: #f9f9f9;
 	border: 2px solid rgba(0,0,0,0.5);
 }
+.ellipsis {
+	width: 100%;
+ 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 .id-card .header-image {
     /* flex: 1;
     flex-basis: auto; */
@@ -163,23 +169,24 @@ blockquote strong em {
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
+	margin: 0 0 1em 0;
 }
 .id-card .profile-picture {
     width: 64px;
 	/* margin: 8px 0; */
-	margin: 0 16px 16px 0;
+	margin: 0 1em 0 0;
     border-radius: 100%;
 }
 .id-card h1 {
     font-size: 1.3em;
 	/* margin: 0; */
-	margin: 0 0 16px;
+	margin: 1em 0;
     /* margin: 0 0 16px; */
 }
 .id-card p {
 	width: 100%;
     font-size: 1.1em;
-    margin: 0 0 8px;
+    margin: 0 0 1em 0;
 }
 .id-card .social a {
     display: inline-block;
@@ -330,3 +337,12 @@ table.music th:nth-child(3) {
 .list__item p {
     margin: 0 0 8px;
 }
+
+@media screen and (max-width: 500px) {
+	.id-card .header-description-id {
+		flex-direction: column;
+	}
+	.id-card .profile-picture {
+		margin: 0;
+	}
+}
diff --git a/views/id.pug b/views/id.pug
index 4892c5c..8657d5a 100644
--- a/views/id.pug
+++ b/views/id.pug
@@ -3,30 +3,28 @@
         .header-description-id
             img(src="/static/img/profile.png", alt="Yarmo's profile picture").profile-picture.u-photo
             h1
-                | I'm 
                 a(href="https://yarmo.eu", rel="me", title="yarmo.eu").u-url.u-uid
                     span.p-name Yarmo Mackenbach
-                |  (
-                a(href="https://pronoun.is/he").u-pronoun he/him/his
-                | )
+                br
         p.p-note
             | Developer of 
             a(href="https://keyoxide.org") Keyoxide.org
             br
             | Finished a PhD in <span class="p-category">Neurosciences</span>
+            br
+            a(href="https://pronoun.is/he").u-pronoun he/him/his
         p
             | PGP: 
-            a(href="https://keyoxide.org/9f0048ac0b23301e1f77e994909f6bd6f80f485d", rel="me", title="Keyoxide profile") 9f0048ac0b23301e1f77e994909f6bd6f80f485d
-            |  (
+            a(href="https://keyoxide.org/9f0048ac0b23301e1f77e994909f6bd6f80f485d", rel="me", title="Keyoxide profile") Keyoxide
+            |  &mdash; 
             a(href="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", download="/9F0048AC0B23301E1F77E994909F6BD6F80F485D.asc", rel="pgpkey publickey authn", type="text/plain", title="PGP public key") asc
-            |  - 
+            |  &mdash; 
             a(href="/static/img/qr_fp.png", title="PGP fingerprint QR") qr
-            | )
         p
             | Topics:
             |  <span class="p-category">FOSS</span>
-            |  &mdash; <span class="p-category">online_privacy</span>
-            |  &mdash; <span class="p-category">music_production</span>
+            |  &mdash; <span class="p-category">privacy</span>
+            |  &mdash; <span class="p-category">music_prod</span>
         p
             | Links: 
             a(href="mailto:yarmo@snopyta.org", rel="me", title="Email").u-email Email