Made changes as per the super-linter workflow errors

[navyansh007]

resolves #772

[gemini-code-assist]

Summary of Changes

Hello @navyansh007, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on resolving super-linter workflow errors by implementing a series of stylistic and standardization changes across the frontend CSS files. The primary goal is to ensure the stylesheets adhere to modern CSS best practices, improve code consistency, and enhance overall readability, without altering the visual presentation or functionality of the application.

Highlights

• CSS Color Format Standardization: Color values in custom.css and gh-fork-ribbon.css have been standardized. This includes shortening hex codes (e.g., #ffffff to #fff) and updating rgba() function calls to the more modern rgb() with slash notation for alpha transparency (e.g., rgba(48, 48, 48, 0.95) to rgb(48 48 48 / 95%)).
• Removal of CSS Vendor Prefixes: Outdated vendor prefixes (-webkit-, -moz-, -ms-, -o-) for properties like box-sizing, transform, background-image, and box-shadow have been removed from gh-fork-ribbon.css, streamlining the stylesheet for modern browser compatibility.
• Improved CSS Readability: Blank lines have been added between various CSS rules and declarations across custom.css, gh-fork-ribbon.css, and tailwind.css to enhance code readability and maintainability.
• Pseudo-element Syntax Update: The syntax for pseudo-elements in gh-fork-ribbon.css has been updated from single-colon (:before, :after) to double-colon (::before, ::after), aligning with modern CSS standards.
• Tailwind CSS Import Syntax Adjustment: The @import rule for Tailwind CSS in tailwind.css has been updated from @import 'tailwindcss'; to @import url('tailwindcss');.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[deepsource-io]

Here's the code health analysis summary for commits 0e092d5..08a8e45. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
Python	✅ Success		View Check ↗
Secrets	✅ Success		View Check ↗
Shell	✅ Success		View Check ↗
Docker	✅ Success		View Check ↗
JavaScript	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[jbampton]

Hey @navyansh007 I sent you an invite to join the Brisbane Social Chess GitHub Organization.

The invite will go to your email.

Thanks once again 💯

[gemini-code-assist]

Code Review

This pull request addresses several linting errors in the CSS files, primarily by modernizing syntax, improving formatting, and removing obsolete vendor prefixes. The changes are beneficial for code quality and maintainability. I've added a few suggestions in frontend/assets/styles/gh-fork-ribbon.css to further simplify some complex CSS selectors using the :is() pseudo-class, which can enhance readability.

[gemini-code-assist]

For improved readability and maintainability, you could simplify this complex selector using the :is() pseudo-class. This would make the selector list shorter and easier to understand.

.github-fork-ribbon:is(.left-top, .left-bottom)::before,
.github-fork-ribbon:is(.left-top, .left-bottom)::after {
	right: auto;
	left: -3.23em;
}

[gemini-code-assist]

Similar to the previous suggestion, you can use the :is() pseudo-class here to simplify the selector list, which enhances code clarity.

.github-fork-ribbon:is(.left-bottom, .right-bottom)::before,
.github-fork-ribbon:is(.left-bottom, .right-bottom)::after {
	top: auto;
	bottom: 3.23em;
}

[gemini-code-assist]

Again, applying the :is() pseudo-class can make this selector more concise and easier to read.

.github-fork-ribbon:is(.left-top, .right-bottom)::before,
.github-fork-ribbon:is(.left-top, .right-bottom)::after {
	transform: rotate(-45deg);
}

[jbampton]

https://github.com/brisbanesocialchess/brisbanesocialchess.github.io/actions/runs/18218962079/job/51874506216?pr=787

Are we able to fix the rest of the CSS errors ?

[navyansh007]

Hey @jbampton , seems most of the issues have been resolved, just a few more are left. Gonna resolve these ASAP, making this one ready to merge

[navyansh007]

Hey @jbampton
Seems like all fixable CSS linting errors have been resolved in custom.css and gh-fork-ribbon.css. The remaining 4 errors in tailwind.css are for @tailwind and @theme at-rules, which are required Tailwind CSS directives that cannot be removed or changed. These are flagged because stylelint doesn't recognize Tailwind's custom syntax by default.

In this case, what you can do is to add a .stylelintrc.json configuration file to the repository, which will ignore these required directives, resolving errors with the CSS linting workflow. Would you like me to do that as well?

[jbampton]

Yes please add the .stylelintrc.json in this PR.

[navyansh007]

Hey @jbampton, I have now added a .stylelintrc.json file that ignores the at-rules in tailwind.css file. Hence, the CSS linter should not throw any errors now.

[jbampton]

pre-commit is failing