404 Fix, add info window animation, add frosted glass header (#621)

Fixes problems with the latest push

Author: 1ceit

404.html

@@ -22,10 +22,10 @@
                 }
             }, 1000);
 
-            // Check if a phone or iPad -> @media tags cant change actual text only js can
-            if (window.innerWidth <= 700 ||(window.innerWidth > 700 && window.innerWidth <= 1024)) {
+            // Check if a phone or iPad -> @media tags cant change actual text only js
+            if (window.innerWidth <= 700 || (window.innerWidth > 700 && window.innerWidth <= 1024)) {
                 document.body.classList.add('mobile');
-
+                
                 var leftElement = document.querySelector('.left');
                 if (leftElement) {
                     leftElement.style.display = 'none';
@@ -48,8 +48,6 @@
         <div class="right">
             <h2>Oh No!</h2>
             <h1>F.R.E.D. could not find that</h1>
-            <h1 id="mobile">We could not find that</h1>
-
             <a href="/" class="button">Back To Home</a>
             <h4>Back to home in: 30</h4>
         </div>

css/alumni.sass

@@ -38,4 +38,20 @@ main p
     margin-right: auto
     font-size: 25px
     padding-bottom: 1em
-    margin-top: -1em
+    margin-top: -1em
+
+
+.gm-style-iw-t
+    animation: scale-in-bottom 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
+
+@keyframes scale-in-bottom 
+    0% 
+        transform: scaleY(0)
+        transform-origin: 0% 100%
+        opacity: 1
+
+    100%
+        transform: scaleY(1)
+        transform-origin: 0% 100%
+        opacity: 1
+

css/main.sass

@@ -9,13 +9,12 @@ $titlefont: 'Adam', 'Roboto', sans-serif
 $vaered: #d12727
 $lightvaered: #D94F4F
 $basicchars: U+0000-00FF
-
+ 
 @font-face
     font-family: 'Adam'
     src: local('ADAM.CG PRO'), url(../assets/font/adam.woff2) format('woff2'), url(../assets/font/adam.woff) format('woff')
     unicode-range: $basicchars
 
-
 @font-face
     font-family: 'Roboto'
     font-weight: 350
@@ -71,7 +70,8 @@ header
     height: 140px
     width: 100%
     padding: 15px 15px 0
-    background: $grey
+    background: rgba(51, 51, 51, 0.85)
+    backdrop-filter: saturate(200%) blur(20px)
     box-shadow: 3px 3px 12px rgba(12, 12, 12, 0.5)
     -webkit-transition: height 0.2s
     transition: height 0.2s
@@ -149,7 +149,6 @@ header.shrink
             width: max-content
             margin-top: 1px
 
-
 // Social buttons
 .social:first-child
     margin-left: 15px
@@ -351,10 +350,10 @@ main > img, .img-row, table
         height: 100%
 
 table img
-    width: 100%
+        width: 100%
 
 main h1
-    text-align: center
+        text-align: center
 
 h5
     margin-top: 30px
@@ -364,7 +363,6 @@ blockquote
     font-size: 25px
     font-style: italic
 
-
 main
     ul
         padding-left: 20px
@@ -452,9 +450,9 @@ footer ul
             &:last-of-type
                 margin-bottom: 15px
         ul ul
-            display: block
-            position: static
-            background: none
+                display: block
+                position: static
+                background: none
             li
                 margin-left: 20px
                 padding-left: 10px
@@ -484,8 +482,8 @@ footer ul
             margin-top: -40px
             margin-bottom: 20px
         .social:first-child
-                margin-left: 0px
-                margin-right: 20px
+            margin-left: 0px
+            margin-right: 20px
         .active
             background: $grey
             &:hover
@@ -510,7 +508,7 @@ footer ul
         > ul > li:last-child ul
             margin-left: 0
     main img
-        width: 100%
+            width: 100%
     footer
         h5, table
             display: none
@@ -555,4 +553,4 @@ footer ul
     nav
         height: 100%
     .social
-        display: block !important
+        display: block !important

js/alumni.js

@@ -347,6 +347,8 @@ function initMap() {
                 '</a>' +
                 "</div>";
             infoWindow.setContent(contentString);
+            map.setZoom(5);
+            map.setZoom(7);
             map.panTo(marker.getPosition());
             infoWindow.open({
                 anchor: marker,
@@ -372,6 +374,8 @@ function initMap() {
                 '</a>' +
                 "</div>";
             infoWindow.setContent(contentString);
+            map.setZoom(5);
+            map.setZoom(7);
             map.panTo(marker1.getPosition());
             infoWindow.open({
                 anchor: marker1,