list and reader widened

src/articles/Reader.tsx

@@ -22,15 +22,12 @@ export function Reader() {
   }, []);
 
   function handleClose() {
-    Promise.all([
+    animate(".reader", READER.initial)
-        animate(".reader", READER.initial)
+      .then(() => setPost(undefined));
-      ]
-    ).then(() => setPost(undefined));
   }
 
   return post ? (
     <motion.section
-      key="reader"
       initial={READER.initial}
       animate={READER.animate}
       onClick={handleClose}
@@ -39,9 +36,11 @@ export function Reader() {
           <button onClick={handleClose} className="link reader-close">
             <FontAwesomeIcon icon={faClose} />
           </button>
-          <post.article components={{
+          <div className="content">
-           'a': ExternalLink
+            <post.article components={{
-          }}/>
+              'a': ExternalLink
+            }}/>
+          </div>
         </article>
     </motion.section>
   ) : <></>;

src/articles/list.sass

@@ -15,7 +15,6 @@ $entry-width: 400px
 
 .spacer
   background: #393984FF
-  width: 33%
   flex-grow: 1
 
 @media screen and (max-width: index.$phone)
@@ -41,10 +40,9 @@ $entry-width: 400px
 
 .articles
   display: flex
-  flex-grow: 4
+  flex-grow: 3
+  justify-content: center
   margin-top: 100px
-  flex-direction: column
-  align-items: center
   flex-wrap: wrap
 
 .art-ctr

src/articles/reader.sass

@@ -12,16 +12,9 @@
   top: 0
   left: 0
 
-  h1
-    font-size: xxx-large
-  h2
-    font-size: xx-large
-  h3
-    font-size: x-large
-  p
-    font-size: large
-
   display: flex
+  justify-content: center
+  align-items: center
 
   > article
     display: flex
@@ -35,7 +28,21 @@
     background: white
     color: black
     height: 90vh
-    max-width: 600px
+
+    @media screen and (min-width: index.$phone)
+      width: 800px
+
+    h1
+      font-size: xxx-large
+    h2
+      font-size: xx-large
+    h3
+      font-size: x-large
+    p
+      font-size: large
+
+.content
+  max-width: 600px
 
 .external-link
   color: inherit !important