refactor: cleanup stylesheet

[CaiJimmy]

Did some code cleanup using AI:

1. Resolved Issues

Unused styles removed:

• CSS Variable: --shadow-l4 removed from variables.scss.
• CSS Class: .flex.column removed from grid.scss.

Redundant definitions cleaned:

• Shadow Variables: --shadow-l3 was identical to --shadow-l2. All references to --shadow-l3 (e.g., in cookies.scss have been updated to use --shadow-l2, and --shadow-l3 has been removed.
• Hamburger Colors: Consolidated active hamburger menu colors in menu.scss. The redundant #000 background was removed in favor of the existing themed --accent-color.
• Hamburger Hover: Removed redundant .hamburger.is-active:hover rule (duplicate of .hamburger:hover).
• Cookie Banner: Removed redundant width: auto property in the medium breakpoint block for .cookie-banner__settings-link.
• Pre-rendering Defaults: Removed redundant global definitions for --pre-background-color and --pre-text-color since they are always redefined within color scheme blocks.
• Article Layout: Removed redundant margin: initial in .highlight pre.

Standardized Styles:

• Flex-direction: Fixed a non-standard flex-direction: unset value in grid.scss, replacing it with the standard row.

2. Refactoring & Optimization

Card Style Abstraction

A new shared mixin, card-style, was created in assets/scss/mixins.scss:

@mixin card-style {
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--card-border-radius);
}

This mixin is now used across:

• .article-list article
• .article-list--compact
• .article-list--tile article

This significantly reduces code duplication and ensures visual consistency for card-based elements.

Highlight Block Optimization

In layout/article.scss, redundant background colors were cleaned up for code highlight blocks by setting the inner pre background to transparent when a parent .highlight container already has the background applied.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hugo-theme-stack	269a851	Commit Preview URL Branch Preview URL	Mar 05 2026, 09:39 AM

[Copilot]

Pull request overview

Refactors the SCSS codebase to remove unused/redundant rules and centralize repeated “card” styling, aiming to reduce duplication and improve consistency across components.

Changes:

• Removed unused CSS variables/classes and consolidated redundant definitions (shadows, hamburger states, grid flex-direction).
• Introduced a shared card-style mixin and replaced repeated card declarations with the mixin.
• Simplified highlight/code-block backgrounds by making nested pre transparent inside .highlight.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
assets/scss/variables.scss	Removes unused shadow vars and redundant pre-color defaults.
assets/scss/style.scss	Imports new mixins.scss so mixins are available to partials.
assets/scss/mixins.scss	Adds shared card-style mixin to reduce duplicated card declarations.
assets/scss/partials/article.scss	Applies card-style mixin to article list variants; minor hover styling change.
assets/scss/partials/cookies.scss	Replaces repeated card props with mixin; updates shadow var usage and removes redundant width.
assets/scss/partials/layout/article.scss	Makes inner pre transparent inside .highlight; removes redundant margin rule.
assets/scss/partials/menu.scss	Removes redundant active/hover hamburger rules in favor of existing themed styling.
assets/scss/grid.scss	Removes unused .flex.column; standardizes flex-direction to row at md breakpoint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.