refactor: add <main> for contents

2 files changed, 32 insertions, 28 deletions

diff --git a/src/css/index.css b/src/css/index.css
index 53a5587..7ae5906 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -10,42 +10,46 @@
 
 body {
   width: 100vw;
-  min-width: 700px;
   height: 100vh;
+}
 
-  &[data-mode='editing'] {
-    display: flex;
-    align-items: stretch;
+main {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 700px;
+  height: 100%;
+}
 
-    /* gap: 0.5em; */
+main[data-mode='editing'] {
+  /* gap: 0.5em; */
 
-    padding: 0.5em;
+  padding: 0.5em;
 
-    .Dumby {
-      flex: 0 0 50%;
-      min-width: 45%;
-      max-width: calc(50% - 0.5em);
-      height: 100%;
+  .Dumby {
+    flex: 0 0 50%;
+    min-width: 45%;
+    max-width: calc(50% - 0.5em);
+    height: 100%;
 
-      border: var(--content-border);
-      border-radius: var(--content-border-radius);
-      order: 1;
+    border: var(--content-border);
+    border-radius: var(--content-border-radius);
+    order: 1;
 
-      &.focus {
-        border: var(--content-focus-border);
-        outline: var(--content-focus-border);
-      }
+    &.focus {
+      border: var(--content-focus-border);
+      outline: var(--content-focus-border);
     }
+  }
 
-    .editor {
-      display: block;
-      flex: 0 0 50%;
-      min-width: 45%;
-      max-width: calc(50% - 0.5em);
-      height: 100%;
+  .editor {
+    display: block;
+    flex: 0 0 50%;
+    min-width: 45%;
+    max-width: calc(50% - 0.5em);
+    height: 100%;
 
-      order: 2;
-    }
+    order: 2;
   }
 }
 
diff --git a/src/editor.mjs b/src/editor.mjs
index ad1a863..f6c7dab 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -32,7 +32,7 @@ new window.MutationObserver(mutaions => {
   const mutation = mutaions.at(-1)
   const layout = dumbyContainer.dataset.layout
   if (layout !== 'normal' || mutation.oldValue === 'normal') {
-    delete context.dataset.mode
+    context.dataset.mode = ''
   }
 }).observe(dumbyContainer, {
   attributes: true,
@@ -92,7 +92,7 @@ new window.MutationObserver(() => {
 const toggleEditing = () => {
   const mode = context.dataset.mode
   if (mode === 'editing') {
-    delete context.dataset.mode
+    context.dataset.mode = ''
   } else {
     context.dataset.mode = 'editing'
   }