fix: add missing social links and refactor stylesheet for icon

src/css/main.css

@@ -914,31 +914,31 @@ ul.contact-links li {
   --flow-space: 0.5em;
 }
 
-ul.contact-links li:nth-child(1) {
+ul.contact-links li.email {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(2) {
+ul.contact-links li.discord {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(3) {
+ul.contact-links li.x {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(4) {
+ul.contact-links li.mastodon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21.2595 13.9898C20.9852 15.4006 18.8033 16.9446 16.2974 17.2439C14.9907 17.3998 13.7041 17.5431 12.3321 17.4802C10.0885 17.3774 8.31809 16.9446 8.31809 16.9446C8.31809 17.163 8.33156 17.371 8.3585 17.5655C8.65019 19.7797 10.5541 19.9124 12.3576 19.9742C14.1779 20.0365 15.7987 19.5254 15.7987 19.5254L15.8735 21.1711C15.8735 21.1711 14.6003 21.8548 12.3321 21.9805C11.0814 22.0493 9.52849 21.9491 7.71973 21.4703C3.79684 20.432 3.12219 16.2504 3.01896 12.0074C2.98749 10.7477 3.00689 9.55981 3.00689 8.56632C3.00689 4.22771 5.84955 2.95599 5.84955 2.95599C7.2829 2.29772 9.74238 2.0209 12.2993 2H12.3621C14.919 2.0209 17.3801 2.29772 18.8133 2.95599C18.8133 2.95599 21.6559 4.22771 21.6559 8.56632C21.6559 8.56632 21.6916 11.7674 21.2595 13.9898ZM18.3029 8.9029C18.3029 7.82924 18.0295 6.97604 17.4805 6.34482C16.9142 5.71359 16.1726 5.39001 15.2522 5.39001C14.187 5.39001 13.3805 5.79937 12.8473 6.61819L12.3288 7.48723L11.8104 6.61819C11.2771 5.79937 10.4706 5.39001 9.40554 5.39001C8.485 5.39001 7.74344 5.71359 7.17719 6.34482C6.62807 6.97604 6.3547 7.82924 6.3547 8.9029V14.1562H8.43597V9.05731C8.43597 7.98246 8.88822 7.4369 9.79281 7.4369C10.793 7.4369 11.2944 8.08408 11.2944 9.36376V12.1547H13.3634V9.36376C13.3634 8.08408 13.8646 7.4369 14.8648 7.4369C15.7694 7.4369 16.2216 7.98246 16.2216 9.05731V14.1562H18.3029V8.9029Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(5) {
+ul.contact-links li.bluesky {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 11.3884C11.0942 9.62673 8.62833 6.34423 6.335 4.7259C4.13833 3.17506 3.30083 3.4434 2.75167 3.69256C2.11583 3.9784 2 4.95506 2 5.52839C2 6.10339 2.315 10.2367 2.52 10.9276C3.19917 13.2076 5.61417 13.9776 7.83917 13.7309C4.57917 14.2142 1.68333 15.4017 5.48083 19.6292C9.65833 23.9542 11.2058 18.7017 12 16.0392C12.7942 18.7017 13.7083 23.7651 18.4442 19.6292C22 16.0392 19.4208 14.2142 16.1608 13.7309C18.3858 13.9784 20.8008 13.2076 21.48 10.9276C21.685 10.2376 22 6.10256 22 5.52923C22 4.95423 21.8842 3.97839 21.2483 3.6909C20.6992 3.44256 19.8617 3.17423 17.665 4.72423C15.3717 6.34506 12.9058 9.62756 12 11.3884Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(6) {
+ul.contact-links li.linkedin {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.94048 4.99993C6.94011 5.81424 6.44608 6.54702 5.69134 6.85273C4.9366 7.15845 4.07187 6.97605 3.5049 6.39155C2.93793 5.80704 2.78195 4.93715 3.1105 4.19207C3.43906 3.44699 4.18654 2.9755 5.00048 2.99993C6.08155 3.03238 6.94097 3.91837 6.94048 4.99993ZM7.00048 8.47993H3.00048V20.9999H7.00048V8.47993ZM13.3205 8.47993H9.34048V20.9999H13.2805V14.4299C13.2805 10.7699 18.0505 10.4299 18.0505 14.4299V20.9999H22.0005V13.0699C22.0005 6.89993 14.9405 7.12993 13.2805 10.1599L13.3205 8.47993Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-ul.contact-links li:nth-child(7) {
+ul.contact-links li.github {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
 }
 

src/es/home.html

@@ -108,11 +108,13 @@ <h2>¿cómo puedes ayudar?</h2>
     <p><strong>Si crees en el futuro de la web, puedes ayudar a que ese futuro se haga realidad</strong>.</p>
 
     <ul class="contact-links">
-      <li><a href="mailto:[email protected]">envíanos un correo</a></li>
-      <li>Chatea con nosotros en <a href="https://discord.gg/x53hkqrRKx">Discord</a></li>
-      <li><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
-      <li><a href='https://mastodon.social/@owa' rel='me'>Mastodon</a></li>
-      <li><a href="https://github.com/OpenWebAdvocacy">Cuenta pública de Github</a></li>
+      <li class="email"><a href="mailto:[email protected]">envíanos un correo</a></li>
+      <li class="discord">Chatea con nosotros en <a href="https://discord.gg/x53hkqrRKx">Discord</a></li>
+      <li class="x"><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
+      <li class="mastodon"><a href="https://mastodon.social/@owa" rel="me">Mastodon</a></li>
+      <li class="bluesky"><a href="https://bsky.app/profile/open-web-advocacy.org" rel="me">BlueSky</a></li>
+      <li class="linkedin"><a href="https://www.linkedin.com/company/open-web-advocacy/" rel="me">LinkedIn</a></li>
+      <li class="github"><a href="https://github.com/OpenWebAdvocacy">Cuenta pública de GitHub</a></li>
     </ul>
     <p><a href="/get-involved/" class="action-button">Involucrarte</a></p>
     <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdBmnOqqQEgpV39oa5ZsYxGO_ZM-ZbvU85xs0UuzgQix4WiZw/viewform" class="action-button">Lista de correo</a></p>

src/ja/home.html

@@ -89,11 +89,13 @@ <h2>手助けをするには？</h2>
     <p><strong>ウェブの未来を信じるなら、あなたの助けでその未来を現実にできます。</strong></p>
 
     <ul class="contact-links">
-      <li><a href="mailto:[email protected]">メールを送る</a></li>
-      <li><a href="https://discord.gg/x53hkqrRKx">Discord</a>で話す</li>
-      <li><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
-      <li><a href='https://mastodon.social/@owa' rel='me'>Mastodon</a></li>
-      <li><a href="https://github.com/OpenWebAdvocacy">公開GitHubアカウント</a></li>
+      <li class="email"><a href="mailto:[email protected]">メールを送る</a></li>
+      <li class="discord"><a href="https://discord.gg/x53hkqrRKx">Discord</a>で話す</li>
+      <li class="x"><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
+      <li class="mastodon"><a href="https://mastodon.social/@owa" rel="me">Mastodon</a></li>
+      <li class="bluesky"><a href="https://bsky.app/profile/open-web-advocacy.org" rel="me">BlueSky</a></li>
+      <li class="linkedin"><a href="https://www.linkedin.com/company/open-web-advocacy/" rel="me">LinkedIn</a></li>
+      <li class="github"><a href="https://github.com/OpenWebAdvocacy">公開GitHubアカウント</a></li>
     </ul>
     <p><a href="/ja/get-involved/" class="action-button">参加する</a></p>
     <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdBmnOqqQEgpV39oa5ZsYxGO_ZM-ZbvU85xs0UuzgQix4WiZw/viewform" class="action-button">メーリングリスト</a></p>

src/pages/home.html

@@ -90,13 +90,13 @@ <h2>How can you help?</h2>
     <p><strong>If you believe in the future of the web, you can help make that future a reality</strong>.</p>
 
     <ul class="contact-links">
-      <li><a href="mailto:[email protected]">Send us an email</a></li>
-      <li>Chat to us on <a href="https://discord.gg/x53hkqrRKx">Discord</a></li>
-      <li><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
-      <li><a href='https://mastodon.social/@owa' rel='me'>Mastodon</a></li>
-      <li><a href='https://bsky.app/profile/open-web-advocacy.org' rel='me'>BlueSky</a></li>
-      <li><a href='https://www.linkedin.com/company/open-web-advocacy/' rel='me'>LinkedIn</a></li>
-      <li><a href="https://github.com/OpenWebAdvocacy">Public Github Account</a></li>
+      <li class="email"><a href="mailto:[email protected]">Send us an email</a></li>
+      <li class="discord">Chat to us on <a href="https://discord.gg/x53hkqrRKx">Discord</a></li>
+      <li class="x"><a href="https://twitter.com/OpenWebAdvocacy">@OpenWebAdvocacy</a></li>
+      <li class="mastodon"><a href="https://mastodon.social/@owa" rel="me">Mastodon</a></li>
+      <li class="bluesky"><a href="https://bsky.app/profile/open-web-advocacy.org" rel="me">BlueSky</a></li>
+      <li class="linkedin"><a href="https://www.linkedin.com/company/open-web-advocacy/" rel="me">LinkedIn</a></li>
+      <li class="github"><a href="https://github.com/OpenWebAdvocacy">Public GitHub Account</a></li>
     </ul>
     <p><a href="/get-involved/" class="action-button">Get involved</a></p>
     <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdBmnOqqQEgpV39oa5ZsYxGO_ZM-ZbvU85xs0UuzgQix4WiZw/viewform" class="action-button">Mailing List</a></p>