search

processing / processing-pi-website

Files for the pi.processing.org subdomain that documents Processing on the Raspberry Pi
https://pi.processing.org/
16 stars 10 forks source link

Custom design for Tutorials overview page #13

Closed gohai closed 6 years ago

gohai commented 6 years ago

Thinking that some tiles with some subtle interaction on hover could be nice for this.

I'll look some more, but I came across e.g.: https://codepen.io/chrisgrabinski/pen/gpqtc (the first one on the top left looks appealing to me, the rest is a bit too gimmicky IMHO)

Food for thought after the first tutorial!

msurguy commented 6 years ago

@gohai I've created a test setup for this feature in this branch: https://github.com/processing/processing-pi-website/tree/feature-tutorial-grid

Here's the example of how it looks like on desktop:

screen shot 2018-08-02 at 11 15 25 am

Let me know if this is what you were imagining or along those lines?

The gist of this feature is in _tutorials-list.scss file if you want to play with colors and paddings and other details.

gohai commented 6 years ago

@msurguy Looks fantastic. Is this ready for merging?

On Thu 2. Aug 2018 at 11:18, Maksim Surguy notifications@github.com wrote:

@gohai https://github.com/gohai I've created a test setup for this feature in this branch: https://github.com/processing/processing-pi-website/tree/feature-tutorial-grid

Here's the example of how it looks like on desktop: [image: screen shot 2018-08-02 at 11 15 25 am] https://user-images.githubusercontent.com/585833/43602712-9a03e610-9645-11e8-9157-633fcb3fa063.png

Let me know if this is what you were imagining or along those lines?

The gist of this feature is in _tutorials-list.scss file if you want to play with colors and paddings and other details.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/processing/processing-pi-website/issues/13#issuecomment-410020978, or mute the thread https://github.com/notifications/unsubscribe-auth/AEt2K7P84zXiBDBLcHS82b3SAA92IM9Dks5uM0JygaJpZM4U8UPg .

msurguy commented 6 years ago

@gohai almost ready. I wanted to show this to you before I dig in too deep. Now I have to come up with a way of how to get the individual tutorial info and populate the list, should be done today!

msurguy commented 6 years ago

@gohai the PR is now ready to go. We need to decide what kind of images (photos vs sketch vs something else) we want to use for the thumbnails. Currently I'm using photos. The aspect ratio should be 16x9.

gohai commented 6 years ago

Done! Congrats!