From eb49311785d17316eda5fda39b419c4148c8e873 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 2 Jun 2026 09:03:40 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Interaction=20and=20A?= =?UTF-8?q?ccessibility=20Polish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added scroll-padding-top to prevent header overlap on anchor links - Implemented scale(0.97) tactile feedback on active states - Unified focus-visible styles for links and buttons - Added security attributes to external links - Added representative icons to the "Why KibaOS" section Co-authored-by: christopherfoxjr <213370400+christopherfoxjr@users.noreply.github.com> --- index.html | 43 ++++++++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 5abef83..9ee1a14 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@ } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } -html { scroll-behavior: smooth; } +html { scroll-behavior: smooth; scroll-padding-top: 64px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } @@ -53,7 +53,7 @@ a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } -a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } +a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: -40px; left: 1rem; @@ -78,34 +78,42 @@ font-size: .9375rem; font-weight: 500; color: var(--gray-700) !important; white-space: nowrap; text-decoration: none !important; display: flex; align-items: center; gap: .5rem; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1); } +.nav-brand:active { transform: scale(0.97); } .nav-brand span { color: var(--text); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; } .nav-links a { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--gray-700); padding: .5rem .875rem; border-radius: 6px; - transition: background .15s, color .15s; + transition: background .15s, color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .nav-links a:hover { background: var(--gray-100); color: var(--text); text-decoration: none; } +.nav-links a:active { transform: scale(0.97); } .nav-cta { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-shrink: 0; } .btn-ghost { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--blue); padding: .5rem 1.25rem; border-radius: 8px; border: 1.5px solid var(--blue); - transition: background .15s, color .15s; + transition: background .15s, color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-ghost:hover { background: var(--blue-pale); text-decoration: none; } +.btn-ghost:active { transform: scale(0.97); } .btn-solid { + display: inline-block; font-size: .875rem; font-weight: 500; color: var(--white) !important; padding: .5rem 1.25rem; border-radius: 8px; background: var(--blue); - transition: background .15s, box-shadow .15s; + transition: background .15s, box-shadow .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-solid:hover { background: #1557b0; box-shadow: var(--shadow-sm); text-decoration: none; } +.btn-solid:active { transform: scale(0.97); } @media (max-width: 768px) { .nav-links { display: none; } @@ -167,18 +175,20 @@ font-size: .9375rem; font-weight: 600; padding: .875rem 2rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); - transition: transform .15s, box-shadow .15s; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s; } .btn-hero-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; } +.btn-hero-primary:active { transform: translateY(-1px) scale(0.97); } .btn-hero-secondary { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--white) !important; font-size: .9375rem; font-weight: 500; padding: .875rem 2rem; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.35); - transition: background .15s, border-color .15s; + transition: background .15s, border-color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-hero-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); text-decoration: none; } +.btn-hero-secondary:active { transform: scale(0.97); } /* hero screenshot */ .hero-visual { @@ -289,9 +299,10 @@ margin-top: 1.5rem; color: var(--blue) !important; font-size: .9375rem; font-weight: 600; border-bottom: 2px solid transparent; - transition: border-color .15s; + transition: border-color .15s, transform .15s cubic-bezier(0.4, 0, 0.2, 1); } .feature-cta:hover { border-color: var(--blue); text-decoration: none; } +.feature-cta:active { transform: scale(0.97); } .feature-cta::after { content: '→'; transition: transform .15s; } .feature-cta:hover::after { transform: translateX(3px); } @@ -457,7 +468,9 @@ font-size: 1rem; font-weight: 600; color: var(--gray-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; user-select: none; + transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1); } +.faq-q:active { transform: scale(0.97); } .faq-q::after { content: '+'; font-size: 1.25rem; font-weight: 300; color: var(--blue); flex-shrink: 0; @@ -557,7 +570,7 @@
GitHub - Download ISO + Download ISO
@@ -571,7 +584,7 @@

A desktop that gets out of your way

KibaOS is a modern, secure operating system built on a foundation of simplicity. Familiar enough to use on day one. Polished enough to love every day after.

- + ⬇ Download KibaOS @@ -606,22 +619,22 @@

Fast. Secure. Effortless.

-
+
⚡

Starts fast, stays fast

KibaOS is built lean. No startup services you didn't ask for, no background processes accumulating over time. It performs on day one and keeps performing.

-
+
🛡️

Security by design

Built on a read-only compressed filesystem with automatic update support and no legacy cruft. Your system stays in a known, clean state.

-
+
🎨

A desktop worth looking at

The Budgie desktop brings a cohesive visual experience with Papirus icons, a unified Arc-Dark theme, and a Wayland compositor that renders everything crisply.

-
+
📦

Software, your way

gnome-software and Flatpak give you access to a vast library of applications in a sandboxed environment — installed, updated, and removed without risk to your core system.

@@ -886,7 +899,7 @@

Built by WolfTech Innovations

Ready to make the switch?

Download KibaOS today and experience a desktop built for the way people actually work.

- ⬇ Download KibaOS + ⬇ Download KibaOS