Make elm-lang.org responsive

assets/style.css

@@ -36,6 +36,11 @@ a:hover {
   margin-bottom: 6px;
 }
 
+.content img {
+  width: 100%;
+  height: 100%;
+}
+
 
 /* home stuff */
 
@@ -86,23 +91,23 @@ a:hover {
     margin: 0 auto;
   }
   .feature-image {
-    width: 420px;
+    max-width: 420px;
     display: block;
     margin: 0 auto;
   }
 }
 
 @media (min-width: 820px) {
   .features {
-    width: 800px;
+    max-width: 800px;
   }
   .feature {
     position: relative;
     margin-top: 1em;
     margin-bottom: 4em;
   }
   .feature-description {
-    width: 340px;
+    max-width: 340px;
   }
   .feature-image {
     position: absolute;
@@ -130,6 +135,7 @@ a:hover {
 
 /* top bar */
 
+
 #tabs {
   padding: 1em;
   background-color: #60B5CC;
@@ -161,6 +167,17 @@ a:hover {
   border-bottom: 3px solid #34495E;
 }
 
+@media (max-width: 600px) {
+  .tab {
+    font-size: 15px;
+    margin: 0 0.5em;
+  }
+  .content {
+    margin: 0 0.5em !important;
+  }
+}
+
+
 
 /* splash */
 
@@ -212,15 +229,21 @@ Not really any of those on the website though AFAIK.
   content: "\00a0";
 }
 
+pre > code {
+  display: block;
+  overflow-x: auto;
+}
+
 
 /* blogs */
 
 .author {
   padding-top: 1em;
   color: #ddd;
   display: block;
-  width: 600px;
+  max-width: 600px;
   margin: 0 auto;
+  padding-right: 10px;
   text-align: right;
 }
 
@@ -305,3 +328,20 @@ blockquote p {
   color: #bbbbbb;
 }
 
+/* iframes */
+
+.intrinsic-container {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.25%; /*assuming 16/9 aspect ratio*/
+  max-width: 800px;
+}
+
+.intrinsic-container iframe {
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/backend/Generate.hs

@@ -64,6 +64,7 @@ htmlSkeleton analytics highlight title scripts =
   H.docTypeHtml $ do
     H.head $ do
       H.meta ! A.charset "UTF-8"
+      H.meta ! A.name "viewport" ! A.content "width=device-width, initial-scale=1"
       H.title (H.toHtml title)
       favicon
       H.link ! A.rel "stylesheet" ! A.href "/assets/style.css?v=3"
@@ -90,7 +91,7 @@ favicon :: H.Html
 favicon =
   H.link
     ! A.rel "shortcut icon"
-    ! A.size "16x16, 32x32, 48x48, 64x64, 128x128, 256x256"
+    ! A.sizes "16x16 32x32 48x48 64x64 128x128 256x256"
     ! A.href "/favicon.ico"
 
 

src/pages/blog/announce/0.12.3.elm

@@ -41,12 +41,11 @@ We of course need to start with an example. As you move your mouse within the
 grey box, [Thwomp](http://www.mariowiki.com/Thwomp#Super_Mario_64) will stare
 at you. Too far away to crush you, but waiting...
 
-<iframe src="/examples/thwomp"
-        frameborder="0"
-        width="600"
-        height="300"
-        style="background-color: #D8DDE1;">
-</iframe>
+<div class="intrinsic-container">
+  <iframe src="/examples/thwomp"
+          style="background-color: #D8DDE1;">
+  </iframe>
+</div>
 
 Typically, working with WebGL in JS means wrestling with a huge 90s era C++ API
 with a great deal of [incidental

src/pages/blog/announce/0.7.1.elm

@@ -70,12 +70,11 @@ powerful than you really need.
 These signals came in handy when creating a turtle that swims around and surfaces,
 based on the `arrows` and `space` signals.
 
-<iframe
-  width="480" height="270"
-  src="https://www.youtube.com/embed/Xshzzzbw3KY?rel=0;showinfo=0"
-  frameborder="0"
-  allowfullscreen
-  style="margin:0px auto; display:block;"></iframe>
+<div class="intrinsic-container">
+  <iframe
+    src="https://www.youtube.com/embed/Xshzzzbw3KY?rel=0;showinfo=0"
+    allowfullscreen></iframe>
+</div>
 
 This takes only 20 physical lines of code, which you can see and modify
 in the interactive editor [here][src].
@@ -234,4 +233,3 @@ Thanks to Grzegorz and Mads for working on cool projects! Again, I encourage you
 [set up Preselm](https://github.com/grzegorzbalcerek/Preselm#preselm) or
 [try out the inline docs](https://groups.google.com/forum/?fromgroups=#!topic/elm-discuss/_xmbeVfjYbI)!
 """
-

src/pages/blog/announce/0.8.elm

@@ -73,11 +73,8 @@ explains all of the details of the API.
 
 The following video is a short demo of how to embed Elm in a `<div>`.
 
-<div style="position:relative; height:350px;">
-<iframe width="600" height="350"
-        src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0"
-             style="position:absolute; margin-left:-300px; left:50%;"
-        frameborder="0" allowfullscreen></iframe>
+<div class="intrinsic-container">
+  <iframe src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0" allowfullscreen></iframe>
 </div>
 
 So it is no longer an all-or-nothing choice. You can use Elm where it

src/pages/blog/blazing-fast-html-round-two.elm

@@ -31,7 +31,7 @@ main =
 
 
 image name =
-  div [ Center.style "800px" ]
+  div [ Center.style "800px", class "content" ]
     [ a
         [ href "https://evancz.github.io/react-angular-ember-elm-performance-comparison/"
         , title "Run the benchmarks yourself!"
@@ -370,4 +370,4 @@ you, and I learned a bunch from how you did things! I also want to thank
 [Sergey]: https://github.com/IwalkAlone
 [Stephen]: https://github.com/stephencelis
 
-"""
+"""

src/pages/blog/blazing-fast-html.elm

@@ -36,8 +36,8 @@ popular entries:
 <a href="https://evancz.github.io/todomvc-perf-comparison">
 <img src="/diagrams/sampleResults.png"
      alt="sample results with Firefox 30 on a Macbook Air with OSX 10.9.4"
-     title="sample results with Firefox 30 on a Macbook Air with OSX 10.9.4"
-     style="width:500px; height:380px; margin-left: auto; margin-right: auto; display:block;"></a>
+     title="sample results with Firefox 30 on a Macbook Air with OSX 10.9.4"z
+     style="max-width: 500px; margin-left: auto; margin-right: auto; display:block;"></a>
 
 Both [elm-html][] and Mercury are based on the [virtual-dom][] project, which is
 responsible for the great performance. The first half of this post will explore

src/pages/blog/compiler-errors-for-humans.elm

@@ -22,12 +22,14 @@ main =
 
 
 image url =
-  img
-    [ src url
-    , style [("display", "block"), ("margin", "1em auto")]
-    , alt "compiler output example"
-    ]
-    []
+  div [class "content", Center.style "900px"] [
+    img
+      [ src url
+      , style [("display", "block"), ("margin", "1em auto")]
+      , alt "compiler output example"
+      ]
+      []
+  ]
 
 
 content = """
@@ -186,15 +188,11 @@ his [elm-vim][] plugin:
 
 [elm-vim]: https://github.com/ajhager/elm-vim
 
+<div class="intrinsic-container">
 <iframe
   src="https://player.vimeo.com/video/132107269?color=49c180&title=0&byline=0&portrait=0"
-  width="500"
-  height="281"
-  frameborder="0"
-  style="padding: 0 50px;"
-  webkitallowfullscreen
-  mozallowfullscreen
   allowfullscreen></iframe>
+</div>
 
 (This is really exciting, great job!)
 

src/pages/blog/compilers-as-assistants.elm

@@ -12,18 +12,14 @@ main =
     Blog.evan
     (Blog.Date 2015 11 19)
     [ Center.markdown "600px" content
-    , iframe
-        [ width 560
-        , height 315
-        , src "https://www.youtube.com/embed/ARJ8cAGm6JE?start=60&end=87&rel=0&autoplay=0"
-        , attribute "frameborder" "0"
-        , attribute "allowfullscreen" ""
-        , style
-            [ "display" => "block"
-            , "margin" => "1em auto"
-            ]
-        ]
-        []
+    , div [Center.style "600px"]
+        [div [ class "intrinsic-container" ]
+          [ iframe
+              [ src "https://www.youtube.com/embed/ARJ8cAGm6JE?start=60&end=87&rel=0&autoplay=0"
+              , attribute "allowfullscreen" ""
+              ] []
+          ]
+        ]  
     , Center.markdown "600px" afterVideo
     , image "big-record"
     , Center.markdown "600px" afterTypeDiffs
@@ -47,13 +43,14 @@ main =
 
 
 image name =
-  img
-    [ src ("/assets/blog/error-messages/0.16/" ++ name ++ ".png")
-    , style [("display", "block"), ("margin", "1em auto")]
-    , alt "compiler output example"
+  div [class "content", Center.style "600px"] [
+    img
+      [ src ("/assets/blog/error-messages/0.16/" ++ name ++ ".png")
+      , style [("display", "block"), ("margin", "1em auto")]
+      , alt "compiler output example"
+      ]
+      []
     ]
-    []
-
 
 content = """
 

src/pages/blog/farewell-to-frp.elm

@@ -30,7 +30,7 @@ main =
     , iframe
         [ style
             [ "display" => "block"
-            , "width" => "400px"
+            , "width" => "300px"
             , "height" => "200px"
             , "padding" => "20px"
             , "margin" => "0 auto"

src/pages/blog/interactive-programming.elm

@@ -65,10 +65,11 @@ We will be exploring the limits of hot-swapping, and how language design is
 the key to making it easy and reliable. Before digging into details, let’s
 see how hot-swapping works in Elm:
 
-<iframe
-    src="//www.youtube.com/embed/zHPtvw8c3Lc?rel=0&html5=1"
-    allowfullscreen
-    style="display: block; border: none; width: 600px; height: 340px;"></iframe>
+<div class="intrinsic-container">
+  <iframe
+      src="//www.youtube.com/embed/zHPtvw8c3Lc?rel=0&html5=1"
+      allowfullscreen></iframe>
+</div>
 
 Support for hot-swapping is live on this site, so you can [mess with Mario
 yourself](/examples/mario) and play with the
@@ -98,10 +99,11 @@ over time or as a stream of events. Every Elm program sets up a network for
 processing these signals, called a signal graph. Watch the following video
 to understand signal graphs and how they can be used for hot-swapping:
 
-<iframe
-    src="//www.youtube.com/embed/FSdXiBLpErU?rel=0&html5=1"
-    allowfullscreen
-    style="display: block; border: none; width: 600px; height: 340px;"></iframe>
+<div class="intrinsic-container">
+  <iframe
+      src="//www.youtube.com/embed/FSdXiBLpErU?rel=0&html5=1"
+      allowfullscreen></iframe>
+</div>
 
 <span style="color:#999;">
 Huge thank you to Laszlo for working on the