Stili per elementi compound e migliorie a pagine utenti e link

Un elemento "compound" sarebbe ad esempio il campo di ricerca della pagina utenti formato da un campo di testo e da un bottone.

public/style.css

@@ -346,6 +346,10 @@ p {
     max-width: 100%;
 }
 
+p.center {
+    text-align: center;
+}
+
 /* Controls */
 
 a {
@@ -401,6 +405,11 @@ button.primary:hover {
     background: var(--accent-2-lighter);
 }
 
+button.icon {
+    padding: 0;
+    width: 2rem;
+}
+
 /* Text Fields */
 
 input[type=text], input[type=password] {
@@ -428,6 +437,32 @@ input[type=password] {
     font-family: caption;
 }
 
+/* Compound Controls */
+
+.compound {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 4px;
+    box-shadow: 0 0 8px 0 #00000022;
+}
+
+.compound > button, .compound > .button, .compound > input {
+    box-shadow: none;
+}
+
+.compound > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.compound > :not(:last-child) {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 /* Forms */
 
 form .field {
@@ -531,4 +566,18 @@ form .field-set input {
 
 .page-home .main {
     padding-top: calc(100vh - 6rem);
+}
+
+.page-utenti .search {
+    margin: 2rem 0;
+}
+
+.page-utenti .search input[type=text] {
+    width: 50ch;
+    height: 2.5rem;
+}
+
+.page-utenti .search button {
+    width: 2.5rem;
+    height: 2.5rem;
 }

public/theme-dark.css

@@ -54,4 +54,8 @@ body.dark-mode {
 
 .dark-mode nav .nav-logo img {
     filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+}
+
+.dark-mode input[type] {
+    background: #4b4342;
 }

views/link.html

@@ -5,19 +5,32 @@
 {{define "body"}}
 <section>
     <h2>
-        <i class="fas fa-link"></i>
         Link Utili
     </h2>
-
+    <p class="center">
-    <h3>
+        Questo è un elenco di alcuni indirizzi potenzialmente utili
-        Questo è un elenco di alcuni indirizzi potenzialmente utili:
+    </p>
-    </h3>
+    <ul>
-
+        <li>
-    <a href="https://linktr.ee/aulastudenti">Link dell'Aula Studenti</a>
+            <a href="https://linktr.ee/aulastudenti">Link dell'Aula Studenti</a>
-    <a href="http://www.dm.unipi.it/webnew/it/cds/home-cds">Dipartimento di Matematica</a>
+            <i class="fas fa-external-link-alt"></i>
-    <a href="http://detexify.kirelabs.org/classify.html">Non trovi un simbolo in Latex?</a>
+        </li>
-    <a href="https://github.com/SuzanneSoy/WiTeX">Wikipedia + Latex</a>
+        <li>
-
+            <a href="#">Come stampare da terminale in dipartimento</a>
+        </li>
+        <li>
+            <a href="http://www.dm.unipi.it/webnew/it/cds/home-cds">Dipartimento di Matematica</a>
+            <i class="fas fa-external-link-alt"></i>
+        </li>
+        <li>
+            <a href="http://detexify.kirelabs.org/classify.html">Non trovi un simbolo in Latex?</a>
+            <i class="fas fa-external-link-alt"></i>
+        </li>
+        <li>
+            <a href="https://github.com/SuzanneSoy/WiTeX">Wikipedia + Latex</a>
+            <i class="fas fa-external-link-alt"></i>
+        </li>
+    </ul>
 </section>
 <script>
 

views/utenti.html

@@ -11,8 +11,12 @@
         Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale. Altrimenti di base in cima compariranno gli utenti con più "follower".
     </p>
     <div class="search">
-        <input type="text" id="search-field" placeholder="Cerca...">
+        <div class="compound">
-        <i class="fas fa-search"></i>
+            <input type="text" id="search-field" placeholder="Cerca..." autocomplete="off">
+            <button class="icon">
+                <i class="fas fa-search"></i>
+            </button>
+        </div>
     </div>
     <div class="user-list">
         <!-- Dummy data -->