Use flex for modal

index.html

@@ -4,6 +4,7 @@
 <script src=/diffDOM.js></script>
 <script src=/springy.js></script>
 <script src=/src/index.js type=module></script>
+<div></div>
 <aside>
   <a href="https://git.adrianheine.de/adrian/coding-precarity">git</a>
 </aside>

src/index.js

@@ -49,9 +49,7 @@ const dispatch = target => {
 window.onpopstate = e => {
   dispatch(document.location.search)
 }
-const target = document.createElement('div')
-display = new Display(dispatch, target)
+display = new Display(dispatch, document.body.firstChild)
 
 if (document.location.search) dispatch(document.location.search)
 else display.renderIntro(intro)
-document.body.appendChild(target)

style.css

@@ -75,19 +75,19 @@ body {
   left: 0;
   top: 0;
   background-color: #e1eef280;
-  padding: 1em;
   box-sizing: border-box;
   cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+a.fullview {
+  text-decoration: none;
 }
 .fullview > div {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 20em;
+  font-size: 1.2em;
   max-height: 100%;
-  max-width: 30em;
-  overflow: auto;
+  max-width: 75vh;
   background-color: #006680;
   padding: 1em;
   color: white;
@@ -96,7 +96,6 @@ body {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  font-size: 1.2em;
 }
 .fullview > div img {
   float: right;
@@ -118,6 +117,7 @@ h1, .desc {
   border: 3px solid #1a1c1c;
   color: #1a1c1c;
   padding: 0 0.5em;
+  overflow: auto;
 }
 
 .fulltext p {
@@ -130,7 +130,7 @@ blockquote {
   padding: .5em;
   quotes: "\201C""\201D""\2018""\2019";
   /* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */
-  min-height: 3em;
+  min-height: 4em;
 }
 blockquote:before {
   color: #1a1c1c66;