From 947daf8d9d0da55396d811ff7e56ea0090ce0609 Mon Sep 17 00:00:00 2001
From: Scott Straughan <scott.straughan@codeplay.com>
Date: Fri, 27 Sep 2024 15:01:39 +0100
Subject: [PATCH 1/2] Created a nicer looking footer.

---
 src/app/app.component.html | 100 +++++++++++++++++++--------
 src/app/app.component.scss | 136 +++++++++++++++++++++++++++----------
 src/styles/styles.scss     |   1 -
 3 files changed, 173 insertions(+), 64 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2259c81..a57d14a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -66,7 +66,7 @@
             <a [href]="environment.socials.github"
                target="_blank"
                rel="noopener">
-              <img ngSrc="./assets/images/github.svg" alt="GitHub Icon" height="20" width="20" /></a>
+              <img ngSrc="./assets/images/github.svg" alt="GitHub Icon" height="20" width="20"/></a>
           </li>
           <li>
             <a href="https://www.khronos.org/sycl/"
@@ -78,13 +78,13 @@
             <a [href]="environment.socials.discord"
                target="_blank"
                rel="noopener">
-              <img ngSrc="./assets/images/discord.svg" alt="Discord Icon" height="20" width="20" /></a>
+              <img ngSrc="./assets/images/discord.svg" alt="Discord Icon" height="20" width="20"/></a>
           </li>
           <li>
             <a [href]="environment.socials.discourse"
                target="_blank"
                rel="noopener">
-              <img ngSrc="./assets/images/discourse.svg" alt="Discourse Icon" height="20" width="20" /></a>
+              <img ngSrc="./assets/images/discourse.svg" alt="Discourse Icon" height="20" width="20"/></a>
           </li>
         </ol>
       </div>
@@ -149,37 +149,81 @@
   <router-outlet></router-outlet>
   <st-cookie-acceptance></st-cookie-acceptance>
 </main>
-<footer>
-  <div class="wrapper">
-    <div>
-      <h1>&copy; Copyright {{ currentYear() }} SYCL.tech</h1>
-      <h2>SYCL is a trademark of the Khronos Group. Intel is a registered trademark of Intel&reg; Corporation.</h2>
-      <div>
-        <a class="button" [href]="environment.github_front_end_url" target="_blank" rel="noopener">
-          <span class="material-symbols-outlined">genetics</span>Edit on GitHub
-        </a>
+<footer id="footer">
+  <div class="top">
+    <div class="wrapper">
+      <div class="about">
+        <h1>About</h1>
+        <h2>SYCL.tech is a community driven, open source effort to help developers keep up to date with the latest
+          projects, news, events and more. If you have a something to share, please do so using the buttons below. If
+          you would like to help with the site, free free!</h2>
+        <div class="buttons">
+          <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-content"target="_blank" rel="noopener">
+            <span class="material-symbols-outlined">update</span>Contribute Content</a>
+          <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-website" target="_blank" rel="noopener">
+            <span class="material-symbols-outlined">update</span>Edit Page</a>
+        </div>
       </div>
-    </div>
-    <div>
-      <div>
+      <div class="network">
         <h1>Network</h1>
-        <ul>
-          <li><a routerLink="/contributors">Contributors</a></li>
-          <li><a href="https://www.khronos.org/sycl/" target="_blank" rel="noopener">Khronos SYCL</a></li>
-          <li><a href="https://uxlfoundation.org/" target="_blank" rel="noopener">UXL Foundation</a></li>
-          <li><a href="https://developer.codeplay.com" target="_blank" rel="noopener">Developer Portal</a></li>
-          <li><a href="https://oneapi.com" target="_blank" rel="noopener">Intel oneAPI</a></li>
+        <ul class="link-list">
+          <li><a href="https://www.khronos.org"
+                 target="_blank" rel="noopener">Khronos.org</a></li>
+          <li><a href="https://uxlfoundation.org"
+                 target="_blank" rel="noopener">UXL Foundation</a></li>
+          <li><a href="https://oneapi.io"
+                 target="_blank" rel="noopener">Intel&reg; oneAPI</a></li>
+          <li><a href="https://developer.codeplay.com"
+                 target="_blank" rel="noopener">Codeplay&reg; Developer Portal</a></li>
+          <li><a href="https://github.com/codeplaysoftware"
+                 target="_blank" rel="noopener">Codeplay&reg; GitHub</a></li>
         </ul>
       </div>
-      <div>
-        <h1>Useful Links</h1>
-        <ul>
-          <li><a routerLink="/changed">What's Changed?</a></li>
-          <li><a routerLink="/cookies">Cookie Policy</a></li>
-          <li><a routerLink="/privacy">Privacy Policy</a></li>
-          <li><a routerLink="/settings">Settings</a></li>
+      <div class="links">
+        <h1>Links</h1>
+        <ul class="link-list">
+          <li><a routerLink="./contributors">Our Contributors</a></li>
+          <li><a routerLink="./changed">What's Changed</a></li>
+          <li><a routerLink="./cookies">Cookie Policy</a></li>
+          <li><a routerLink="./privacy">Privacy Policy</a></li>
+          <li><a routerLink="./settings">Settings</a></li>
         </ul>
       </div>
     </div>
   </div>
+  <div class="bottom">
+    <div class="wrapper">
+      <div>
+        &copy; Copyright {{ currentYear() }} SYCL.tech
+      </div>
+      <div>
+        <ol class="socials">
+          <li>
+            <a [href]="environment.socials.github"
+               target="_blank"
+               rel="noopener">
+              <img ngSrc="./assets/images/github.svg" alt="GitHub Icon" height="20" width="20"/></a>
+          </li>
+          <li>
+            <a href="https://www.khronos.org/sycl/"
+               target="_blank"
+               rel="noopener">
+              <span class="material-symbols-outlined">public</span></a>
+          </li>
+          <li>
+            <a [href]="environment.socials.discord"
+               target="_blank"
+               rel="noopener">
+              <img ngSrc="./assets/images/discord.svg" alt="Discord Icon" height="20" width="20"/></a>
+          </li>
+          <li>
+            <a [href]="environment.socials.discourse"
+               target="_blank"
+               rel="noopener">
+              <img ngSrc="./assets/images/discourse.svg" alt="Discourse Icon" height="20" width="20"/></a>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
 </footer>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b0fcb7f..8c48619 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -240,57 +240,119 @@ nav {
 }
 
 footer {
-  background-color: var(--color-hint-second);
-  padding: 3rem var(--side-padding);
+  padding: 0;
   font-size: 1rem;
+  background: linear-gradient(90deg, transparent 50%, #ffeae5 100%);
 
-  @media screen and (min-width: 800px) {
-    padding: 10rem var(--side-padding);
-  }
+  .top {
+    padding: 6rem var(--side-padding);
 
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+    @media screen and (max-width: 1100px) {
+      padding: 3rem var(--side-padding);
+    }
+
+    .wrapper {
+      display: flex;
+      gap: 4rem;
 
-    @media screen and (min-width: 800px) {
-      flex-direction: row;
+      @media screen and (max-width: 1100px) {
+        flex-direction: column;
+        gap: 1rem;
+      }
 
-      & > div {
-        flex-basis: 50%;
+      h1 {
+        font-size: 1.4rem;
+        padding-bottom: 1rem;
       }
 
-      & > div:nth-of-type(2) {
-        display: flex;
-        justify-content: flex-end;
-        gap: 2rem;
+      h2 {
+        font-weight: normal;
+        font-size: 1.2rem;
+        opacity: .6;
+      }
+
+      .about, {
+        flex-basis: 40%;
+
+        .buttons {
+          display: flex;
+          gap: .5rem;
+          margin-top: 2rem;
+        }
+      }
+
+      .network,
+      .links {
+        flex-basis: 30%;
+
+        .link-list {
+          list-style: none;
+          display: flex;
+          flex-direction: column;
+          gap: .4rem;
+          padding: 0;
+
+          li {
+            border-radius: var(--border-radius);
+            background-color: rgba(0, 0, 0, .05);
+            transition: var(--transition-fast);
+
+            &:hover {
+              background-color: rgba(0, 0, 0, .1);
+            }
+
+            a {
+              display: block;
+              padding: 1rem;
+            }
+          }
+        }
       }
     }
   }
 
-  .button {
-    background-color: var(--color-orange);
+  .bottom {
+    background: linear-gradient(90deg, var(--color-orange) 22%, rgba(10,1,47,1) 100%);
     color: var(--color-white);
-  }
+    padding: 2rem var(--side-padding);
+    box-shadow: inset 0 4px 5px -2px rgba(0, 0, 0, .2);
 
-  h1 {
-    font-size: 1.1rem;
-  }
+    .wrapper {
+      display: flex;
 
-  h2 {
-    font-size: 1rem;
-    font-weight: normal;
-    opacity: .8;
-  }
+      > div:nth-of-type(1) {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
 
-  ol, ul {
-    list-style: none;
-    padding: 0;
+    .socials {
+      display: flex;
+      gap: .5rem;
+      list-style: none;
+      margin: 0;
+
+      li {
+        opacity: .6;
+        transition: var(--transition-fast);
 
-    li a {
-      display: block;
-      padding: .3rem 0;
-      opacity: .8;
+        &:hover {
+          opacity: 1;
+        }
+
+        a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        img {
+          width: 20px;
+          height: auto;
+          filter: brightness(0) invert(1) !important;
+        }
+      }
     }
   }
 }
@@ -313,4 +375,8 @@ footer {
       border: transparent 1px solid !important;
     }
   }
+
+  footer .top {
+    background: transparent;
+  }
 }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 9d55558..0dce779 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -186,5 +186,4 @@ body {
     0% { opacity: 0; }
     100% { opacity: .07; }
   }
-
 }

From a964f7a526ad97295dbda5517b185388073937e1 Mon Sep 17 00:00:00 2001
From: Scott Straughan <scott.straughan@codeplay.com>
Date: Fri, 27 Sep 2024 15:03:13 +0100
Subject: [PATCH 2/2] Text changes.

---
 src/app/app.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index a57d14a..6854055 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -155,8 +155,8 @@
       <div class="about">
         <h1>About</h1>
         <h2>SYCL.tech is a community driven, open source effort to help developers keep up to date with the latest
-          projects, news, events and more. If you have a something to share, please do so using the buttons below. If
-          you would like to help with the site, free free!</h2>
+          projects, news, events and more. If you have something to share, please do so using the buttons below. If
+          you would like to help with the site, please get involved!</h2>
         <div class="buttons">
           <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-content"target="_blank" rel="noopener">
             <span class="material-symbols-outlined">update</span>Contribute Content</a>