Adding Repositories landing page to the project

[heliomar-pena]

DRAFT

This PR is just a DRAFT, I was working on it but feel tired so I leave it as it was. I know it requires a lot of improvements before be ready for merge. For example I noticed late that we could import the CSS files on layout as was required and not import all CSS files on styles file as I did.

Discard

UI / UX can change on a future, this PR is in order to introduce a first step on the development of the FRONT END of the application, performing changes that was required from my point of view but that we will not take care of that until we actually develop something on the F.E

Colors, Spacing, Borders, Shadows, etc... was added on CSS variable for easy switching them when we decide a style for the project

Summary

• Added partials path on server/index.js
• Added some variables to CSS styles file
• Added structure folders for CSS files
• Created some utils modificables with CSS variables
• Added new partial "repository" and styles for it
• Added new rules for stylelint:

This pattern will enforce the use of lowercase letters, digits, hyphens for blocks, elements, and modifiers. Double underscores are used to separate blocks from elements, and double hyphens are used to separate blocks/elements from modifiers.

Made for BEM methodology use on Selectors

        "selector-class-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)*(__[a-z0-9]+([a-z0-9-]+[a-z0-9]+)*)?(--[a-z0-9]+([a-z0-9-]+[a-z0-9]+)*)?$",

---

Allow to use vars into RGB / RGBA / HSL / any other color function notation, also uses the syntax: rgb(0,0,0) instead of rgb(0-0-0) or rgb(0 0 0)

        "color-function-notation": [
            "legacy",
            {
                "ignore": [
                    "with-var-inside"
                ]
            }
        ],

---

Allow to use fractions instead of percentages on ALPHA value on color functions

70% -> 0.7

         "alpha-value-notation": "number"

Evidences

[watermelon-copilot-for-code-review]

Watermelon AI Summary

This PR initiates the frontend setup for a new repository landing page by structuring CSS folders, establishing BEM-conformant style rules, and accommodating dynamic styling with CSS variables, reflecting a focus on maintainable and scalable front-end architecture.

GitHub PRs

• #11 - Adding Repositories landing page to the project - By victor-heliomar Just now

• #14 - [SPIKE] Find opportunities to improve css - By victor-heliomar 8 months ago

• #35 - [SPIKE] List opportunities to extract repeated styles in CSS - By Franceliis 8 months ago

qa-exposed-server is an open repo and Watermelon will serve it for free.
🍉🫶
Why not invite more people to your team?