improved media query code using the new Kobweb breakpoint ranges

Luki120 · Dec 2, 2024 · dc82111 · dc82111
1 parent 80e80f8
commit dc82111
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git a/site/src/jsMain/kotlin/me/luki/website/composables/Footer.kt b/site/src/jsMain/kotlin/me/luki/website/composables/Footer.kt
@@ -21,8 +21,6 @@ import com.varabyte.kobweb.silk.components.navigation.LinkStyle
 import com.varabyte.kobweb.silk.components.text.SpanText
 import com.varabyte.kobweb.silk.style.addVariant
 import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
-import com.varabyte.kobweb.silk.style.plus
-import com.varabyte.kobweb.silk.style.selectors.hover
 import com.varabyte.kobweb.silk.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import me.luki.website.styles.SocialButtonStyle
@@ -42,11 +40,7 @@ val FooterLinkVariant = LinkStyle.addVariant {
         Modifier.color(CustomColors.Purple)
     }
 
-    (Breakpoint.MD + hover) {
-        Modifier.textDecorationLine(TextDecorationLine.Underline)
-    }
-
-    Breakpoint.ZERO {
+    (Breakpoint.ZERO until Breakpoint.MD) {
         Modifier.textDecorationLine(TextDecorationLine.None)
     }
 }

diff --git a/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt b/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt
@@ -34,6 +34,7 @@ import com.varabyte.kobweb.silk.style.breakpoint.displayUntil
 import com.varabyte.kobweb.silk.style.plus
 import com.varabyte.kobweb.silk.style.selectors.link
 import com.varabyte.kobweb.silk.style.toModifier
+import com.varabyte.kobweb.silk.style.until
 import com.varabyte.kobweb.silk.style.vars.color.ColorVar
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import kotlinx.browser.localStorage
@@ -66,14 +67,10 @@ val NavigationBarLinkVariant = LinkStyle.addVariant {
         Modifier.textDecorationLine(TextDecorationLine.None)
     }
 
-    (Breakpoint.ZERO + link) {
+    until(Breakpoint.MD) {
         Modifier.color(ColorVar.value())
     }
 
-    (Breakpoint.MD + link) {
-        Modifier.color(CustomColors.Purple)
-    }
-
     Breakpoint.MD {
         Modifier
             .border(