Printable cheat sheet #2074
Printable cheat sheet #2074
Conversation
| } | ||
|
|
||
| .cheat-sheet { | ||
| font-size: 8pt; |
There was a problem hiding this comment.
how do you think about putting this code in the print stylesheet vs the cheat-sheet.scss style sheet?
I had a similar question about dark mode stuff -- for me if I'm editing the "cheat sheet" page it feels easier if all of the CSS for that page (dark mode, print, etc) are in the same place. But I think there are some advantages to having a "dark mode" or "print" stylesheet that have all of the dark mode print settings that I'm not thinking of.
There was a problem hiding this comment.
Yes, it makes sense to me to move the cheat-sheet specific stuff into cheat-sheet.scss, and leave the generic print-related stuff in print.scss.
|
I'm really impressed you managed to fit it all on one page at all, even if it's still squished! I wonder if it would make sense to hardcode column numbers (maybe with CSS grid + masonry? though maybe masonry doesn't actually exist yet?) for each section to make things flow a little better. |
I recently saw someone saying they canceled it. Not sure again where. EDIT: https://www.youtube.com/shorts/EylIbprD6eo (didn't watch it though) EDIT EDIT: watched it, tldw: masonry still doesn't in CSS, and won't be anytime soon. |
@jvns You mean we'd manually reorder them so every box would fit and not overflow to another column? |
Yes, but after trying some things I'm not sure if that's actually possible in CSS or not. |
|
Yes, but after trying some things I'm not sure if that's actually possible in CSS or not.
Hold my beer!
|
The files in `assets/sass` are written in SCSS, not plain CSS. Therefore they should have the `.scss` suffix, not `.css`. Signed-off-by: Johannes Schindelin <[email protected]>
It would appear that the navigation bar is already suppressed when printing, thanks to being inside an `<aside>` element. Other elements that are not useful in print, such as the search box, the version selector, the dark mode toggle, and the "Edit this page" link are now also hidden when printing. Signed-off-by: Johannes Schindelin <[email protected]>
When the `<div id="main">`, which has rounded borders, is broken apart because the content does not fit onto a single page, the rounded borders were cut off at page breaks. Let's just close them, so that each page gets its own box with rounded borders. Signed-off-by: Johannes Schindelin <[email protected]>
The taglines are a little fun thing to have, but in printouts, they cannot change all the time, so let's have a fixed one there. Signed-off-by: Johannes Schindelin <[email protected]>
The dark mode button makes no sense in a printed document. This change is slightly tricky because we used to hide the dark button by default and only showed it when the JavaScript initialization ran as expected, by setting the CSS `display` property to `block`. However, doing that also meant that the `display` property could not be overridden by a `@media print` block, because the `display` property was set on the dark mode button itself, and would therefore always be more specific than the `@media print` rule. So let's instead use a CSS class to indicate whether the dark mode button should be shown or not. Signed-off-by: Johannes Schindelin <[email protected]>
This allows overriding the font sizes for the Cheat Sheet specifically when printing. Signed-off-by: Johannes Schindelin <[email protected]>
The intention is to print this in landscape mode, to imitate https://jvns.ca/blog/2024/04/25/new-zine--how-git-works-/#the-cheat-sheet better. Signed-off-by: Johannes Schindelin <[email protected]>
This could be used, for example, to render a PDF version of the shiny new Git Cheat Sheet. Signed-off-by: Johannes Schindelin <[email protected]>
Signed-off-by: Johannes Schindelin <[email protected]>
When Hugo is told to use absolute URLs, it generates links and image references that start with a slash, which are misinterpreted when loading the file into a browser via the file: protocol. Rewrite those URLs to point to the local filesystem. To do so, we use the very convenient `page.route()` functionality of Playwright. Unfortunately, we do not get the "URLs" that start with a slash, but instead we get bogus `file:///<wrong-path>` URLs. Luckily, those wrong paths do not start with the absolute path of the `public/` directory, that's what we can use as tell-tale that an incorrect URL needs rewriting. Signed-off-by: Johannes Schindelin <[email protected]>
When Hugo minifies resources, it attaches an `integrity` attribute. This is usually very good! However, when we're trying to generate a `.pdf` from a HTML file that contains hrefs that contain absolute paths, as we do when deploying to GitHub Pages, we have to work around that by re-routing the files. Combined with an `integrity` attribute, this will fail, and there is no way around it other than editing out that attribute. So let's do just that. Hacky, but works, and we can proceed activities that are substantially more fun than battling well-intentioned-but-sometimes-really-unhelpful security measures without escape hatches (there is no way to tell Chromium that yes, this is intentional, but we need to ignore those integrity checks in this context, thank you for your cooperation). Signed-off-by: Johannes Schindelin <[email protected]>
This comes in _real_ handy for debugging. Signed-off-by: Johannes Schindelin <[email protected]>
The Cheat Sheet is quite useful, people might want to print it out... Suggested-by: Scott Chacon <[email protected]> Signed-off-by: Johannes Schindelin <[email protected]>
dscho
force-pushed
the
printable-cheat-sheet
branch
from
b05c712 to
cffeb19
Compare
|
I wonder if we should expand the cheat sheet onto 2 pages instead of 1 page to make space to add a little more padding. I think it might expand over time anyway -- for example someone suggested adding an example of |
Changes
Context
This was mentioned as a wish.
Here it is in action: