initial commit

src/lib/MobileFooter.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { RiAddCircleLine, RiChat2Line, RiCompassDiscoverLine, RiHome2Line, RiHomeLine, RiNotificationLine } from "svelte-remixicon";
+
+function rickroll (){
+    if (browser) {
+        window.open( "https://youtu.be/dQw4w9WgXcQ" );
+    }
+}
+</script>
+
+<footer class="mobileonly">
+  <ul class="row">
+    <li><a href="/" title="Homepage"><RiHome2Line size="2em" /></a></li>
+    <li><a href="/" title="Discover"><RiCompassDiscoverLine size="2em" /></a></li>
+    <li><a href="/new" title="Create"><RiAddCircleLine size="2em" /></a></li>
+    <li><a href="/user/yusur" title="Messages"><RiChat2Line size="2em" /></a></li>
+    <li><a href="?" onclick={rickroll} title="Notifications"><RiNotificationLine size="2em" /></a></li>
+  </ul>
+</footer>
+
+<style>
+
+footer {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    background-color: var(--background);
+    box-shadow: 0 0 6px var(--border);
+    z-index: 150;
+}
+
+ul.row {
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+ul.row > li {
+    flex: 1;
+    padding: .5em;
+    margin: 0;
+    text-align: center;
+}
+</style>