From 1c75beee8eda7784418f57018138e1ee9f4c4954 Mon Sep 17 00:00:00 2001
From: Taylor Hunt <tayhunt@ebay.com>
Date: Mon, 30 Jan 2023 13:58:31 -0500
Subject: [PATCH] Finishing touches

---
 content/2-templating/2-styling/marko/CssStyle.marko       | 8 +++++++-
 content/2-templating/5-dom-ref/marko/InputFocused.marko   | 2 --
 .../2-templating/5-dom-ref/marko/InputIndeterminate.marko | 2 ++
 content/3-lifecycle/1-on-mount/marko/PageTitle.marko      | 3 ---
 content/3-lifecycle/1-on-mount/marko/ViewportSize.marko   | 3 +++
 5 files changed, 12 insertions(+), 6 deletions(-)
 delete mode 100644 content/2-templating/5-dom-ref/marko/InputFocused.marko
 create mode 100644 content/2-templating/5-dom-ref/marko/InputIndeterminate.marko
 delete mode 100644 content/3-lifecycle/1-on-mount/marko/PageTitle.marko
 create mode 100644 content/3-lifecycle/1-on-mount/marko/ViewportSize.marko

diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko
index 529b9dbd..e186e7c3 100644
--- a/content/2-templating/2-styling/marko/CssStyle.marko
+++ b/content/2-templating/2-styling/marko/CssStyle.marko
@@ -1,8 +1,14 @@
 <h1.title>I am red</h1>
 <button style={ fontSize: "10rem" }>I am a button</button>
+<button class=scopedButton>I am a style-scoped button</button>
 
-<style> /* TODO: the Vue example uses style scoping, maybe we should show ours off too here */
+<style>
   .title {
     color: red;
   }
 </style>
+<style/{ scopedButton }>
+  .scopedButton {
+    font-size: 10rem;
+  }
+</style>
diff --git a/content/2-templating/5-dom-ref/marko/InputFocused.marko b/content/2-templating/5-dom-ref/marko/InputFocused.marko
deleted file mode 100644
index f8b73c57..00000000
--- a/content/2-templating/5-dom-ref/marko/InputFocused.marko
+++ /dev/null
@@ -1,2 +0,0 @@
-<input/inputElement type="text">
-<effect() { inputElement().focus() }/>
diff --git a/content/2-templating/5-dom-ref/marko/InputIndeterminate.marko b/content/2-templating/5-dom-ref/marko/InputIndeterminate.marko
new file mode 100644
index 00000000..2e61ca8c
--- /dev/null
+++ b/content/2-templating/5-dom-ref/marko/InputIndeterminate.marko
@@ -0,0 +1,2 @@
+<input/inputElement type="checkbox">
+<effect() { inputElement().indeterminate = true }/>
diff --git a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
deleted file mode 100644
index 85f48e34..00000000
--- a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
+++ /dev/null
@@ -1,3 +0,0 @@
-<let/pageTitle = ""/>
-<effect() { pageTitle = document.title }/>
-<p>Page title is: ${pageTitle}</p>
diff --git a/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko b/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko
new file mode 100644
index 00000000..7ffcf870
--- /dev/null
+++ b/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko
@@ -0,0 +1,3 @@
+<let/viewportSize = ""/>
+<effect() { viewportSize = `${window.innerWidth} × ${window.innerHeight}` }/>
+<p>Viewport size: ${viewportSize}</p>