Resize message

tim-harding · Oct 23, 2024 · 5991593 · 5991593
1 parent d4c3bdb
commit 5991593
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/pages/assets/style.css b/pages/assets/style.css
@@ -190,7 +190,6 @@ main {
   grid-template-rows: minmax(32rem, 1fr);
   grid-template-columns: 1fr 16rem;
   grid-template-areas: "drag-area form";
-  gap: 2rem;
 
   & > form {
     grid-area: form;
@@ -207,7 +206,27 @@ main {
   display: grid;
   resize: both;
   overflow: hidden;
-  padding: 1rem;
+  padding: 1.5rem;
+  position: relative;
+
+  @supports (resize: both) {
+    &::after {
+      content: "Resize me →";
+      display: block;
+      position: absolute;
+      font-weight: 500;
+      right: 1rem;
+      bottom: 0rem;
+      line-height: 1;
+      transition: opacity 250ms;
+    }
+  }
+}
+
+.squircle-container.hide-after {
+  &::after {
+    opacity: 0;
+  }
 }
 
 th-control {

diff --git a/pages/index.html b/pages/index.html
@@ -80,7 +80,10 @@ <h1>Squircle</h1>
 
     <main>
       <div class="tester">
-        <div class="squircle-container">
+        <div
+          class="squircle-container"
+          onmousedown="this.classList.add('hide-after')"
+        >
           <ce-squircle></ce-squircle>
         </div>
 
@@ -103,7 +106,7 @@ <h1>Squircle</h1>
               type="range"
               min="0"
               max="64"
-              value="4"
+              value="8"
             />
           </th-control>