mobile CSS

src/components/COGURL.astro

@@ -37,4 +37,9 @@ function viewCOG() {
     pointer-events: auto;
   }
 }
-</style>
+@media (max-width: 40rem) {
+  .cogurl {
+    display: none;
+  }
+}
+</style>

src/components/ChoosePalette.astro

@@ -82,12 +82,12 @@ document.addEventListener('DOMContentLoaded', () => {
 <style>
 .choosepalette {
     display: flex;
-    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     gap: 1rem;
+    margin: 0 auto;
 
 
     input{

src/components/Colorbar.astro

@@ -54,24 +54,32 @@ function updateColorbar() {
 
 #colorbar {
   width: 400px;
+  max-width: 100%;
   height: 5px;
   background: red;
   border-radius: 5px;
+  border: 1px solid #ccc;
   background-color: red;
   backdrop-filter: blur(5px);
   padding: 10px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   color: darkslategray;
-  background-color: var(--nilu-dark-gray);
+  background-color: darkgray;
   font-size: 0.8em;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin: 0 auto;
   div {
     mix-blend-mode: difference;
     font-size: 1em;
-    color: whit;
+    color: white;
+  }
+}
+@media (max-width: 40rem) {
+  #colorbar {
+    width: 90%;
   }
 }
 </style>

src/components/Logos.astro

@@ -45,5 +45,12 @@
       fill: red;
     }
   }
-}    
+} 
+@media (max-width: 40rem) {
+  #nilulogo {
+    left: auto;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
+}
 </style>

src/components/LowerRightCornerUI.astro

@@ -21,5 +21,14 @@ import ChoosePalette from './ChoosePalette.astro';
     gap: 0.5rem;
     bottom: 1rem;
     right: 1rem;
+    max-width: 100vw;
+    overflow: auto;
+}
+@media (max-width: 40rem) {
+    .lower-right-corner-ui {
+        width: 100vw;
+        right: 0;
+        bottom: 0.5rem;
+    }
 }
 </style>

src/components/Toaster.astro

@@ -34,7 +34,7 @@ window.newToast = ( message) => {
     position: fixed;
     right: 1rem;
     top: 1rem;
-    max-width: 40rem;
+    max-width: min(40rem, 100vw);
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -58,5 +58,15 @@ window.newToast = ( message) => {
         }
     }
 }
+@media (max-width: 40rem) {
+    #toaster {
+        right: 0;
+        top: 1rem;
+        width: 100vw;
+        .toast {
+            background-color: #eee;
+            border-radius: 2px;
+        }
+}
 
 </style>

src/style.css

@@ -12,12 +12,19 @@
 html {
   font-family: 'Inter', 'System-ui', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 }
-
+
+@keyframes shift-right {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(1rem); }
+  100% { transform: translateX(0); }
+}
+
 .stactreeview {
     /*background-color: color-mix(in srgb, var(--nilu-light-blue), 30% transparent);*/
     background-color: transparent;
     transition: background-color 0.1s;
     summary {
+
       .staclogo {
           width: 50px;
           height: 50px;
@@ -29,21 +36,22 @@ html {
           background-position: center;
           vertical-align: middle;
           mix-blend-mode: multiply; /* Set white as transparent */
-          transform: rotate(0deg);
+          position: relative;
           transition: transform 0.4s ease-in-out;
+          transform: translateX(0);
           &:hover {
-            transform: rotate(360deg);
-
+            /* Play an animaton to shift it right 2rem  then back again */
+            animation: shift-right 0.4s ease-in-out;
           }
       }
     }
     &[open] {
       background-color: #efefef;
-      max-height: 100vh;
+      max-height: 100dvh;
       height:100dvh;
     }
-    max-height: 80vh;
-    width: 20vw;
+    max-height: 80dvh;
+    width: max(20vw, 14rem);
     padding: 1rem;
     overflow: auto;
     position: absolute;