themekollektiv / popper

Popper is an accessible content-first WordPress theme built around beautiful fonts and lots of white space.
https://wordpress.org/themes/popper/
GNU General Public License v2.0
50 stars 15 forks source link

Print CSS #26

Closed Zodiac1978 closed 3 years ago

Zodiac1978 commented 3 years ago

We should add at least a basic print css section.

This could be a starting point: https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

krafit commented 3 years ago

In 2016 I wrote an article about print CSS (German) and add basic print css to my Popper child theme:

.comment-respond,
.reply,
.post-navigation {
    display: none;
}

.site-firstletter {
    display: none;
}

.entry-content a:link:after,
.entry-content a:visited:after {
        content: " [" attr(href) "] "
}

.site-logo::after {
    content:"KrautPress.de";
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 2.4em;
    font-weight: bold;
    line-height: 1.3em;
    color: #000;
    text-align: center;
    border-bottom: none;
}

.entry-content {
    font-size: 12px;
}
Zodiac1978 commented 3 years ago

That's a great start!

.site-logo::after {
    content:"KrautPress.de";
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 2.4em;
    font-weight: bold;
    line-height: 1.3em;
    color: #000;
    text-align: center;
    border-bottom: none;
}

This needs to be done via PHP to use the website URL, I think, or we omit this part in the first. What do you think?

Not sure if @bueltge added a print CSS part in his mega PR. Have you looked for it?

bueltge commented 3 years ago

No, no print.css in the PR; style.css hs changes with the focus of formatting, but no additional content for print. I have only one public print.css, old but it works - https://github.com/bueltge/Documentation/blob/master/css/print.dev.css

Zodiac1978 commented 3 years ago

We should use pt instead of px for the content:

.entry-content {
    font-size: 12pt;
}

See this post https://alistapart.com/article/goingtoprint/ - we need to check more after some Gutenberg block CSS is added. Maybe some more things need to be set up then.

Zodiac1978 commented 3 years ago

Should we hide the footer widgets? .widget-area

And the credits? .site-info

bueltge commented 3 years ago

Yes, Print should focus on content. We should only leave the source as informant for the content, maybe a stamp inside the print-footer.

bueltge commented 3 years ago

Leave this excellent example, if we touch it again https://github.com/ashok-khanna/pdf/blob/main/style.css