Adjust print styles for figures in sonorous medieval

Princeton-CDH · Sep 28, 2023 · 1b18ec3 · 1b18ec3
1 parent 7e9b18c
commit 1b18ec3
Showing 1 changed file with 63 additions and 11 deletions.
diff --git a/content/issues/4/sonorous-medieval/style.css b/content/issues/4/sonorous-medieval/style.css
@@ -24,6 +24,7 @@ cite.book::before {
 #fig2 .words td {
   text-align: center;
   font-size: 3rem;
+  line-height: 3.2rem;
 }
 
 #fig2 .translit td,
@@ -66,7 +67,9 @@ cite.book::before {
 #fig2 table th[scope=row], #fig2 table caption {
   position: sticky;
   left: 0;
-  background-color: var(--purple); /* match interlude background */
+  @media only screen {
+    background-color: var(--purple); /* match interlude background */
+  }
 }
 
 /* figure 3 */
@@ -75,10 +78,13 @@ cite.book::before {
   font-family: var(--font-sans);
   color: #404040; /* override interlude text color */
   padding: 0;
+  margin-bottom: 3rem;
 }
 
-#fig3:before {
-  background-color: #E9E9E9;
+@media only screen {
+  #fig3:before {
+    background-color: #E9E9E9;
+  }
 }
 
 #fig3 .caption {
@@ -109,7 +115,7 @@ cite.book::before {
   margin: 0;
   text-underline-offset: .25rem;
 
-  @media (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
     font-size: 2rem;
     text-underline-offset: .5rem;
   }
@@ -134,6 +140,26 @@ cite.book::before {
   background-color: #FEFEFE;
 }
 
+/* use lines instead of backgrounds for print */
+@media only print {
+  #fig3 .source::before {
+    border-bottom: 2px dotted #E9E9E9;
+    width: 100%;
+    top: auto;
+    bottom: 0;
+    left: 0;
+  }
+
+  #fig3 blockquote {
+    margin: 4px auto; /* allow space for borders to show */
+    border-bottom: 4px solid #E9E9E9;
+  }
+  #fig3 blockquote:first-of-type {
+    border-top: 4px solid #E9E9E9;
+  }
+}
+
+
 #fig3 .translation {
   text-underline-offset: 3px;
   line-height: 1.25;
@@ -202,9 +228,11 @@ cite.book::before {
 #fig4 tbody td {
   padding: 0;
   font-size: 1rem;
+  line-height: 1.4rem;
 
-  @media (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
     font-size: 1.25rem;
+    line-height: 1.5rem;
   }
 }
 
@@ -213,14 +241,19 @@ cite.book::before {
   font-size: 1.5rem;
   padding-right: 10px;
 
-  @media (min-width: 768px) {
+  @media only screen and (min-width: 768px) {
     font-size: 2rem;
   }
 }
 
 #fig4 .rhyme .vowel {
-  color: white;
-  text-shadow: white 1px 0 10px;
+  @media only screen {
+    color: white;
+    text-shadow: white 1px 0 10px;
+  }
+  @media only print {
+    font-weight: bold;
+  }
 }
 
 #fig4 .pinyin {
@@ -420,8 +453,10 @@ button.play:hover:after {
   }
 }
 
-#fig7:before {
-  background-color: #E9E9E9;
+@media only screen {
+  #fig7:before {
+    background-color: #E9E9E9;
+  }
 }
 
 #fig7 .caption {
@@ -458,10 +493,13 @@ button.play:hover:after {
 #fig7 .source {
   white-space: nowrap;
   font-size: 24px;
-  background-color: #E9E9E9;
+  @media only screen {
+    background-color: #E9E9E9;
+  }
 
   @media (min-width: 768px) {
     font-size: 40px;
+    line-height: 45px;
     padding-bottom: 18px;
   }
 }
@@ -507,8 +545,22 @@ button.play:hover:after {
   width: 200vw;
   height: 100%;
   background-color: #FEFEFE;
+
+
+}
+@media only print {
+  #fig7::before {
+    border-top: 4px double #E9E9E9;
+    left: calc(100vw * -1);
+    width: 200vw;
+  }
+  #fig7 .notes::before {
+    border-top: 1px solid #E9E9E9;
+    border-bottom: 4px double #E9E9E9;
+  }
 }
 
+
 /* visual indicators for annotations (provisional) */
 
 #fig7 .source {