Adjust styles for missing data figures for embedding on M/m PrintPlus

Princeton-CDH · May 22, 2024 · 5ec1bd6 · 5ec1bd6
1 parent 914f606
commit 5ec1bd6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -30,8 +30,8 @@ How to make Altair/Vega charts responsive:
 
 ```css
 canvas.marks {
-    max-width: 100%!important;
-    height: auto!important;
+    max-width: 100% !important;
+    height: auto !important;
 }
 ```
 

diff --git a/content/2024/missingdata-specreading/index.md b/content/2024/missingdata-specreading/index.md
@@ -17,18 +17,21 @@ figures:
     style:
       aspect-ratio: "407 / 144"
       min-width: "600px"
+      max-width: "900px"
+      display: block
+      margin: 0 auto
   - id: recommendation-scores
     number: 14
     title: Distributions of Prediction Scores for the Top Books for Ernest Hemingway
     src: figures/2024/missingdata-specreading/recommendation-scores/
     cssString: "
-  @media (width <= 1100px) {\n
+  @media (max-width: 1100px) {\n
     iframe#recommendation-scores {\n
       width: 100%;\n
       height: 80vh;\n
     }\n
   }\n
-  @media (width > 1100px) {\n
+  @media (min-width : 1101px) {\n
     iframe#recommendation-scores {\n
       width: 100%;\n
       aspect-ratio: 32 / 25;\n

diff --git a/static/figures/2024/missingdata-specreading/hemingway-borrowing/index.html b/static/figures/2024/missingdata-specreading/hemingway-borrowing/index.html
@@ -5,14 +5,16 @@
     .error {
         color: red;
     }
-    /* set body margin to zero */
+    /* set body margin to zero,  */
     body {
       margin: 0;
+      text-align: center;
+      aspect-ratio: "407 / 144";  /* match iframe */
     }
     /* make the chart responsive */
     canvas.marks {
-      max-width: 100%;
-      height: auto;
+      max-width: 100% !important;
+      height: auto !important;
     }
   </style>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>

diff --git a/static/figures/2024/missingdata-specreading/weekly-activity-logbooks/index.html b/static/figures/2024/missingdata-specreading/weekly-activity-logbooks/index.html
@@ -10,9 +10,10 @@
       margin: 0;
     }
     /* make the chart responsive */
+    /* make the chart responsive */
     canvas.marks {
-      max-width: 100%;
-      height: auto;
+      max-width: 100% !important;
+      height: auto !important;
     }
   </style>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>