Add website translations

assets/css/table.scss

@@ -5,7 +5,7 @@
 
     .table-head {
       display: grid;
-      grid-template-columns: 20em repeat(6, 1fr);
+      grid-template-columns: 20em repeat(5, 1fr);
       grid-template-rows: 1fr;
       position: sticky;
       top: 0;
@@ -41,7 +41,7 @@
 
     /* replace with :has(.tfa) when supported */
     &.green {
-      grid-template-columns: 20em repeat(6, 1fr);
+      grid-template-columns: 20em repeat(5, 1fr);
     }
 
     /* replace with :has(.contact) when supported */
@@ -62,6 +62,7 @@
       display: grid;
       grid-auto-flow: column;
       justify-content: space-between;
+
       :last-child {
         padding-right: .5em;
       }
@@ -70,7 +71,7 @@
     .name {
       grid-area: 1 / 1 / 2 / 2;
       line-height: 4.4rem;
-      padding: 0 ;
+      padding: 0;
     }
 
     .note {
@@ -81,35 +82,24 @@
     }
 
     .docs {
-      grid-area: 1 / 2 / 2 / 3;
       display: flex;
       flex-wrap: wrap;
+      font-family: 'Material Symbols Outlined';
+      font-size: 2em;
+      vertical-align: middle;
 
-      .website-doc {
+      * {
         display: block;
         text-decoration: none;
         margin: auto;
-
-        &:after {
-          content: '\E873';
-          font-family: 'Material Symbols Outlined';
-          font-size: 2em;
-          vertical-align: middle;
-        }
       }
 
-      .recovery-doc {
-        display: block;
-        text-decoration: none;
-        margin: auto;
+      .website-doc::after {
+        content: '\E873';
+      }
 
-        &:after {
-          content: '\E929';
-          font-family: 'Material Symbols Outlined';
-          font-size: 2em;
-          font-weight: 600;
-          vertical-align: middle;
-        }
+      .recovery-doc::after {
+        content: '\E929';
       }
     }
 
@@ -118,48 +108,22 @@
       flex-wrap: wrap;
       font-size: 27px;
       line-height: 53px;
+      font-family: 'Material Symbols Outlined';
 
       * {
         margin: auto;
-        display: block;
       }
 
-      &.used {
-        &:before {
-          content: '\E5CA';
-          font-family: 'Material Symbols Outlined';
-          font-size: 1.5em;
-          margin: auto;
-          display: block;
-          font-weight: 600;
-        }
-      }
-
-      &.sms {
-        grid-area: 1 / 3 / 2 / 4;
-      }
-
-      &.voice {
-        grid-area: 1 / 4 / 2 / 5;
-      }
-
-      &.email {
-        grid-area: 1 / 5 / 2 / 6;
-      }
-
-      &.hardware {
-        grid-area: 1 / 6 / 2 / 7;
-      }
-
-      &.software {
-        grid-area: 1 / 7 / 2 / 8;
+      &.used:before {
+        content: '\E5CA';
+        font-size: 1.5em;
+        margin: auto;
+        display: block;
+        font-weight: 600;
       }
 
-      .icon-info {
-        &:before{
-          content: '\E88E';
-          font-family: 'Material Symbols Outlined';
-        }
+      .icon-info:before {
+        content: '\E88E';
       }
     }
 
@@ -173,6 +137,7 @@
 
       button {
         margin-left: .5em;
+
         &:before {
           margin-right: .5em;
         }
@@ -201,14 +166,14 @@
 
     .tfa-summary {
       position: absolute;
-      top:-1000px;
-      left:-1000px;
+      top: -1000px;
+      left: -1000px;
     }
   }
 }
 
+/** Universal styles **/
 .contact {
-
   button {
     width: 140px;
     margin: .2em;
@@ -219,7 +184,6 @@
 
     &:before {
       vertical-align: middle;
-
       content: '';
     }
 
@@ -245,7 +209,7 @@
       }
     }
 
-    &.email,&.form {
+    &.email, &.form {
       background: #ea4235;
 
       &:before {
@@ -285,7 +249,6 @@
   }
 }
 
-/** Universal styles **/
 .entry {
   &.green {
     background: var(--table-bg-green);
@@ -371,7 +334,9 @@
         }
 
         .website-doc {
-
+          vertical-align: middle;
+          font-family: var(--default-font);
+          font-weight: 300;
           &:before {
             content: '\E873';
             font-family: 'Material Symbols Outlined';
@@ -435,13 +400,15 @@
           line-height: 0;
           font-size: 2em;
           height: 48px;
+
           &:before {
-            display:block;
+            display: block;
           }
         }
 
         .facebook, .twitter {
           width: calc(100% - 0.5em);
+
           &:before {
             padding: 1em;
             width: calc(100% - 0.5em);

index.html

@@ -7,7 +7,7 @@
     <main class="container" role="main">
       <div id="search"></div>
 
-      <h3 id="categories-title">Categories</h3>
+      <h3 id="categories-title"></h3>
       <div class="categories" id="categories"></div>
       <div class="categories search-results" id="search-categories"></div>
     </main>

lang/en.json

@@ -0,0 +1,53 @@
+{
+  "search-placeholder": "Search websites by name, URL or method (e.g. 2fa:sms)",
+  "categories": "Categories",
+  "backup": "Backup and Sync",
+  "banking": "Banking",
+  "betting": "Betting",
+  "cloud": "Cloud Computing",
+  "communication": "Communication",
+  "creativity": "Creativity",
+  "crowdfunding": "Crowdfunding",
+  "cryptocurrencies": "Cryptocurrencies",
+  "developer": "Developer",
+  "domains": "Domains",
+  "education": "Education",
+  "email": "Email",
+  "entertainment": "Entertainment",
+  "finance": "Finance",
+  "food": "Food",
+  "gaming": "Gaming",
+  "government": "Government",
+  "health": "Health",
+  "hosting": "Hosting/VPS",
+  "hotels": "Hotels and Accommodations",
+  "identity": "Identity Management",
+  "insurance": "Insurance",
+  "investing": "Investing",
+  "iot": "IoT",
+  "legal": "Legal & Compliance",
+  "marketing": "Marketing & Analytics",
+  "payments": "Payments",
+  "postal": "Post and Shipping",
+  "remote": "Remote Access",
+  "retail": "Retail",
+  "security": "Security",
+  "social": "Social",
+  "task": "Task Management",
+  "tickets": "Tickets and Events",
+  "transport": "Transport",
+  "universities": "Universities",
+  "utilities": "Utilities",
+  "vpn": "VPN",
+  "other": "Other",
+  "docs": "Docs",
+  "sms": "SMS/Calls",
+  "hardware": "Hardware",
+  "software": "Software",
+  "custom-hardware": "Custom Hardware",
+  "custom-software": "Custom Software",
+  "attention": "Attention!",
+  "social-media-warning": "Posting to social media could potentially give other people clues to what accounts you have.",
+  "accept-risk": "I accept the risk",
+  "go-back": "Go back"
+}

lang/es.json

@@ -0,0 +1,53 @@
+{
+  "search-placeholder": "Busca sitios web por nombre o URL",
+  "categories": "Categorías",
+  "backup": "Respaldo",
+  "banking": "Banca",
+  "betting": "Apuestas",
+  "cloud": "Nube",
+  "communication": "Comunicación",
+  "creativity": "Creatividad",
+  "crowdfunding": "Financiación colectiva",
+  "cryptocurrencies": "Criptomonedas",
+  "developer": "Desarrollador",
+  "domains": "Dominios",
+  "education": "Educación",
+  "email": "Correo",
+  "entertainment": "Entretenimiento",
+  "finance": "Finanzas",
+  "food": "Comida",
+  "gaming": "Videojuegos",
+  "government": "Gobierno",
+  "health": "Salud",
+  "hosting": "Alojamiento web",
+  "hotels": "Hoteles y alojamientos",
+  "identity": "ID y clave",
+  "insurance": "Seguros",
+  "investing": "Inversiones",
+  "iot": "IoT",
+  "legal": "Legal y cumplimiento",
+  "marketing": "Marketing y análisis",
+  "payments": "Pagos",
+  "postal": "Correo y envíos",
+  "remote": "Acceso remoto",
+  "retail": "Compras",
+  "security": "Seguridad",
+  "social": "Redes sociales",
+  "task": "Gestión de tareas",
+  "tickets": "Eventos",
+  "transport": "Transporte",
+  "universities": "Universidades",
+  "utilities": "Servicios públicos",
+  "vpn": "VPN",
+  "other": "Otros",
+  "docs": "Documentación",
+  "sms": "SMS/Llamadas",
+  "hardware": "Físico",
+  "software": "App",
+  "custom-hardware": "Físico personalizado",
+  "custom-software": "App personalizada",
+  "attention": "¡Atención!",
+  "social-media-warning": "Publicar en redes sociales podría dar pistas a otros sobre qué cuentas tienes.",
+  "accept-risk": "Acepto el riesgo",
+  "go-back": "Volver"
+}

lang/fr.json

@@ -0,0 +1,53 @@
+{
+  "search-placeholder": "Recherchez des sites par nom, URL ou méthode (par ex. 2fa:sms)",
+  "categories": "Catégories",
+  "backup": "Sauvegarde et synchronisation",
+  "banking": "Banque",
+  "betting": "Paris",
+  "cloud": "Informatique en nuage",
+  "communication": "Communication",
+  "creativity": "Créativité",
+  "crowdfunding": "Financement participatif",
+  "cryptocurrencies": "Cryptomonnaies",
+  "developer": "Développeur",
+  "domains": "Domaines",
+  "education": "Éducation",
+  "email": "E-mail",
+  "entertainment": "Divertissement",
+  "finance": "Finance",
+  "food": "Nourriture",
+  "gaming": "Jeux",
+  "government": "Gouvernement",
+  "health": "Santé",
+  "hosting": "Hébergement/VPS",
+  "hotels": "Hôtels et hébergements",
+  "identity": "Gestion d'identité",
+  "insurance": "Assurance",
+  "investing": "Investissement",
+  "iot": "IoT",
+  "legal": "Juridique",
+  "marketing": "Marketing & Analytique",
+  "payments": "Paiements",
+  "postal": "Poste et expédition",
+  "remote": "Accès à distance",
+  "retail": "Commerce de détail",
+  "security": "Sécurité",
+  "social": "Réseaux sociaux",
+  "task": "Gestion des tâches",
+  "tickets": "Billets et événements",
+  "transport": "Transport",
+  "universities": "Universités",
+  "utilities": "Services publics",
+  "vpn": "VPN",
+  "other": "Autre",
+  "docs": "Documentation",
+  "sms": "SMS/Appels",
+  "hardware": "Matériel",
+  "software": "Logiciel",
+  "custom-hardware": "Matériel personnalisé",
+  "custom-software": "Logiciel personnalisé",
+  "attention": "Attention!",
+  "social-media-warning": "Publier sur les réseaux sociaux pourrait potentiellement donner à d'autres des indices sur vos comptes.",
+  "accept-risk": "J'accepte le risque",
+  "go-back": "Retour"
+}