Skip to content

Commit 4c0430d

Browse files
joecanjoecan
committed
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.
1 parent 075c55e commit 4c0430d

12 files changed

+104
-108
lines changed

‎assets/style.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ a:hover {
3636
margin-bottom: 6px;
3737
}
3838

39+
.content img {
40+
width: 100%;
41+
height: 100%;
42+
}
43+
3944

4045
/* home stuff */
4146

@@ -201,6 +206,8 @@ a:hover {
201206

202207
code {
203208
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
209+
display: block;
210+
overflow-x: auto;
204211
}
205212

206213
/* I heard using :not() is slow for reflows.
@@ -313,3 +320,21 @@ blockquote p {
313320
.grey-link:hover {
314321
color: #bbbbbb;
315322
}
323+
324+
/* iframes */
325+
326+
.intrinsic-container {
327+
position: relative;
328+
height: 0;
329+
overflow: hidden;
330+
padding-bottom: 56.25%; /*assuming 16/9 aspect ratio*/
331+
max-width: 800px;
332+
}
333+
334+
.intrinsic-container iframe {
335+
position: absolute;
336+
top:0;
337+
left: 0;
338+
width: 100%;
339+
height: 100%;
340+
}

‎src/pages/blog/announce/0.12.3.elm‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,11 @@ We of course need to start with an example. As you move your mouse within the
4141
grey box, [Thwomp](http://www.mariowiki.com/Thwomp#Super_Mario_64) will stare
4242
at you. Too far away to crush you, but waiting...
4343
44-
<iframe src="/examples/thwomp"
45-
frameborder="0"
46-
width="600"
47-
height="300"
48-
style="background-color: #D8DDE1;">
49-
</iframe>
44+
<div class="intrinsic-container">
45+
<iframe src="/examples/thwomp"
46+
style="background-color: #D8DDE1;">
47+
</iframe>
48+
</div>
5049
5150
Typically, working with WebGL in JS means wrestling with a huge 90s era C++ API
5251
with a great deal of [incidental

‎src/pages/blog/announce/0.7.1.elm‎

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

‎src/pages/blog/announce/0.8.elm‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,8 @@ explains all of the details of the API.
7373
7474
The following video is a short demo of how to embed Elm in a `<div>`.
7575
76-
<div style="position:relative; height:350px;">
77-
<iframe width="600" height="350"
78-
src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0"
79-
style="position:absolute; margin-left:-300px; left:50%;"
80-
frameborder="0" allowfullscreen></iframe>
76+
<div class="intrinsic-container">
77+
<iframe src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0" allowfullscreen></iframe>
8178
</div>
8279
8380
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ main =
3131

3232

3333
image name =
34-
div [ Center.style "800px" ]
34+
div [ Center.style "800px", class "content" ]
3535
[ a
3636
[ href "https://evancz.github.io/react-angular-ember-elm-performance-comparison/"
3737
, 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
370370
[Sergey]: https://github.com/IwalkAlone
371371
[Stephen]: https://github.com/stephencelis
372372
373-
"""
373+
"""

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

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

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ main =
2222

2323

2424
image url =
25-
img
26-
[ src url
27-
, style [("display", "block"), ("margin", "1em auto")]
28-
, alt "compiler output example"
29-
]
30-
[]
25+
div [class "content", Center.style "900px"] [
26+
img
27+
[ src url
28+
, style [("display", "block"), ("margin", "1em auto")]
29+
, alt "compiler output example"
30+
]
31+
[]
32+
]
3133

3234

3335
content = """
@@ -186,15 +188,11 @@ his [elm-vim][] plugin:
186188
187189
[elm-vim]: https://github.com/ajhager/elm-vim
188190
191+
<div class="intrinsic-container">
189192
<iframe
190193
src="https://player.vimeo.com/video/132107269?color=49c180&title=0&byline=0&portrait=0"
191-
width="500"
192-
height="281"
193-
frameborder="0"
194-
style="padding: 0 50px;"
195-
webkitallowfullscreen
196-
mozallowfullscreen
197194
allowfullscreen></iframe>
195+
</div>
198196
199197
(This is really exciting, great job!)
200198

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,12 @@ main =
1212
Blog.evan
1313
(Blog.Date 2015 11 19)
1414
[ Center.markdown "600px" content
15-
, iframe
16-
[ width 560
17-
, height 315
18-
, src "https://www.youtube.com/embed/ARJ8cAGm6JE?start=60&end=87&rel=0&autoplay=0"
19-
, attribute "frameborder" "0"
20-
, attribute "allowfullscreen" ""
21-
, style
22-
[ "display" => "block"
23-
, "margin" => "1em auto"
24-
]
15+
, div [ class "intrinsic-container" ]
16+
[ iframe
17+
[ src "https://www.youtube.com/embed/ARJ8cAGm6JE?start=60&end=87&rel=0&autoplay=0"
18+
, attribute "allowfullscreen" ""
19+
] []
2520
]
26-
[]
2721
, Center.markdown "600px" afterVideo
2822
, image "big-record"
2923
, Center.markdown "600px" afterTypeDiffs
@@ -47,13 +41,14 @@ main =
4741

4842

4943
image name =
50-
img
51-
[ src ("/assets/blog/error-messages/0.16/" ++ name ++ ".png")
52-
, style [("display", "block"), ("margin", "1em auto")]
53-
, alt "compiler output example"
44+
div [class "content", Center.style "600px"] [
45+
img
46+
[ src ("/assets/blog/error-messages/0.16/" ++ name ++ ".png")
47+
, style [("display", "block"), ("margin", "1em auto")]
48+
, alt "compiler output example"
49+
]
50+
[]
5451
]
55-
[]
56-
5752

5853
content = """
5954

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ main =
3030
, iframe
3131
[ style
3232
[ "display" => "block"
33-
, "width" => "400px"
33+
, "width" => "300px"
3434
, "height" => "200px"
3535
, "padding" => "20px"
3636
, "margin" => "0 auto"

‎src/pages/blog/interactive-programming.elm‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,11 @@ We will be exploring the limits of hot-swapping, and how language design is
6565
the key to making it easy and reliable. Before digging into details, let&rsquo;s
6666
see how hot-swapping works in Elm:
6767
68-
<iframe
69-
src="//www.youtube.com/embed/zHPtvw8c3Lc?rel=0&html5=1"
70-
allowfullscreen
71-
style="display: block; border: none; width: 600px; height: 340px;"></iframe>
68+
<div class="intrinsic-container">
69+
<iframe
70+
src="//www.youtube.com/embed/zHPtvw8c3Lc?rel=0&html5=1"
71+
allowfullscreen></iframe>
72+
</div>
7273
7374
Support for hot-swapping is live on this site, so you can [mess with Mario
7475
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
9899
processing these signals, called a signal graph. Watch the following video
99100
to understand signal graphs and how they can be used for hot-swapping:
100101
101-
<iframe
102-
src="//www.youtube.com/embed/FSdXiBLpErU?rel=0&html5=1"
103-
allowfullscreen
104-
style="display: block; border: none; width: 600px; height: 340px;"></iframe>
102+
<div class="intrinsic-container">
103+
<iframe
104+
src="//www.youtube.com/embed/FSdXiBLpErU?rel=0&html5=1"
105+
allowfullscreen></iframe>
106+
</div>
105107
106108
<span style="color:#999;">
107109
Huge thank you to Laszlo for working on the

0 commit comments

Comments
 (0)