-
font: italic 1.2em "Fira Sans", serif;
+
font: italic 1.2rem "Fira Sans", serif;
diff --git a/live-examples/css-examples/pseudo-class/first-child.html b/live-examples/css-examples/pseudo-class/first-child.html
index bf8ee8ba9..54d497822 100644
--- a/live-examples/css-examples/pseudo-class/first-child.html
+++ b/live-examples/css-examples/pseudo-class/first-child.html
@@ -1,12 +1,21 @@
-
NBA players with most championships:
+
Track & field champions:
- - Bill Russell
- - Sam Jones
- - Tom Heinsohn
- - K. C. Jones
- - Satch Sanders
- - John Havlicek
- - Jim Loscutoff
- - Frank Ramsey
- - Robert Horry
+ - Adhemar da Silva
+ - Wang Junxia
+ - Wilma Rudolph
+ - Babe Didrikson-Zaharias
+ - Betty Cuthbert
+ - Fanny Blankers-Koen
+ - Florence Griffith-Joyner
+ - Irena Szewinska
+ - Jackie Joyner-Kersee
+ - Shirley Strickland
+ - Carl Lewis
+ - Emil Zatopek
+ - Haile Gebrselassie
+ - Jesse Owens
+ - Jim Thorpe
+ - Paavo Nurmi
+ - Sergei Bubka
+ - Usain Bolt
diff --git a/live-examples/css-examples/pseudo-class/last-child.html b/live-examples/css-examples/pseudo-class/last-child.html
index bf8ee8ba9..54d497822 100644
--- a/live-examples/css-examples/pseudo-class/last-child.html
+++ b/live-examples/css-examples/pseudo-class/last-child.html
@@ -1,12 +1,21 @@
-
NBA players with most championships:
+
Track & field champions:
- - Bill Russell
- - Sam Jones
- - Tom Heinsohn
- - K. C. Jones
- - Satch Sanders
- - John Havlicek
- - Jim Loscutoff
- - Frank Ramsey
- - Robert Horry
+ - Adhemar da Silva
+ - Wang Junxia
+ - Wilma Rudolph
+ - Babe Didrikson-Zaharias
+ - Betty Cuthbert
+ - Fanny Blankers-Koen
+ - Florence Griffith-Joyner
+ - Irena Szewinska
+ - Jackie Joyner-Kersee
+ - Shirley Strickland
+ - Carl Lewis
+ - Emil Zatopek
+ - Haile Gebrselassie
+ - Jesse Owens
+ - Jim Thorpe
+ - Paavo Nurmi
+ - Sergei Bubka
+ - Usain Bolt
diff --git a/live-examples/css-examples/pseudo-class/nth-child.html b/live-examples/css-examples/pseudo-class/nth-child.html
index bf8ee8ba9..54d497822 100644
--- a/live-examples/css-examples/pseudo-class/nth-child.html
+++ b/live-examples/css-examples/pseudo-class/nth-child.html
@@ -1,12 +1,21 @@
-
NBA players with most championships:
+
Track & field champions:
- - Bill Russell
- - Sam Jones
- - Tom Heinsohn
- - K. C. Jones
- - Satch Sanders
- - John Havlicek
- - Jim Loscutoff
- - Frank Ramsey
- - Robert Horry
+ - Adhemar da Silva
+ - Wang Junxia
+ - Wilma Rudolph
+ - Babe Didrikson-Zaharias
+ - Betty Cuthbert
+ - Fanny Blankers-Koen
+ - Florence Griffith-Joyner
+ - Irena Szewinska
+ - Jackie Joyner-Kersee
+ - Shirley Strickland
+ - Carl Lewis
+ - Emil Zatopek
+ - Haile Gebrselassie
+ - Jesse Owens
+ - Jim Thorpe
+ - Paavo Nurmi
+ - Sergei Bubka
+ - Usain Bolt
diff --git a/live-examples/css-examples/text-decoration/text-underline-offset.css b/live-examples/css-examples/text-decoration/text-underline-offset.css
index 6df211511..1ea3171aa 100644
--- a/live-examples/css-examples/text-decoration/text-underline-offset.css
+++ b/live-examples/css-examples/text-decoration/text-underline-offset.css
@@ -1,4 +1,5 @@
p {
font: 1.5em sans-serif;
- text-decoration: underline #ff0000;
+ text-decoration-line: underline;
+ text-decoration-color: #ff0000;
}
diff --git a/live-examples/html-examples/interactive-elements/css/dialog.css b/live-examples/html-examples/interactive-elements/css/dialog.css
new file mode 100644
index 000000000..bc9553da1
--- /dev/null
+++ b/live-examples/html-examples/interactive-elements/css/dialog.css
@@ -0,0 +1,18 @@
+.card {
+ text-align: center;
+ width: 80%;
+ background-color: bisque;
+ padding: 1em;
+ font-weight: bold;
+}
+
+dialog::backdrop {
+ background-color: grey;
+}
+
+.won {
+ font-weight: bold;
+ color: deeppink;
+ font-size: 1.3em;
+ text-align: center;
+}
diff --git a/live-examples/html-examples/interactive-elements/dialog.html b/live-examples/html-examples/interactive-elements/dialog.html
new file mode 100644
index 000000000..ae2a76b7f
--- /dev/null
+++ b/live-examples/html-examples/interactive-elements/dialog.html
@@ -0,0 +1,13 @@
+
+
Would you like to try your luck in a throw of the dice?
+
Everyone has a chance to win.
+
+
+
+
diff --git a/live-examples/html-examples/interactive-elements/js/dialog.js b/live-examples/html-examples/interactive-elements/js/dialog.js
new file mode 100644
index 000000000..4bd008b4b
--- /dev/null
+++ b/live-examples/html-examples/interactive-elements/js/dialog.js
@@ -0,0 +1,24 @@
+const showDialogBtn = document.getElementById('showDialogBtn');
+const favDialog = document.getElementById('favDialog');
+
+function rollDice() {
+ return Math.floor(Math.random() * 3) === 0;
+}
+
+function changeHidden(className, hidden) {
+ const elements = document.getElementsByClassName(className);
+ for (const e of elements) {
+ if (hidden) {
+ e.classList.add('hidden');
+ } else {
+ e.classList.remove('hidden');
+ }
+ }
+}
+
+showDialogBtn.addEventListener('click', () => {
+ const won = rollDice();
+ changeHidden('won', !won);
+ changeHidden('lost', won);
+ favDialog.showModal();
+});
diff --git a/live-examples/html-examples/interactive-elements/meta.json b/live-examples/html-examples/interactive-elements/meta.json
index 4eff87f9c..62698926a 100644
--- a/live-examples/html-examples/interactive-elements/meta.json
+++ b/live-examples/html-examples/interactive-elements/meta.json
@@ -8,6 +8,17 @@
"type": "tabbed",
"height": "tabbed-shorter"
},
+ "dialog": {
+ "exampleCode": "./live-examples/html-examples/interactive-elements/dialog.html",
+ "cssExampleSrc": "./live-examples/html-examples/interactive-elements/css/dialog.css",
+ "jsExampleSrc": "./live-examples/html-examples/interactive-elements/js/dialog.js",
+ "fileName": "dialog.html",
+ "title": "HTML Demo: