feat: Adds website links. (#103)

* fix: Updates gulp-sass package to remove install error.

* feat: Includes script to update all packages.

* feat: Updates packages, includes watch script.

* feat: Updates packages.

* feat: Runs npm audit.

* chore: Updates README.

* chore: Updates husky.

* feat: Adds placeholder link.

* feat: Adds logo images, hooks up logo.

* feat: Styles logo link.

* feat: Adds website link to gameplay UI.

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint

.husky/pre-push

@@ -0,0 +1 @@
+npm test

README.md

@@ -1,23 +1,25 @@
 # pacman-js
+
 [![Build Status](https://travis-ci.com/bward2/pacman-js.svg?branch=master)](https://travis-ci.com/bward2/pacman-js)
 [![Coverage Status](https://coveralls.io/repos/github/bward2/pacman-js/badge.svg?branch=master)](https://coveralls.io/github/bward2/pacman-js?branch=master)
 [![Code Style](https://img.shields.io/badge/code%20style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript)
 
 Pacman clone made with Javascript, HTML, and CSS.
 
-### *__[Play it!](https://bward2.github.io/pacman-js/)__*
+### _**[Play it!](https://bward2.github.io/pacman-js/)**_
 
 🍒🍓🍊🍎🍈👾🔔🔑
 
 ## Development Instructions
 
-This project makes use of *__[NodeJS](https://nodejs.org/en/)__*. Download it, then clone this repo and run the following commands:  
+This project makes use of _**[NodeJS](https://nodejs.org/en/)**_. Download it, then clone this repo and run the following commands:
+
 1. `npm i` (Installs necessary packages for development)
-1. `gulp watch` (Watches changes to JS and SCSS files for continuous compilation)
+1. `npm run watch` (Watches changes to JS and SCSS files for continuous compilation)
 1. `npm run serve` (Hosts the files locally)
 
-The game can now be accessed at *__http://127.0.0.1:8080/index__*
+The game can now be accessed at _**http://127.0.0.1:8080/index**_
 
-This project also utilizes *__[Husky](https://github.com/typicode/husky)__* to enforce best coding practices. The current thresholds are 0 linting errors upon commits (following Airbnb's standard), and 100% unit test code coverage upon pushes.
+This project also utilizes _**[Husky](https://github.com/typicode/husky)**_ to enforce best coding practices. The current thresholds are 0 linting errors upon commits (following Airbnb's standard), and 100% unit test code coverage upon pushes.
 
 Feel free to submit PRs and/or report any issues you find! 😃

app/style/scss/mainPage.scss

@@ -43,10 +43,23 @@ body {
 }
 
 .header-buttons {
-  margin: 16px;
+  padding: 2rem 3rem;
   position: absolute;
-  width: 100%;
+  top: 0;
+  left: 0;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+
+  a {
+    font-family: none;
+    display: inline-block;
+  }
+
+  img {
+    height: 2rem;
+  }
 
   button {
     background: none;
@@ -82,13 +95,19 @@ body {
   justify-content: center;
 
   .one-up {
-    animation: blink .6s infinite;
+    animation: blink 0.6s infinite;
   }
 
   @keyframes blink {
-    0% {opacity: 0}
-    49% {opacity: 0}
-    50% {opacity: 1}
+    0% {
+      opacity: 0;
+    }
+    49% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
   }
 
   .row {
@@ -170,12 +189,22 @@ body {
   left: 0;
   opacity: 0;
   position: absolute;
-  transition: opacity .25s;
+  transition: opacity 0.25s;
   visibility: hidden;
   width: 100%;
   z-index: 5;
 }
 
+.brent-ward-logo {
+  position: absolute;
+  top: 2rem;
+  left: 3rem;
+
+  img {
+    height: 2rem;
+  }
+}
+
 .logo {
   height: 200px;
   margin-top: 25vh;
@@ -217,7 +246,7 @@ body {
 }
 
 .loading-pacman {
-  animation: loading-animation .3s steps(4) infinite;
+  animation: loading-animation 0.3s steps(4) infinite;
   background-color: $black;
   background-image: url('../app/style/graphics/spriteSheets/characters/pacman/pacman_right.svg');
   background-size: 192px;
@@ -256,25 +285,63 @@ body {
   z-index: -2;
 }
 
-._5 { left: 5%; }
-._10 { left: 10%; }
-._15 { left: 15%; }
-._20 { left: 20%; }
-._25 { left: 25%; }
-._30 { left: 30%; }
-._35 { left: 35%; }
-._40 { left: 40%; }
-._45 { left: 45%; }
-._50 { left: 50%; }
-._55 { left: 55%; }
-._60 { left: 60%; }
-._65 { left: 65%; }
-._70 { left: 70%; }
-._75 { left: 75%; }
-._80 { left: 80%; }
-._85 { left: 85%; }
-._90 { left: 90%; }
-._95 { left: 95%; }
+._5 {
+  left: 5%;
+}
+._10 {
+  left: 10%;
+}
+._15 {
+  left: 15%;
+}
+._20 {
+  left: 20%;
+}
+._25 {
+  left: 25%;
+}
+._30 {
+  left: 30%;
+}
+._35 {
+  left: 35%;
+}
+._40 {
+  left: 40%;
+}
+._45 {
+  left: 45%;
+}
+._50 {
+  left: 50%;
+}
+._55 {
+  left: 55%;
+}
+._60 {
+  left: 60%;
+}
+._65 {
+  left: 65%;
+}
+._70 {
+  left: 70%;
+}
+._75 {
+  left: 75%;
+}
+._80 {
+  left: 80%;
+}
+._85 {
+  left: 85%;
+}
+._90 {
+  left: 90%;
+}
+._95 {
+  left: 95%;
+}
 
 .movement-buttons {
   align-items: center;
@@ -303,9 +370,7 @@ body {
     user-select: none;
 
     &:active {
-      background: radial-gradient(
-        closest-side, $transparent-gray, transparent,
-      );
+      background: radial-gradient(closest-side, $transparent-gray, transparent);
     }
   }