diff --git a/color.css b/color.css index ac7c770..e59aa7f 100644 --- a/color.css +++ b/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; - top: 60px; /* Adjusted top position for better spacing */ + position: sticky !important; + 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 */ - max-height: 50vh; /* Keep your max-height */ - min-height: 0; /* Add this to allow flex children to shrink */ + + /* Sizing and Scrolling Fix */ + max-height: 30vh; + min-height: 0; } /* Strong shadow when stuck */ @@ -61,8 +70,8 @@ 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 */ flex-grow: 1; /* Allow this container to fill available space */ @@ -86,7 +95,7 @@ body { flex-direction: column; gap: 15px; font-family: "Autour One", serif; - + } @keyframes fadeInUp { @@ -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 */ - width: 100%; /* Makes the row fill the container */ - padding: 0 10px; /* Adds some horizontal spacing */ - margin: auto + align-items: center; /* Vertically centers them */ + width: 100%; /* Makes the row fill the container */ + /* padding: 0 10px; Adds some horizontal spacing */ + 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 0 15px rgba(0, 0, 0, 0.4); /* More pronounced glow for chosen state */ + 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 */ } /* 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 */ -#shuffle-palette { - font-size: 16px; - padding: 4px 8px; - border: none; +/* --- NEW STYLES START HERE --- */ +/* Styling for the new icon buttons in the palette header */ +.palette-control-btn { + font-size: 1rem; /* Set a consistent icon size */ + 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; @@ -546,17 +568,17 @@ input:checked + .slider:before { height: 100vh; background-color: rgba(0, 0, 0, 0.75); /* Dark, semi-transparent background */ z-index: 1001; /* Ensure it's on top of everything */ - + /* Use flexbox to center the content */ display: flex; justify-content: center; align-items: center; - + /* Start hidden and transition opacity */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; - + cursor: zoom-out; /* Hint to the user how to close it */ } @@ -571,22 +593,22 @@ input:checked + .slider:before { width: 90vw; height: 80vh; padding: 20px; - + /* Looks like the original palette */ background-color: #e8e8e8; background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); border-radius: 15px; - + /* Allow scrolling if there are many balloons */ overflow-y: auto; - + /* Arrange the cloned balloons */ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; - + cursor: default; /* Use a normal cursor for the content itself */ } @@ -595,22 +617,67 @@ input:checked + .slider:before { transform: scale(1.1); } -/* --- Definitive Rules for Larger Selected Balloons --- */ -/* Using !important to forcefully override any other conflicting styles. */ +/* --- Responsive Sizing for Selected Palette Balloons --- */ -/* This rule ensures the wrapper can expand to fit the larger balloon */ -#selected-palette .swatch-wrapper { - width: auto !important; - max-width: none !important; +/* Add some spacing between the balloons in the top palette */ +#palette-colors { + gap: 15px; } -/* This rule sets the new, larger size for the balloon swatch */ -#selected-palette .color-swatch { - width: 130px !important; - height: 177px !important; +/* 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: 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 */ -#selected-palette .balloon-string-svg { - top: 108px !important; +/* --- Responsive Sizing for Selected Palette Balloons --- */ + +/* 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; + } } \ No newline at end of file diff --git a/colors.json b/colors.json index 7c386b7..6d64fec 100644 --- a/colors.json +++ b/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" }, diff --git a/index.html b/index.html index 5f790b9..146ae10 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@