search

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

fluid grid FTW #15

Closed seblammers closed 1 year ago

seblammers commented 1 year ago

This introduces fluid grid (https://utopia.fyi/grid/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12).

It's a nice addition to our use of fluid type and fluid space.

I had the urge to introduce this because I noticed that when filtering Project Cards and only 1 remains, it becomes very large.... It basically filled the entire space. So I went back to look at our grid-implementation, but used the opportunity to start from scratch.

But I just noticed a new issue on mobile that needs to be fixed before merging:

grafik

No margin on the right side???

netlify[bot] commented 1 year ago

Deploy Preview for comfy-clafoutis-1193a0 ready!

Name Link
Latest commit 4db1c6ebe9950712867b2283ea61cf6dad00aafc
Latest deploy log https://app.netlify.com/sites/comfy-clafoutis-1193a0/deploys/63d7acd217ef3b00086cc1c2
Deploy Preview https://deploy-preview-15--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.

seblammers commented 1 year ago

Fixed:

grafik

I'm done with this PR now. Let me know what you think 🙂

seblammers commented 1 year ago

Please note, that the next PR takes everything a step further and assumes this PR was merged. Especially the overall design is more balanced and consistent in the next PR ;)

leandrocollares commented 1 year ago

The single card on big-screen devices was definitely overpowering. The grid layout introduced addresses that issue and works smoothly on different screen sizes.