Add 2 new articles

snippets/articles/s/css-print-stylesheet.md

@@ -0,0 +1,90 @@
+---
+title: CSS Print Stylesheet
+type: story
+language: css
+tags: [visual]
+author: chalarangelo
+cover: cozy-desk-setup
+excerpt: A short opinionated print stylesheet to make your websites look great on paper.
+dateModified: 2023-06-11T05:00:00-04:00
+---
+
+While it's not that often we physically print content from the web, **print stylesheets shouldn't be overlooked**. They can be used to make sure that the content of your website is presented in a legible and print-friendly manner. Here's a simple, opinionated print stylesheet that you can use as a base for your own:
+
+```css
+@media print {
+  @page {
+    size: A4;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  body, p, h1, h2, h3, h4, h5, h6, li {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 12pt;
+    font-weight: normal;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 18pt;
+  }
+
+  h3 {
+    font-size: 14pt;
+  }
+
+  a:any-link {
+    color: #0000FF;
+    text-decoration: none;
+  }
+
+  a:any-link::after {
+    content: " [" attr(href) "] ";
+  }
+
+  img {
+    width: 100%;
+  }
+
+  header, footer, nav, aside, form, iframe, script {
+    display: none;
+  }
+}
+```
+
+- `@media print` - The print media query is used to apply styles when the page is printed.
+- `@page`:
+  - `size` - Specify the page size.
+- `body`:
+  - `margin` - Remove the default margin.
+  - `padding` - Remove the default padding.
+- `body, p, h1, h2, h3, h4, h5, h6, li`:
+  - `font-family` - Use print-friendly fonts.
+  - `font-size` - Use a legible font size.
+  - `font-weight` - Reset the font weight.
+- `h1, h2, h3, h4, h5, h6`:
+  - `font-weight` - Make headings bold.
+  - `margin-bottom` - Add some space between headings and the content below them.
+- `h1`-`h3`:
+  - `font-size` - Use a larger font size for headings.
+- `a:any-link`:
+  - `color` - Use a print-friendly color for links.
+  - `text-decoration` - Remove the underline from links.
+- `a:any-link::after`:
+  - `content` - Add the link URL after the link.
+- `img`:
+  - `width` - Make images fill the page width.
+- `header, footer, nav, aside, form, iframe, script`:
+  - `display` - Remove unnecessary elements from the page.