Added partner logos to website

src/lib/components/NavigationFooter.svelte

@@ -6,6 +6,41 @@
     import { CDN } from "$lib/constants";
 
     import { navigation } from "$lib/navigation";
+
+    const partnerLogos = [
+        {
+            href: "https://dcu.ie/",
+            src: CDN + "/DCU_Logo.webp",
+            alt: "Dublin City University Logo",
+        },
+        { href: "https://ethz.ch", src: CDN + "/ETHZ_Logo.webp", alt: "ETH Zurich Logo" },
+        {
+            href: "https://uliege.be",
+            src: CDN + "/UL_Logo.webp",
+            alt: "University of Liege Logo",
+        },
+        { href: "https://aalto.fi", src: CDN + "/AU_Logo.webp", alt: "Aalto University Logo" },
+        {
+            href: "https://nus.edu.sg",
+            src: CDN + "/NUS_Logo.webp",
+            alt: "National University of Singapore Logo",
+        },
+        {
+            href: "https://strath.ac.uk",
+            src: CDN + "/USG_Logo.webp",
+            alt: "Strathclyde University Logo",
+        },
+        {
+            href: "https://dtu.dk",
+            src: CDN + "/DTU_Logo.webp",
+            alt: "Danmarks Teksnike Universitet Logo",
+        },
+        {
+            href: "https://eng.pw.edu.pl",
+            src: CDN + "/WUT_Logo.webp",
+            alt: "Warsaw University of Technology Logo",
+        },
+    ];
 </script>
 
 <div class="navigation-footer">
@@ -19,35 +54,12 @@
                 />
             </a>
         </div>
-        <div class="navigation-footer-social-media">
+        <div class="logo-grid-container">
-            <div class="navigation-footer-buttons-icon">
+            {#each partnerLogos as logo (logo.src)}
-                <img
+                <a href={logo.href} target="_blank" rel="noopener noreferrer" title={logo.alt}>
-                    class="navigation-footer-social-icon"
+                    <img src={logo.src} alt={logo.alt} class="grid-logo" />
-                    src="https://s.magecdn.com/social/mb-facebook.svg"
+                </a>
-                    alt="Black Facebook icon"
+            {/each}
-                />
-            </div>
-            <div class="navigation-footer-buttons-icon">
-                <img
-                    class="navigation-footer-social-icon"
-                    src="https://s.magecdn.com/social/mb-linkedin.svg"
-                    alt="Black LinkedIn icon"
-                />
-            </div>
-            <div class="navigation-footer-buttons-icon">
-                <img
-                    class="navigation-footer-social-icon"
-                    src="https://s.magecdn.com/social/mb-youtube.svg"
-                    alt="Black YouTube icon"
-                />
-            </div>
-            <div class="navigation-footer-buttons-icon">
-                <img
-                    class="navigation-footer-social-icon"
-                    src="https://s.magecdn.com/social/mb-instagram.svg"
-                    alt="Black Instagram icon"
-                />
-            </div>
         </div>
     </div>
     <div class="navigation-footer-column-mid">

src/lib/styles/NavigationFooter.scss

@@ -1,153 +1,190 @@
 .navigation-footer {
-    display: flex;
+  display: grid;
-    flex-direction: row;
+  grid-template-columns: 1fr min-content 1fr;
-    flex-wrap: wrap;
+  justify-content: space-between;
-    justify-content: space-between;
+  background: #ffffff;
-    background: #ffffff;
+  width: 100%;
-    width: 100%;
+  height: 240px;
-    height: 240px;
 }
 
 .navigation-footer-column {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    width: 33%;
+  padding: 32px;
-    padding: 32px;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
 }
 
 .navigation-footer-logo-link {
-    max-width: 180px;
+  display: flex;
-    padding-left: 24px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 .navigation-footer-logo {
-    height: 180px;
+  width: 100%;
-    max-width: 180px;
+  max-width: 180px;
-    width: auto;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 .navigation-footer-column-left {
-    @extend .navigation-footer-column;
+  @extend .navigation-footer-column;
-    justify-content: space-between;
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  align-items: center;
+  gap: 2rem;
 }
 
 .navigation-footer-column-mid {
-    @extend .navigation-footer-column;
+  @extend .navigation-footer-column;
-    align-items: center;
+  align-items: center;
+  min-width: 240px;
 }
 
 .navigation-footer-column-right {
-    @extend .navigation-footer-column;
+  @extend .navigation-footer-column;
-    align-items: center;
+  align-items: center;
 }
 
 .navigation-footer-site-name {
-    color: #000000;
+  color: #000000;
-    text-align: left;
+  text-align: left;
-    font-family: "Assistant", sans-serif;
+  font-family: "Assistant", sans-serif;
-    font-size: 24px;
+  font-size: 24px;
-    position: relative;
+  position: relative;
-    padding: 8px;
+  padding: 8px;
 }
 
 .navigation-footer-topic-column {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    position: relative;
+  position: relative;
 }
 
 .navigation-footer-topic {
-    color: #000000;
+  color: #000000;
-    font-family: "Assistant", sans-serif;
+  font-family: "Assistant", sans-serif;
-    font-size: 28px;
+  font-size: 28px;
-    font-weight: 600;
+  font-weight: 600;
-    position: relative;
+  position: relative;
 }
 
 .navigation-footer-link {
-    color: #454545;
+  color: #454545;
-    font-family: "Assistant", sans-serif;
+  font-family: "Assistant", sans-serif;
-    font-size: 24px;
+  font-size: 24px;
-    text-decoration: underline;
+  text-decoration: underline;
-    position: relative;
+  position: relative;
 }
 
-.navigation-footer-social-icon {
+.logo-grid-container {
-    width: 24px;
+  display: grid;
-    height: 24px;
+  grid-template-columns: repeat(4, 1fr);
-    position: relative;
+  gap: 1.5rem;
-}
+  width: 100%;
 
-.navigation-footer-social-media {
+  .grid-logo {
-    // display: flex; # temporarily disable
+    max-width: 100%;
-    display: none;
+    height: auto;
-    flex-direction: row;
+    object-fit: contain;
-    gap: var(--spacing-xs, 8px);
+    filter: grayscale(100%);
-    align-items: flex-start;
+    opacity: 0.7;
-    justify-content: flex-start;
+    transition: all 0.3s ease-in-out;
-    position: relative;
+
+    &:hover {
+      filter: grayscale(0%);
+      opacity: 1;
+      transform: scale(1.05);
+    }
+  }
 }
 
 .navigation-footer-buttons-icon {
-    border-radius: 4px;
+  border-radius: 4px;
-    padding: 8px;
+  padding: 8px;
-    width: 42px;
+  width: 42px;
-    height: 42px;
+  height: 42px;
-    position: relative;
+  position: relative;
 }
 
 .navigation-footer-return {
-    color: rgba(70, 70, 70, 0.5);
+  color: rgba(70, 70, 70, 0.5);
-    font-family: "Assistant", sans-serif;
+  font-family: "Assistant", sans-serif;
-    font-size: 16px;
+  font-size: 16px;
-    position: relative;
+  position: relative;
+}
+
+@media (max-width: 1280px) {
+  .logo-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 960px) {
+  .navigation-footer-column-left {
+    grid-template-columns: 90px 1fr;
+  }
+
+  .navigation-footer-logo {
+    max-width: 90px;
+  }
+
+  .logo-grid-container {
+    gap: 1.0rem;
+  }
 }
 
 @media (max-width: 820px) {
-    .navigation-footer {
+  .navigation-footer-column-left {
-        height: 100%;
+    grid-template-columns: 180px 1fr;
-        flex-direction: column-reverse;
+  }
-    }
 
-    .navigation-footer-column {
+  .navigation-footer-logo {
-        width: 100%;
+    max-width: 180px;
-    }
+  }
 
-    .navigation-footer-column-left {
+  .navigation-footer {
-        flex-direction: row;
+    display: flex;
-        justify-content: space-between;
+    flex-direction: column-reverse;
-    }
+    flex-wrap: wrap;
+    height: 100%;
+  }
 
-    .navigation-footer-column-mid {
+  .navigation-footer-column {
-        align-items: center;
+    width: 100%;
-    }
+  }
 
-    .navigation-footer-column-right {
+  .navigation-footer-topic-column {
-        align-items: center;
+    flex-direction: row;
-    }
+    width: 100%;
-
+    justify-content: space-between;
-    .navigation-footer-topic-column {
+  }
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-    }
 }
 
 @media (max-width: 620px) {
-    .navigation-footer-column-left {
+  .navigation-footer-column-left {
-        flex-direction: column;
+    grid-template-columns: 1fr;
-        align-items: center;
+    justify-items: center;
-        justify-content: center;
+  }
-    }
 
-    .navigation-footer-topic-column {
+  .logo-grid-container {
-        flex-direction: column;
+    grid-template-columns: 1fr;
-        align-items: center;
+    justify-items: center;
-        justify-content: center;
+    max-width: 200px;
-    }
+  }
+
+  .navigation-footer-topic-column {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }