Update signatories list and display formatting

Author: marcprux

src/data/signatures.yaml

@@ -62,14 +62,17 @@
   url: "f-droid.org"
   poc: "board@f-droid.org"
   region: NL
-- organization: "The Free Software Foundation (FSF)"
-  url: "fsf.org"
-  poc: "Greg Farough via RT <campaigns@fsf.org>"
-  region: US
+- organization: "IzzyOnDroid"
+  url: "izzyondroid.org"
+  poc: "Andreas Itzchak Rehberg <izzy@izzyondroid.org>"
 - organization: "The Free Software Foundation Europe (FSFE)"
   url: "fsfe.org"
   poc: "Lucas Lasota <lucas.lasota@fsfe.org>"
   region: DE
+- organization: "The Free Software Foundation (FSF)"
+  url: "fsf.org"
+  poc: "Greg Farough via RT <campaigns@fsf.org>"
+  region: US
 - organization: "Ghostery"
   url: "ghostery.com"
   poc: "Adam from Ghostery <adam@ghostery.com>"
@@ -89,9 +92,6 @@
   url: "osservatorionessuno.org"
   poc: "Giulio B <giulio@osservatorionessuno.org>"
   region: IT
-- organization: "IzzyOnDroid"
-  url: "izzyondroid.org"
-  poc: "Andreas Itzchak Rehberg <izzy@izzyondroid.org>"
 - organization: "Molly"
   url: "molly.im"
   poc: "Oscar Mira <valldrac@molly.im>"

src/pages/draft-letter.astro

@@ -38,7 +38,7 @@ function logoPath(url: string): string {
           <li>
             <img class="sig-logo" src={logoPath(sig.url)} alt={`${sig.organization} logo`} loading="lazy" />
             <div class="sig-details">
-              <span class="sig-name">{sig.organization}</span>
+              <span class="sig-name">{sig.organization} <span class="sig-flag">{regionFlag(sig.region)}</span></span>
               <a target="_blank" href={`https://${sig.url}`}>{sig.url}</a>
             </div>
           </li>
@@ -59,7 +59,7 @@ function logoPath(url: string): string {
     height: 3px;
     background: linear-gradient(90deg, transparent, #333, transparent);
     margin: 0 auto;
-    max-width: 36rem;
+    max-width: 60rem;
   }
 
   .signatories h2 {
@@ -87,43 +87,44 @@ function logoPath(url: string): string {
     list-style: none;
     padding: 0;
     margin: 0 auto 2rem;
-    max-width: 36rem;
+    max-width: 60rem;
+    columns: 1;
+  }
+
+  @media (min-width: 900px) {
+    .signatories ol {
+      columns: 2;
+      column-gap: 2rem;
+    }
   }
 
   .signatories li {
     display: flex;
-    align-items: flex-start;
-    padding: 0.75rem 0;
+    align-items: center;
+    padding: 0.6rem 0;
     border-bottom: 1px solid rgba(128, 128, 128, 0.15);
+    break-inside: avoid;
   }
 
   .signatories li:last-child {
     border-bottom: none;
     padding-bottom: 1.5rem;
   }
 
-  .sig-flag {
-    flex-shrink: 0;
-    width: 2.5rem;
-    padding-top: 0.1rem;
-    font-size: 1.3rem;
-    line-height: 1;
-  }
-
   .sig-logo {
     flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
     object-fit: contain;
     margin-inline-end: 0.75rem;
     border-radius: 4px;
-    align-self: center;
   }
 
   .sig-details {
     display: flex;
     flex-direction: column;
     gap: 0.1rem;
+    min-width: 0;
   }
 
   .sig-name {
@@ -132,6 +133,12 @@ function logoPath(url: string): string {
     letter-spacing: 0.01em;
   }
 
+  .sig-flag {
+    margin-inline-start: 0.4em;
+    font-size: 0.85em;
+    vertical-align: middle;
+  }
+
   .sig-details a {
     font-size: 0.8rem;
     opacity: 0.5;