Skip to main content

​
Overview

CV Staff uses CSS custom properties (CSS variables) for theming, making it easy to customize colors, fonts, spacing, and other visual elements. All theme variables are defined in src/layouts/Layout.astro.

​
CSS Custom Properties

​
Color Palette

​
Primary Colors

--color-primary: #ad0000;          /* Main brand color */
--color-primary-light: #ff9595;    /* Light variant */
--color-primary-dark: #103056;     /* Dark variant */

​
Secondary Colors

--color-secondary: #4caf50;        /* Secondary brand color */
--color-secondary-light: #b9febc;  /* Light variant */
--color-secondary-dark: #175119;   /* Dark variant */

​
Status Colors

--color-alert: #e7b43c;   /* Warning/alert messages */
--color-success: #269a57; /* Success states */
--color-error: #e74c3c;   /* Error states */

​
Neutral Colors

--color-background: #f2f2f2;  /* Page background */
--color-dark: #000;            /* Pure black */
--color-light: #fff;           /* Pure white */
--color-dark-grey: #666;       /* Dark grey text */
--color-light-grey: #cbcbcb;   /* Light grey borders */
--color-text: #222222;         /* Default text color */

​
Utility Colors

--color-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Drop shadow */
--color-overlay: rgba(0, 0, 0, .2);             /* Overlay effect */

​
Typography

​
Font Families

--font-body: 'Onest Variable', sans-serif;  /* Body text */
--font-headline: "Unbounded", sans-serif;   /* Headlines */
--font-monospace: "Courier New", monospace; /* Code */
CV Staff uses Onest Variable font from Fontsource, which supports weights 100-900.

​
Font Sizes

--font-size-base: 16px;       /* Base font size */
--font-size-large: 1.25rem;   /* Large text (20px) */
--font-size-small: .875rem;   /* Small text (14px) */

​
Layout & Spacing

​
Border Radius

--border-radius: 15px;  /* Default border radius */
--rounded: 50%;         /* Fully rounded (circles) */

​
Container Widths

--main-wrapper-xlarge: 1400px;  /* Extra large screens */
--main-wrapper-large: 1200px;   /* Large screens */
--main-wrapper-medium: 1024px;  /* Medium screens */
--main-wrapper-small: 768px;    /* Small screens */

​
Spacing (Gaps)

--gap-small: .5rem;    /* 8px */
--gap-medium: 1rem;    /* 16px */
--gap-large: 2rem;     /* 32px */
--gap-xlarge: 3rem;    /* 48px */

​
Animations

--transition: all .3s ease-in-out;  /* Default transition */

​
Z-Index Layers

--loader-layer: 99999;  /* Loading screens */
--modal-layer: 9999;    /* Modals and dialogs */
--menu-layer: 999;      /* Navigation menus */
--deco-layer: 99;       /* Decorative elements */
--text-layer: 9;        /* Text content */
--base-layer: 1;        /* Base content */
--bg-layer: -1;         /* Background elements */

​
Customizing the Theme

​
Method 1: Edit Layout.astro

The recommended way to customize the theme is by editing src/layouts/Layout.astro:
src/layouts/Layout.astro
<style is:global>
  :root {
    /* Change your primary color */
    --color-primary: #0066cc;
    --color-primary-light: #3399ff;
    --color-primary-dark: #004499;
    
    /* Update fonts */
    --font-body: 'Inter', sans-serif;
    
    /* Adjust spacing */
    --gap-large: 3rem;
  }
</style>

​
Method 2: Override in Component Styles

You can override variables in specific components: 
<style>
  .my-component {
    /* Use theme variables */
    color: var(--color-primary);
    padding: var(--gap-medium);
    border-radius: var(--border-radius);
  }
  
  /* Override for this component only */
  .my-component.special {
    --color-primary: #ff0000;
  }
</style>

​
Special Effects

​
Glassmorphism Cursor

CV Staff includes a custom glassmorphism cursor effect: 
.cursor-outline {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(173, 0, 0, 0.2);
}
The custom cursor is automatically hidden on touch devices (max-width: 1024px) and for users who prefer reduced motion.

​
Customizing the Cursor

To change the cursor color, modify the box-shadow values in Layout.astro:168-182: 
.cursor-outline {
  /* Change the red (173, 0, 0) to your primary color RGB */
  box-shadow: 0 8px 32px 0 rgba(YOUR_R, YOUR_G, YOUR_B, 0.2);
}

​
Accessibility Features

CV Staff includes a skip-to-content link for keyboard navigation: 
.skip-link {
  position: absolute;
  top: -3rem;
  background: var(--color-primary);
  color: var(--color-light);
}

​
Focus Styles

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

​
Reduced Motion

The theme respects user motion preferences: 
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .cursor-outline,
  .cursor-dot {
    display: none !important;
  }
}

​
Responsive Design

The theme includes responsive breakpoints: 
@media (max-width: 1024px) {
  /* Tablet and mobile styles */
  .cursor-outline,
  .cursor-dot {
    display: none !important;
  }
}

​
Best Practices

Use Variables

Always use CSS custom properties instead of hardcoded values for consistency.

Test Accessibility

Ensure color contrast ratios meet WCAG standards when changing colors.

Mobile First

Test your customizations on mobile devices and different screen sizes.

Maintain Performance

Avoid adding heavy animations or effects that could impact performance.

​
Example: Dark Mode

To add a dark mode, you could extend the CSS variables: 
:root {
  /* Light mode (default) */
  --color-background: #f2f2f2;
  --color-text: #222222;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode */
    --color-background: #1a1a1a;
    --color-text: #e0e0e0;
  }
}

​
Next Steps

Profile Data

Configure your personal and professional information

Environment Variables

Set up API keys and environment configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us