GDGC-MET / GDGC-MET/Codefolio-WEB

Multiple syntax errors and invalid properties in CSS rules causing rendering issues and potential browser inconsistencies

Open
#30 0 comments 0 reactions 1 assignee Claimed by @sushant-cloud View on GitHub
bug
Dominant language
CSS
Stars
2
Forks
32
PR merge metrics
No merged PRs in 30d

Description

CSS Code Issue Report
Issue Title:
Multiple syntax errors and invalid properties in CSS rules causing rendering issues and potential browser inconsistencies

Issue Description:
While reviewing the provided CSS codebase for the portfolio website, several critical syntax errors, invalid property values, and structural issues were identified. These could lead to broken animations, incorrect styling, failed media queries, and overall layout disruptions across browsers (e.g., Chrome, Firefox, Safari). The issues span various sections like gradients, animations, media queries, and overlays. Below is a detailed breakdown:

1. **Invalid Gradient Syntax in `:root` and Related Rules**:
- In `:root`, the `--gradient` variable is defined as: `linear-gradient(135deg, var(--primary), var(--secondary),));`
- **Problem**: There's an extra closing parenthesis `))` at the end, making the declaration invalid. This will cause the CSS parser to ignore the entire variable, leading to fallback to default colors or no gradient at all in elements using `var(--gradient)`.
- **Impact**: Affects multiple elements like `.logo-text`, `.highlight`, `.cta-button.primary`, `.skill-card::before`, and `.back-to-top`, resulting in plain colors instead of the intended gradient effect.
-**Use of AI has been done to fix the issue
- **Fix Suggestion**: Remove the extra `)`: `--gradient: linear-gradient(135deg, var(--primary), var(--secondary));`
- Similar issue in `.skills-bg`: `background: linear-gradient 45deg, var(--primary), var(--secondary), var(--accent);`
- **Problem**: Missing opening parenthesis after `linear-gradient` (should be `linear-gradient(45deg, ...)`). This invalidates the background, causing it to fall back to a solid color or none.
- **Impact**: The animated background in the skills section won't render properly, breaking the subtle gradient shift animation.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.