Update id section

static/style.css

@@ -135,20 +135,21 @@ blockquote strong em {
 .id-card {
     margin: 0 0 64px 0;
 }
-.id-card {
-    /* display: flex;
-    align-items: top;
-    flex-wrap: wrap; */
-	position: relative;
-	background: #f9f9f9;
-	border: 2px solid rgba(0,0,0,0.5);
-}
 .ellipsis {
 	width: 100%;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.id-card {
+    /* display: flex;
+    align-items: top;
+    flex-wrap: wrap; */
+	position: relative;
+	padding: 24px 24px 0px;
+	background: #f9f9f9;
+	border: 2px solid rgba(0,0,0,0.5);
+}
 .id-card .header-image {
     /* flex: 1;
     flex-basis: auto; */
@@ -160,7 +161,6 @@ blockquote strong em {
     /* flex: 100;
     flex-basis: auto; */
     /* margin: 8px 0; */
-	padding: 24px 32px 16px;
 	/* border-left: 2px solid var(--clr-border);
 	border-right: 2px solid var(--clr-border); */
 }
@@ -172,15 +172,19 @@ blockquote strong em {
 	margin: 0 0 1em 0;
 }
 .id-card .profile-picture {
-    width: 64px;
+	/* position: absolute; */
+	float: right;
+    width: 128px;
+	margin: 0 0 12px 12px;
 	/* margin: 8px 0; */
-	margin: 0 1em 0 0;
+	/* margin: 0 1em 0 0; */
     border-radius: 100%;
+
 }
 .id-card h1 {
     font-size: 1.3em;
 	/* margin: 0; */
-	margin: 1em 0;
+	margin: 0 0 1em;
     /* margin: 0 0 16px; */
 }
 .id-card p {
@@ -338,11 +342,10 @@ table.music th:nth-child(3) {
     margin: 0 0 8px;
 }
 
-@media screen and (max-width: 480px) {
-	.id-card .header-description-id {
-		flex-direction: column;
-	}
+@media screen and (max-width: 560px) {
 	.id-card .profile-picture {
-		margin: 0;
+		display: block;
+		float: none;
+		margin: 0 auto 1em;
 	}
 }

views/id.pug

@@ -1,6 +1,4 @@
 .id-card
-    .header-description
-        .header-description-id
     img(src="/static/img/profile.png", alt="Yarmo's profile picture").profile-picture.u-photo
     h1
         a(href="https://yarmo.eu", rel="me", title="yarmo.eu").u-url.u-uid