1 files changed, 136 insertions, 137 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index f13119a..18ace27 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -166,7 +166,6 @@ root {
   }
 }
 
-
 .menu {
   display: block;
   overflow: visible;
@@ -314,6 +313,17 @@ root {
   }
 }
 
+.point-by-arrow {
+  display: none;
+  padding: 5px;
+
+  position: absolute;
+
+  transform: translate(-50%, -50%);
+  cursor: crosshair;
+  pointer-events: none;
+}
+
 .Dumby {
   overflow: visible;
   width: 100%;
@@ -443,127 +453,6 @@ root {
   }
 }
 
-.Dumby[data-layout='side-by-side'] {
-  &::after {
-    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
-  }
-
-  .SemanticHtml,
-  .Showcase {
-    width: 50%;
-    min-width: 20%;
-
-    position: absolute;
-    top: 0;
-  }
-
-  .SemanticHtml {
-    left: 0;
-  }
-
-  .Showcase {
-    display: block;
-
-    right: 0;
-  }
-
-  .bar {
-    display: flex;
-    overflow: visible;
-    width: 1px;
-    height: 100%;
-
-    position: absolute;
-    left: 50%;
-    top: 0;
-    z-index: 5;
-
-    border: 2px black solid;
-
-    .bar-handle {
-      display: inline-block;
-      width: 60px;
-      height: 60px;
-
-      position: absolute;
-      left: -30px;
-      top: calc(50% - 30px);
-
-      border-radius: 50%;
-
-      background-color: #3887be;
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+');
-
-      transition: transform 0.3s ease-in-out;
-      transform: scale(0.5, 0.5);
-      cursor: grab;
-      box-shadow: inset 0 0 0 4px white;
-
-      &:hover {
-        transform: unset;
-      }
-    }
-  }
-}
-
-.Dumby[data-layout='overlay'] {
-  &::after {
-    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
-  }
-
-  .SemanticHtml,
-  .Showcase {
-    display: block;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-
-    position: fixed;
-    left: 0;
-    top: 0;
-  }
-
-  .Showcase {
-    z-index: 0;
-  }
-
-  .SemanticHtml {
-    pointer-events: none;
-
-    z-index: 1;
-  }
-}
-
-.Dumby[data-layout='sticky'] {
-  .SemanticHtml {
-    max-width: 60em;
-    margin: 0 auto;
-  }
-
-  .draggable-block {
-    position: fixed;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  .Showcase {
-    display: block;
-    overflow: hidden;
-    width: 20vw;
-    min-width: 10vw;
-    height: 200px;
-    min-height: 100px;
-    resize: both;
-
-    .mapclay {
-      border-radius: 4px !important;
-    }
-  }
-}
-
 .utils {
   display: flex;
   padding-block: 1rem;
@@ -623,8 +512,8 @@ root {
   font-size: 0.8rem;
 
   transition:
-    opacity .3s linear,
-    visibility .3s linear;
+  opacity .3s linear,
+  visibility .3s linear;
   visibility: hidden;
   opacity: 0;
   pointer-events: auto;
@@ -634,11 +523,6 @@ root {
     opacity: 1;
   }
 
-  /** Hide block with map in focus, which is the only element */
-  &:has(pre:only-child [data-placeholder]:only-child) {
-    display: none;
-  }
-
   /* Fade out top of contents scrolling */
   &::before {
     content: '';
@@ -737,6 +621,127 @@ root {
   }
 }
 
+.Dumby[data-layout='side-by-side'] {
+  &::after {
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
+  }
+
+  .SemanticHtml,
+  .Showcase {
+    width: 50%;
+    min-width: 20%;
+
+    position: absolute;
+    top: 0;
+  }
+
+  .SemanticHtml {
+    left: 0;
+  }
+
+  .Showcase {
+    display: block;
+
+    right: 0;
+  }
+
+  .bar {
+    display: flex;
+    overflow: visible;
+    width: 1px;
+    height: 100%;
+
+    position: absolute;
+    left: 50%;
+    top: 0;
+    z-index: 5;
+
+    border: 2px black solid;
+
+    .bar-handle {
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+
+      position: absolute;
+      left: -30px;
+      top: calc(50% - 30px);
+
+      border-radius: 50%;
+
+      background-color: #3887be;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+');
+
+      transition: transform 0.3s ease-in-out;
+      transform: scale(0.5, 0.5);
+      cursor: grab;
+      box-shadow: inset 0 0 0 4px white;
+
+      &:hover {
+        transform: unset;
+      }
+    }
+  }
+}
+
+.Dumby[data-layout='overlay'] {
+  &::after {
+    animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
+  }
+
+  .SemanticHtml,
+  .Showcase {
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    position: fixed;
+    left: 0;
+    top: 0;
+  }
+
+  .Showcase {
+    z-index: 0;
+  }
+
+  .SemanticHtml {
+    pointer-events: none;
+
+    z-index: 1;
+  }
+}
+
+.Dumby[data-layout='sticky'] {
+  .SemanticHtml {
+    max-width: 60em;
+    margin: 0 auto;
+  }
+
+  .draggable-block {
+    position: fixed;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .Showcase {
+    display: block;
+    overflow: hidden;
+    width: 20vw;
+    min-width: 10vw;
+    height: 200px;
+    min-height: 100px;
+    resize: both;
+
+    .mapclay {
+      border-radius: 4px !important;
+    }
+  }
+}
+
 .dumby-block:has(pre:only-child [data-placeholder]:only-child) {
   overflow: clip;
 
@@ -770,13 +775,7 @@ root {
   }
 }
 
-.point-by-arrow {
+/** Hide block with map in focus, which is the only element */
+.draggable-block:has(pre:only-child [data-placeholder]:only-child) {
   display: none;
-  padding: 5px;
-
-  position: absolute;
-
-  transform: translate(-50%, -50%);
-  cursor: crosshair;
-  pointer-events: none;
 }