FrontendMasters / front-end-handbook-2019

[Book] 2019 edition of our front-end development handbook
https://frontendmasters.com/books/front-end-handbook/2019/
4.11k stars 475 forks source link

We should add a print stylesheet #30

Closed anevins12 closed 5 years ago

anevins12 commented 5 years ago

This is an amazingly detailed article and it would make lovely reading material for hot summer days (the UK weather is getting warm now yay!). There are some things in the print view of the page that don't work particularly well, like the fixed sidebar. We could add a print stylesheet that overrides that, as well as cleans up other parts for readability.

I might come back to this issue with a draft snippet of stuff that I've modified to get things printing the way I want.

anevins12 commented 5 years ago

This works okay for me and I'm testing in Chrome:

@media print {
    body {
        padding: 12pt;
    }

    hr {
        margin: 20pt 0;
    }

    #menuButton {
        display: none;
    }

    .slideout-menu {
        overflow-y: hidden;
        position: static;
        width: auto;
    }

    .slideout-open .slideout-panel {
        margin: 0;
        transform: none !important;
    }

    #bookPadding {
        margin: 0;
        max-width: none;
        padding: 0;
        width: auto;
    }

    #bookPadding img {
        display: block;
        margin: 0 auto;
    }
}