3 files changed, 78 insertions, 45 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 5a67575..4826b5b 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -8,12 +8,18 @@ root {
 }
 
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fade-out {
-  from { opacity: 1; }
+  from {
+    opacity: 1;
+  }
 
   to {
     visibility: hidden;
@@ -22,13 +28,21 @@ root {
 }
 
 @keyframes map-fade-in {
-  from { opacity: 0.3; }
-  to { opacity: 1; }
+  from {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes map-fade-out {
-  from { opacity: 1; }
-  to { opacity: 0.3; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
 }
 
 .mapclay {
@@ -37,7 +51,7 @@ root {
 
   &.focus::after {
     content: "Map-ID: " attr(id);
-    padding: .3rem .5rem;
+    padding: 0.3rem 0.5rem;
 
     position: absolute;
     left: 50%;
@@ -56,7 +70,7 @@ root {
 
     transform: translate(-50%, -50%);
     opacity: 0;
-    animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
   }
 }
 
@@ -89,7 +103,6 @@ root {
 }
 
 *:has(> nav) {
-
   /* FIXME Hide nav at proper time */
   display: none;
   padding: 0.5rem;
@@ -131,11 +144,10 @@ root {
 
     border-left: 0.5em solid #e0e0e0;
 
-    transition: border-color .5s linear;
+    transition: border-color 0.5s linear;
   }
 
   &.focus {
-
     /* Dress up when block is focus */
 
     /* background: var(--block-focus-color); */
@@ -145,7 +157,7 @@ root {
 
     &::after {
       content: counter(block) "/" attr(data-total);
-      padding: .3rem .5rem;
+      padding: 0.3rem 0.5rem;
 
       position: absolute;
       left: 50%;
@@ -163,7 +175,7 @@ root {
 
       transform: translate(-50%, -50%);
       opacity: 0;
-      animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+      animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
     }
   }
 }
@@ -194,7 +206,7 @@ root {
       }
     }
 
-    :has( > .mapclay,  > [data-placeholder]) {
+    :has(> .mapclay, > [data-placeholder]) {
       display: flex;
       gap: 0.5em;
 
@@ -225,7 +237,7 @@ root {
   .Showcase {
     display: none;
     overflow: visible;
-      width: 100%;
+    width: 100%;
     height: 100%;
 
     position: relative;
@@ -246,7 +258,7 @@ root {
 
   &::after {
     content: "Layout: " attr(data-layout);
-    padding: .3rem .5rem;
+    padding: 0.3rem 0.5rem;
 
     position: absolute;
     left: 50%;
@@ -272,13 +284,13 @@ root {
   max-width: 60em;
 
   &::after {
-    animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
   }
 }
 
 .Dumby[data-layout="side-by-side"] {
   &::after {
-    animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
   }
 
   .SemanticHtml,
@@ -336,13 +348,12 @@ root {
         transform: unset;
       }
     }
-
   }
 }
 
 .Dumby[data-layout="overlay"] {
   &::after {
-    animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
   }
 
   .SemanticHtml,
@@ -384,7 +395,6 @@ root {
   padding-inline: 1rem;
   padding-block: 1rem;
 
-
   &:hover {
     visibility: visible;
     opacity: 1;
@@ -402,16 +412,16 @@ root {
   }
 
   #close {
-     cursor: pointer;
+    cursor: pointer;
   }
 
-   #plus-font-size {
-     cursor: zoom-in;
-   }
+  #plus-font-size {
+    cursor: zoom-in;
+  }
 
-   #minus-font-size {
-     cursor: zoom-out;
-   }
+  #minus-font-size {
+    cursor: zoom-out;
+  }
 }
 
 .draggable-block {
@@ -431,7 +441,7 @@ root {
   &:has(.dumby-block.focus) {
     z-index: 9001;
     outline: solid #505050 1px;
-    border-color: #505050
+    border-color: #505050;
   }
 
   &:has(pre:only-child [data-placeholder]:only-child) {
@@ -440,7 +450,7 @@ root {
 
   /* Fade out top of contents scrolling */
   &::before {
-    content: '';
+    content: "";
     display: block;
     height: 1.5rem;
 
@@ -504,7 +514,7 @@ root {
     border-top-right-radius: 0.3rem;
   }
 
-    .handle {
+  .handle {
     font-size: 1.1rem;
     text-align: center;
 
@@ -525,7 +535,8 @@ root {
     }
   }
 
-  &.drag, &:has(.draggable-part:hover) {
+  &.drag,
+  &:has(.draggable-part:hover) {
     .handle {
       background: #e1e1e1;
 
@@ -534,7 +545,7 @@ root {
 
     .utils {
       visibility: visible;
-      animation: fade-in .5s;
+      animation: fade-in 0.5s;
     }
 
     > *:not(.draggable-part, .utils) {
@@ -550,8 +561,8 @@ root {
 
   [data-placeholder] {
     height: 50px !important;
-    scale: .9;
-    transition-duration: .4s;
+    scale: 0.9;
+    transition-duration: 0.4s;
     transition-timing-function: ease-out;
   }
 }
diff --git a/src/css/index.css b/src/css/index.css
index 194ca9c..a17ecce 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -65,7 +65,7 @@ body {
     padding-inline: 0;
 
     font-family: monospace;
-    font-size: 1.0rem;
+    font-size: 1rem;
 
     &.focus {
       border: var(--content-focus-border);
@@ -158,7 +158,7 @@ body {
     text-overflow: ellipsis;
 
     ::before {
-      width: 2rem
+      width: 2rem;
     }
   }
 }
diff --git a/src/css/style.css b/src/css/style.css
index 14a2e96..1d39cc0 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,7 @@
 /* CSS Reset */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -9,15 +11,28 @@
   line-height: calc(1em + 0.5rem);
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
   hyphens: auto;
 }
@@ -29,7 +44,12 @@ body {
   line-height: 1.6;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: bold;
   margin-bottom: 0.5em;
 }
@@ -102,7 +122,8 @@ pre:has(code) {
   }
 }
 
-ul, ol {
+ul,
+ol {
   margin-top: 1em;
   margin-bottom: 1em;
   padding-left: 20px;
@@ -118,7 +139,8 @@ table {
   width: 100%;
 }
 
-th, td {
+th,
+td {
   padding: 8px;
 
   border: 1px solid #ddd;