fix: temporarily hide social links on mobile

config/.htaccess

@@ -4,7 +4,7 @@ Options -Indexes -MultiViews
 # assets.
 RewriteEngine on
 
-RewriteRule \.(css|js|jpg|png|gif|woff|woff2)$ - [NC,L]
+RewriteRule \.(css|js|jpg|png|gif|woff|woff2|svg)$ - [NC,L]
 
 RewriteCond %{HTTP:Accept-Language} ^(fr) [NC]
 RewriteCond %{REQUEST_URI} !^/(fr|en)/

src/lib/nav.html

@@ -17,6 +17,27 @@
       <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--separator"></div>
+    <div class="nav-bar--links">
+      <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
+          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
+      </a>
+      <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
+          <img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
+      </a>
+      <a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
+          <img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
+      </a>
+      <a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
+          <img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
+      </a>
+      <a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
+          <img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
+      </a>
+      <a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
+          <img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
+      </a>
+    </div>
+    <div class="nav-bar--separator"></div>
     <div class="nav-bar--languages">
       {{ language_button('fr', 'Version Française') }}
       {{ language_button('en', 'English version') }}
@@ -27,25 +48,5 @@
       <s class="bar"></s>
     </toggle-nav-bar-button>
   </div>
-  <div class="nav-bar--links">
-    <a href="mailto:contact@frog-collective.com">
-        <img src="/img/mail-fill.svg" alt-text=="{{ gettext('Mail') }}"></img>
-    </a>
-    <a href="https://www.youtube.com/@FrogCoGames" target="_blank">
-        <img src="/img/youtube-fill.svg" alt-text=="Youtube"></img>
-    </a>
-    <a href="https://www.twitch.tv/frogcollective" target="_blank">
-        <img src="/img/twitch-fill.svg" alt-text=="Twitch"></img>
-    </a>
-    <a href="https://mastodon.social/@frogcollective" target="_blank">
-        <img src="/img/mastodon-fill.svg" alt-text=="Mastodon"></img>
-    </a>
-    <a href="https://x.com/FrogCoGames" target="_blank">
-        <img src="/img/twitter-x-line.svg" alt-text=="Twitter - X"></img>
-    </a>
-    <a href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-        <img src="/img/facebook-circle-fill.svg" alt-text=="Facebook"></img>
-    </a>
-  </div>
 </nav-bar>
 

src/lib/nav.scss

@@ -33,7 +33,7 @@
         margin: 0;
 
         display: grid;
-        grid-template-columns: 1fr auto auto;
+        grid-template-columns: var(--desktop-logo-width) 1fr auto auto auto;
 
         @media ($mobile-breakpoint) {
             height: var(--mobile-height);
@@ -73,7 +73,7 @@
     }
 
     &--menu {
-        justify-self: end;
+        grid-area: 1 / 2 / 2 / 3;
         align-self: center;
 
         display: flex;
@@ -184,20 +184,24 @@
     }
 
     &--links {
-        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
-        height: var(--desktop-height);
-        grid-template-columns: 1fr auto auto;
-
         justify-self: end;
         align-self: center;
 
-        display: flex;
         padding: var(--space-small);
 
-        img {
+        @media($mobile-breakpoint) {
-            width: 2em;
+            display: none;
-            filter: invert(100%);
         }
     }
+
+    &--link {
+        display: flex;
+    }
+
+    &--link-icon {
+        width: 2em;
+        filter: invert(100%);
+    }
 }