Conditional rendering, pages updated

components/Card.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main>
-    <Navigation />
-    <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage
-        class="scrollbar fade-mask overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
-      >
-      </NuxtPage>
-    </NuxtLayout>
-  </main>
-</template>
-
-<style scoped lang="scss"></style>

components/Flooter.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { useRuntimeConfig } from '#imports'
 
+const props = defineProps({
+  opaque: Boolean,
+})
+
 const config = useRuntimeConfig()
 const currentYear = new Date().getFullYear()
 
@@ -12,10 +16,8 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 </script>
 
 <template>
-  <footer
-    class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
-  >
-    <span class="transpaque font-small text-shadow px-2">
+  <footer class="user-select-none text-align-center line-height-1-5">
+    <span class="font-small text-shadow" :class="{ transpaque: !props.opaque }">
       <EMail
         class="link-hi-force-dark"
         address="[email protected]"
@@ -39,19 +41,6 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 </template>
 
 <style scoped lang="scss">
-.float {
-  position: fixed;
-
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  width: fit-content;
-  height: fit-content;
-
-  margin: auto;
-}
-
 .transpaque {
   color: white;
 

components/Portal.vue

@@ -565,6 +565,10 @@ class Portal {
   resize() {
     if (!this.canvas.full()) this.canvas.fill()
 
+    // Pause the animation if the viewport becomes too small.
+    if (window.innerWidth <= 600) this.pause()
+    else this.continue()
+
     // If we have animation disabled, we still have to re-render the scene once on resize.
     if (!this.animate) requestAnimationFrame(this.render.bind(this))
   }
@@ -611,7 +615,7 @@ onMounted(() => {
   const portal = new Portal(
     props.directory,
     props.create,
-    props.animate && window.innerWidth > 600,
+    props.animate,
     props.randomize,
     props.fade,
     props.speed,