Update images and tweak header/footer

GameMakersToolkit · Jan 19, 2024 · 43d2551 · 43d2551
1 parent befcfe9
commit 43d2551
Show file tree

Hide file tree

Showing 12 changed files with 13 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300" src="https://raw.githubusercontent.com/GameMakersToolkit/team-finder/main/ui/public/logos/header.png" alt="Project Build Status">
+  <img width="300" src="https://raw.githubusercontent.com/GameMakersToolkit/team-finder/main/ui/public/logos/jam-logo.webp" alt="Project Build Status">
 </p>
 <p align="center">
   <img src="https://github.com/GameMakersToolkit/team-finder/actions/workflows/api-run-tests.yml/badge.svg" alt="API CI Status">

diff --git a/ui/index.html b/ui/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/webp" href="/favicon.webp" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GMTK Team Finder</title>
   </head>

diff --git a/ui/public/favicon.png b/ui/public/favicon.png
diff --git a/ui/public/favicon.webp b/ui/public/favicon.webp
diff --git a/ui/public/logos/jam-logo-stacked.webp b/ui/public/logos/jam-logo-stacked.webp
diff --git a/ui/public/logos/jam-logo.webp b/ui/public/logos/jam-logo.webp
diff --git a/ui/public/vite.svg b/ui/public/vite.svg
diff --git a/ui/src/base.css b/ui/src/base.css
@@ -5,7 +5,7 @@
 
     main {
         @apply container mx-auto p-1 px-4 pb-6;
-        padding-bottom: 64px;
+        padding-bottom: 96px;
     }
 
     body {

diff --git a/ui/src/pages/components/Footer.css b/ui/src/pages/components/Footer.css
@@ -1,7 +1,10 @@
 @layer components {
     .c-footer {
         @apply absolute bottom-0 w-full h-[64px] flex justify-center items-center;
-        background-image: linear-gradient(0deg, #db0a15, #000000);
+        padding-top: 32px;
+        height: 96px;
+        margin: -32px auto 0 auto;
+        background-image: linear-gradient(#000000, #88151b);
 
         .footer__icon {
             @apply px-4 h-[24px] border-r-2 border-theme-l-7 last:border-0;

diff --git a/ui/src/pages/components/Header.css b/ui/src/pages/components/Header.css
@@ -1,9 +1,9 @@
 @layer components {
     .c-header {
         @apply p-2 mb-4;
-        height: 64px;
-        margin: 0 auto;
-        background-image: linear-gradient(#db0a15, #000000);
+        height: 96px;
+        margin: 0 auto -32px 0;
+        background-image: linear-gradient(#88151b, #000000);
 
         #toggle-bookmark-button {
             @apply leading-none py-2 px-2 hover:font-bold hover:text-white border border-white rounded-lg;

diff --git a/ui/src/pages/components/Header.tsx b/ui/src/pages/components/Header.tsx
@@ -26,7 +26,7 @@ export const Header: React.FC = () => {
                 <div className="sm:flex">
                     <div className="hidden sm:flex">
                         <Link to="/">
-                            <img src="/logos/header.png" width="40" height="40" alt={"jamName" + " Team Finder logo"}/>
+                            <img src="/logos/jam-logo-stacked.webp" width="40" height="40" alt={"jamName" + " Team Finder logo"}/>
                         </Link>
 
                         <div className="flex items-center">
@@ -41,7 +41,7 @@ export const Header: React.FC = () => {
 
                     <div className="flex justify-evenly gap-2">
                         <Link to="/" className="block border border-white rounded-lg mr-2 sm:hidden">
-                            <img src="/logos/header.png" width="40" height="40" alt={"jamName" + " Team Finder logo"}/>
+                            <img src="/logos/jam-logo-stacked.webp" width="40" height="40" alt={"jamName" + " Team Finder logo"}/>
                         </Link>
                         {isOnHomePage && <ToggleBookmarks />}
                         <MyPostButton />

diff --git a/ui/src/pages/home/components/SiteIntro.tsx b/ui/src/pages/home/components/SiteIntro.tsx
@@ -10,7 +10,7 @@ export const SiteIntro = () => {
           <div className="inline-block w-full sm:w-1/2 pb-8">
             <img
               className="m-auto pt-8 px-16 pb-4"
-              src="/logos/full.png"
+              src="/logos/jam-logo.webp"
               width={"300px"}
               alt={jamName + " Team Finder logo"}
             />