footer transitions

Luki120 · Aug 15, 2024 · ec141fc · ec141fc
1 parent bd451bc
commit ec141fc
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt b/site/src/jsMain/kotlin/me/luki/website/styles/SocialButtonStyle.kt
@@ -1,19 +1,41 @@
 package me.luki.website.styles
 
+import com.varabyte.kobweb.compose.css.Transition
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.height
 import com.varabyte.kobweb.compose.ui.modifiers.scale
+import com.varabyte.kobweb.compose.ui.modifiers.transition
 import com.varabyte.kobweb.compose.ui.modifiers.width
 import com.varabyte.kobweb.silk.style.CssStyle
+import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
+import com.varabyte.kobweb.silk.style.plus
 import com.varabyte.kobweb.silk.style.selectors.hover
+import org.jetbrains.compose.web.css.AnimationTimingFunction
+import org.jetbrains.compose.web.css.ms
 import org.jetbrains.compose.web.css.px
 
 val SocialButtonStyle = CssStyle(
     extraModifier = Modifier
         .height(28.px)
         .width(28.px)
 ) {
-    hover {
-        Modifier.scale(1.1)
+    base {
+        Modifier
+            .transition(
+                Transition.all(
+                    duration = 200.ms,
+                    timingFunction = AnimationTimingFunction.EaseInOut
+                )
+            )
+    }
+    (Breakpoint.MD + hover) {
+        Modifier
+            .scale(1.2)
+            .transition(
+                Transition.all(
+                    duration = 200.ms,
+                    timingFunction = AnimationTimingFunction.EaseInOut
+                )
+            )
     }
 }