feat: add print query to the website

[a0m0rajab]

This PR adds print query to the website and show a minimum example of using pagebreak feature.

The no-print class hide the element on print, and the pagebreak add new page before the related div.
Here is the first issue about this: #3204

This PR improve printing a webpage and hide the unnecessary details here is an example:

Before	After

Page breaks should be added and tested manually which requires a lot of work that I decided to do only if this approach were approved.

[a0m0rajab]

@microsoft-github-policy-service agree

[a0m0rajab]

@jakebailey hey, is there anything I am missing in this pr? I would love to get your thoughts about it

[jakebailey]

It's not clear to me how this scales; surely other pages would need this? These are explicit page breaks; how would we keep them in the right place and not forget some or add some where they aren't needed?

It just feels like there should be a better solution to this problem than manually breaking pages.

[a0m0rajab]

Thanks for the answer. If you want, we can split this PR into two different PRs, one to fix the headers that hide the text behind it and the other to discuss the page breaks,

The main issue here is that we have extra pages and hidden texts because of the header and footers that are available on the website.

As for scaling I just did a double check and found another property that we can use for the code, I will check it and ping you.

[a0m0rajab]

For future reference I need to check:
https://tympanus.net/codrops/css_reference/break-inside/
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
https://dev.to/amruthpillai/avoiding-awkward-element-breaks-in-print-html-5goe
https://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages

[a0m0rajab]

@jakebailey Thanks for your suggestion, we have a better and cleaner code now.
The code I wrote avoids the breaks for code blocks and works well.

[a0m0rajab]

@jakebailey is there anything I need to do for this?

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3205.centralus.5.azurestaticapps.net