Skip to content

🎨 Palette: Enhance navigation semantics and accessibility #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ISTEC-FOR340 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Enhance navigation semantics and accessibility #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2026-07-05 - [Semantic Link Refactoring and Focus Indicators]
**Learning:** When refactoring interactive `div` containers to semantic `<a>` links, nested interactive elements (like `<button>`) must be converted to non-interactive elements (like `<span>`) to maintain valid HTML. These `<span>` elements require explicit `display: block` and `text-align: center` in CSS to preserve the original button-like layout within the flexbox card. Additionally, for cards using `backdrop-filter` or glassmorphism, `overflow: visible` is essential to prevent high-contrast focus rings (using `box-shadow`) from being clipped by the card boundary.
**Action:** Always verify that nested `<span>` elements within `<a>` cards maintain their structural integrity using `display: block` and ensure `:focus-visible` styles on containers are not clipped by `overflow: hidden`.
86 changes: 43 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Sketches – ISTEC</title>
<title>Interactive Sketches – ISTEC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Interactive Sketches</h1>
<p>Examples of creative coding with p5.js – ISTEC</p>
</header>
<main class="container">
<div class="card" id="btn-p1">
<h2>Circle Matrix (Image → Particles)</h2>
<p>
Transform an image into a dynamic field of circles.
Each pixel becomes an interactive element that reacts to movement.
<br><br>
<strong>Concept:</strong> Image as a system of autonomous particles.
</p>
<button class="btn">Open Sketch</button>
</div>
<div class="card" id="btn-p2">
<h2>The Weight of Words (Voice → Physics)</h2>
<p>
Spoken words are converted into letters that move and fall under gravity.
Language becomes physical and temporary.
<br><br>
<strong>Concept:</strong> Speech transformed into matter.
</p>
<button class="btn">Open Sketch</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>Interactive Sketches</h1>
<p>Examples of creative coding with p5.js – ISTEC</p>
</header>

<main class="container">

<a href="proyecto1/proyecto1.html" class="card" id="btn-p1">
<h2>Circle Matrix (Image → Particles)</h2>
<p>
Transform an image into a dynamic field of circles.
Each pixel becomes an interactive element that reacts to movement.
<br><br>
<strong>Concept:</strong> Image as a system of autonomous particles.
</p>
<span class="btn">Open Sketch</span>
</a>

<a href="proyecto2/proyecto2.html" class="card" id="btn-p2">
<h2>The Weight of Words (Voice → Physics)</h2>
<p>
Spoken words are converted into letters that move and fall under gravity.
Language becomes physical and temporary.
<br><br>
<strong>Concept:</strong> Speech transformed into matter.
</p>
<span class="btn">Open Sketch</span>
</a>

</main>

<script src="script.js"></script>
</body>
</html>
70 changes: 35 additions & 35 deletions proyecto1/proyecto1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Matrix Image</title>
<title>Circle Matrix Image</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- UI PANEL -->
<div class="ui-panel">
<h1>Circle Matrix</h1>
<p class="description">
Transform an image into a dynamic field of particles.
The image dissolves into circles that react to your presence.
</p>
<div class="controls">
<input type="file" id="imageLoader" accept="image/*">
<label>Columns <input type="range" id="cols" min="10" max="200" value="60"></label>
<label>Rows <input type="range" id="rows" min="10" max="200" value="60"></label>
<label>Circle Size <input type="range" id="radius" min="2" max="20" value="6"></label>
<label>Interaction Radius <input type="range" id="mouseSize" min="10" max="200" value="80"></label>
</div>
</div>
<button onclick="window.location.href='../index.html'" class="back-btn">
⬅ Back
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- UI PANEL -->
<div class="ui-panel">
<h1>Circle Matrix</h1>
<p class="description">
Transform an image into a dynamic field of particles.
The image dissolves into circles that react to your presence.
</p>

<div class="controls">
<input type="file" id="imageLoader" accept="image/*">

<label>Columns <input type="range" id="cols" min="10" max="200" value="60"></label>
<label>Rows <input type="range" id="rows" min="10" max="200" value="60"></label>
<label>Circle Size <input type="range" id="radius" min="2" max="20" value="6"></label>
<label>Interaction Radius <input type="range" id="mouseSize" min="10" max="200" value="80"></label>
</div>
</div>

<a href="../index.html" class="back-btn" aria-label="Back to home">
⬅ Back
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="sketch.js"></script>

</body>
</html>
6 changes: 5 additions & 1 deletion proyecto1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,16 @@ input[type="file"] {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 100;
text-decoration: none;
}

.back-btn:hover {
.back-btn:hover,
.back-btn:focus-visible {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 2px var(--accent-color);
}

/* MOBILE */
Expand Down
6 changes: 3 additions & 3 deletions proyecto2/proyecto2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">

<head>
<meta charset="utf-8" />
Expand All @@ -15,9 +15,9 @@
<body>

<!-- BACK -->
<button onclick="window.location.href='../index.html'" class="back-btn">
<a href="../index.html" class="back-btn" aria-label="Back to home">
⬅ Back
</button>
</a>

<!-- UI PANEL -->
<div id="gui">
Expand Down
6 changes: 5 additions & 1 deletion proyecto2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,16 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1000;
text-decoration: none;
}

.back-btn:hover {
.back-btn:hover,
.back-btn:focus-visible {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 2px var(--accent-color);
}

/* MOBILE */
Expand Down
21 changes: 5 additions & 16 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,5 @@
window.onload = function () {
const routes = {
"btn-p1": "proyecto1/proyecto1.html",
"btn-p2": "proyecto2/proyecto2.html"
};

Object.keys(routes).forEach(id => {
const element = document.getElementById(id);

if (element) {
element.onclick = () => {
window.location.href = routes[id];
};
}
});
};
// Navigation is now handled by semantic <a> tags in index.html.
// This script is kept for potential future interactive enhancements.
window.onload = function () {
console.log("Interactive Sketches loaded.");
};
14 changes: 10 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,10 @@ header p {
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
overflow: visible;
animation: fadeInUp 0.8s ease-out both;
text-decoration: none;
outline: none;
}

.card:nth-child(2) {
Expand All @@ -100,10 +102,11 @@ header p {
z-index: 0;
}

.card:hover {
.card:hover,
.card:focus-visible {
transform: translateY(-8px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card > * {
Expand Down Expand Up @@ -133,6 +136,8 @@ header p {

/* BIG BUTTON */
.btn {
display: block;
text-align: center;
margin-top: auto;
padding: 16px 24px;
font-size: 1rem;
Expand All @@ -147,7 +152,8 @@ header p {
border: 1px solid rgba(255, 255, 255, 0.1);
}

.card:hover .btn {
.card:hover .btn,
.card:focus-visible .btn {
background: var(--accent-gradient);
border-color: transparent;
box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2);
Expand Down