new logos

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300" src="/client/src/images/logo.gif"/>
+  <img width="300" src="/client/src/images/new-logo.png"/>
 </p>
 
 [![Node.js CI](https://github.com/AlecM33/Werewolf/actions/workflows/node.js.yml/badge.svg)](https://github.com/AlecM33/Werewolf/actions/workflows/node.js.yml)

client/src/modules/front_end_components/Navbar.js

@@ -38,7 +38,7 @@ function flipHamburger () {
 function getNavbarLinks (page = null, device) {
     const linkClass = device === 'mobile' ? 'mobile-link' : 'desktop-link';
     return '<a href="/" class="logo ' + linkClass + '">' +
-    '<img alt="logo" src="../../images/Werewolf_Small.png"/>' +
+    '<img alt="logo" src="../../images/new-logo-small.png"/>' +
     '</a>' +
     '<a class="' + linkClass + '" href="/">Home</a>' +
     '<a class="' + linkClass + '" href="/create">Create</a>' +

client/src/styles/GLOBAL.css

@@ -356,7 +356,7 @@ input {
 #navbar {
     display: flex;
     align-items: center;
-    padding: 5px 0;
+    padding: 8px 0;
     width: 100%;
     background-color: #16141e;
     height: 45px;

client/src/styles/home.css

@@ -105,10 +105,10 @@ h3 {
     font-family: 'signika-negative', sans-serif;
 }
 
-img[src='../images/logo_cropped.gif'] {
-    max-width: 360px;
-    width: 50vw;
-    min-width: 250px;
+img[src='../images/new-logo.png'] {
+    max-width: 250px;
+    width: 25vw;
+    min-width: 180px;
     margin: 1em 0 1em 0;
 }
 

client/src/views/home.html

@@ -25,7 +25,7 @@
     <div id="mobile-menu-background-overlay"></div>
     <div id="navbar"></div>
     <div id="home-page-top-section">
-        <img alt="Werewolf App Logo" src="../images/logo_cropped.gif"/>
+        <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
         <h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
         <div id="create-join">
             <a href="/create">