Skip to content

Commit 32fe95f

Browse files
BassOfBassBassOfBass
authored
Merge pull request #1 from mdn/master
latest update
2 parents 2cf48cf + 821e9ed commit 32fe95f

34 files changed

+1649
-2
lines changed

‎backdrop/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>MDN Web Docs Example: Toggling full-screen mode</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="styles.css">
8+
<style class="editable">
9+
video::backdrop {
10+
background-color: #448;
11+
}
12+
</style>
13+
14+
<!-- import the webpage's javascript file -->
15+
<script src="script.js" defer></script>
16+
</head>
17+
<body>
18+
<section class="preview">
19+
<video controls
20+
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
21+
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
22+
width="620">
23+
24+
Sorry, your browser doesn't support embedded videos. Time to upgrade!
25+
26+
</video>
27+
</section>
28+
29+
<textarea class="playable playable-css" style="height: 100px;">
30+
video::backdrop {
31+
background-color: #448;
32+
}
33+
</textarea>
34+
35+
<textarea class="playable playable-html" style="height: 200px;">
36+
<video controls
37+
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
38+
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
39+
width="620">
40+
Sorry, your browser doesn't support embedded videos. Time to upgrade!
41+
</video>
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="playable.js"></script>
49+
</body>
50+
</html>

‎backdrop/playable.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var section = document.querySelector('section');
2+
var editable = document.querySelector('.editable');
3+
var textareaHTML = document.querySelector('.playable-html');
4+
var textareaCSS = document.querySelector('.playable-css');
5+
var reset = document.getElementById('reset');
6+
var htmlCode = textareaHTML.value;
7+
var cssCode = textareaCSS.value;
8+
9+
function fillCode() {
10+
editable.innerHTML = textareaCSS.value;
11+
section.innerHTML = textareaHTML.value;
12+
}
13+
14+
reset.addEventListener('click', function () {
15+
textareaHTML.value = htmlCode;
16+
textareaCSS.value = cssCode;
17+
fillCode();
18+
});
19+
20+
textareaHTML.addEventListener('input', fillCode);
21+
textareaCSS.addEventListener('input', fillCode);
22+
window.addEventListener('load', fillCode);

‎backdrop/script.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Any copyright is dedicated to the Public Domain.
2+
// http://creativecommons.org/publicdomain/zero/1.0/
3+
4+
window.addEventListener("load", doStartup, false);
5+
6+
function doStartup(event) {
7+
document.fullscreenElement = document.fullscreenElement || document.mozFullscreenElement
8+
|| document.msFullscreenElement || document.webkitFullscreenDocument;
9+
document.exitFullscreen = document.exitFullscreen || document.mozExitFullscreen
10+
|| document.msExitFullscreen || document.webkitExitFullscreen;
11+
12+
document.addEventListener("keypress", handleKeypress, false);
13+
}
14+
15+
function handleKeypress(event) {
16+
if (event.keyCode === 13) {
17+
toggleFullscreen();
18+
}
19+
}
20+
21+
22+
function toggleFullscreen() {
23+
let elem = document.querySelector("video");
24+
25+
elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen
26+
|| elem.msRequestFullscreen || elem.webkitRequestFullscreen;
27+
28+
if (!document.fullscreenElement) {
29+
elem.requestFullscreen().then({}).catch(err => {
30+
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
31+
});
32+
} else {
33+
if (document.exitFullscreen) {
34+
document.exitFullscreen();
35+
}
36+
}
37+
}

‎backdrop/style.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* CSS files add styling rules to your content */
2+
3+
body {
4+
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
5+
margin: 2em;
6+
}
7+
8+
h1 {
9+
font-style: italic;
10+
color: #373fff;
11+
}
12+
13+
video::backdrop {
14+
background-color: #448;
15+
}

‎backdrop/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Some default styling for cookbook examples */
2+
/*
3+
rgb(53,43,34)
4+
rgb(75,70,74)
5+
rgb(95,97,110)
6+
rgb(137,151,188)
7+
rgb(160,178,226)
8+
*/
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
/* styles for the editor */
18+
19+
.playable {
20+
font-family: monospace;
21+
display: block;
22+
margin-bottom: 10px;
23+
background-color: #F4F7F8;
24+
border: none;
25+
border-left: 6px solid #558ABB;
26+
color: #4D4E53;
27+
width: 90%;
28+
max-width: 700px;
29+
padding: 10px 10px 0px;
30+
font-size: 90%;
31+
}
32+
33+
.playable-css {
34+
height: 80px;
35+
}
36+
37+
.playable-html {
38+
height: 160px;
39+
}
40+
41+
.playable-buttons {
42+
text-align: right;
43+
width: 90%;
44+
max-width: 700px;
45+
padding: 5px 10px 5px 26px;
46+
font-size: 100%;
47+
}
48+
49+
.preview {
50+
width: 90%;
51+
max-width: 700px;
52+
border: 1px solid #4D4E53;
53+
border-radius: 2px;
54+
padding: 10px 14px 10px 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
.preview input {
59+
display: block;
60+
margin: 5px;
61+
}

‎contain/contain-fix.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Float interference</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
contain: content;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<h1>My blog</h1>
20+
<article>
21+
<h2>Heading of a nice article</h2>
22+
<p>Content here.</p>
23+
<img src="placeholder-2.jpg" alt="I just showed up">
24+
</article>
25+
<article>
26+
<h2>Another heading of another article</h2>
27+
<img src="placeholder-1.jpg" alt="placeholder">
28+
<p>More content here.</p>
29+
</article>
30+
</body>
31+
</html>

‎contain/float-interference.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Float interference</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>My blog</h1>
19+
<article>
20+
<h2>Heading of a nice article</h2>
21+
<p>Content here.</p>
22+
<img src="placeholder-2.jpg" alt="I just showed up">
23+
</article>
24+
<article>
25+
<h2>Another heading of another article</h2>
26+
<img src="placeholder-1.jpg" alt="placeholder">
27+
<p>More content here.</p>
28+
</article>
29+
</body>
30+
</html>

‎contain/placeholder-1.jpg

2.9 KB
Loading

‎contain/placeholder-2.jpg

2.9 KB
Loading

‎contain/simple-layout.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Simple layout</title>
6+
<style>
7+
img {
8+
float: left;
9+
border: 3px solid black;
10+
}
11+
12+
article {
13+
border: 1px solid black;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>My blog</h1>
19+
<article>
20+
<h2>Heading of a nice article</h2>
21+
<p>Content here.</p>
22+
</article>
23+
<article>
24+
<h2>Another heading of another article</h2>
25+
<img src="placeholder-1.jpg" alt="placeholder">
26+
<p>More content here.</p>
27+
</article>
28+
</body>
29+
</html>

‎grid/masonry/align-tracks.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Masonry in the block axis align-tracks</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
padding: 10px;
14+
border: 2px solid #f76707;
15+
border-radius: 5px;
16+
background-color: #fff4e6;
17+
}
18+
19+
.item {
20+
border: 2px solid #ffa94d;
21+
border-radius: 5px;
22+
background-color: #ffd8a8;
23+
color: #d9480f;
24+
padding: 10px;
25+
}
26+
</style>
27+
28+
<style class="editable">
29+
.grid {
30+
display: grid;
31+
block-size: 250px;
32+
gap: 10px;
33+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
34+
grid-template-rows: masonry;
35+
align-tracks: end, start, end, space-between;
36+
}
37+
38+
</style>
39+
</head>
40+
41+
<body>
42+
<section class="preview">
43+
<div class="grid">
44+
<div class="item" style="block-size: 2em;"></div>
45+
<div class="item" style="block-size: 3em;"></div>
46+
<div class="item" style="block-size: 1.6em;"></div>
47+
<div class="item" style="block-size: 4em;"></div>
48+
<div class="item" style="block-size: 3.2em;"></div>
49+
<div class="item" style="block-size: 3em;"></div>
50+
<div class="item" style="block-size: 4.5em;"></div>
51+
<div class="item" style="block-size: 1em;"></div>
52+
<div class="item" style="block-size: 3.5em;"></div>
53+
<div class="item" style="block-size: 2.8em;"></div>
54+
</div>
55+
</section>
56+
57+
<textarea class="playable playable-css" style="height: 200px;">
58+
.grid {
59+
display: grid;
60+
block-size: 250px;
61+
gap: 10px;
62+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
63+
grid-template-rows: masonry;
64+
align-tracks: end, start, end, space-between;
65+
}
66+
67+
</textarea>
68+
69+
<textarea class="playable playable-html" style="height: 250px;">
70+
<div class="grid">
71+
<div class="item" style="block-size: 2em;"></div>
72+
<div class="item" style="block-size: 3em;"></div>
73+
<div class="item" style="block-size: 1.6em;"></div>
74+
<div class="item" style="block-size: 4em;"></div>
75+
<div class="item" style="block-size: 3.2em;"></div>
76+
<div class="item" style="block-size: 3em;"></div>
77+
<div class="item" style="block-size: 4.5em;"></div>
78+
<div class="item" style="block-size: 1em;"></div>
79+
<div class="item" style="block-size: 3.5em;"></div>
80+
<div class="item" style="block-size: 2.8em;"></div>
81+
</div>
82+
</textarea>
83+
84+
<div class="playable-buttons">
85+
<input id="reset" type="button" value="Reset" />
86+
</div>
87+
</body>
88+
<script src="../playable.js"></script>
89+
</html>

0 commit comments

Comments
 (0)