offset animations and rust-toolchain update

ChristopherBiscardi · Sep 28, 2024 · 76b6c62 · 76b6c62
1 parent fe8a5a2
commit 76b6c62
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/crates/www/src/components/sidebar.rs b/crates/www/src/components/sidebar.rs
@@ -224,7 +224,7 @@ pub fn Sidebar(
                                     class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-white hover:bg-slate-800"
                                 >
                                     <img
-                                        class="h-8 w-8 rounded-full bg-slate-800"
+                                        class="h-6 w-6 rounded-full bg-slate-900"
                                         src="/logos/logo-circle.svg"
                                         alt=""
                                     />

diff --git a/crates/www/src/routes/index.rs b/crates/www/src/routes/index.rs
@@ -1,6 +1,4 @@
-use crate::components::{
-    sidebar::{Header, Sidebar},
-};
+use crate::components::sidebar::{Header, Sidebar};
 use leptos::{either::Either, prelude::*};
 // use sens8::button::*;
 
@@ -10,6 +8,7 @@ fn BentoBox<'a>(
     bg: Option<&'a str>,
     image_header: Option<&'a str>,
     #[prop(default = 2.)] speed: f64,
+    #[prop(default = 0.)] animation_offset: f64,
     children: Children,
 ) -> impl IntoView + 'a {
     let mut style = "".to_string();
@@ -27,6 +26,9 @@ fn BentoBox<'a>(
     container_style.push_str("--border-speed: ");
     container_style.push_str(&speed.to_string());
     container_style.push(';');
+    container_style.push_str("--offset: ");
+    container_style.push_str(&animation_offset.to_string());
+    container_style.push_str("s;");
     view! {
         <div style=container_style class="bento-container h-full">
             <div style=style class="bento-box h-full">
@@ -50,6 +52,7 @@ struct BentoBoxContent<'a> {
     bg: Option<&'a str>,
     border_gradient: Option<&'a str>,
     speed: f64,
+    offset: f64,
     center_title: bool,
     image_header: Option<&'a str>,
 }
@@ -61,6 +64,7 @@ impl<'a> Default for BentoBoxContent<'a> {
             bg: Default::default(),
             border_gradient: Default::default(),
             speed: 2.,
+            offset: 0.,
             center_title: false,
             image_header: None,
         }
@@ -88,6 +92,7 @@ pub fn IndexPage() -> impl IntoView {
                 border_gradient: Some("conic-gradient( from calc(180deg + var(--angle)) at 50% 70%, #624DEA, #ded9fb)"),
                 center_title: true,
                 image_header: Some("https://wasm-cdn--solicitor-seal-13462.netlify.app/img/wasm-heading.avif"),
+                offset: 1.,
                 ..Default::default()
             },
             BentoBoxContent {
@@ -170,6 +175,7 @@ pub fn IndexPage() -> impl IntoView {
                                     bg=content.bg
                                     speed=content.speed
                                     image_header=content.image_header
+                                    animation_offset={(0.1 * index as f64)}
                                 >
                                     <p class=format!(
                                         "text-2xl font-bold leading-7 text-ctp-text sm:truncate sm:text-3xl sm:tracking-tight {}",

diff --git a/crates/www/style/input.css b/crates/www/style/input.css
@@ -143,6 +143,8 @@
   --ctp-base: rgb(239, 241, 245);
   --ctp-mantle: rgb(230, 233, 239);
   --ctp-crust: rgb(220, 224, 232);
+
+  --offset: 0s;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -215,7 +217,20 @@
     --angle: 360deg;
   }
 }
+
+@keyframes fade-in {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
 .bento-box {
+  animation: fade-in 0.6s linear var(--offset) both;
   --bg: #0f172a;
   --bg-grad: linear-gradient(-45deg, #1e293b, #0f172a) padding-box;
   --border-gradient: var(--gradient) border-box;
@@ -245,7 +260,7 @@
   position: absolute;
   inset: calc(var(--border-width) * -1px);
   border-radius: calc(var(--border-radius) * 1px);
-  background: var(--ctp-surface0);
+  background: #1e293b;
   opacity: var(--alpha, 0.5);
   transition: opacity 0.2s;
 }

diff --git a/rust-toolchain.toml b/rust-toolchain.toml
@@ -1,2 +1,2 @@
 [toolchain]
-channel = "nightly-2024-09-05"
+channel = "nightly-2024-09-01"