fix mobile layout, update icons, fix colors
This commit is contained in:
parent
33a665294c
commit
5011812385
161
color.css
161
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;
|
||||
}
|
||||
}
|
||||
@ -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" },
|
||||
|
||||
18
index.html
18
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="share-palette" title="Share Palette">🔗</button>
|
||||
<button id="zoom-palette" title="Zoom In Palette">🔍</button>
|
||||
<button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette">
|
||||
<i class="fa-solid fa-shuffle"></i>
|
||||
</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>
|
||||
|
||||
10
script.js
10
script.js
@ -402,4 +402,12 @@ document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
|
||||
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');
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user