Merge pull request #4 from elm-oslo/u-landing-page

Add information about the current situation

elm.json

@@ -11,6 +11,7 @@
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
             "elm/json": "1.1.2",
+            "elm-explorations/markdown": "1.0.0",
             "krisajenkins/remotedata": "6.0.1",
             "rtfeldman/elm-validate": "4.0.1",
             "tesk9/accessible-html": "4.0.0"

src/Main.elm

@@ -8,6 +8,7 @@ import Html.Events exposing (onClick, onInput, onSubmit)
 import Http
 import Json.Decode as Decode
 import Json.Encode as Encode
+import Markdown
 import RemoteData exposing (RemoteData(..), WebData)
 import Validate
 
@@ -99,15 +100,14 @@ view : Model -> Html Msg
 view model =
     div [ class "container" ]
         [ h1 [] [ text "Oslo Elm Days 2020" ]
-        , p [ class "intro" ]
-            [ text "May 15 and 16 in Oslo, Norway"
-            ]
-        , p [ class "cfp" ]
-            [ text "Want to speak at Oslo Elm Days 2020?"
-            , br []
-            , a [ href "https://forms.gle/T4UXj83Fs7jetR577" ]
-                [ text "Check out our Call for Presentations!" ]
-            ]
+        , p [ class "info" ] [ Markdown.toHtml [] """
+### [March 11 2020]
+Oslo Elm Days is unfortunately postponed due to the ongoing situation with the Coronavirus.
+
+For now, just know that we really want there to be a new Oslo Elm Days, but that we cannot say whether we’ll be able to make it happen in 2020 or will have to wait until 2021.
+
+We are working on figuring out how to proceed, and will post new information here and on Twitter ([@osloelmdays](https://twitter.com/osloelmdays)) as soon as something is decided!
+        """ ]
         , case model.submitStatus of
             Success _ ->
                 p [] [ text "Thanks for subscribing!" ]

src/main.css

@@ -71,10 +71,25 @@ a:hover {
 
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   padding: 3rem 2rem;
 }
 
+.info {
+  max-width: 50%;
+
+  font-size: 1.3rem;
+  text-align: left;
+}
+
+@media screen and (max-width: 730px) {
+  .info {
+    max-width: 100%;
+    padding: 0 2rem;
+  }
+}
+
 .form {
   display: flex;
   flex-direction: column;