Skip to content

🎨 Palette: Accessibility and UX Polish #13

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
rtech-technologies wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Accessibility and UX Polish #13

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 @@
# Palette's Journal

This journal documents critical UX and accessibility learnings discovered during the development of RTECH projects.
24 changes: 21 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,39 @@
<style>
:root { --lime: #a3e635; --zinc-950: #09090b; }
* { border-radius: 0 !important; font-family: 'JetBrains Mono', monospace; }
*:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 4px !important; }
body { background: var(--zinc-950); color: #fff; line-height: 1.2; }

.industrial-border { border: 2px solid #27272a; }
.license-box { background: #000; border: 1px solid #3f3f46; position: relative; }

.nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #71717a; transition: all 0.2s; }
.nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; }
.nav-link:hover { color: #fff; border-bottom: 2px solid var(--lime); }

.roadmap-card { border-left: 2px solid #3f3f46; transition: all 0.3s ease; }
.roadmap-card:hover { border-left-color: var(--lime); background: #111113; }

.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--lime);
color: #000;
padding: 1rem;
z-index: 100;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body class="selection:bg-lime-500 selection:text-black">
<a href="#main-content" class="skip-link">Skip to main content</a>

<nav class="border-b-2 border-white bg-black sticky top-0 z-50">
<nav class="border-b-2 border-white bg-black sticky top-0 z-50" aria-label="Main Navigation">
<div class="max-w-7xl mx-auto px-6 flex justify-between h-20 items-center">
<div class="flex items-center gap-12">
<div class="font-black text-3xl tracking-tighter uppercase italic">RTECH<span class="text-lime-500">_</span></div>
Expand All @@ -46,7 +64,7 @@
</div>
</nav>

<main>
<main id="main-content" tabindex="-1">
<section class="relative pt-32 pb-32 px-6 border-b border-zinc-900 overflow-hidden">
<div class="max-w-7xl mx-auto relative z-10">
<div class="bg-white text-black inline-block px-3 py-1 text-[10px] font-black uppercase mb-6 italic">Property Standards Verified</div>
Expand Down
24 changes: 21 additions & 3 deletions os2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<style>
:root { --lime: #a3e635; --slate-950: #020617; }
* { border-radius: 0 !important; font-family: 'JetBrains Mono', monospace; }
*:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 4px !important; }
body { background: var(--slate-950); color: #f8fafc; line-height: 1.6; scroll-behavior: smooth; }

.enterprise-border { border: 1px solid #1e293b; }
Expand All @@ -32,11 +33,28 @@
.code-window::before { content: "TERMINAL_FEED"; position: absolute; top: -10px; left: 20px; background: #000; padding: 0 10px; font-size: 10px; color: var(--lime); font-weight: 800; }

.warning-box { background: rgba(79, 70, 229, 0.05); border-left: 4px solid #6366f1; padding: 2rem; }

.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--lime);
color: #000;
padding: 1rem;
z-index: 100;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
}
.skip-link:focus {
top: 0;
}
</style>
</head>
<body class="selection:bg-lime-500 selection:text-black">
<a href="#main-content" class="skip-link">Skip to main content</a>

<nav class="border-b border-slate-800 bg-slate-950/90 backdrop-blur-xl sticky top-0 z-50">
<nav class="border-b border-slate-800 bg-slate-950/90 backdrop-blur-xl sticky top-0 z-50" aria-label="Main Navigation">
<div class="max-w-7xl mx-auto px-6 flex justify-between h-20 items-center">
<div class="flex items-center gap-12">
<a href="index.html" class="font-black text-2xl tracking-tighter hover:text-lime-500 transition-colors uppercase">RTECH</a>
Expand All @@ -50,7 +68,7 @@
</div>
</nav>

<main class="max-w-7xl mx-auto px-6 py-24">
<main id="main-content" tabindex="-1" class="max-w-7xl mx-auto px-6 py-24">

<header class="mb-32">
<h1 class="text-7xl md:text-9xl font-black mb-10 tracking-tighter italic uppercase leading-none">
Expand Down Expand Up @@ -112,7 +130,7 @@ <h3 class="text-2xl font-black uppercase italic mb-6 text-white">Virtualization
<h2 class="text-xs font-black uppercase tracking-[0.6em] text-slate-500 mb-12 italic">// 03_DEPLOYMENT_NODE</h2>
<div class="flex items-center gap-3 mb-10">
<span class="status-pulse"></span>
<span class="text-[11px] font-black uppercase tracking-[0.5em] text-lime-500" id="system-status">Checking Build Mirror...</span>
<span class="text-[11px] font-black uppercase tracking-[0.5em] text-lime-500" id="system-status" aria-live="polite">Checking Build Mirror...</span>
</div>

<div class="grid lg:grid-cols-3 gap-12">
Expand Down