From 4e06bb6bae0e7dc12cf0b46e5b4258d3b93b7dde Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Wed, 1 Nov 2023 18:27:34 +0000
Subject: [PATCH] Fix the icons in the mobile view

---
 _includes/icons/github.svg   |  2 +-
 _includes/icons/mastodon.svg |  1 +
 _includes/icons/rss.svg      |  1 +
 _sass/header.scss            | 21 ++++++++++++++++-----
 _sass/main.scss              |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/_includes/icons/github.svg b/_includes/icons/github.svg
index 538ec5b..bfb624b 100644
--- a/_includes/icons/github.svg
+++ b/_includes/icons/github.svg
@@ -1 +1 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
\ No newline at end of file
+<svg class="invertable" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
\ No newline at end of file
diff --git a/_includes/icons/mastodon.svg b/_includes/icons/mastodon.svg
index 5207a02..41067ca 100644
--- a/_includes/icons/mastodon.svg
+++ b/_includes/icons/mastodon.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
+   class="invertable"
    width="61.076954mm"
    height="65.47831mm"
    viewBox="0 0 216.4144 232.00976"
diff --git a/_includes/icons/rss.svg b/_includes/icons/rss.svg
index 01c3192..836ca35 100644
--- a/_includes/icons/rss.svg
+++ b/_includes/icons/rss.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
+   class="invertable"
    role="img"
    viewBox="0 0 24 24"
    version="1.1"
diff --git a/_sass/header.scss b/_sass/header.scss
index 0fab96f..963e6f3 100644
--- a/_sass/header.scss
+++ b/_sass/header.scss
@@ -107,10 +107,21 @@ header {
         border-width:1px;
     }
 
-    header p.professional-links a {
-        margin-left: 1em;
-        margin-right: 1em;
-        flex-wrap: nowrap;
-        justify-content: center;
+    header p.professional-links {
+        a {
+            margin-left: 1em;
+            margin-right: 1em;
+            flex-wrap: nowrap;
+            justify-content: center;
+
+            // In the main view, the github/mastodon/rss icons are on the right
+            // for the smaller view switch the to the left 
+            flex-direction: row-reverse;
+        }
+        svg {
+            // Switch the padding side having switched the order
+            margin-right: 0.5em;
+            margin-left: 0;
+        }
     }
 }
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index ca9d684..17c8087 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -154,7 +154,7 @@ model-viewer {
         opacity: .75;
         transition: opacity .5s ease-in-out;
     }
-    img.icon, img.invertable{
+    svg.invertable, img.invertable{
         opacity: 1;
         filter: invert(1);
     }