Update index.html

index.html

@@ -45,7 +45,7 @@ body.dark{
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
 
-  --paper-bg:       #302e2b;
+  --paper-bg:       #302e3b; /* slightly deeper to add contrast with tiles */
   --paper-text:     #e9e7e2;
   --shadow:         rgba(0,0,0,.55);
 
@@ -136,9 +136,16 @@ h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:
   position:relative;
   padding:18px 6px 10px 6px;
   display:grid;
-  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
   gap:16px;
   overflow:visible;
+
+  /* NEW: prevent short images from becoming tall boxes */
+  align-items:start;
+
+  /* NEW: dynamic columns
+     --cols: 1 -> one column (full width), 2 -> two columns (50/50),
+     else auto-fit with a sensible min width */
+  grid-template-columns: repeat(var(--cols, auto-fit), minmax(var(--minCol, 220px), 1fr));
 }
 #board::before{
   content:'';
@@ -169,6 +176,8 @@ h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:
   transform:rotate(var(--tilt,0deg)) scale(1);
   transition:transform .12s ease, box-shadow .12s ease, opacity .16s ease;
   animation:pop .18s ease-out;
+  /* NEW: ensure the tile itself doesn't stretch via grid */
+  align-self:start;
 }
 .sticky:hover{
   transform:rotate(var(--tilt,0deg)) translateY(-2px) scale(1.01);
@@ -198,10 +207,13 @@ h1{font-family:'Libre Baskerville',serif;margin:0;font-size:28px;letter-spacing:
 body.dark .badge{background:rgba(255,255,255,.12)}
 
 .sticky img{
-  width:100%;height:auto;display:block;
+  width:100%;
+  height:auto;
+  display:block;
   border-bottom-left-radius:10px;border-bottom-right-radius:10px;
-  background:
-    linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));
+  background: linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0));
+  /* NEW: keep gigantic/tall screenshots sane on viewport */
+  max-height:80vh;
 }
 
 /* delete button */
@@ -233,7 +245,10 @@ body.dark .badge{background:rgba(255,255,255,.12)}
 @media(max-width:768px){
   .container{margin:20px 16px;padding:24px}
   h1{font-size:24px}
-  #board{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
+  /* CHANGED: still use dynamic columns on mobile, but with a smaller min */
+  #board{
+    grid-template-columns: repeat(var(--cols, auto-fit), minmax(180px,1fr));
+  }
 }
 @media print{
   body{background:#fff}
@@ -283,8 +298,35 @@ function removePlaceholder(){
   if(ph) ph.remove();
 }
 
+function ensurePlaceholder(){
+  if(!board.querySelector('.sticky') && !board.querySelector('.placeholder')){
+    const ph = document.createElement('div');
+    ph.className = 'placeholder';
+    ph.innerHTML = `Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste screenshots/images.<br/>You can also drag &amp; drop images here.`;
+    board.appendChild(ph);
+  }
+}
+
+/* NEW: set grid columns smartly based on number of stickies */
+function updateLayout(){
+  const count = board.querySelectorAll('.sticky').length;
+  if(count === 1){
+    // 1 image → full width (one column)
+    board.style.setProperty('--cols', '1');
+    board.style.setProperty('--minCol', '0px');
+  }else if(count === 2){
+    // 2 images → half/half
+    board.style.setProperty('--cols', '2');
+    board.style.setProperty('--minCol', '0px');
+  }else{
+    // 3+ → responsive, nice min width
+    board.style.setProperty('--cols', 'auto-fit');
+    board.style.setProperty('--minCol', '220px');
+  }
+}
+
+/* random tilt & color */
 function randTilt(){
-  // small friendly tilt between -2.2deg and 2.2deg
   const d = (Math.random()*4.4 - 2.2).toFixed(2);
   return d + 'deg';
 }
@@ -323,16 +365,10 @@ function createSticky(src, isBlobUrl=false){
     wrap.style.opacity = '0';
     wrap.style.transform = 'scale(.96)';
     setTimeout(()=>{
-      // release blob URL to avoid memory leaks
       if(isBlobUrl) URL.revokeObjectURL(src);
       wrap.remove();
-      if(!board.querySelector('.sticky')){
-        // restore placeholder if empty
-        const ph = document.createElement('div');
-        ph.className = 'placeholder';
-        ph.innerHTML = `Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste screenshots/images.<br/>You can also drag &amp; drop images here.`;
-        board.appendChild(ph);
-      }
+      ensurePlaceholder();
+      updateLayout(); // NEW: update grid when items are removed
     },140);
   });
 
@@ -340,6 +376,8 @@ function createSticky(src, isBlobUrl=false){
   wrap.appendChild(img);
   wrap.appendChild(btn);
   board.prepend(wrap); // newest on top
+
+  updateLayout(); // NEW: update grid after adding
 }
 
 /* ======= handle pasted images ======= */
@@ -357,7 +395,6 @@ function filesFromClipboard(dataTransfer){
 
 async function handleImages(files){
   if(!files.length){
-    // no images, brief nudge
     processingNode.textContent = 'No images found in clipboard';
     showProcessing(); hideProcessing();
     processingNode.textContent = 'Processing…';
@@ -377,7 +414,7 @@ document.addEventListener('paste', e=>{
   if(files.length){ e.preventDefault(); handleImages(files); }
 });
 
-/* ======= drag & drop (optional bonus) ======= */
+/* ======= drag & drop ======= */
 board.addEventListener('dragover', e=>{
   e.preventDefault();
   board.style.outline = '2px dashed rgba(0,0,0,.2)';
@@ -418,7 +455,11 @@ function updateIcon(){
 document.addEventListener('DOMContentLoaded',()=>{
   const sheet=document.querySelector('.container');
   sheet.style.opacity='0';
-  setTimeout(()=>{sheet.style.transition='opacity .6s ease';sheet.style.opacity='1'},80);
+  setTimeout(()=>{
+    sheet.style.transition='opacity .6s ease';
+    sheet.style.opacity='1';
+    updateLayout(); // NEW: set initial grid
+  },80);
 });
 </script>
 </body>