diff --git a/assets/style.css b/assets/style.css index 61c058001..033611227 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 */ @@ -86,7 +91,7 @@ a:hover { margin: 0 auto; } .feature-image { - width: 420px; + max-width: 420px; display: block; margin: 0 auto; } @@ -94,7 +99,7 @@ a:hover { @media (min-width: 820px) { .features { - width: 800px; + max-width: 800px; } .feature { position: relative; @@ -102,7 +107,7 @@ a:hover { 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,6 +229,11 @@ Not really any of those on the website though AFAIK. content: "\00a0"; } +pre > code { + display: block; + overflow-x: auto; +} + /* blogs */ @@ -219,8 +241,9 @@ 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; + 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%; +} diff --git a/src/backend/Generate.hs b/src/backend/Generate.hs index 5e489444b..ca2bdadd1 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" @@ -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" 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..e1f42fd10 100644 --- a/src/pages/blog/compilers-as-assistants.elm +++ b/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 = """ 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 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" ] ] - 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 + ]