From c83d9bcd2651dd5625321d520ccc4a1eed9ec30b Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Mon, 12 Sep 2016 14:24:45 -0700 Subject: [PATCH 1/9] Add viewport meta tag to prevent mobile scaling --- src/backend/Generate.hs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/backend/Generate.hs b/src/backend/Generate.hs index 5e489444b..88379f8f3 100644 --- a/src/backend/Generate.hs +++ b/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" From a9a920e29190b2db0118687bf33b637d4c80373c Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Mon, 12 Sep 2016 15:00:21 -0700 Subject: [PATCH 2/9] Add media query to resize nav --- assets/style.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index 61c058001..eef16623e 100644 --- a/assets/style.css +++ b/assets/style.css @@ -130,6 +130,7 @@ a:hover { /* top bar */ + #tabs { padding: 1em; background-color: #60B5CC; @@ -161,6 +162,14 @@ a:hover { border-bottom: 3px solid #34495E; } +@media (max-width: 600px) { + .tab { + font-size: 15px; + margin: 0 0.5em; + } +} + + /* splash */ @@ -304,4 +313,3 @@ blockquote p { .grey-link:hover { color: #bbbbbb; } - From 075c55e67ae8b6f99553da1919dbd7bfd3920625 Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Mon, 12 Sep 2016 19:51:46 -0700 Subject: [PATCH 3/9] Change width to max-width where possible --- assets/style.css | 8 ++++---- src/pages/home.elm | 12 ++++++------ src/shared/Center.elm | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/assets/style.css b/assets/style.css index eef16623e..517d4fb4d 100644 --- a/assets/style.css +++ b/assets/style.css @@ -86,7 +86,7 @@ a:hover { margin: 0 auto; } .feature-image { - width: 420px; + max-width: 420px; display: block; margin: 0 auto; } @@ -94,7 +94,7 @@ a:hover { @media (min-width: 820px) { .features { - width: 800px; + max-width: 800px; } .feature { position: relative; @@ -102,7 +102,7 @@ a:hover { margin-bottom: 4em; } .feature-description { - width: 340px; + max-width: 340px; } .feature-image { position: absolute; @@ -228,7 +228,7 @@ Not really any of those on the website though AFAIK. padding-top: 1em; color: #ddd; display: block; - width: 600px; + max-width: 600px; margin: 0 auto; text-align: right; } diff --git a/src/pages/home.elm b/src/pages/home.elm index 79bfedd00..a68b4b895 100644 --- a/src/pages/home.elm +++ b/src/pages/home.elm @@ -95,7 +95,9 @@ viewFeature feature = , a [ class "feature-image" , href feature.link ] - [ img [src feature.image] [] + [ img [src feature.image + , style [("width", "100%")] + ] [] ] ] @@ -185,6 +187,7 @@ example imgSrc demo code = [ img [ src ("/assets/examples/" ++ imgSrc ++ ".png") , alt imgSrc + , style [("width", "100%")] ] [] ] @@ -207,7 +210,7 @@ fluidList itemWidth maxColumns itemList = bulletStyle = [ "display" => "inline-block" - , "width" => toPx itemWidth + , "max-width" => toPx itemWidth , "vertical-align" => "top" , "text-align" => "left" , "margin" => ("0 " ++ toPx gutter) @@ -285,7 +288,7 @@ company name website extension = [ a [ href website ] [ div [ style - [ "width" => "100%" + [ "width" => "200px" , "height" => "100px" , "background-image" => ("url('" ++ imgSrc ++ "')") , "background-repeat" => "no-repeat" @@ -295,6 +298,3 @@ company name website extension = [] ] ] - - - diff --git a/src/shared/Center.elm b/src/shared/Center.elm index 87f393025..56c08fb65 100644 --- a/src/shared/Center.elm +++ b/src/shared/Center.elm @@ -15,6 +15,6 @@ markdown width string = style width = Attr.style [ "display" => "block" - , "width" => width + , "max-width" => width , "margin" => "0 auto" - ] \ No newline at end of file + ] From 4c0430d6e2e77d866af7c576d7e5c9e98c43befd Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Tue, 20 Sep 2016 16:40:50 -0700 Subject: [PATCH 4/9] Fix iframe, img, and code tags to be responsive Most iframes were wrapped in a div and styled according this strategy: https://benmarshall.me/responsive-iframes/ All images within a content div will now have width 100%. Some images needed the additinal div. Code sections are now set to display as block with auto overflow. --- assets/style.css | 25 ++++++++++ src/pages/blog/announce/0.12.3.elm | 11 ++--- src/pages/blog/announce/0.7.1.elm | 12 ++--- src/pages/blog/announce/0.8.elm | 7 +-- .../blog/blazing-fast-html-round-two.elm | 4 +- src/pages/blog/blazing-fast-html.elm | 4 +- src/pages/blog/compiler-errors-for-humans.elm | 22 ++++----- src/pages/blog/compilers-as-assistants.elm | 29 +++++------- src/pages/blog/farewell-to-frp.elm | 2 +- src/pages/blog/interactive-programming.elm | 18 +++---- src/pages/blog/time-travel-made-easy.elm | 31 ++++-------- src/pages/docs/advanced-topics.elm | 47 +++++++++---------- 12 files changed, 104 insertions(+), 108 deletions(-) diff --git a/assets/style.css b/assets/style.css index 517d4fb4d..8f7cbfa7b 100644 --- a/assets/style.css +++ b/assets/style.css @@ -36,6 +36,11 @@ a:hover { margin-bottom: 6px; } +.content img { + width: 100%; + height: 100%; +} + /* home stuff */ @@ -201,6 +206,8 @@ a:hover { code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + display: block; + overflow-x: auto; } /* I heard using :not() is slow for reflows. @@ -313,3 +320,21 @@ blockquote p { .grey-link:hover { 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%; +} diff --git a/src/pages/blog/announce/0.12.3.elm b/src/pages/blog/announce/0.12.3.elm index ee632d3e4..f53863ab6 100644 --- a/src/pages/blog/announce/0.12.3.elm +++ b/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... - +
+ +
Typically, working with WebGL in JS means wrestling with a huge 90s era C++ API with a great deal of [incidental diff --git a/src/pages/blog/announce/0.7.1.elm b/src/pages/blog/announce/0.7.1.elm index 9830dd483..225890853 100644 --- a/src/pages/blog/announce/0.7.1.elm +++ b/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. - +
+ +
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)! """ - diff --git a/src/pages/blog/announce/0.8.elm b/src/pages/blog/announce/0.8.elm index 5d5dbce5e..e1ffe0091 100644 --- a/src/pages/blog/announce/0.8.elm +++ b/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 `
`. -
- +
+
So it is no longer an all-or-nothing choice. You can use Elm where it diff --git a/src/pages/blog/blazing-fast-html-round-two.elm b/src/pages/blog/blazing-fast-html-round-two.elm index 3c1e6a749..6f13b9bab 100644 --- a/src/pages/blog/blazing-fast-html-round-two.elm +++ b/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 -""" \ No newline at end of file +""" diff --git a/src/pages/blog/blazing-fast-html.elm b/src/pages/blog/blazing-fast-html.elm index de1a3998e..5fec2221b 100644 --- a/src/pages/blog/blazing-fast-html.elm +++ b/src/pages/blog/blazing-fast-html.elm @@ -36,8 +36,8 @@ popular entries: 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"z + style="max-width: 500px; margin-left: auto; margin-right: auto; display:block;"> 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 diff --git a/src/pages/blog/compiler-errors-for-humans.elm b/src/pages/blog/compiler-errors-for-humans.elm index 2bd384f54..4af2b01d7 100644 --- a/src/pages/blog/compiler-errors-for-humans.elm +++ b/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 +
+
(This is really exciting, great job!) diff --git a/src/pages/blog/compilers-as-assistants.elm b/src/pages/blog/compilers-as-assistants.elm index 8cc7058a1..e2e3551c4 100644 --- a/src/pages/blog/compilers-as-assistants.elm +++ b/src/pages/blog/compilers-as-assistants.elm @@ -12,18 +12,12 @@ 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 [ 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 +41,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 = """ diff --git a/src/pages/blog/farewell-to-frp.elm b/src/pages/blog/farewell-to-frp.elm index c6c393cf3..8403cafc3 100644 --- a/src/pages/blog/farewell-to-frp.elm +++ b/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" diff --git a/src/pages/blog/interactive-programming.elm b/src/pages/blog/interactive-programming.elm index 5b77be77a..7b141bb21 100644 --- a/src/pages/blog/interactive-programming.elm +++ b/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: - +
+ +
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: - +
+ +
Huge thank you to Laszlo for working on the diff --git a/src/pages/blog/time-travel-made-easy.elm b/src/pages/blog/time-travel-made-easy.elm index 14fb70343..9eafc8786 100644 --- a/src/pages/blog/time-travel-made-easy.elm +++ b/src/pages/blog/time-travel-made-easy.elm @@ -47,11 +47,8 @@ Check out the following video to see Elm Reactor in action when debugging a [todo]: https://github.com/evancz/elm-todomvc/blob/master/Todo.elm [html]: /blog/blazing-fast-html -
-
Videos Narrated by Evan Czaplicki
@@ -64,11 +61,8 @@ a line piece and correct my mistake when playing [elmtris][]: [elmtris]: https://github.com/jcollard/elmtris -
-
@@ -106,8 +100,7 @@ the program stops receiving inputs from the real world until Elm is unpaused. pausing time + alt="pausing time"> Events in Elm have a time associated with them. So that Elm does not get a hole in its perception of time, Elm Reactor offsets that recorded time by the time @@ -158,11 +151,8 @@ In addition to time travel, Elm Reactor lets you change history. Since Elm Reactor records the entire history of inputs to the program, we can simply replay these inputs on new code to see a bug fix or watch how things change. -
-
@@ -183,11 +173,8 @@ error? In that case, Elm Reactor does not swap in the new code. Instead, it displays a message explaining the issue while the last working version keeps running. The following video shows this kind of feedback: -
-
diff --git a/src/pages/docs/advanced-topics.elm b/src/pages/docs/advanced-topics.elm index c43048ffe..0f6fe8f4f 100644 --- a/src/pages/docs/advanced-topics.elm +++ b/src/pages/docs/advanced-topics.elm @@ -12,34 +12,29 @@ import Skeleton main = Skeleton.skeleton "docs" - [ Center.markdown "600px" beginning - , iframe - [ style - [ "display" => "block" - , "width" => "560px" - , "height" => "315px" - , "margin" => "0 auto" - , "border" => "none" - ] - , src "https://www.youtube.com/embed/DfLvDFxcAIA" - ] - [] - , Center.markdown "600px" middle - , iframe - [ style - [ "display" => "block" - , "width" => "560px" - , "height" => "315px" - , "margin" => "0 auto" - , "border" => "none" - ] - , src "https://www.youtube.com/embed/Agu6jipKfYw" - ] - [] - , Center.markdown "600px" end + [ div [style + [("max-width", "600px"), ("margin", "0 auto")] + ] + [Center.markdown "600px" beginning + , div [ class "intrinsic-container" ] + [ iframe + [ src "https://www.youtube.com/embed/DfLvDFxcAIA" + , attribute "allowfullscreen" "" + ] + [] + ] + , Center.markdown "600px" middle + , div [ class "intrinsic-container" ] + [ iframe + [ src "https://www.youtube.com/embed/Agu6jipKfYw" + , attribute "allowfullscreen" "" + ] + [] + ] + , Center.markdown "600px" end + ] ] - beginning = """ # Advanced Topics From 1f215ba7ff9b1fafaf5c51cfc8aad5bc9b48bf3d Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Wed, 21 Sep 2016 13:14:50 -0700 Subject: [PATCH 5/9] Tweak margins for content and author --- assets/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index 8f7cbfa7b..199a83952 100644 --- a/assets/style.css +++ b/assets/style.css @@ -172,6 +172,9 @@ a:hover { font-size: 15px; margin: 0 0.5em; } + .content { + margin: 0 0.5em !important; + } } @@ -236,7 +239,7 @@ Not really any of those on the website though AFAIK. color: #ddd; display: block; max-width: 600px; - margin: 0 auto; + margin: 0 .5em; text-align: right; } From cc61b96607908cf3a19fc7b1d2690e2288112d64 Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Wed, 21 Sep 2016 17:23:41 -0700 Subject: [PATCH 6/9] Fix author position, add wrap div on compilers page, fix favicon tag --- assets/style.css | 3 ++- src/backend/Generate.hs | 2 +- src/pages/blog/compilers-as-assistants.elm | 14 ++++++++------ 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/assets/style.css b/assets/style.css index 199a83952..8f1d2246e 100644 --- a/assets/style.css +++ b/assets/style.css @@ -239,7 +239,8 @@ Not really any of those on the website though AFAIK. color: #ddd; display: block; max-width: 600px; - margin: 0 .5em; + margin: 0 auto; + padding-right: 10px; text-align: right; } diff --git a/src/backend/Generate.hs b/src/backend/Generate.hs index 88379f8f3..f5ea75fde 100644 --- a/src/backend/Generate.hs +++ b/src/backend/Generate.hs @@ -91,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" diff --git a/src/pages/blog/compilers-as-assistants.elm b/src/pages/blog/compilers-as-assistants.elm index e2e3551c4..e1f42fd10 100644 --- a/src/pages/blog/compilers-as-assistants.elm +++ b/src/pages/blog/compilers-as-assistants.elm @@ -12,12 +12,14 @@ main = Blog.evan (Blog.Date 2015 11 19) [ Center.markdown "600px" content - , div [ class "intrinsic-container" ] - [ iframe - [ src "https://www.youtube.com/embed/ARJ8cAGm6JE?start=60&end=87&rel=0&autoplay=0" - , attribute "allowfullscreen" "" - ] [] - ] + , 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 From 38c17683cd33e94a957da1075b932b34ff499440 Mon Sep 17 00:00:00 2001 From: Joe Cancilla Date: Wed, 21 Sep 2016 17:41:41 -0700 Subject: [PATCH 7/9] Make previous fix specific to those within 

---
 assets/style.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 8f1d2246e..033611227 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -209,8 +209,6 @@ a:hover {
 
 code {
   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  display: block;
-  overflow-x: auto;
 }
 
 /* I heard using :not() is slow for reflows.
@@ -231,6 +229,11 @@ Not really any of those on the website though AFAIK.
   content: "\00a0";
 }
 
+pre > code {
+  display: block;
+  overflow-x: auto;
+}
+
 
 /* blogs */
 

From 1356fb14e6dfc9fe47144093223186999252c63f Mon Sep 17 00:00:00 2001
From: Joe Cancilla 
Date: Wed, 21 Sep 2016 17:54:37 -0700
Subject: [PATCH 8/9] Remove invalid commas in sizes value

---
 src/backend/Generate.hs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/Generate.hs b/src/backend/Generate.hs
index f5ea75fde..ca2bdadd1 100644
--- a/src/backend/Generate.hs
+++ b/src/backend/Generate.hs
@@ -91,7 +91,7 @@ favicon :: H.Html
 favicon =
   H.link
     ! A.rel "shortcut icon"
-    ! A.sizes "16x16, 32x32, 48x48, 64x64, 128x128, 256x256"
+    ! A.sizes "16x16 32x32 48x48 64x64 128x128 256x256"
     ! A.href "/favicon.ico"
 
 

From a1221a055beb1a5f1ac3288c6932c78ad02f407c Mon Sep 17 00:00:00 2001
From: Joe Cancilla 
Date: Wed, 21 Sep 2016 22:51:35 -0700
Subject: [PATCH 9/9] Add some padding to example page

---
 src/pages/examples.elm | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/examples.elm b/src/pages/examples.elm
index 0697fff2c..278b33b14 100644
--- a/src/pages/examples.elm
+++ b/src/pages/examples.elm
@@ -10,7 +10,7 @@ main =
   Skeleton.skeleton
     "examples"
     [ Center.markdown "600px" content
-    , div [ Center.style "600px" ]
+    , div [ Center.style "600px" , style ["padding" => "0 0.5em"]]
         [ view "HTML" html
         , view "Functional Stuff" core
         , view "Effects" effects
@@ -135,4 +135,3 @@ effects =
       , "mouse drags" ==> "drag"
       ]
   ]
-