diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index bf37004..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <footer class="footer">
-    <slot></slot>
-  </footer>
-</template>
-
-<script></script>
-
-<style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
-.footer {
-  background: url("/subtle-prism.svg") $bg-color-dark;
-  background-blend-mode: multiply;
-
-  padding: max(1em, env(safe-area-inset-top)) 0
-    max(1em, env(safe-area-inset-bottom)) 0;
-
-  text-align: center;
-}
-</style>
diff --git a/src/components/SiteFooter.vue b/src/components/SiteFooter.vue
new file mode 100644
index 0000000..0e425bd
--- /dev/null
+++ b/src/components/SiteFooter.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts"></script>
+
+<template>
+  <footer class="footer">
+    <slot></slot>
+  </footer>
+</template>
+
+<style lang="scss">
+.footer {
+  background: url(@/assets/subtle-prism.svg) var(--color-background-footer);
+  background-blend-mode: multiply;
+
+  padding: var(--footer-padding);
+
+  text-align: center;
+
+  p {
+    margin: 0;
+
+    + p {
+      margin: 0.5em auto 0 auto;
+    }
+  }
+}
+</style>