feat: improve CSS for draggable block

2 files changed, 30 insertions, 33 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 03c6c2a..1c6d92b 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -17,6 +17,7 @@
   &.geolink {
     background-color: rgb(248, 248, 129);
   }
+
   &.doclink {
     background-color: #9ee7ea;
   }
@@ -54,18 +55,6 @@
     overflow-y: scroll;
     width: 100%;
 
-    > .draggable-block {
-      width: 100%;
-      pointer-events: auto;
-      border-radius: 0.5rem;
-      background-color: white;
-      margin-bottom: 3rem;
-
-      .draggable {
-        display: none;
-      }
-    }
-
     pre {
       width: 100%;
 
@@ -85,16 +74,6 @@
       }
     }
 
-    #mapPlaceholder {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: lightgray;
-      > * {
-        width: fit-content;
-        flex: 0 0;
-      }
     [data-placeholder] {
       box-sizing: border-box;
       border: 5px solid white;
@@ -102,15 +81,25 @@
       margin: 0;
     }
   }
+}
 
-  :has(> .map-container) {
-    display: flex;
-    width: fit-content;
+.draggable-block {
+  pointer-events: auto;
+  background-color: white;
+  margin-bottom: 3rem;
+
+  .draggable {
+    display: none;
   }
+}
 
-  .Showcase .map-container {
-    width: 100% !important;
-    height: 100% !important;
+/* Left border to indicate there is a block */
+.DumbyMap[data-layout]:not([data-layout=overlay]) {
+  .draggable-block{
+    width: calc(100% + 0.5em);
+    border-left: #f0f0f0 0.5em solid;
+    padding-left: 0.5em;
+    margin-left: -0.5em;
   }
 }
 
@@ -162,14 +151,11 @@
       max-width: 25vw;
       overflow: scroll;
       border: solid gray;
+      border-radius: 0.5rem;
       padding-top: 0.5rem;
       padding-bottom: 0;
       resize: both;
 
-      > * {
-        padding-inline: 0.5rem;
-      }
-
       &[style*="height"],
       &[style*="width"] {
         max-height: unset;
@@ -178,7 +164,10 @@
 
       .map-container {
         min-width: 200px;
-        padding-inline: 0;
+      }
+
+      > :not(.draggable) {
+        margin-inline: 0.5rem;
       }
 
       .draggable {
diff --git a/src/css/style.css b/src/css/style.css
index 83b8045..ca53403 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -111,3 +111,11 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+/* TODO */
+blockquote {
+  color: gray;
+  font-size: 1.2rem;
+  font-style: italic;
+  text-align: center;
+}