Improve interface and subject display (Thanks to the blabber.im group chat).

css/stylesheet.css

@@ -48,6 +48,14 @@ div:has(#bar) {
 }
  */
 
+#subject {
+  margin: auto;
+  max-height: 30vh;
+  overflow: auto;
+  padding: 1em;
+  width: 90vw;
+}
+
 #bar,
 #content > #entries > .entry,
 #profile-top,
@@ -141,6 +149,7 @@ label,
 }
 
 #profile-top {
+  align-items: center;
   display: flex;
   justify-content: space-between;
   text-align: center;
@@ -239,8 +248,8 @@ h1 {
   width: 40em;
 }
 
-#photo,
-#qrcode {
+#profile #photo,
+#profile #qrcode {
   /* border: 1px solid #c0c0c0; */
   /* width: 40%; */
   /* margin-bottom: 2.5em; */
@@ -256,15 +265,29 @@ h1 {
   */
 }
 
-#photo {
+#profile #photo {
   /* object-fit: scale-down; */
 }
 
+#profile-top img {
+  height: 180px;
+  width: 180px;
+}
+
+#profile-top #photo {
+  border-radius: 20px;
+}
+
 h3, h4, h5 {
   padding-left: 2em;
   padding-right: 2em;
 }
 
+#titles {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
 #container-of-profile {
   /* margin: auto; */
   padding-bottom: 0.5em;
@@ -445,7 +468,7 @@ h3, h4, h5 {
     border: 1px solid #434a53; /* #6f7b8c */
   }
 
-  #qrcode {
+  #profile #qrcode {
     filter: invert(0.9);
   }
 
@@ -482,6 +505,21 @@ h3, h4, h5 {
 }
 */
 
+@media (max-width: 950px) {
+
+  #action-bar > #vcard,
+  #profile-top img,
+  #number-of-pages #first,
+  #number-of-pages #last {
+    display: none;
+  }
+
+  #profile-top {
+    justify-content: center;
+  }
+
+}
+
 @media (max-width: 885px) {
 
   h1 {
@@ -498,15 +536,15 @@ h3, h4, h5 {
     width: unset;
   }
 
-  #photo,
-  #qrcode {
+  #profile #photo,
+  #profile #qrcode {
     display: block;
     /* border-radius: 50px; */
     margin: auto;
     margin-bottom: 2.5em;
   }
 
-  #qrcode {
+  #profile #qrcode {
     outline: solid;
     outline-color: #333;
   }
@@ -578,8 +616,8 @@ h3, h4, h5 {
     text-shadow: unset;
   }
 
-  #photo,
-  #qrcode {
+  #profile #photo,
+  #profile #qrcode {
     /* height: unset; */
     height: 360px;
     max-width: 70%;
@@ -587,7 +625,7 @@ h3, h4, h5 {
     /* width: 360px; */
   }
 
-  #photo {
+  #profile #photo {
     background: unset;
   }