Overhaul main page button system, add dope explore button animation

css/style.css

@@ -13,7 +13,7 @@ a {
 
 a:hover {
   text-decoration: none;
-  text-shadow: 3px 3px 10px #fff, -3px -3px 10px #fff;
+  text-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff;
 }
 
 #background-image {
@@ -77,6 +77,7 @@ a:hover {
 
 h1 {
   font-variant: small-caps;
+  font-size: 2.5em;
 }
 
 #content p {
@@ -87,22 +88,31 @@ h1 {
 ul.buttons {
   list-style: none;
   padding-left: 0;
-  margin-bottom: 4em;
+  margin-top: 1em;
-  margin-top: 3em;
+  margin-bottom: 1em;
-  font-size: 1.1em;
+  font-size: 1.75em;
 }
 
 ul.buttons li {
-  display: inline;
   line-height: 1;
   padding: 0.5em;
-  margin-top: 3em;
   margin-left: 0.5em;
   margin-right: 0.5em;
 
   text-transform: uppercase;
 }
 
+.button.nav {
+  padding-top: 0.75em;
+  padding-bottom: 0.55em;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+
+  border-radius: 30px;
+
+  transition: all 0.25s ease-in-out;
+}
+
 .button:hover {
   text-shadow:
     -3px -3px 5px #fff,
@@ -112,7 +122,27 @@ ul.buttons li {
     0px 0px 7px #ff0000;
 }
 
-.gallery:hover { color: #5588e0; }
+.button.nav:hover {
+  text-shadow:
+    0px 0px 5px #000,
+    -5px -5px 10px #fff,
+    -5px 5px 10px #fff,
+    5px -5px 10px #fff,
+    5px 5px 10px #fff;
+
+  -webkit-animation-name: pulse;
+  -webkit-animation-duration: 5s;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: none;
+  animation-name: pulse;
+  animation-duration: 5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+}
+
+.explore:hover { color: #5588e0; }
 
 .youtube:hover { color: #ff0000; }
 
@@ -131,15 +161,20 @@ ul.buttons li {
   z-index: 5;
 }
 
-.footer {
+footer { font-size: 0.9em; }
-  font-size: 0.9em;
+
+footer div { margin-bottom: 0.5em; }
+
+footer a.button i {
+  padding: 0.5em;
+  font-size: 1.25em;
 }
 
 .fadeout {
   -webkit-animation: fadeout 0.25s linear 1;
   -webkit-animation-fill-mode: forwards;
   animation: fadeout 0.25s linear 1;
-  animation-fill-mode: both;
+  animation-fill-mode: forwards;
 }
 
 #preloader {
@@ -192,6 +227,49 @@ ul.buttons li {
   100% {opacity: 0;}
 }
 
+@keyframes pulse {
+  0% {
+    box-shadow:
+      0px 0px 15px 3px #fff,
+      0px 0px 15px 3px #88a9fc;
+  }
+  10% {
+    box-shadow:
+      -10px -10px 15px 3px #fff,
+      10px 10px 15px 3px #88a9fc;
+  }
+  30% {
+    box-shadow:
+      -10px 10px 15px 3px #b5f7fc,
+      10px -10px 15px 3px #fcaa99;
+  }
+  45% {
+    box-shadow:
+      10px 10px 15px 3px #ecf9a7,
+      -10px -10px 15px 3px #fcaa99;
+  }
+  60% {
+    box-shadow:
+      10px -10px 15px 3px #ecf9a7,
+      -10px 10px 15px 3px #abfcad;
+  }
+  75% {
+    box-shadow:
+      -10px -10px 15px 3px #b5f7fc,
+      10px 10px 15px 3px #abfcad;
+  }
+  90% {
+    box-shadow:
+      -10px 10px 15px 3px #fff,
+      10px -10px 15px 3px #88a9fc;
+  }
+  100% {
+    box-shadow:
+      0px 0px 15px 3px #b5f7fc,
+      0px 0px 15px 3px #88a9fc;
+  }
+}
+
 @-webkit-keyframes spinner {
   0% { transform: translate(-50%,-50%) rotate(0deg); }
   100% { transform: translate(-50%,-50%) rotate(360deg); }
@@ -215,8 +293,8 @@ ul.buttons li {
   }
 
   ul.buttons {
-    margin-top: 2em;
+    margin-top: 1.5em;
-    margin-bottom: 3em;
+    margin-bottom: 1.5em;
   }
 
   ul.buttons li {
@@ -224,4 +302,3 @@ ul.buttons li {
     margin-top: 1em;
   }
 }
-

index.html

@@ -37,26 +37,31 @@
       </p>
 
       <ul class="buttons">
-        <li><a class="button gallery" href="gallery/">
+        <li>
-          <i class="fas fa-camera"></i>&nbsp;Gallery
+          <a class="button nav" href="explore/">
-        </li></a>
+            <i class="fas fa-binoculars"></i>&nbsp;Explore
-        <li><a class="button instagram" href="https://www.instagram.com/allaroundhere/">
+          </a>
-          <i class="fab fa-instagram"></i>&nbsp;Instagram
+        </li>
-        </li></a>
       </ul>
 
-      <div class="footer">
+      <footer>
+        <div>
+          <!-- <a class="button youtube" href="https://www.instagram.com/allaroundhere/">
+            <i class="fab fa-youtube"></i>
+          </a> -->
+          <a class="button twitter" href="https://www.twitter.com/enpaul_/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a class="button instagram" href="https://www.instagram.com/allaroundhere/">
+            <i class="fab fa-instagram"></i>
+          </a>
+        </div>
+        <div>
           &copy;2021
           <a href="https://enpaul.net/">enpaul</a>
         </div>
+      </footer>
     </div>
-
-    <!-- <div id="background-info">
-      <i>
-        <a href="" target="_blank" id="background-info-link"></a>
-        Allis Engine #4, Metropolitan Waterworks Museum
-      </i>
-    </div> -->
   </body>
 
 </html>

js/custom.js

@@ -84,14 +84,6 @@ window.addEventListener("DOMContentLoaded", function () {
   document.getElementById(
     "background-image"
   ).style.backgroundImage = "url(" + selected.url + ")";
-
-  // document.getElementById(
-  //   "background-info-link"
-  // ).innerHTML = selected.description;
-
-  document.getElementById(
-    "background-info-link"
-  ).href = selected.source;
 });