fixing up contact page

assets/scss/components/code-highlight.scss

@@ -1,6 +1,6 @@
 $ht-code-border-radius: .4em;
 .highlight {
-    width: 100%;
+    width: 50%;
     overflow-x: scroll;
     // border-radius: $ht-code-border-radius;
     margin-top: 0em;

assets/scss/general.scss

@@ -44,7 +44,7 @@ hr {
     margin-top: 1.4rem;
     margin-bottom: 1.4rem;
     width: 100%;
-    max-width: 90rem;
+    max-width: 100%;
     border-style: solid none none none;
     border-color: #ddd;
 }

assets/scss/tufte.scss

@@ -64,13 +64,14 @@ html {
 }
 
 body {
-    margin-left: auto;
+    margin-top: 2.5vh;
+    margin-left: 2.5vw;
     margin-right: auto;
-    padding-left: 5%;
+    padding-left: 0;
     font-family: $mono-fonts;
     background-color: #151515;
     color: #ddd;
-    max-width: #{"min(90vw, 1400px)"};
+    max-width: #{"min(80vw, 1200px)"};
 }
 
 h1, h2, h3 {
@@ -284,22 +285,13 @@ img {
 //     position: absolute;
 // }
 
-// #main > section > ol > li {
-//     position: relative;
-// }
-
-// #main > section > p {
-//     position: relative;
-// }
-
 .sidenote {
-    box-sizing: border-box;
     float: right;
-    width: auto;
-    position: absolute;
+    clear: both;
+    position: relative;
 
-    left: 57.5%;
-    right: 2.5%;
+    width: 80%;
+    margin-right: -90%;
 
     border-style: solid;
     border-width: 2px;
@@ -309,10 +301,17 @@ img {
     padding-bottom: 4px;
     padding-top: 4px;
 
-    font-size: 1rem;
+    font-size: 1.1rem;
     line-height: 1.3;
 }
 
+// there's a difference in how sidenotes are rendered from a list vs a paragraph
+// this is an eyeball approximation, it's close enough for me so leaving like this
+li .sidenote {
+    width: 98%;
+    margin-right: -121.8%;
+}
+
 .marginnote {
     box-sizing: border-box;
     float: right;
@@ -394,7 +393,8 @@ table,
 div.table-wrapper-small,
 div.supertable-wrapper > p,
 div.booktabs-wrapper {
-    width: 55%;
+//    width: #{"min(55%, 770px)"};
+    width: 50%;
 }
 
 div.fullwidth,