ColivingLiguria

Apply Now

Link Styling Reference

2 min read

Link Styling for ColivingLiguria Web Applications

This document defines the standard link styling used across ColivingLiguria web applications to maintain visual consistency with the main Quartz website.

Visual Properties

  • Color: rgb(143, 168, 118) (Sage green)
  • Background: rgba(212, 163, 115, 0.15) (Light tan with transparency)
  • Padding: 2px 4px
  • Border Radius: 3px
  • Text Decoration: None (default), underline on hover
  • Transition: All properties transition smoothly over 0.2s

Hover State

  • Text Decoration: Underline
  • Background: rgba(212, 163, 115, 0.25) (Slightly darker tan)

CSS Implementation

.quartz-link {
    color: rgb(143, 168, 118);
    background-color: rgba(212, 163, 115, 0.15);
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.2s ease;
}
 
.quartz-link:hover {
    text-decoration: underline;
    background-color: rgba(212, 163, 115, 0.25);
}

Usage Examples

Candidate Register

Used in Step 3 (Joining & Skills) to link to:

  • Volunteer Offer page: https://colivingliguria.pages.dev/Houses/Chiappella/Volunteer-Offer
  • Openings page: https://colivingliguria.pages.dev/People/Openings/Openings
  • Individual role pages: https://colivingliguria.pages.dev/People/Openings/Roles/{Role-Name}
<a href="https://colivingliguria.pages.dev/People/Openings/Openings" 
   target="_blank" 
   class="quartz-link">Open Positions</a>

Typography

Font Family

  • Primary: Tinos (serif)
  • Code: JetBrains Mono (monospace)

Font Weights

  • Normal text: 400
  • Bold/Headers: 600-700

Color Palette Reference

  • Primary Link: rgb(143, 168, 118) - Sage green
  • Link Background: rgba(212, 163, 115, 0.15) - Light tan

Text Colors

  • Primary Text: Dark gray/black (from Quartz theme)
  • Secondary Text: var(--text-light) - Lighter gray

Design Principles

  1. Consistency: All external links to ColivingLiguria pages should use the quartz-link class
  2. Accessibility: Ensure sufficient contrast ratios for readability
  3. Responsiveness: Links should be tappable on mobile (minimum 44x44px touch target)
  4. Visual Hierarchy: Use link styling to guide users to important resources

Integration Notes

When integrating with Quartz-generated pages:

  • Match the color scheme defined in quartz.config.ts
  • Use Tinos font for body text
  • Apply subtle backgrounds to create visual distinction
  • Maintain consistent hover effects across all interactive elements

Graph View