Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/chrisdzasc/Time-Tracking-Dashboard/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Time Tracking Dashboard uses CSS custom properties (CSS variables) for easy theming and customization. All design tokens are defined in styles.css:26-55, making it simple to create your own color schemes and adjust spacing throughout the application.

​
Color Customization

​
Available Color Variables

The dashboard defines color variables in styles.css:26-49. Here are all available colors: 
:root {
    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);

    --navy-200: hsl(236, 100%, 87%);
    --navy-800: hsl(235, 41%, 34%);
    --navy-900: hsl(235, 46%, 20%);
    --navy-950: hsl(226, 43%, 10%);

    --orange: hsl(15, 100%, 70%);

    --purple-500: hsl(235, 45%, 61%);
    --purple-600: hsl(246, 80%, 60%);
    --purple-700: hsl(264, 64%, 52%);

    --blue: hsl(195, 74%, 62%);

    --pink: hsl(348, 100%, 68%);

    --green: hsl(145, 58%, 55%);

    --yellow: hsl(43, 84%, 65%);

    --grey: hsl(0, 0%, 85%);
}

​
Changing the Background Color

The main background uses --navy-950 (see styles.css:183). To change it: Before: 
:root {
    --navy-950: hsl(226, 43%, 10%);
}
After (darker background): 
:root {
    --navy-950: hsl(226, 43%, 5%); /* Darker */
}

​
Customizing Activity Card Colors

Each activity has its own background color (styles.css:312-356). Modify these to match your brand: Work Card (currently orange): 
:root {
    --orange: hsl(15, 100%, 70%); /* Default */
    --orange: hsl(200, 100%, 60%); /* Custom: Blue theme */
}
Play Card (currently blue): 
:root {
    --blue: hsl(195, 74%, 62%); /* Default */
    --blue: hsl(280, 74%, 62%); /* Custom: Purple theme */
}
Use HSL color format for easier adjustments. Change the first number (hue) to shift colors, the second (saturation) for vibrancy, and the third (lightness) for brightness.

​
Profile Card Accent Color

The profile card uses --purple-600 for its accent background (styles.css:211): 
:root {
    --purple-600: hsl(246, 80%, 60%); /* Default */
    --purple-600: hsl(200, 80%, 50%); /* Custom: Ocean blue */
}

​
Typography Customization

​
Available Typography Classes

The dashboard uses a type scale system defined in styles.css:125-172: 
.text--p1 {
    font-family: 'Rubik', sans-serif;
    font-size: 5.6rem;
    line-height: 6.6rem;
    font-weight: 300;
}

.text--p2 {
    font-family: 'Rubik', sans-serif;
    font-size: 4.0rem;
    line-height: 4.7rem;
    font-weight: 300;
}

.text--p3 {
    font-family: 'Rubik', sans-serif;
    font-size: 3.2rem;
    line-height: 3.8rem;
    font-weight: 300;
}

.text--p4 {
    font-family: 'Rubik', sans-serif;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: 300;
}

.text--p5-regular {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 400;
}

.text--p5-medium {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 500;
}

.text--p6 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: 400;
}

​
Changing Font Sizes

The project uses a 10px base (html { font-size: 62.5%; } at styles.css:118-120), so 1rem = 10px. Keep this in mind when adjusting sizes.
To increase the size of activity hours (styles.css:299-310): Before: 
.activity-card__hours {
    font-family: 'Rubik', sans-serif;
    font-size: 3.2rem; /* 32px */
    line-height: 3.8rem;
    font-weight: 300;
}
After: 
.activity-card__hours {
    font-family: 'Rubik', sans-serif;
    font-size: 4.0rem; /* 40px - larger */
    line-height: 4.7rem;
    font-weight: 300;
}

​
Changing Font Weights

Make the profile name bolder (styles.css:222-227): Before: 
.profile-card__name {
    font-family: 'Rubik', sans-serif;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: 300; /* Light */
}
After: 
.profile-card__name {
    font-family: 'Rubik', sans-serif;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: 500; /* Medium - bolder */
}
Available font weights: 300 (Light), 400 (Regular), 500 (Medium). These match the font files loaded in styles.css:4-20.

​
Spacing Customization

​
Spacing Scale

Spacing uses a consistent scale defined in styles.css:50-55: 
:root {
    --spacing-100: 0.8rem; /* 8px */
    --spacing-200: 1.6rem; /* 16px */
    --spacing-300: 2.4rem; /* 24px */
    --spacing-400: 3.2rem; /* 32px */
    --spacing-500: 4.0rem; /* 40px */
}

​
Adjusting Card Spacing

Increase gap between activity cards (styles.css:187-192): Before: 
.dashboard {
    display: grid;
    gap: var(--spacing-300); /* 24px */
    width: 87%;
    max-width: 45.0rem;
}
After: 
.dashboard {
    display: grid;
    gap: var(--spacing-400); /* 32px - more space */
    width: 87%;
    max-width: 45.0rem;
}

​
Adjusting Internal Card Padding

Increase padding inside activity cards (styles.css:272-282): Before: 
.activity-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    position: relative;
    z-index: 1;
    padding: var(--spacing-300); /* 24px */
    background-color: var(--navy-900);
    border-radius: 1.5rem;
    transition: background-color .2s ease-in;
}
After: 
.activity-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    position: relative;
    z-index: 1;
    padding: var(--spacing-400); /* 32px - more padding */
    background-color: var(--navy-900);
    border-radius: 1.5rem;
    transition: background-color .2s ease-in;
}

​
Hover Effects and Transitions

​
Activity Card Hover Effect

The activity cards change background on hover (styles.css:284-286): 
.activity-card__info:hover {
    background-color: var(--navy-800);
}
Customize the hover color: 
:root {
    --navy-800: hsl(235, 41%, 34%); /* Default */
    --navy-800: hsl(235, 41%, 40%); /* Lighter hover */
}
Adjust transition speed (styles.css:281): Before: 
transition: background-color .2s ease-in;
After: 
transition: background-color .4s ease-in-out; /* Slower, smoother */

​
Button Hover Effects

Timeframe buttons have a color transition (styles.css:245-257): 
.profile-card__option {
    border: none;
    padding: 0;
    color: var(--purple-500);
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s ease-in-out; /* Transition */
}

.profile-card__option--active,
.profile-card__option:hover {
    color: var(--white); /* Hover color */
}
Make transitions faster: 
.profile-card__option {
    transition: color 0.1s ease-in-out; /* Faster */
}

​
Border Radius Customization

Adjust card roundness throughout the design: Card borders (styles.css:196 and styles.css:212): Before: 
.profile-card {
    background-color: var(--navy-900);
    border-radius: 1.5rem; /* 15px */
}
After: 
.profile-card {
    background-color: var(--navy-900);
    border-radius: 2.0rem; /* 20px - more rounded */
}
Apply the same border-radius to .activity-card__info (styles.css:280) for consistent styling.

​
Complete Custom Theme Example

Here’s a complete example of a dark green theme:
1

Update color variables

:root {
    /* Background colors */
    --navy-950: hsl(160, 43%, 10%); /* Dark green background */
    --navy-900: hsl(160, 46%, 20%); /* Card background */
    --navy-800: hsl(160, 41%, 34%); /* Hover state */
    
    /* Accent color */
    --purple-600: hsl(160, 80%, 40%); /* Green accent */
    
    /* Activity colors */
    --orange: hsl(150, 70%, 50%); /* Bright green */
    --blue: hsl(170, 70%, 50%); /* Cyan */
    --pink: hsl(180, 70%, 50%); /* Aqua */
}
2

Test your changes

Open the dashboard in your browser and verify all colors display correctly. Check hover states and transitions.
3

Adjust contrast if needed

Ensure text remains readable on all backgrounds. Increase lightness values if text is hard to read.

​
Reference

  • Color variables: styles.css:26-49
  • Typography: styles.css:125-172
  • Spacing: styles.css:50-55
  • Activity card styles: styles.css:259-363
  • Hover effects: styles.css:284-286, styles.css:254-257