Python : Add instructions for download page;

SVG    : Add icons of XMPP clients;
TOML   : Add a list of XMPP clients;
XHTML  : Add a download page;
XHTML  : Remove unused code.

css/stylesheet.css

@@ -12,6 +12,13 @@ div, h1, h2, h3, h4, h5 {
 
 h1, h2, h3 {
   text-align: center;
+  margin: 0;
+  padding: 1em;
+}
+
+h3, h4, h5 {
+  padding-left: 2em;
+  padding-right: 2em;
 }
 
 html {
@@ -57,10 +64,11 @@ div:has(#bar) {
 }
 
 #bar,
+#container-of-selection,
 #content > #entries > .entry,
+#profile,
 #profile-top,
-#table-of-contents > ol,
-#profile {
+#table-of-contents > ol {
   background: #f5f5f5;
 }
 
@@ -163,7 +171,7 @@ label,
 }
 
 #action,
-#action-bar,
+/* #action-bar, */
 #actions-compact {
   margin-bottom: 1em;
 }
@@ -286,9 +294,103 @@ h1 {
   border-radius: 20px;
 }
 
-h3, h4, h5 {
-  padding-left: 2em;
+#selection {
+  padding-left: 1em;
   padding-right: 2em;
+  padding-top: 2em;
+}
+
+#selection > dt {
+  margin-bottom: 1.5em;
+  margin-left: 0.5em;
+  margin-top: 2em;
+  /*
+  border-bottom: solid;
+  display: block;
+  width: 15em;
+  */
+}
+
+#selection > dd {
+  display: flex;
+  justify-content: space-between;
+}
+
+#selection dd {
+  font-size: 1.5em;
+}
+
+#selection > dd span.text {
+  margin-top: 1em;
+  margin-bottom: 3em;
+  white-space: break-spaces;
+}
+
+#selection img.wide {
+  border-radius: 10px;
+  margin-bottom: 3em;
+  margin-left: 2em;
+  margin-right: 2em;
+  height: 130px;
+  width: 130px;
+}
+
+#selection img.icon {
+  height: 30px;
+  width: 30px;
+}
+
+#selection > dd:last-child > span {
+  margin-bottom: 3em;
+  margin-top: 1em;
+}
+
+#selection img.narrow {
+  display: none;
+  height: 30px;
+  width: 30px;
+}
+
+#selection a {
+  font-size: 30px;
+  text-decoration: none;
+}
+
+#selection .features {
+  font-size: 80%;
+  margin: 1em;
+}
+
+#selection .features > span {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+#security-notices {
+  display: flex;
+  justify-content: center;
+}
+
+#security-notices > .notice {
+  /* align-items: center; */
+  background: #ebebbe;
+  border-radius: 10px;
+  display: flex;
+  font-size: 1.2em;
+  margin: 1em;
+  /*
+  margin-right: 20%;
+  margin-left: 20%;
+  */
+  padding: 1em;
+  width: 500px;
+}
+
+#security-notices img {
+  height: 80px;
+  margin-left: 0.5em;
+  margin-right: 1em;
+  width: 80px;
 }
 
 #titles {
@@ -499,6 +601,14 @@ h3, h4, h5 {
 
 }
 
+@media (max-width: 1150px) {
+
+  #action > #view {
+    display: none;
+  }
+
+}
+
 /* NOTE This rule useful, for larger images (800x800), to switch from
         background-size: 100vw;
 */
@@ -513,12 +623,28 @@ h3, h4, h5 {
 }
 */
 
-@media (max-width: 1150px) {
+@media (max-width: 950px) {
 
-  #action > #view {
+  #security-notices {
+    display: grid;
+  }
+
+}
+
+@media (max-width: 820px) {
+
+  #action-bar > #reactos {
     display: none;
   }
 
+  #selection img.wide {
+    display: none;
+  }
+
+  #selection img.narrow {
+    display: unset;
+  }
+
 }
 
 @media (max-width: 950px) {
@@ -594,7 +720,8 @@ h3, h4, h5 {
   }
 
   #action > #add,
-  #action-bar > #add {
+  #action-bar > #add,
+  #action-bar > #haiku {
     display: none;
   }
 
@@ -672,6 +799,14 @@ h3, h4, h5 {
 
 }
 
+@media (max-width: 670px) {
+
+  #action-bar > #linux {
+    display: none;
+  }
+
+}
+
 @media (max-width: 572px) {
 
   #action > a,
@@ -694,4 +829,8 @@ h3, h4, h5 {
     padding-right: 1.4em;
   }
 
+  #security-notices > .notice {
+    width: 400px;
+  }
+
 }