Use kotlin-styled for Home component CSS

2 files changed, 40 insertions, 3 deletions

diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
index e9af82be..abbd84a9 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
@@ -2,11 +2,20 @@ package org.luxons.sevenwonders.ui.components.home
 
 import react.RBuilder
 import react.dom.*
+import styled.css
+import styled.styledDiv
 
-fun RBuilder.home() = div  {
-    h1 {
-        +"Seven Wonders"
+private const val LOGO = "images/logo-7-wonders.png"
+
+fun RBuilder.home() = styledDiv {
+    css {
+        +HomeStyles.fullscreen
+        +HomeStyles.center
+        +HomeStyles.homeRoot
     }
+
+    img(src = LOGO, alt = "Seven Wonders") {}
+
     p {
         +"Great app!"
     }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
new file mode 100644
index 00000000..34699f5b
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
@@ -0,0 +1,28 @@
+package org.luxons.sevenwonders.ui.components.home
+
+import kotlinx.css.*
+import styled.StyleSheet
+
+object HomeStyles : StyleSheet("HomeStyles", isStatic = true) {
+
+    val homeRoot by css {
+        background = "url('images/background-zeus-temple.jpg') center no-repeat"
+        backgroundSize = "cover"
+    }
+
+    val center by css {
+        display = Display.flex
+        flexDirection = FlexDirection.column
+        alignItems = Align.center
+        justifyContent = JustifyContent.center
+    }
+
+    val fullscreen by css {
+        position = Position.fixed
+        top = LinearDimension("0")
+        left = LinearDimension("0")
+        bottom = LinearDimension("0")
+        right = LinearDimension("0")
+        overflow = Overflow.hidden
+    }
+}