Add separate CSS file

brycehill · Nov 6, 2018 · 4c4d120 · 4c4d120
1 parent d9dd55f
commit 4c4d120
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Main</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="main.js"></script>
+</head>
+<body>
+  <script>var app = Elm.Main.init();</script>
+</body>
+</html>
diff --git a/src/Main.elm b/src/Main.elm
@@ -5,7 +5,7 @@ import Browser exposing (Document)
 import Html exposing (Html, button, div, text)
 import Html.Events exposing (onClick)
 import Browser exposing (Document)
-import Html.Attributes exposing (style)
+import Html.Attributes exposing (class, style)
 
 
 main : Program () Model Msg
@@ -60,25 +60,21 @@ update msg model =
 
 view : Maybe Color -> Document Msg
 view mc =
-    { title = ""
-    , body =
-        [ case mc of
-            Just color ->
-                div
-                    [ style "backgroundColor" color
-                    , style "height" "100vh"
-                    , style "width" "100vw"
-                    , style "display" "flex"
-                    , style "justify-content" "center"
-                    , style "align-items" "center"
-                    , style "text-align" "center"
-                    , style "font-size" "40px"
-                    , style "color" "white"
-                    , onClick ChangeColor
+    case mc of
+        Just color ->
+            { title = "CSS Color : " ++ color
+            , body =
+                [ div
+                    [ class "root"
+                    , style "backgroundColor" color
                     ]
-                    [ div [] [ text color ] ]
-
-            Nothing ->
-                div [] [ div [ onClick ChangeColor ] [ text "No" ] ]
-        ]
-    }
+                    [ div [ class "text", onClick ChangeColor ] [ text color ] ]
+                ]
+            }
+
+        Nothing ->
+            { title = "CSS Color"
+            , body =
+                [ div [] [ div [ onClick ChangeColor ] [] ]
+                ]
+            }
diff --git a/styles.css b/styles.css
@@ -0,0 +1,28 @@
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.root {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-family: "Open Sans", Helvetica, sans-serif;
+}
+
+/**
+ * TODO: Add Text Animation, like a wiggle?
+ * Animate colors and/or text when transitioning
+ */
+
+.text {
+  cursor: pointer;
+  font-size: 6em;
+  color: white;
+  letter-spacing: 5px;
+  font-weight: 100;
+}