Skip to content

🎨 Palette: Enhance navigation accessibility and semantics #35

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 accessibility and semantics #35

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
Empty file added .Jules/palette.md
View file
Open in desktop
Empty file.
88 changes: 45 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,49 @@
<!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>

<a href="#main-content" class="skip-link">Skip to main content</a>

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

<main class="container" id="main-content">

<a href="proyecto1/proyecto1.html" class="card" id="btn-p1">
<h2 id="title-p1">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" aria-hidden="true">Open Sketch</span>
</a>

<a href="proyecto2/proyecto2.html" class="card" id="btn-p2">
<h2 id="title-p2">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" aria-hidden="true">Open Sketch</span>
</a>

</main>

<script src="script.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions proyecto1/proyecto1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ <h1>Circle Matrix</h1>
</div>
</div>

<button onclick="window.location.href='../index.html'" class="back-btn">
<a href="../index.html" class="back-btn">
⬅ Back
</button>
</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="sketch.js"></script>
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">
⬅ Back
</button>
</a>

<!-- UI PANEL -->
<div id="gui">
Expand Down
19 changes: 3 additions & 16 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
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];
};
}
});
};
window.onload = function () {
// Redundant click handlers removed as cards are now semantic <a> tags.
};
33 changes: 30 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,24 @@ body {
line-height: 1.6;
}

/* SKIP LINK */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--accent-color);
color: white;
padding: 8px;
z-index: 1000;
transition: top 0.3s;
text-decoration: none;
font-weight: 600;
}

.skip-link:focus {
top: 0;
}

/* HEADER */
header {
text-align: center;
Expand Down Expand Up @@ -73,13 +91,14 @@ header p {
border-radius: 24px;
padding: 40px;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
overflow: visible;
animation: fadeInUp 0.8s ease-out both;
}

Expand All @@ -100,10 +119,17 @@ 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);
outline: none;
}

.card:focus-visible {
box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3);
z-index: 10;
}

.card > * {
Expand Down Expand Up @@ -147,7 +173,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