3 files changed, 47 insertions, 41 deletions
diff --git a/index.html b/index.html
index b66496f..6ddcc8a 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,24 @@
 <html lang="en">
 <head>
-  <meta charset="utf-8"/>
+  <meta charset="utf-8" />
  <title>DumbyMap</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico"/>
+  <link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico">
  <meta property="og:title" content="DumbyMap">
-  <meta property="og:description" content="Read HTML with maps"/>
+  <meta property="og:description" content="Read HTML with maps">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://outdoorsafetylab.github.io/dumbymap">
  <meta property="og:logo" content="./assets/favicon.ico">
  <meta property="og:image" content="./assets/og-example1.png">
  <!-- FIXME -->
-  <link rel="stylesheet" type="text/css" href="./dist/css/style.css"/>
+  <link rel="stylesheet" type="text/css" href="./dist/css/style.css">
-  <link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css"/>
+  <link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css">
-  <link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css"/>
+  <link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css">
-  <link rel="stylesheet" type="text/css" href="./dist/css/index.css" />
+  <link rel="stylesheet" type="text/css" href="./dist/css/index.css">
  <!-- FIXME -->
  <script src="./dist/easymde.min.js"></script>
@@ -27,11 +27,13 @@
 </head>
-<body data-mode="editing">
+<body>
-  <div class="DumbyMap"></div>
+  <main data-mode="editing">
-  <div class="editor">
+    <div class="DumbyMap"></div>
-    <textarea></textarea>
+    <div class="editor">
-  </div>
+      <textarea></textarea>
+    </div>
+  </main>
 </body>
 </html>
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'] {
+main {
-    display: flex;
+  display: flex;
-    align-items: stretch;
+  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 {
+  .Dumby {
-      flex: 0 0 50%;
+    flex: 0 0 50%;
-      min-width: 45%;
+    min-width: 45%;
-      max-width: calc(50% - 0.5em);
+    max-width: calc(50% - 0.5em);
-      height: 100%;
+    height: 100%;
-      border: var(--content-border);
+    border: var(--content-border);
-      border-radius: var(--content-border-radius);
+    border-radius: var(--content-border-radius);
-      order: 1;
+    order: 1;
-      &.focus {
+    &.focus {
-        border: var(--content-focus-border);
+      border: var(--content-focus-border);
-        outline: var(--content-focus-border);
+      outline: var(--content-focus-border);
-      }
    }
+  }
-    .editor {
+  .editor {
-      display: block;
+    display: block;
-      flex: 0 0 50%;
+    flex: 0 0 50%;
-      min-width: 45%;
+    min-width: 45%;
-      max-width: calc(50% - 0.5em);
+    max-width: calc(50% - 0.5em);
-      height: 100%;
+    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'
  }

diff --git a/index.html b/index.html index b66496f..6ddcc8a 100644 --- a/index.html +++ b/index.html
@@ -2,24 +2,24 @@
2	<html lang="en">	2	<html lang="en">
3		3
4	<head>	4	<head>
5	<meta charset="utf-8"/>	5	<meta charset="utf-8" />
6	<title>DumbyMap</title>	6	<title>DumbyMap</title>
7		7
8	<meta name="viewport" content="width=device-width, initial-scale=1"/>	8	<meta name="viewport" content="width=device-width, initial-scale=1" />
9	<link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico"/>	9	<link rel="shortcut icon" href="./assets/favicon.ico" type="image/ico">
10		10
11	<meta property="og:title" content="DumbyMap">	11	<meta property="og:title" content="DumbyMap">
12	<meta property="og:description" content="Read HTML with maps"/>	12	<meta property="og:description" content="Read HTML with maps">
13	<meta property="og:type" content="website">	13	<meta property="og:type" content="website">
14	<meta property="og:url" content="https://outdoorsafetylab.github.io/dumbymap">	14	<meta property="og:url" content="https://outdoorsafetylab.github.io/dumbymap">
15	<meta property="og:logo" content="./assets/favicon.ico">	15	<meta property="og:logo" content="./assets/favicon.ico">
16	<meta property="og:image" content="./assets/og-example1.png">	16	<meta property="og:image" content="./assets/og-example1.png">
17		17
18	<!-- FIXME -->	18	<!-- FIXME -->
19	<link rel="stylesheet" type="text/css" href="./dist/css/style.css"/>	19	<link rel="stylesheet" type="text/css" href="./dist/css/style.css">
20	<link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css"/>	20	<link rel="stylesheet" type="text/css" href="./dist/css/dumbymap.css">
21	<link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css"/>	21	<link rel="stylesheet" type="text/css" href="./dist/css/easymde.min.css">
22	<link rel="stylesheet" type="text/css" href="./dist/css/index.css" />	22	<link rel="stylesheet" type="text/css" href="./dist/css/index.css">
23		23
24	<!-- FIXME -->	24	<!-- FIXME -->
25	<script src="./dist/easymde.min.js"></script>	25	<script src="./dist/easymde.min.js"></script>
@@ -27,11 +27,13 @@
27		27
28	</head>	28	</head>
29		29
30	<body data-mode="editing">	30	<body>
31	<div class="DumbyMap"></div>	31	<main data-mode="editing">
32	<div class="editor">	32	<div class="DumbyMap"></div>
33	<textarea></textarea>	33	<div class="editor">
34	</div>	34	<textarea></textarea>
		35	</div>
		36	</main>
35	</body>	37	</body>
36		38
37	</html>	39	</html>


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 @@
10		10
11	body {	11	body {
12	width: 100vw;	12	width: 100vw;
13	min-width: 700px;
14	height: 100vh;	13	height: 100vh;
		14	}
15		15
16	&[data-mode='editing'] {	16	main {
17	display: flex;	17	display: flex;
18	align-items: stretch;	18	align-items: stretch;
		19	width: 100%;
		20	min-width: 700px;
		21	height: 100%;
		22	}
19		23
20	/* gap: 0.5em; */	24	main[data-mode='editing'] {
		25	/* gap: 0.5em; */
21		26
22	padding: 0.5em;	27	padding: 0.5em;
23		28
24	.Dumby {	29	.Dumby {
25	flex: 0 0 50%;	30	flex: 0 0 50%;
26	min-width: 45%;	31	min-width: 45%;
27	max-width: calc(50% - 0.5em);	32	max-width: calc(50% - 0.5em);
28	height: 100%;	33	height: 100%;
29		34
30	border: var(--content-border);	35	border: var(--content-border);
31	border-radius: var(--content-border-radius);	36	border-radius: var(--content-border-radius);
32	order: 1;	37	order: 1;
33		38
34	&.focus {	39	&.focus {
35	border: var(--content-focus-border);	40	border: var(--content-focus-border);
36	outline: var(--content-focus-border);	41	outline: var(--content-focus-border);
37	}
38	}	42	}
		43	}
39		44
40	.editor {	45	.editor {
41	display: block;	46	display: block;
42	flex: 0 0 50%;	47	flex: 0 0 50%;
43	min-width: 45%;	48	min-width: 45%;
44	max-width: calc(50% - 0.5em);	49	max-width: calc(50% - 0.5em);
45	height: 100%;	50	height: 100%;
46		51
47	order: 2;	52	order: 2;
48	}
49	}	53	}
50	}	54	}
51		55


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 => {
32	const mutation = mutaions.at(-1)	32	const mutation = mutaions.at(-1)
33	const layout = dumbyContainer.dataset.layout	33	const layout = dumbyContainer.dataset.layout
34	if (layout !== 'normal' \|\| mutation.oldValue === 'normal') {	34	if (layout !== 'normal' \|\| mutation.oldValue === 'normal') {
35	delete context.dataset.mode	35	context.dataset.mode = ''
36	}	36	}
37	}).observe(dumbyContainer, {	37	}).observe(dumbyContainer, {
38	attributes: true,	38	attributes: true,
@@ -92,7 +92,7 @@ new window.MutationObserver(() => {
92	const toggleEditing = () => {	92	const toggleEditing = () => {
93	const mode = context.dataset.mode	93	const mode = context.dataset.mode
94	if (mode === 'editing') {	94	if (mode === 'editing') {
95	delete context.dataset.mode	95	context.dataset.mode = ''
96	} else {	96	} else {
97	context.dataset.mode = 'editing'	97	context.dataset.mode = 'editing'
98	}	98	}