From facb408e89d6713676704bdfedb7994b13c815ba Mon Sep 17 00:00:00 2001
From: kageru <kageru@encode.moe>
Date: Sun, 29 Sep 2019 15:56:22 +0200
Subject: [PATCH] Refactor CSS

---
 .../kotlin/moe/kageru/kodeshare/pages/Css.kt  | 51 +++++++++++++------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt b/src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt
index ad4249e..cfe4d45 100644
--- a/src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt
+++ b/src/main/kotlin/moe/kageru/kodeshare/pages/Css.kt
@@ -2,6 +2,7 @@ package moe.kageru.kodeshare.pages
 
 import kotlinx.css.*
 import kotlinx.css.properties.*
+import kotlin.math.ceil
 
 object Css {
     const val FLOATY_CLASS = "floatything"
@@ -9,7 +10,20 @@ object Css {
     private val accent2 = Color("#a6e22e")
     private val fontcolor = Color.lightGrey
     private val bgcolor = Color("#23241f")
+
+    private const val borderpixels = 3
+    private const val bodyPadding = 20
+    private const val inputPadding = 8
+    // Text areas apparently grow beyond their parent element if padding and/or borders are added.
+    // They always grow to the right, so we simply add more padding to shift everything back (see usage of this).
+    private const val bodyShift = bodyPadding + 2 * borderpixels + 2 * inputPadding
+
+    private fun StyledElement.defaultBorder() = border(borderpixels.px, BorderStyle.solid, accent1)
+
     val default = CSSBuilder().apply {
+        rule("html, body, form") {
+            height = (100 - ceil(bodyPadding.toDouble() / 8)).pct
+        }
         body {
             fontFamily = "Hack, Fira Code, Noto Mono, monospace"
             fontSize = 13.pt
@@ -17,22 +31,27 @@ object Css {
             margin = "auto"
             backgroundColor = bgcolor
             color = fontcolor
+            padding(
+                top = bodyPadding.px,
+                left = bodyPadding.px,
+                right = (bodyShift).px,
+                bottom = bodyPadding.px
+            )
         }
         form {
-            marginTop = 1.em
+            width = 100.pct
+            marginTop = 0.px
         }
         textarea {
             fontFamily = "Hack, Fira Code, Noto Mono, monospace"
             backgroundColor = bgcolor
             color = Color.white
             fontSize = 13.pt
-            borderColor = accent1
-            borderWidth = 3.px
             borderRadius = 8.px
-            borderStyle = BorderStyle.solid
-            padding = "5px"
-            minWidth = 70.pct
-            maxWidth = 97.pct
+            defaultBorder()
+            padding = "${inputPadding}px"
+            width = 100.pct
+            height = 90.pct
         }
         // this doesn’t inherit the style from anything else for some reason
         rule(".hljs, pre, code") {
@@ -46,24 +65,25 @@ object Css {
         }
         rule("input[type=\"submit\"]") {
             backgroundColor = accent1
-            borderColor = accent1
-            borderWidth = 2.px
+            defaultBorder()
             borderRadius = 5.px
-            borderStyle = BorderStyle.solid
             color = Color.black
             fontWeight = FontWeight.w600
-            padding = "5px 10em"
+            padding = "0.2em"
             cursor = Cursor.pointer
             transition(duration = 500.ms)
+            marginRight = (-bodyShift).px
+            width = 80.pct
         }
         rule("div.$FLOATY_CLASS") {
             position = Position.absolute
             padding = "5px"
-            border(2.px, BorderStyle.solid, accent1)
-            borderRadius = 3.px
+            defaultBorder()
+            borderRadius = 5.px
             color = accent1
-            top = 1.em
-            right = 1.em
+            // I have no idea where this one pixel is coming from
+            top = (bodyPadding + 1).px
+            right = bodyPadding.px
             zIndex = 1
         }
         rule("div.$FLOATY_CLASS:hover") {
@@ -88,7 +108,6 @@ object Css {
             color = accent2
         }
         rule("textarea:focus") {
-            borderColor = accent2
             outline = Outline.none
         }
         rule("::selection") {