Adding midsize formatting to tufte

emacs/dist/tufte.css

@@ -2,6 +2,10 @@
 @import "custom.css";
 @import "code.css";
 
+:root {
+  --prose-width: 55%;
+}
+
 /* Import ET Book styles
    adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
 @font-face {
@@ -127,7 +131,7 @@ h3 {
 hr {
   display: block;
   height: 1px;
-  width: 55%;
+  width: var(--prose-width);
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
@@ -204,12 +208,12 @@ blockquote {
 }
 
 blockquote p {
-  width: 55%;
+  width: var(--prose-width);
   margin-right: 40px;
 }
 
 blockquote footer {
-  width: 55%;
+  width: var(--prose-width);
   font-size: 1.1rem;
   text-align: right;
 }
@@ -217,7 +221,7 @@ blockquote footer {
 article p,
 article footer,
 article table {
-  width: 55%;
+  width: var(--prose-width);
 }
 
 /* 50 + 5 == 55, to be the same width as paragraph */
@@ -239,7 +243,7 @@ figure {
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
-  max-width: 55%;
+  max-width: var(--prose-width);
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;
   margin: 0 0 3em 0;
@@ -477,6 +481,22 @@ label.margin-toggle:not(.sidenote-number) {
   height: 100%;
 }
 
+@media (max-width: 900px) {
+  :root {
+    --prose-width: 75%;
+  }
+
+  .sidenote,
+  .marginnote {
+    margin-right: calc(-100% + var(--prose-width) )
+    width: calc(100% - var(--prose-width) )
+  }
+
+  body {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
+}
 @media (max-width: 760px) {
   body {
     width: 84%;
@@ -552,6 +572,6 @@ label.margin-toggle:not(.sidenote-number) {
   }
 
   img {
-    wxdth: 100%;
+    width: 100%;
   }
 }