Skip to content

feat: modernize Docusaurus theme with Hoverkraft branding and accessibility-first design #22

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

Merged
neilime merged 7 commits into from
Oct 18, 2025
Merged

feat: modernize Docusaurus theme with Hoverkraft branding and accessibility-first design #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5d479cc
Initial plan
Copilot Oct 18, 2025
722f82e
Modernize theme with Hoverkraft branding and accessibility improvements
Copilot Oct 18, 2025
87f5c9a
Add smooth animations and modern visual enhancements
Copilot Oct 18, 2025
3bf7d7d
Add prefers-reduced-motion support for accessibility
Copilot Oct 18, 2025
166d670
Respect motion preferences for all hover effects
Copilot Oct 18, 2025
38ec978
Add Hoverkraft logo to footer with gradient branding
Copilot Oct 18, 2025
95b9df6
Fix prettier formatting issues in all modified files
Copilot Oct 18, 2025
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
155 changes: 135 additions & 20 deletions packages/docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,144 @@
* work well for content-centric websites.
*/

/* You can override the default Infima variables here. */
/* Import Hoverkraft brand fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap");

/* Hoverkraft modern color palette */
:root {
--ifm-color-primary: #007acc;
--ifm-color-primary-dark: #006bb3;
--ifm-color-primary-darker: #0066aa;
--ifm-color-primary-darkest: #005588;
--ifm-color-primary-light: #0088d4;
--ifm-color-primary-lighter: #0099ee;
--ifm-color-primary-lightest: #00aaff;
/* Hoverkraft brand colors */
--hk-primary: #1d2026;
--hk-secondary: #1998ff;
--hk-accent: #ff5a02;
--hk-info: #00b3ff;
--hk-warning: #ffe671;
--hk-danger: #ff696d;
--hk-success: #00d663;
--hk-light: #506690;
--hk-dark: #000000;

/* Docusaurus theme variables using Hoverkraft colors */
--ifm-color-primary: #1998ff;
--ifm-color-primary-dark: #0585e6;
--ifm-color-primary-darker: #0580db;
--ifm-color-primary-darkest: #046ab5;
--ifm-color-primary-light: #33abff;
--ifm-color-primary-lighter: #40b0ff;
--ifm-color-primary-lightest: #66c2ff;

/* Secondary colors */
--ifm-color-secondary: #ff5a02;
--ifm-color-info: #00b3ff;
--ifm-color-success: #00d663;
--ifm-color-warning: #ffe671;
--ifm-color-danger: #ff696d;

/* Typography */
--ifm-font-family-base:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
--ifm-font-family-monospace: "Roboto Mono", "Monaco", "Consolas", "Courier New", monospace;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

/* Background and text colors */
--ifm-background-color: #ffffff;
--ifm-navbar-background-color: #ffffff;
--ifm-footer-background-color: #1d2026;
--ifm-footer-color: #ffffff;

/* Code highlighting */
--docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.1);

/* Custom properties for components */
--ifm-navbar-shadow: 0 1px 3px rgba(29, 32, 38, 0.1);
--ifm-button-border-radius: 8px;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
/* Dark mode colors using Hoverkraft palette */
[data-theme="dark"] {
--ifm-color-primary: #00aaff;
--ifm-color-primary-dark: #0099ee;
--ifm-color-primary-darker: #0088d4;
--ifm-color-primary-darkest: #007acc;
--ifm-color-primary-light: #1bb5ff;
--ifm-color-primary-lighter: #33c0ff;
--ifm-color-primary-lightest: #66d1ff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-color-primary: #1998ff;
--ifm-color-primary-dark: #0585e6;
--ifm-color-primary-darker: #0580db;
--ifm-color-primary-darkest: #046ab5;
--ifm-color-primary-light: #33abff;
--ifm-color-primary-lighter: #40b0ff;
--ifm-color-primary-lightest: #66c2ff;

/* Dark theme background */
--ifm-background-color: #1d2026;
--ifm-background-surface-color: #252832;

/* Dark theme text */
--ifm-font-color-base: #ffffff;
--ifm-font-color-secondary: #506690;

/* Dark theme navbar */
--ifm-navbar-background-color: #252832;
--ifm-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

/* Code highlighting for dark mode */
--docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.2);
}

/* Enhanced button styles with Hoverkraft branding */
.button--primary {
background: linear-gradient(45deg, #1998ff, #ff5a02);
border: none;
transition: all 0.3s ease;
}

.button--primary:hover {
background: linear-gradient(45deg, #0585e6, #e64a00);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(25, 152, 255, 0.3);
}

/* Navbar enhancements */
.navbar {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .navbar {
background: rgba(37, 40, 50, 0.95) !important;
}

/* Footer styling with Hoverkraft colors */
.footer--dark {
background: linear-gradient(135deg, #1d2026 0%, #252832 100%);
}

/* Custom link colors */
a {
color: #1998ff;
}

a:hover {
color: #ff5a02;
text-decoration: none;
}

/* Enhanced focus states for accessibility */
button:focus,
.button:focus,
a:focus {
outline: 2px solid #1998ff;
outline-offset: 2px;
}

/* Code block enhancements */
.prism-code {
border-radius: 8px;
}

/* Table of contents styling */
.table-of-contents__link {
color: #506690;
}

.table-of-contents__link:hover,
.table-of-contents__link--active {
color: #1998ff;
}

/* Demo styles for showcasing theme features */
Expand Down Expand Up @@ -63,9 +178,9 @@
}

.color-swatch--secondary {
background-color: var(--hk-color-secondary, #6c757d);
background-color: var(--ifm-color-secondary);
}

.color-swatch--accent {
background-color: var(--hk-color-accent, #ff6b35);
background-color: var(--hk-accent);
}
116 changes: 104 additions & 12 deletions packages/docs/src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
:root {
--homepage-hero-gradient: linear-gradient(
135deg,
rgba(0, 122, 204, 0.95) 0%,
rgba(0, 170, 255, 0.95) 100%
);
--homepage-hero-gradient: linear-gradient(135deg, #1d2026 0%, #506690 50%, #1998ff 100%);
}

.heroBanner {
Expand All @@ -20,6 +16,18 @@
overflow: hidden;
}

.heroBanner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.2;
pointer-events: none;
}

.heroBanner::after {
content: "";
position: absolute;
Expand Down Expand Up @@ -48,6 +56,17 @@
color: rgba(255, 255, 255, 0.92);
}

/* Respect user motion preferences for animations */
@media (prefers-reduced-motion: no-preference) {
.heroTitle {
animation: fadeInUp 0.6s ease-out backwards;
}

.heroSubtitle {
animation: fadeInUp 0.7s ease-out 0.1s backwards;
}
}

.heroButtons {
display: flex;
flex-wrap: wrap;
Expand All @@ -57,6 +76,21 @@

.heroButtons a {
min-width: 190px;
transition: all 0.3s ease;
}

/* Respect user motion preferences for hover effects */
@media (prefers-reduced-motion: no-preference) {
.heroButtons a:hover {
transform: translateY(-2px);
}
}

/* Respect user motion preferences for animations */
@media (prefers-reduced-motion: no-preference) {
.heroButtons {
animation: fadeInUp 0.8s ease-out 0.3s backwards;
}
}

.section {
Expand Down Expand Up @@ -87,8 +121,9 @@
border-radius: calc(var(--ifm-global-radius) * 1.5);
padding: 1.75rem;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
background: var(--ifm-color-content-secondary, #ffffff);
}

Expand All @@ -99,7 +134,38 @@

.featureCard:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0 16px 30px rgba(25, 152, 255, 0.2);
border-color: #1998ff;
}

/* Respect user motion preferences for animations */
@media (prefers-reduced-motion: no-preference) {
.featureCard {
animation: fadeInUp 0.6s ease-out backwards;
}

.featureCard:nth-child(1) {
animation-delay: 0.1s;
}

.featureCard:nth-child(2) {
animation-delay: 0.2s;
}

.featureCard:nth-child(3) {
animation-delay: 0.3s;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.featureTitle {
Expand Down Expand Up @@ -127,6 +193,32 @@
position: relative;
overflow: hidden;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}

/* Respect user motion preferences for animations and hover effects */
@media (prefers-reduced-motion: no-preference) {
.swatch {
animation: fadeInUp 0.6s ease-out backwards;
will-change: transform;
}

.swatch:nth-child(1) {
animation-delay: 0.1s;
}

.swatch:nth-child(2) {
animation-delay: 0.2s;
}

.swatch:nth-child(3) {
animation-delay: 0.3s;
}

.swatch:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}
}

.swatch span {
Expand Down Expand Up @@ -163,14 +255,14 @@
margin-top: 4rem;
padding: 2rem;
border-radius: calc(var(--ifm-global-radius) * 1.5);
background: rgba(0, 122, 204, 0.1);
border: 1px solid rgba(0, 122, 204, 0.2);
background: linear-gradient(135deg, rgba(25, 152, 255, 0.1), rgba(255, 90, 2, 0.05));
border: 1px solid rgba(25, 152, 255, 0.3);
text-align: center;
}

[data-theme="dark"] .callout {
background: rgba(0, 170, 255, 0.1);
border-color: rgba(0, 170, 255, 0.2);
background: linear-gradient(135deg, rgba(25, 152, 255, 0.15), rgba(255, 90, 2, 0.1));
border-color: rgba(25, 152, 255, 0.4);
}

.calloutTitle {
Expand Down
Loading
Loading