Styling issues Tutorial

[ccanash]

DESKTOP 1280x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• [x] Add padding above and below in the header section - applies for all resolutions
• [x] In the images preview for all sub sections: reduce the spacing between the image title and subtitle. For example: between Get Started and A tutorial that [..]
• [x] Remove grey line at the bottom of the page above the footer. Applies for all resolutions

2. Tutorials sub pages: https://p5js-wip.online/tutorials/get-started/

• [x] The language, accessibility and search buttons are pink and should be brownish/gray like the color in the header of the tutorial main page
• [x] At the bottom, related examples should have a line above and below, same for related references.
• [x] The image that is a preview on the tutorials main page for each tutorial should appear at the top of each sub page. Applies for all resolutions. IT doesn't happen for get-started for example.

TABLET 768x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• [x] In the header: Subtitle should be 24px and it is 30 px

2. Tutorials sub pages: https://p5js-wip.online/tutorials/get-started/

• [x] In the color-gradients tutorial the example code overflows the grey section to the right: https://p5js-wip.online/tutorials/color-gradients/ . . This happens also for mobile resolution.

MOBILE 428x800

1. Tutorials main page: https://p5js-wip.online/tutorials/

• [x] the description below each image should be 10px (but might be too small? ) It is currently 12px.

[stalgiag]

Thank you!

The image that is a preview on the tutorials main page for each tutorial should appear at the top of each sub page. Applies for all resolutions. IT doesn't happen for get-started for example.

Not sure if this is the case since those images are different. I think that it makes more sense to leave this decision to the authors of the blog content but pulled it out to highlight it.

[davepagurek]

Also, just noticed that the code snippets in tutorials no longer have JS syntax highlighting. @Qianqianye I see that in the Figma, tutorials don't have highlighting while examples do. Do you think it makes sense to just have highlighting everywhere? The code snippets in some tutorials are quite long, and I find them more difficult to read without it.

[davepagurek]

• [x] On Firefox mobile on Android, the code font doesn't seem to load, defaulting to a serif font. (This works in mobile Chrome and desktop Firefox though 🤔)

[davepagurek]

• [x] The breadcrumbs on a tutorial page show the name of the tutorial twice. Should the first one be "Tutorials"?

Also, is the title slightly shifted to the right relative to the body content in the above image?

[stalgiag]

Also, just noticed that the code snippets in tutorials no longer have JS syntax highlighting. @Qianqianye I see that in the Figma, tutorials don't have highlighting while examples do. Do you think it makes sense to just have highlighting everywhere? The code snippets in some tutorials are quite long, and I find them more difficult to read without it.

Yes I actually worked pretty hard to get this styling in place. By default the Astro builder applies a nice dark theme to any bigger code blocks. I agree that it is easier to read and I would've preferred to not strip out the syntax highlighting but it was done in order to match the Figma mockups. It could easily be reverted

[stalgiag]

The image that is a preview on the tutorials main page for each tutorial should appear at the top of each sub page. Applies for all resolutions. IT doesn't happen for get-started for example.

I think this isn't necessarily implied from the designs though it is a little ambiguous. The images are similar but different in the Figma mockups and I think it better to leave flexibility to tutorial authors on whether they want a featured image at the top. Going to mark this one as done.

[ccanash]

Closing as all items have been addressed, including elements flagged by Dave

[Qianqianye]

Sorry for the delayed response. I agree with @davepagurek and @stalgiag that highlighted JS syntax would make the code snippet more readable. We probably miss catching it with the designers on this part. Would it make sense to have the JS syntax highlighted for the upcoming launch?

[stalgiag]

Sorry for the delayed response. I agree with @davepagurek and @stalgiag that highlighted JS syntax would make the code snippet more readable. We probably miss catching it with the designers on this part. Would it make sense to have the JS syntax highlighted for the upcoming launch?

Switching it back to the default Astro styling is simple. Custom styling won't make sense before launch. I can take a picture of the Astro default and you can decide if it works.