diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/index.css | 56 | ||||
| -rw-r--r-- | src/editor.mjs | 4 |
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 @@ | |||
| 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 | } |