matrix-art

commit e0b66dc96a05f1336f418f60bcdd85d9429a8982
parent f872d84ce0200dedd579866867073d0c80bc5103
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 21 Jan 2022 17:38:01 +0100

Safari fixes

Diffstat:
M
package.json
 | 
4
+---
M
pages/index.tsx
 | 
2
+-
M
pages/post/[id].tsx
 | 
4
++--
M
pages/profile/[userid].tsx
 | 
2
+-
M
postcss.config.js
 | 
2
+-
M
styles/globals.css
 | 
2
+-

6 files changed, 7 insertions(+), 9 deletions(-)
diff --git a/package.json b/package.json
@@ -2,9 +2,7 @@
   "name": "matrix-art",
   "private": true,
   "browserslist": [
-    "defaults",
-    "not IE 11",
-    "maintained node versions"
+    "cover 99.9%"
   ],
   "scripts": {
     "dev-inspect": "cross-env NODE_OPTIONS='--inspect' next dev",
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -101,7 +101,7 @@ class Home extends PureComponent<Props, State>{
               </div>
             </div>
             <div className='m-10'>
-              <ul className='flex flex-wrap gap-1 gap-safari'>
+              <ul className='flex flex-wrap gap-1'>
                 {image_events.map(event => <FrontPageImage event={event} key={(event as MatrixEventBase).event_id} />)}
                 <li className='grow-[10]'></li>
               </ul>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -182,13 +182,13 @@ class Post extends PureComponent<Props, State> {
                     </Head>
                     <Header></Header>
 
-                    <main className='flex-col mb-auto flex lg:pt-20 pt-56 z-0'>
+                    <main className='mb-auto lg:pt-20 pt-56 z-0'>
                         {isImageGalleryEvent(image_event) ? this.renderImageGalleryEvent(image_event, post_title) : (isImageEvent(image_event) ? this.renderSingleImageEvent(image_event, post_title) : <div key={(image_event as MatrixEventBase).event_id}></div>)}
                         <div className="grow bg-[#f8f8f8] dark:bg-[#06070D] min-h-[25rem] flex flex-col items-center">
                             <div className="flex flex-col items-start lg:min-w-[60rem] lg:w-[60rem]">
                                 <h1 className="my-4 text-6xl text-gray-900 dark:text-gray-200 font-bold">{post_title}</h1>
                                 <h3 className="cursor-pointer mt-0 mb-4 text-l text-gray-900 dark:text-gray-200 font-normal inline-flex">
-                                    {avatar_url ? <img className="block object-cover rounded-full mr-4" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={displayname} title={displayname} /> : undefined}
+                                    <span className="block object-cover rounded-full mr-4">{avatar_url ? <img className="object-cover rounded-full" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={displayname} title={displayname} /> : undefined}</span>
                                     <Link href={"/profile/" + encodeURIComponent(image_event.sender)} passHref><span className='hover:text-teal-400'>{displayname}</span></Link>
                                 </h3>
                                 {isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : (isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "tags"}></div>)}
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -198,7 +198,7 @@ class Profile extends PureComponent<Props, State> {
                                                             </div>
                                                         </div>
                                                         <div>
-                                                            <ul className='flex flex-wrap gap-1 gap-safari'>{image_events.map(event => <FrontPageImage event={event} imageHeight="286px" key={(event as MatrixEventBase).event_id} />)}
+                                                            <ul className='flex flex-wrap gap-1'>{image_events.map(event => <FrontPageImage event={event} imageHeight="286px" key={(event as MatrixEventBase).event_id} />)}
                                                                 <li className='grow-[10]'></li>
                                                             </ul>
                                                         </div>
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
+    autoprefixer: {}
   },
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -123,7 +123,7 @@ html, body, #__next {
 
 
 @media only screen and (max-width: 1024px) {
-  .gap-safari > *  {
+  .gap-1 > *  {
     margin: 0.25rem;
   }
 }
 \ No newline at end of file