1) Export 0.1.6 (Change Breakpoint sizes; Align StartSection ImageCon…

…tent correctly)
ItamiOMW · Mar 19, 2024 · 2d4f300 · 2d4f300
1 parent 0b89cc1
commit 2d4f300
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
diff --git a/site/.kobweb/site/index.html b/site/.kobweb/site/index.html
diff --git a/site/.kobweb/site/itami_mobile.js b/site/.kobweb/site/itami_mobile.js
diff --git a/site/.kobweb/site/itami_mobile.js.map b/site/.kobweb/site/itami_mobile.js.map
diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/start/StartSection.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/start/StartSection.kt
@@ -87,9 +87,9 @@ val StartSectionVariant by SectionContainerStyle.addVariant {
     Breakpoint.XL {
         Modifier
             .backgroundImage(
-                radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 71.5.percent, y = 50.percent)) {
+                radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 73.5.percent, y = 50.percent)) {
                     add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
-                    add(Colors.Transparent, 30.percent)
+                    add(Colors.Transparent, 28.percent)
                 }
             )
     }
@@ -111,7 +111,7 @@ fun StartSection() {
                 breakpoint = breakpoint,
                 onExploreWorksClicked = { pageContext.router.navigateTo(Section.Works.href) }
             )
-            ImageContent()
+            ImageContent(breakpoint = breakpoint)
         }
         ScrollHint(modifier = Modifier.displayIfAtLeast(Breakpoint.MD).align(Alignment.Start))
     }
@@ -126,10 +126,7 @@ private fun ScrollHint(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Start
     ) {
-        ScrollMouseIcon(
-            modifier = IconStyle.toModifier()
-                .size(36.px)
-        )
+        ScrollMouseIcon(modifier = IconStyle.toModifier().size(36.px))
         SpanText(
             modifier = TextStyle.toModifier(LabelMediumTextStyle, TextStylePrimaryColor)
                 .textAlign(TextAlign.Start),
@@ -174,10 +171,12 @@ private fun TextContent(
 }
 
 @Composable
-private fun ImageContent() {
+private fun ImageContent(
+    breakpoint: Breakpoint
+) {
     Box(
         modifier = Modifier.flex(1),
-        contentAlignment = Alignment.Center
+        contentAlignment = if (breakpoint >= Breakpoint.LG) Alignment.CenterEnd else Alignment.Center
     ) {
         Image(
             src = Res.Images.START_IMAGE,

diff --git a/...tlin/com/itami/itami_mobile/components/sections/start/components/StartSectionGridStyle.kt b/...tlin/com/itami/itami_mobile/components/sections/start/components/StartSectionGridStyle.kt
@@ -33,7 +33,8 @@ val StartSectionGridStyle by ComponentStyle(extraModifiers = {
         Modifier
             .width(100.percent)
             .display(DisplayStyle.Flex)
-            .gap(50.px)
+            .columnGap(1.cssRem)
+            .rowGap(3.cssRem)
     }
     Breakpoint.ZERO {
         Modifier.flexDirection(FlexDirection.ColumnReverse)

diff --git a/...tart/components/StartSectionImageStyle.kt → ...ponents/StartSectionImageContentStyles.kt b/...tart/components/StartSectionImageStyle.kt → ...ponents/StartSectionImageContentStyles.kt
diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/theme/AppStyles.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/theme/AppStyles.kt
@@ -29,8 +29,8 @@ fun initAppStyles(ctx: InitSilkContext) {
         breakpoints = BreakpointSizes(
             sm = 30.cssRem, // 480 px,
             md = 48.cssRem, // 768 px
-            lg = 76.cssRem, // 1216 px
-            xl = 94.cssRem, // 1504 px
+            lg = 81.25.cssRem, // 1300 px
+            xl = 100.cssRem, // 1600 px
         )
         modifyComponentStyle(ButtonStyle) {
             base {