fix mobile layout, update icons, fix colors

color.css

@@ -1,3 +1,12 @@
+:root{
+  /* balloon sizing (W x H = ratio ~ 1.36) */
+  --balloon-w: 110px;
+  --balloon-ratio: 1.36;      /* 100x136 baseline */
+  --string-offset: 54px;      /* how far down the string starts from top of swatch */
+  --palette-gap-x: 18px;
+  --palette-gap-y: 12px;
+}
+
 body {
   margin: 0;
   box-sizing: border-box;
@@ -27,8 +36,9 @@ body {
 }
 
 #selected-palette {
-  position: sticky;
+  position: sticky !important;
-  top: 60px; /* Adjusted top position for better spacing */
+  top: 60px; /* This tells it where to stick */
+  z-index: 10;    /* This ensures it stays on top of other content */
   max-width: 85%;
   margin: auto;
   padding: 10px;
@@ -36,16 +46,15 @@ body {
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
   border: 2px solid #ccc;
   border-radius: 10px;
-  z-index: 1;
  
   /* Flexbox settings */
   display: flex;
   flex-direction: column;
   gap: 15px;
  
-  /* ✨ Sizing and Scrolling Fix */
+  /* Sizing and Scrolling Fix */
-  max-height: 50vh; /* Keep your max-height */
+  max-height: 30vh;
-  min-height: 0;    /* Add this to allow flex children to shrink */
+  min-height: 0;
 }
 
 /* Strong shadow when stuck */
@@ -61,7 +70,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 10px;
+  /* padding: 10px; */
  
   /* ✨ Scrolling Fix */
   overflow-y: auto; /* Change from 'visible' to 'auto' for vertical scroll */
@@ -145,7 +154,7 @@ footer {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-around;
+  justify-content: space-evenly;
   /* width: 60px; */
   /* margin: 0 5px; */
   /* padding: 10px; */
@@ -160,10 +169,10 @@ footer {
 .palette-header-row {
   display: flex;
   justify-content: space-between; /* Pushes title and buttons apart */
-  align-items: center;          /* Vertically centers them */
+  align-items: center;           /* Vertically centers them */
-  width: 100%;                  /* Makes the row fill the container */
+  width: 100%;                   /* Makes the row fill the container */
-  padding: 0 10px;              /* Adds some horizontal spacing */
+  /* padding: 0 10px;               Adds some horizontal spacing */
-  margin: auto
+  margin: auto;
 }
 
 /* Remove the default margins from your title */
@@ -182,7 +191,7 @@ footer {
 }
 
 
- .color-swatch {
+  .color-swatch {
   width: 100px;
   height: 136px;
   position: relative;
@@ -252,7 +261,7 @@ font-family: "Autour One", serif;
 @media (max-width: 600px) {
 
   .swatch-wrapper {
-    width: 50px;
+    width: 60px;
   }
 
   .color-name {
@@ -293,7 +302,7 @@ font-family: "Autour One", serif;
 .color-swatch.chosen {
   outline: 3px solid #333;
   outline-offset: 1px;
-  width: 90px;   /* Keep these specific dimensions for chosen state */
+  width: 90px;    /* Keep these specific dimensions for chosen state */
   height: 126px; /* Keep these specific dimensions for chosen state */
   z-index: 10;
   /* IMPORTANT: Re-apply the complex shadow from the base .color-swatch,
@@ -301,8 +310,8 @@ font-family: "Autour One", serif;
      This ensures depth is maintained. */
   box-shadow:
     inset 2px 2px 6px rgba(255, 255, 255, 0.6), /* Retain inner highlight for depth */
-    0 8px 16px rgba(0, 0, 0, 0.3),              /* Slightly larger/darker outer shadow for more pop */
+    0 8px 16px rgba(0, 0, 0, 0.3),            /* Slightly larger/darker outer shadow for more pop */
-    0 0 15px rgba(0, 0, 0, 0.4);               /* More pronounced glow for chosen state */
+    0 0 15px rgba(0, 0, 0, 0.4);              /* More pronounced glow for chosen state */
 }
 
 /* Shared metallic style */
@@ -310,7 +319,7 @@ font-family: "Autour One", serif;
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.3);
   /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
-              0 2px 4px rgba(0, 0, 0, 0.3); */
+               0 2px 4px rgba(0, 0, 0, 0.3); */
   overflow: hidden;
 }
 
@@ -475,15 +484,28 @@ input:checked + .slider:before {
   transform: translateX(20px);
 }
 
-/* Shuffle Button */
+/* --- NEW STYLES START HERE --- */
-#shuffle-palette {
+/* Styling for the new icon buttons in the palette header */
-  font-size: 16px;
+.palette-control-btn {
-  padding: 4px 8px;
+  font-size: 1rem;      /* Set a consistent icon size */
-  border: none;
+  padding: 0;           /* Remove padding to control size with width/height */
+  border: 1px solid #ddd;
   background: #f0f0f0;
   border-radius: 6px;
   cursor: pointer;
+  width: 32px;          /* Give the button a square shape */
+  height: 32px;
+  display: inline-flex; /* Use flexbox to center the icon */
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s ease;
 }
+
+.palette-control-btn:hover {
+  background-color: #e0e0e0;
+}
+/* --- NEW STYLES END HERE --- */
+
 .palette-modal-backdrop {
   position: fixed;
   top: 0; left: 0;
@@ -595,22 +617,67 @@ input:checked + .slider:before {
   transform: scale(1.1);
 }
 
-/* --- Definitive Rules for Larger Selected Balloons --- */
+/* --- Responsive Sizing for Selected Palette Balloons --- */
-/* Using !important to forcefully override any other conflicting styles. */
 
-/* This rule ensures the wrapper can expand to fit the larger balloon */
+/* Add some spacing between the balloons in the top palette */
-#selected-palette .swatch-wrapper {
+#palette-colors {
-  width: auto !important;
+  gap: 15px;
-  max-width: none !important;
 }
 
-/* This rule sets the new, larger size for the balloon swatch */
+/* Apply these styles ONLY on screens 768px or smaller (tablets and phones) */
-#selected-palette .color-swatch {
+@media (max-width: 768px) {
-  width: 130px !important;
+
-  height: 177px !important;
+  /* Reduce the size of the balloon itself */
+  #selected-palette .color-swatch {
+    width: 70px;
+    height: 95px;
+  }
+
+  /* Reposition the balloon string to match the new, smaller height */
+  #selected-palette .balloon-string-svg {
+    top: 60px; /* Adjust this value if the string looks detached */
+  }
+
+  /* Make the color name text smaller to fit */
+  #selected-palette .color-name {
+    font-size: 0.7rem;
+  }
+
+  /* Reduce the gap between balloons on mobile for a tighter fit */
+  #palette-colors {
+    gap: 10px;
+  }
 }
 
-/* This rule re-aligns the balloon string to match the new height */
+/* --- Responsive Sizing for Selected Palette Balloons --- */
-#selected-palette .balloon-string-svg {
+
-  top: 108px !important;
+/* Add some spacing between the balloons in the top palette */
+#palette-colors {
+  gap: 15px;
+}
+
+/* Apply these styles ONLY on screens 768px or smaller (tablets and phones) */
+@media (max-width: 768px) {
+
+  /* Reduce the size of the balloon itself */
+  #selected-palette .color-swatch {
+    width: 50px;
+    height: 75px;
+  }
+
+  /* Reposition the balloon string to match the new, smaller height */
+  #selected-palette .balloon-string-svg {
+    top: 40px; /* Adjust this value if the string looks detached */
+    height: 25px;
+  }
+
+  /* Make the color name text smaller to fit */
+  #selected-palette .color-name {
+    font-size: 0.7rem;
+  }
+
+  /* Reduce the gap between balloons on mobile for a tighter fit */
+  #palette-colors {
+    gap: 6px;
+  }
 }

colors.json

@@ -6,7 +6,7 @@
       { "name": "White", "hex": "#ffffff" },
       { "name": "Cameo", "hex": "#e9ccc8" },
       { "name": "Sand", "hex": "#e1d8c6" },
-      { "name": "Stone", "hex": "#DAD7CC" },
+      { "name": "Stone", "hex": "#989689" },
       { "name": "Fog", "hex": "#6b9098" },
       { "name": "Smoke", "hex": "#75777b" },
       { "name": "Grey", "hex": "#ced3d4" },
@@ -17,7 +17,7 @@
     "family": "Pinks & Reds",
     "colors": [
       { "name": "Light Pink", "hex": "#fcccda" },
-      { "name": "Blush", "hex": "#ecccad" },
+      { "name": "Blush", "hex": "#fbd6c0" },
       { "name": "Melon", "hex": "#fac4bc"},
       { "name": "Rose Pink", "hex": "#d984a3" },
       { "name": "Fuchsia", "hex": "#eb4799" },
@@ -25,6 +25,7 @@
       { "name": "Coral", "hex": "#bd4b3b" },
       { "name": "Aloha", "hex": "#e45c56" },
       { "name": "Red", "hex": "#ef2a2f" },
+      { "name": "Wild Berry", "hex": "#79384c"},
       { "name": "Maroon", "hex": "#80011f" }
     ]
   },
@@ -69,9 +70,9 @@
   {
     "family": "Purples",
     "colors": [
-      { "name": "Violet", "hex": "#812a8c" },
-      { "name": "Lavender", "hex": "#866c92" },
       { "name": "Lilac", "hex": "#c69edb" },
+      { "name": "Lavender", "hex": "#866c92" },
+      { "name": "Violet", "hex": "#812a8c" },
       { "name": "Orchid", "hex": "#a42487" },
       { "name": "Pastel Dusk", "hex": "#d7c4c8" },
       { "name": "Rosewood", "hex": "#ad7271" },

index.html

@@ -23,7 +23,7 @@
   <nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
     <div class="navbar-brand is-size-1">
       <a class="navbar-item" href="/">
-          <img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">
+          <!-- <img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo"> -->
       </a>
   
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -47,7 +47,7 @@
     </div>
   </nav>
 
-  <main>
+<main>
     <div id="selected-palette">
       <div class="palette-header-row">
         <h2 class="has-text-dark">Your Palette</h2>
@@ -56,9 +56,15 @@
             <input type="checkbox" id="toggle-animation" checked>
             <span class="slider"></span>
           </label>
-          <button id="shuffle-palette" title="Shuffle Palette">🔀</button>
+          <button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette">
-          <button id="share-palette" title="Share Palette">🔗</button>
+            <i class="fa-solid fa-shuffle"></i>
-          <button id="zoom-palette" title="Zoom In Palette">🔍</button>
+          </button>
+          <button id="share-palette" class="palette-control-btn" title="Share Palette">
+            <i class="fa-solid fa-share-nodes"></i>
+          </button>
+          <button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette">
+            <i class="fa-solid fa-magnifying-glass-plus"></i>
+          </button>
         </div>
       </div>
       
@@ -69,7 +75,7 @@
     </div>
 
     <div id="color-families">
-      </div>
+    </div>
   </main>
   
   <footer>

script.js

@@ -403,3 +403,11 @@ document.addEventListener('keydown', (event) => {
     closeZoomView();
   }
 });
+
+const animInput = document.getElementById('toggle-animation');
+const animWrap = animInput.closest('.icon-switch');
+animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false');
+
+animInput.addEventListener('change', () => {
+  animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false');
+});