1) Export 0.1.7 (Combine StartSection and SkillsSectionDivider; Minor…

… component changes; Set maxWidth for SectionContainer);
ItamiOMW · Mar 23, 2024 · 365a04f · 365a04f
1 parent 2d4f300
commit 365a04f
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 71 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/nav_header/NavHeader.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/nav_header/NavHeader.kt
@@ -55,13 +55,19 @@ val NavHeaderStyle by ComponentStyle(extraModifiers = { SmoothColorStyle.toModif
         Modifier.padding(left = 24.px, right = 24.px, top = 10.px, bottom = 10.px)
     }
     Breakpoint.MD {
-        Modifier.padding(left = 34.px, right = 34.px, top = 15.px, bottom = 15.px)
+        Modifier
+            .padding(left = 34.px, right = 34.px, top = 15.px, bottom = 15.px)
+            .height(7.vh)
     }
     Breakpoint.LG {
-        Modifier.padding(left = 54.px, right = 54.px, top = 20.px, bottom = 20.px)
+        Modifier
+            .padding(left = 54.px, right = 54.px, top = 20.px, bottom = 20.px)
+            .height(10.vh)
     }
     Breakpoint.XL {
-        Modifier.padding(left = 104.px, right = 104.px, top = 20.px, bottom = 20.px)
+        Modifier
+            .padding(left = 104.px, right = 104.px, top = 20.px, bottom = 20.px)
+            .height(10.vh)
     }
 }
 

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
@@ -1,6 +1,7 @@
 package com.itami.itami_mobile.components.sections.start
 
 import androidx.compose.runtime.Composable
+import com.itami.itami_mobile.components.sections.start.components.SkillsSectionDivider
 import com.itami.itami_mobile.components.sections.start.components.StartSectionGridStyle
 import com.itami.itami_mobile.components.sections.start.components.StartSectionImageStyle
 import com.itami.itami_mobile.components.widgets.button.PrimaryButton
@@ -36,20 +37,18 @@ import com.varabyte.kobweb.silk.components.style.toModifier
 import com.varabyte.kobweb.silk.components.text.SpanText
 import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint
 import com.varabyte.kobweb.silk.theme.colors.palette.toPalette
+import org.jetbrains.compose.web.css.cssRem
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.css.vh
 import org.jetbrains.compose.web.dom.Div
 
 val StartSectionVariant by SectionContainerStyle.addVariant {
     val colorPalette = colorMode.toPalette()
-    base {
-        Modifier
-            .height(75.vh)
-            .minHeight(650.px)
-    }
     Breakpoint.ZERO {
         Modifier
+            .height(75.vh)
+            .minHeight(38.cssRem)
             .backgroundImage(
                 radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 25.percent)) {
                     add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -59,6 +58,7 @@ val StartSectionVariant by SectionContainerStyle.addVariant {
     }
     Breakpoint.SM {
         Modifier
+            .minHeight(40.6.cssRem)
             .backgroundImage(
                 radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 30.percent)) {
                     add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -68,15 +68,17 @@ val StartSectionVariant by SectionContainerStyle.addVariant {
     }
     Breakpoint.MD {
         Modifier
+            .height(78.vh)
             .backgroundImage(
                 radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 50.percent, y = 30.percent)) {
                     add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
-                    add(Colors.Transparent, 45.percent)
+                    add(Colors.Transparent, 40.percent)
                 }
             )
     }
     Breakpoint.LG {
         Modifier
+            .height(75.vh)
             .backgroundImage(
                 radialGradient(RadialGradient.Shape.Circle, CSSPosition(x = 71.5.percent, y = 50.percent)) {
                     add(colorPalette.brand.primary.toRgb().copyf(alpha = 0.6f))
@@ -100,20 +102,26 @@ fun StartSection() {
     val pageContext = rememberPageContext()
     val breakpoint = rememberBreakpoint()
 
-    SectionContainer(
-        modifier = Modifier,
-        variant = StartSectionVariant,
-        section = Section.Start,
-        verticalArrangement = Arrangement.Center
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        Div(attrs = StartSectionGridStyle.toAttrs()) {
-            TextContent(
-                breakpoint = breakpoint,
-                onExploreWorksClicked = { pageContext.router.navigateTo(Section.Works.href) }
-            )
-            ImageContent(breakpoint = breakpoint)
+        SectionContainer(
+            modifier = Modifier,
+            variant = StartSectionVariant,
+            section = Section.Start,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Div(attrs = StartSectionGridStyle.toAttrs()) {
+                TextContent(
+                    breakpoint = breakpoint,
+                    onExploreWorksClicked = { pageContext.router.navigateTo(Section.Works.href) }
+                )
+                ImageContent(breakpoint = breakpoint)
+            }
+            ScrollHint(modifier = Modifier.displayIfAtLeast(Breakpoint.MD).align(Alignment.Start))
         }
-        ScrollHint(modifier = Modifier.displayIfAtLeast(Breakpoint.MD).align(Alignment.Start))
+        SkillsSectionDivider()
     }
 }
 

diff --git a/.../section_dividers/SkillsSectionDivider.kt → .../start/components/SkillsSectionDivider.kt b/.../section_dividers/SkillsSectionDivider.kt → .../start/components/SkillsSectionDivider.kt
@@ -1,4 +1,4 @@
-package com.itami.itami_mobile.components.sections.section_dividers
+package com.itami.itami_mobile.components.sections.start.components
 
 import androidx.compose.runtime.Composable
 import com.itami.itami_mobile.components.widgets.skill.SkillItem
@@ -17,6 +17,7 @@ import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint
 import com.varabyte.kobweb.silk.theme.colors.palette.overlay
 import com.varabyte.kobweb.silk.theme.colors.palette.toPalette
 import org.jetbrains.compose.web.css.cssRem
+import org.jetbrains.compose.web.css.vh
 
 val SkillSectionDividerStyle by ComponentStyle {
     val colorPalette = colorMode.toPalette()
@@ -26,10 +27,14 @@ val SkillSectionDividerStyle by ComponentStyle {
             .background(colorPalette.overlay)
     }
     Breakpoint.ZERO {
-        Modifier.padding(top = 2.5.cssRem, bottom = 2.5.cssRem)
+        Modifier
+            .padding(top = 2.5.cssRem, bottom = 2.5.cssRem)
+            .height(18.vh)
     }
     Breakpoint.SM {
-        Modifier.padding(topBottom = 3.cssRem)
+        Modifier
+            .height(15.vh)
+            .padding(topBottom = 3.cssRem)
     }
     Breakpoint.MD {
         Modifier.padding(topBottom = 3.4.cssRem)

diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/works/WorksSection.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/components/sections/works/WorksSection.kt
@@ -70,7 +70,7 @@ private fun MoreIsYetToCome() {
 }
 
 @Composable
-private fun TextContent(
+private fun  TextContent(
     breakpoint: Breakpoint,
 ) {
     Column(

diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/components/widgets/section/SectionContainer.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/components/widgets/section/SectionContainer.kt
@@ -12,6 +12,7 @@ import com.varabyte.kobweb.silk.components.style.ComponentStyle
 import com.varabyte.kobweb.silk.components.style.ComponentVariant
 import com.varabyte.kobweb.silk.components.style.breakpoint.Breakpoint
 import com.varabyte.kobweb.silk.components.style.toModifier
+import org.jetbrains.compose.web.css.cssRem
 import org.jetbrains.compose.web.css.keywords.auto
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.px
@@ -21,6 +22,7 @@ val SectionContainerStyle by ComponentStyle {
         Modifier
             .width(100.percent)
             .height(auto)
+            .maxWidth(130.cssRem)
             .classNames("section-container")
     }
     Breakpoint.ZERO {

diff --git a/site/src/jsMain/kotlin/com/itami/itami_mobile/pages/Index.kt b/site/src/jsMain/kotlin/com/itami/itami_mobile/pages/Index.kt
@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
 import com.itami.itami_mobile.components.layouts.DefaultPageLayout
 import com.itami.itami_mobile.components.sections.about.AboutSection
 import com.itami.itami_mobile.components.sections.contact.ContactSection
-import com.itami.itami_mobile.components.sections.section_dividers.SkillsSectionDivider
 import com.itami.itami_mobile.components.sections.start.StartSection
 import com.itami.itami_mobile.components.sections.works.WorksSection
 import com.varabyte.kobweb.compose.foundation.layout.Column
@@ -22,7 +21,6 @@ fun HomePage() {
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             StartSection()
-            SkillsSectionDivider()
             WorksSection()
             AboutSection()
             ContactSection()