more responsive

Cargo.lock

@@ -251,25 +251,6 @@ dependencies = [
  "gloo-worker 0.4.0",
 ]
 
-[[package]]
-name = "gloo"
-version = "0.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
-dependencies = [
- "gloo-console 0.3.0",
- "gloo-dialogs 0.2.0",
- "gloo-events 0.2.0",
- "gloo-file 0.3.0",
- "gloo-history 0.2.2",
- "gloo-net 0.5.0",
- "gloo-render 0.2.0",
- "gloo-storage 0.3.0",
- "gloo-timers 0.3.0",
- "gloo-utils 0.2.0",
- "gloo-worker 0.5.0",
-]
-
 [[package]]
 name = "gloo-console"
 version = "0.2.3"
@@ -435,27 +416,6 @@ dependencies = [
  "web-sys",
 ]
 
-[[package]]
-name = "gloo-net"
-version = "0.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43aaa242d1239a8822c15c645f02166398da4f8b5c4bae795c1f5b44e9eee173"
-dependencies = [
- "futures-channel",
- "futures-core",
- "futures-sink",
- "gloo-utils 0.2.0",
- "http",
- "js-sys",
- "pin-project",
- "serde",
- "serde_json",
- "thiserror",
- "wasm-bindgen",
- "wasm-bindgen-futures",
- "web-sys",
-]
-
 [[package]]
 name = "gloo-render"
 version = "0.1.1"
@@ -588,25 +548,6 @@ dependencies = [
  "web-sys",
 ]
 
-[[package]]
-name = "gloo-worker"
-version = "0.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "085f262d7604911c8150162529cefab3782e91adb20202e8658f7275d2aefe5d"
-dependencies = [
- "bincode",
- "futures",
- "gloo-utils 0.2.0",
- "gloo-worker-macros",
- "js-sys",
- "pinned",
- "serde",
- "thiserror",
- "wasm-bindgen",
- "wasm-bindgen-futures",
- "web-sys",
-]
-
 [[package]]
 name = "gloo-worker-macros"
 version = "0.1.0"
@@ -957,7 +898,6 @@ name = "site"
 version = "0.1.0"
 dependencies = [
  "fastrand",
- "gloo 0.11.0",
  "web-sys",
  "yew",
 ]

Cargo.toml

@@ -5,6 +5,5 @@ edition = "2021"
 
 [dependencies]
 fastrand = { version = "2.2.0", features = ["js"] }
-gloo = { version = "0.11.0", features = ["timers"] }
 web-sys = { version = "0.3.74", features = ["Window"] }
 yew = { version = "0.21.0", features = ["csr"] }

src/buttons.rs

@@ -11,8 +11,8 @@ fn firtnite() -> Callback<MouseEvent> {
 
 pub fn buttons() -> Html {
     html! {
-    <div class="buttons">
+    <div class="footer">
-        <ul class="buttons">
+        <ul class="footer buttons">
             <li><a href="https://futile.eu"><img
                 src="static/buttons/futile.png" width="88px" height="31px"
                 alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile"

src/main.rs

@@ -1,31 +1,21 @@
 mod buttons;
 mod content;
 
-use gloo::timers::callback::Interval;
 use yew::prelude::*;
 
-const QUOTES: [&str; 6] = [
+const QUOTES: [&str; 7] = [
     "who are you",
     "lorem ipsum dolor sit amet",
     "hot garfields in your area",
     "remember to drink water",
     "i am not a web developer",
     "it's nice, isn't it?",
+    "do you like hurting other people?",
 ];
 
 #[function_component(Page)]
 fn page() -> Html {
     let quote = use_state(|| fastrand::choice(QUOTES).unwrap());
-    let bullet = use_state(|| '◇');
-    {
-        let bullet = bullet.clone();
-        use_effect(move || {
-            let interval = Interval::new(1000, move || {
-                bullet.set(if *bullet == '◇' { '◆' } else { '◇' });
-            });
-            || drop(interval)
-        });
-    }
     html! {
     <>
         <div class="box">
@@ -35,13 +25,17 @@ fn page() -> Html {
         <div class="box">
             { content::content() }
         </div>
-        <div style="position: absolute; bottom: 0; left: 0; right: 0;">
+        <div class="footer-container">
             { buttons::buttons() }
-            <div class="footer">
+            <div class="footer quote">
-                <p> { *quote } </p>
+                <p> { "« " } { *quote } { " »" } </p>
-                <p style="user-select: none;"> { *bullet } </p>
+            </div>
-                <p><a class="click" target="_blank" href="https://codeberg.org/futile"> { "git" } </a></p>
+            <div class="footer links">
-                <p><a class="click" target="_blank" href="https://steamcommunity.com/id/elituf"> { "steam" } </a></p>
+                <a class="click" target="_blank" href="https://codeberg.org/futile"> { "git" } </a>
+                <a class="click" target="_blank" href="https://steamcommunity.com/id/elituf"> { "steam" } </a>
+            </div>
+            <div class="footer" style="margin-top: -40px">
+                <div><p> { '\u{200B}' } </p></div>
             </div>
         </div>
     </>

static/www/style.scss

@@ -36,22 +36,8 @@ body {
     align-items: center;
 }
 
-@mixin button-styles {
-    display: inline-block;
-    padding: 3px 6px;
-    font-size: 16px;
-    text-align: center;
-    color: $primary-color;
-    background-color: $background-color;
-    border: 1px solid $primary-color;
-    cursor: pointer;
-    text-decoration: none;
-    border-radius: 0;
-    user-select: none;
-}
-
 .box,
-div.buttons {
+div.footer {
     @include flex-center;
     max-width: 480px;
     margin: 0 auto;
@@ -93,7 +79,17 @@ div.buttons {
 }
 
 .button {
-    @include button-styles;
+    display: inline-block;
+    padding: 3px 6px;
+    font-size: 16px;
+    text-align: center;
+    color: $primary-color;
+    background-color: $background-color;
+    border: 1px solid $primary-color;
+    cursor: pointer;
+    text-decoration: none;
+    border-radius: 0;
+    user-select: none;
 
     &.shiny {
         position: relative;
@@ -137,10 +133,8 @@ div.buttons {
     }
 }
 
-ul.buttons {
+ul.footer {
     list-style-type: none;
-    margin: 0px;
-    padding: 0;
     @include flex-center;
     flex-wrap: wrap;
 
@@ -153,8 +147,30 @@ ul.buttons {
     }
 }
 
-div.footer {
+.footer-container {
-    @include flex-center;
+    margin-top: 64px;
-    height: 2.4em;
+
+    @media (min-height: 816px) {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin-top: 0;
+    }
+}
+
+ul.footer.buttons {
+    margin: 0px;
+    padding: 0;
+}
+
+div.footer.quote {
+    text-align: center;
+    word-wrap: break-word;
+    margin-top: -8px;
+}
+
+div.footer.links {
+    margin-top: -12px;
     gap: 5px;
 }