changed px for css rem for font size + moved CssStyles to the appropr…

…iate folder

.github/workflows/deploy.yml

@@ -71,3 +71,4 @@ jobs:
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           command: pages deploy ${{ github.workspace }}/site/.kobweb/site/ --project-name=luki120
           wranglerVersion: "3.67.1"
+

site/.kobweb/conf.yaml

@@ -1,5 +1,5 @@
 site:
-  title: "website"
+  title: "Luki120's Website"
 
 server:
   files:

site/src/jsMain/kotlin/me/luki/website/sections/MainSection.kt

@@ -1,9 +1,7 @@
 package me.luki.website.sections
 
 import androidx.compose.runtime.Composable
-import com.varabyte.kobweb.compose.css.AnimationIterationCount
-import com.varabyte.kobweb.compose.css.CSSLengthNumericValue
-import com.varabyte.kobweb.compose.css.TextAlign
+import com.varabyte.kobweb.compose.css.*
 import com.varabyte.kobweb.compose.foundation.layout.Arrangement
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.ui.Alignment
@@ -14,12 +12,12 @@ import com.varabyte.kobweb.core.rememberPageContext
 import com.varabyte.kobweb.silk.components.forms.Button
 import com.varabyte.kobweb.silk.components.icons.fa.FaArrowDown
 import com.varabyte.kobweb.silk.components.text.SpanText
-import com.varabyte.kobweb.silk.style.CssStyle
 import com.varabyte.kobweb.silk.style.animation.Keyframes
 import com.varabyte.kobweb.silk.style.animation.toAnimation
-import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
 import com.varabyte.kobweb.silk.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import me.luki.website.styles.AboutStyle
+import me.luki.website.styles.DescriptionStyle
 import me.luki.website.utils.toSitePalette
 import org.jetbrains.compose.web.css.*
 
@@ -79,25 +77,7 @@ private fun About() {
                 .color(ColorMode.current.toSitePalette().accent)
                 .position(Position.Absolute)
         ) {
-            FaArrowDown(modifier = Modifier.fontSize(35.px))
+            FaArrowDown(modifier = Modifier.fontSize(2.2.cssRem))
         }
     }
 }
-
-val AboutStyle = CssStyle {
-    Breakpoint.ZERO {
-        Modifier.fontSize(55.px)
-    }
-    Breakpoint.MD {
-        Modifier.fontSize(100.px)
-    }
-}
-
-val DescriptionStyle = CssStyle {
-    Breakpoint.ZERO {
-        Modifier.fontSize(18.px)
-    }
-    Breakpoint.MD {
-        Modifier.fontSize(30.px)
-    }
-}

site/src/jsMain/kotlin/me/luki/website/styles/MainSectionStyles.kt

@@ -1,2 +1,25 @@
 package me.luki.website.styles
 
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.fontSize
+import com.varabyte.kobweb.silk.style.CssStyle
+import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
+import org.jetbrains.compose.web.css.cssRem
+
+val AboutStyle = CssStyle {
+    Breakpoint.ZERO {
+        Modifier.fontSize(3.5.cssRem)
+    }
+    Breakpoint.MD {
+        Modifier.fontSize(6.5.cssRem)
+    }
+}
+
+val DescriptionStyle = CssStyle {
+    Breakpoint.ZERO {
+        Modifier.fontSize(1.1.cssRem)
+    }
+    Breakpoint.MD {
+        Modifier.fontSize(1.90.cssRem)
+    }
+}