I apologize in advance for such a large PR - I’m normally one to try and
make PRs as small as possible 😅
While starting to tackle the creation of linter/language landing pages
I found the CSS to be working against me more than being helpful. I started
making small improvements to help me but quickly realized that for such a
small website it’d be quickest to tackle this in one big set of changes.
The design is mostly the same with a few exceptions and improvements,
which I’ve highlighted below.
What’s done in this PR…
Organize styles using ITCSS (inverted triangle CSS) and use
class namespaces (i.e. c- for components, o- for objects)
Detach styles from being named after the ‘home’ page - making them
more reusable and descriptive of their purpose
Leverage CSS Custom Properties for better color management and
component variants
This also opens the door for spinning-up themed landing pages,
where the design can be unique to linter, for example
New styles do not need the Bourbon and Neat Sass libraries, so we
could potentially drop these dependencies
Add and use the active_link_to gem which improves the accessibility of
navigation links by outputting the aria-current attribute on the
current page link
Use Rails Internationalization
Use WebP images (progressively-enhanced)
Improve accessibility with better heading hierarchy, added image alt
text, and labeling page landmarks
I found this section hard to parse for how little info it needed to get across:
The open source section and card is fully gray, but the private repo cards were a mix of purple and gray - being more consistent makes the whole thing easier on the eyes to comprehend that color means something here
Duplicative ‘Open Source’ and ‘Public Repos’ text
Colors felt washed out
Pricing section after
Cards are in order starting with the cheapest
The whole section is much smaller
Configuration section before
The alignment felt off here with the rest of the page and I didn’t think the graphic added much, so simplified this to be just text.
Configuration section after
Code quality section before
We use flat colors everywhere, so this gradient felt out of place.
I apologize in advance for such a large PR - I’m normally one to try and make PRs as small as possible 😅
While starting to tackle the creation of linter/language landing pages I found the CSS to be working against me more than being helpful. I started making small improvements to help me but quickly realized that for such a small website it’d be quickest to tackle this in one big set of changes.
The design is mostly the same with a few exceptions and improvements, which I’ve highlighted below.
What’s done in this PR…
c-for components,o-for objects)aria-currentattribute on the current page linkHighlighted changes
See the whole thing here: https://staging.houndci.com
Hero before
Hero after
Tightened-up and slightly heavier typography
Pricing section before
I found this section hard to parse for how little info it needed to get across:
Pricing section after
Configuration section before
The alignment felt off here with the rest of the page and I didn’t think the graphic added much, so simplified this to be just text.
Configuration section after
Code quality section before
We use flat colors everywhere, so this gradient felt out of place.
Code quality section after