Add support for preview of conferences;

Fix some errors;
Improve display of node items of type Atom Over XMPP (XEP-0277 and XEP-0472).

css/stylesheet.css

@@ -1,4 +1,8 @@
-* {
+#bar,
+#action,
+#action-bar,
+#graphics,
+#input {
   user-select: none;
 }
 
@@ -6,8 +10,8 @@ div, h1, h2, h3, h4, h5 {
   font-family: system-ui;
 }
 
-h1, h2, h3, h4, h5 {
-  user-select: text;
+h1, h2, h3 {
+  text-align: center;
 }
 
 html {
@@ -35,19 +39,28 @@ body {
   /* background-size: cover; */
   margin: 0;
   min-height: 100%;
+  min-width: 450px;
 }
+
 /* 
 div:has(#bar) {
   height: 100vh;
 }
  */
-#bar {
+
+#bar,
+#content > #entries > .entry,
+#profile-top,
+#table-of-contents > ol,
+#profile {
   background: #f5f5f5;
+}
+
+#bar {
   display: flex;
   filter: drop-shadow(0 0 4px grey);
   height: 3em;
   justify-content: space-between;
-  margin-bottom: 2.5em;
   padding-bottom: 1em;
   padding-left: 0.5em;
   padding-right: 0.5em;
@@ -64,6 +77,7 @@ div:has(#bar) {
 }
 
 #xmpp-uri {
+  cursor: default;
   user-select: all;
 }
 
@@ -89,6 +103,7 @@ input:not(
 
 label,
 #action > a,
+#actions-bar > a,
 #exception,
 #xmpp-uri,
 #preview {
@@ -101,7 +116,9 @@ label,
   /* padding-bottom: 1em; */
 }
 
-#action > a {
+#action > a,
+#action-bar > a,
+#number-of-pages > a {
   display: inline-block;
   font-size: 1.2em;
   min-width: 90px;
@@ -109,6 +126,12 @@ label,
   width: 15%;
 }
 
+#actions-compact > a {
+  margin: 0.1em;
+  padding: 0.8em;
+  text-decoration: none;
+}
+
 #download,
 #input {
   border-radius: 2em;
@@ -116,23 +139,46 @@ label,
   padding: 0.5em;
 }
 
-#action {
+#profile-top {
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+}
+
+#action-bar,
+#number-of-pages {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+#action,
+#action-bar,
+#actions-compact {
   margin-bottom: 1em;
 }
 
 #action,
-#input {
+#action-bar,
+#actions-compact,
+#input,
+#number-of-pages {
   background: #13b5ea; /* #002b5c */
 }
 
 #action > a:hover,
-#input:hover {
+#action-bar > a:hover,
+#actions-compact > a:hover,
+#input:hover,
+#number-of-pages > a:hover {
   background: #1b3967;
 }
 
 #action > a,
+#action-bar > a,
 #download,
-#input {
+#input,
+#number-of-pages > a {
   color: #f5f5f5;
   font-weight: bold;
   padding-left: 2em;
@@ -218,10 +264,48 @@ h3, h4, h5 {
   padding-bottom: 0.5em;
 }
 
+#profile-top,
+#content > #entries > .entry {
+  padding: 2em;
+}
+
+#profile-top,
+#content > #entries > .entry {
+  border-radius: 30px;
+  margin-bottom: 2em;
+  margin-left: 1em; /* 0.5 */
+  margin-right: 1em; /* 0.5 */
+  margin-top: 2em;
+}
+
+/*
+#content > #entries > .entry {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  margin-right: 0;
+}
+*/
+
+/*
+#content > #entries > .entry:first-child {
+  margin-top: 0;
+}
+*/
+
+#content,
+#profile-compact {
+  filter: drop-shadow(2px 4px 6px grey);
+}
+
+#container-of-content {
+  /* margin-left: 8em; */
+  /* overflow: auto; */
+}
+
 #profile {
-  background: #f5f5f5;
   border-radius: 30px;
   filter: drop-shadow(2px 4px 6px grey);
+  margin-top: 2.5em;
   margin-bottom: 2.5em;
   margin-left: auto;
   margin-right: auto;
@@ -244,13 +328,15 @@ h3, h4, h5 {
 }
 
 #entries {
-  padding: 2em;
+  /* padding: 2em; */
   text-align: left;
 }
 
+/*
 .entry > * {
   margin-bottom: 1em;
 }
+*/
 
 .summary {
   white-space: pre-wrap;
@@ -261,6 +347,17 @@ h3, h4, h5 {
   text-align: left;
 }
 
+.link {
+  margin: 0.1em;
+  padding: 0.8em;
+  text-decoration: none;
+}
+
+.permalink {
+  padding-right: 0.8em;
+  text-decoration: none;
+}
+
 #count > a,
 #preview {
   color: #5c5656;
@@ -306,6 +403,8 @@ h3, h4, h5 {
   h1, h2 ,h3, h4, h5,
   label[for="jid"],
   #count > a,
+  #count > a:hover,
+  #preview:hover,
   #jid,
   #xmpp-uri {
     color: #fbfbfe;
@@ -325,7 +424,9 @@ h3, h4, h5 {
       url(/img/background.svg);
   }
 
-  #bar {
+  #bar,
+  #note,
+  #profile {
     background: #2b2a33;
   }
 
@@ -343,7 +444,6 @@ h3, h4, h5 {
   }
 
   #profile {
-    background: #2b2a33;
     filter: drop-shadow(2px 4px 6px grey); /* TODO Reverse color */
   }
 
@@ -351,13 +451,7 @@ h3, h4, h5 {
     color: #2b2a33;
   }
 
-  #count > a:hover,
-  #preview:hover {
-    color: #fbfbfe;
-  }
-
   #note {
-    background: #2b2a33;
     color: #f5f5f5;
     text-shadow: 1px 1px #fbfbfe;
   }
@@ -427,7 +521,6 @@ h3, h4, h5 {
   #bar {
     border-bottom: 1px solid #c0c0c0;
     filter: unset;
-    margin-bottom: 0;
   }
 
   #message {
@@ -445,6 +538,7 @@ h3, h4, h5 {
   #profile {
     border-radius: unset;
     filter: unset;
+    margin-top: unset;
     margin-bottom: unset;
     max-height: unset;
     max-width: unset;