From 07b0b9ea2992e1fb16be979c5fe079bcb1741b22 Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Wed, 2 Feb 2022 18:27:11 -0500
Subject: [PATCH] Style the elm area too

---
 site/styles.scss | 61 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/Main.elm     | 20 ++++++++++------
 2 files changed, 74 insertions(+), 7 deletions(-)

diff --git a/site/styles.scss b/site/styles.scss
index f889bb0..beae951 100644
--- a/site/styles.scss
+++ b/site/styles.scss
@@ -95,3 +95,64 @@ header {
 		border-left-color: transparent;
 	}
 }
+
+#elm-area {
+	display: grid;
+	grid-template-columns: 50% 50%;
+	gap: 50px;
+	margin: 0 -180px;
+
+	.module-button > div {
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: 0fr 1fr;
+		grid-template-rows: 0fr 1fr;
+		gap: 20px;
+
+		height: 100%;
+		padding: 29px;
+
+		border: 3px solid var(--color-hi);
+
+		& > :last-child {
+			grid-area: 2/1/3/3;
+		}
+
+		h3 {
+			margin: 0;
+			align-self: center;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.module-button.active > div {
+		border: 12px double var(--color-hi);
+		padding: 20px;
+	}
+}
+
+.cooler-checkbox {
+	height: 40px;
+	width: 40px;
+	border: 3px solid #1c87d8;
+	position: relative;
+
+	input {
+		display: none;
+	}
+
+	label.active &:after {
+		content: "";
+		position: absolute;
+		left: 12px;
+		top: 0px;
+		width: 11px;
+		height: 24px;
+		border: solid #1c87d8;
+		border-width: 0 6px 6px 0;
+		transform: rotate(39deg);
+	}
+}
diff --git a/src/Main.elm b/src/Main.elm
index 7f393b6..adf23e4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -52,13 +52,19 @@ update msg model =
 view_module_button : Set Module -> Module -> Html Msg
 view_module_button enabled mod =
   label
-    (if Sort.Set.memberOf enabled mod then [class "active"] else [])
-    [ input
-      [ type_ "checkbox"
-      , onCheck (ToggleModule mod)
-      ] []
-    , h3 [] [ text (module_property .name mod) ]
-    , p [] (module_desc mod)
+    (class "module-button"
+      :: (if Sort.Set.memberOf enabled mod then [class "active"] else [])
+      )
+    [ div []
+      [ div [class "cooler-checkbox"]
+        [ input
+          [ type_ "checkbox"
+          , onCheck (ToggleModule mod)
+          ] []
+        ]
+      , h3 [] [ text (module_property .name mod) ]
+      , p [] (module_desc mod)
+      ]
     ]
 
 view : Model -> Html Msg