@gurupanguji

Technical Specification: Fix link color regression and adopt shared prose link styles (Issue #225)

Overview

This specification addresses Issue #225 (and completes #221). The goal is to restore the lost .prose-copy utility class for narrative link styling in assets/css/style.css, apply it to the regressed reviews/index.html intro text, and roll it out to the narrative sections in about/index.html.

Goals

1. Add --prose-link and --prose-link-hover variables to the global stylesheet.
2. Define .prose-copy a styles for consistent editorial links in narrative text outside of blog posts.
3. Fix the regression in reviews/index.html.
4. Complete the original intent of Issue #221 by styling the about/index.html copy with .prose-copy.

Technical Architecture

1. CSS Variables

• File: assets/css/style.css
• Light Mode (:root):
  • --prose-link: #b61a1f
  • --prose-link-hover: #d1292f
• Dark Mode (html[data-theme="black"]):
  • --prose-link: #c9a36f
  • --prose-link-hover: #dfba86

2. The .prose-copy Utility Class

• File: assets/css/style.css
• Rule:

  .prose-copy a {
    color: var(--prose-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
  }
  .prose-copy a:hover,
  .prose-copy a:focus-visible {
    color: var(--prose-link-hover);
    text-decoration-color: currentColor;
  }
  

3. Review Index Fix

• File: reviews/index.html
• Action: Add prose-copy to the <p class="page-intro"> tag.

4. About Page Enhancement

• File: about/index.html
• Action: Remove the a and a:hover styles from the <style> block.
• Action: Add prose-copy to <p class="lead"> and to the div.highlight-item p blocks, or wrap the whole <main> or relevant sections in a div/class. Since there are non-prose links in the header/footer, we must target specifically the .lead, .section, and .highlight-item p elements. Adding .prose-copy to <p class="lead"> and <section class="section"> (or just to .highlight-item p) works best to avoid styling buttons/cards.

Testing Strategy

1. Run bundle exec jekyll build.
2. Visually or syntactically verify that reviews/index.html and about/index.html contain the .prose-copy class where appropriate.
3. Ensure global styles are clean.