raiders

5 files changed, 40 insertions, 36 deletions

diff --git a/data/asexules.gif b/data/asexules.gif
deleted file mode 100644
index 7642e36..0000000
--- a/data/asexules.gif
+++ /dev/null
diff --git a/data/munson/1.jpg b/data/munson/1.jpg
index a9d4e2e..9b3d142 100644
--- a/data/munson/1.jpg
+++ b/data/munson/1.jpg
diff --git a/data/raiders.webm b/data/raiders.webm
new file mode 100644
index 0000000..c462adf
--- /dev/null
+++ b/data/raiders.webm
diff --git a/index.html b/index.html
index c318468..9ff8ada 100644
--- a/index.html
+++ b/index.html
@@ -37,19 +37,19 @@
             </tr>
         </table> 
         <marquee behavior="alternate">
-            <img src="data/awshit.png"/>
-            <img src="data/counter.png"/>
-            <img src="data/election.png"/>
-            <img src="data/girl.png"/>
-            <img src="data/pepsi.png"/>
-            <img src="data/rats.png"/>
-            <img src="data/roo.webp"/>
-            <img src="data/onion.webp"/>
-            <img src="data/twitter.webp"/>
-            <img src="data/silence.webp" />
-            <img src="data/recharge.webp" />
-            <img src="data/phone.webp" />
-            <img src="data/obama.png" />
+            <img src="data/awshit.png" loading="lazy"/>
+            <img src="data/counter.png" loading="lazy"/>
+            <img src="data/election.png" loading="lazy"/>
+            <img src="data/girl.png" loading="lazy"/>
+            <img src="data/pepsi.png" loading="lazy"/>
+            <img src="data/rats.png" loading="lazy"/>
+            <img src="data/roo.webp" loading="lazy"/>
+            <img src="data/onion.webp" loading="lazy"/>
+            <img src="data/twitter.webp" loading="lazy"/>
+            <img src="data/silence.webp" loading="lazy" />
+            <img src="data/recharge.webp" loading="lazy" />
+            <img src="data/phone.webp" loading="lazy" />
+            <img src="data/obama.png" loading="lazy" />
         </marquee>
         <p class="sprinkler">
             Call 1-800-1ST-YEAR to get a sprinkler to go off in a dorm near you!
@@ -106,41 +106,43 @@
             The munson art gallery
         </p>
         <div id="munson">
-            <img src="data/munson/1.jpg"/>
-            <img src="data/munson/3.jpg"/>
-            <img src="data/munson/4.jpg"/>
-            <img src="data/munson/5.jpg"/>
-            <img src="data/munson/6.jpg"/>
-            <img src="data/munson/7.jpg"/>
-            <img src="data/munson/8.jpg"/>
-            <img src="data/munson/9.jpg"/>
-            <img src="data/munson/10.jpg"/>
+            <img src="data/munson/1.jpg" loading="lazy"/>
+            <img src="data/munson/3.jpg" loading="lazy"/>
+            <img src="data/munson/4.jpg" loading="lazy"/>
+            <img src="data/munson/5.jpg" loading="lazy"/>
+            <img src="data/munson/6.jpg" loading="lazy"/>
+            <img src="data/munson/7.jpg" loading="lazy"/>
+            <img src="data/munson/8.jpg" loading="lazy"/>
+            <img src="data/munson/9.jpg" loading="lazy"/>
+            <img src="data/munson/10.jpg" loading="lazy"/>
         </div>
         <div id="batterys">
             <p style="--rot: 0deg;">Lithium Ion Battery's</p>
             <p style="--rot: 270deg;">Lithium Ion Battery's</p>
         </div>
         <div id="batterys" style="margin-bottom: 30vw;">
-            <img style="--rot: 0deg;" src="data/battery.jpg"/>
-            <img style="--rot: 270deg;" src="data/battery.jpg"/>
+            <img style="--rot: 0deg;" src="data/battery.jpg" loading="lazy"/>
+            <img style="--rot: 270deg;" src="data/battery.jpg" loading="lazy"/>
         </div>
         <div class="thicc"></div>
         <div class="buttons">
-            <img src="data/apocalypse.gif" class="clickable" onclick="document.documentElement.classList.toggle('wank')"/>
-            <img src="data/amd.gif"/>
-            <img src="data/asexules.gif"/>
-            <img src="data/dither.gif" class="clickable" onclick="document.documentElement.classList.toggle('dither')"/>
+            <img src="data/apocalypse.gif" loading="lazy" class="clickable" onclick="document.documentElement.classList.toggle('wank')"/>
+            <img src="data/amd.gif" loading="lazy"/>
+            <img src="data/dither.gif" loading="lazy" class="clickable" onclick="document.documentElement.classList.toggle('dither')"/>
             <a class="clickable" href="https://validator.w3.org/nu/?doc=https%3A%2F%2Frit.wtf" target="_blank">
-                <img src="data/html.gif"/>
+                <img src="data/html.gif" loading="lazy"/>
             </a>
-            <img src="data/ie.gif"  class="clickable" onclick="document.documentElement.classList.toggle('flash')"/>
-            <img src="data/netscape.gif"/>
+            <img src="data/ie.gif" loading="lazy"  class="clickable" onclick="document.documentElement.classList.toggle('flash')"/>
+            <img src="data/netscape.gif" loading="lazy"/>
             <a class="clickable" href="https://g.rit.wtf/tylermurphy534/rit.wtf" target="_blank">
-                <img src="data/free.gif"/>
+                <img src="data/free.gif" loading="lazy"/>
             </a>
         </div>
         <footer>
             <video autoplay muted loop>
+                <source src="data/raiders.webm" type="video/mp4">
+            </video>
+            <video autoplay muted loop>
                 <source src="data/munson.mp4" type="video/mp4">
             </video>
         </footer>
diff --git a/style.css b/style.css
index 3d86278..4304ce0 100644
--- a/style.css
+++ b/style.css
@@ -88,16 +88,18 @@ td:hover a {
 footer {
     background-size: cover;
     position: sticky;
+    display: flex;
+    flex-direction: column;
     bottom: 0;
-    height: 10%;
-    min-height: 10%;
+    height: 20%;
+    min-height: 20%;
     margin: 0;
     overflow: auto;
 }
 
 .buttons {
     position: sticky;
-    bottom: 10%;
+    bottom: 20%;
     align-self: center;
     margin: 0;
     margin-top: 1em;
@@ -236,7 +238,7 @@ html.dither>body>div>div{
 }
 
 #batterys {
-    perspective: 5000000em;
+    perspective: infinite;
 	position: relative;
 	height: 2em;
 	width: 100%;