toques de guión finales

- ahora también se puede imprimir bien con `html[class="to-print"]`

notas-jaime/style.css

@@ -15,12 +15,28 @@
   --quoteish-left-width: 4px;
 }
 
+/* Just add `class="to-print"` to `html` in dev tools */
+:root.to-print {
+  --visited-link-color: var(--link-color);
+
+  --text-color: #111118;
+  --faint-text-color: #666;
+  --background-color: #fff;
+
+  --blockquote-color: #aaa;
+
+  --code-background-color: #ccc;
+
+  font-size: 0.85em;
+}
+
 /* General */
 
 html {
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: var(--background-color);
 }
 
 body {
@@ -30,7 +46,6 @@ body {
   margin: 30px 50px;
 
   color: var(--text-color);
-  background-color: var(--background-color);
 }
 
 /* Headings */
@@ -57,8 +72,8 @@ blockquote {
 
 code {
   background-color: var(--code-background-color);
-  padding: 5px 10px;
-  border-radius: 8px;
+  padding: 0.4em 0.8em;
+  border-radius: 0.6em;
 }
 
 a {
@@ -69,14 +84,29 @@ a:visited {
   color: var(--visited-link-color);
 }
 
+/* Image */
+
+img {
+  --margin: 50px;
+
+  width: calc(100% - var(--margin) * 2);
+  margin: 0 var(--margin);
+}
+
 /* Alerts */
 
 .note {
   --color: #7cf;
-  --icon: '🛈';
+  --icon: "🛈";
 }
 
-.note {
+.warning {
+  --color: #e70;
+  --icon: "⚠";
+}
+
+.note,
+.warning {
   border-left: var(--quoteish-left-width) var(--color) solid;
   padding: 15px 30px;
   margin-left: 10px;
@@ -85,18 +115,21 @@ a:visited {
   background-color: #ffffff05;
 }
 
-.note > .title > p {
+.note>.title>p,
+.warning>.title>p {
   color: var(--color);
   font-size: 1.25em;
   font-weight: bold;
   margin-top: 0;
 }
 
-.note > :last-child {
+.note> :last-child,
+.warning> :last-child {
   margin-bottom: 0;
 }
 
-.note > .title > p::before {
+.note>.title>p::before,
+.warning>.title>p::before {
   content: var(--icon);
   margin-right: 0.25em;
 }