seblammers / awesome-svelte-and-d3-website

Frontend code for a site to find awesome data visualization projects that were created with Svelte & D3
https://awesome-svelte-and-d3.netlify.app/
Creative Commons Zero v1.0 Universal
6 stars 0 forks source link

Improvement/refactor card #6

Closed seblammers closed 2 years ago

seblammers commented 2 years ago

I changed the overall style of the cards and added "buttons" for the external links.

Tags are now displayed and can be hovered, but there is no action implemented yet when they are clicked. (My idea is that in the future, there will be a filter-input element on the projects-page, where you can type in tags or where tags appear that you click on in the respective project-cards.)

I also changed they way the cards are displayed relative to each other. They now always line up and also they parts within each card lines up with it's neighbour.

I added the "red" as a variable in _vars.scss and reference it here as well in the :hover-styles.

Let me know what you think of the new style. More details revealed by default, as you suggested 👍 .

The super large "see all projects" button could be handled differently (maybe half as large when viewed on desktop?), but for now I wanted to have it there as a starting point.

netlify[bot] commented 2 years ago

Deploy Preview for comfy-clafoutis-1193a0 ready!

Name Link
Latest commit 3c9814bfecacdc86dac17c7ad0be1129d75ce3f1
Latest deploy log https://app.netlify.com/sites/comfy-clafoutis-1193a0/deploys/6364207ed2c6a5000a0ce365
Deploy Preview https://deploy-preview-6--comfy-clafoutis-1193a0.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

leandrocollares commented 2 years ago

Great job on the cards!

I think the buttons are quite distracting and we may have to reduce their visual weights. Conversely, the tags are very inconspicuous and people with visual or cognitive disabilities will probably have difficult reading the text.