commit c160dd0d7eea1729025744f964ec3b536752e989
parent 2f84475320e9565860dad4948715497e2a557dd1
Author: MTRNord <mtrnord1@gmail.com>
Date: Sun, 23 Jan 2022 01:15:08 +0100
Various CSS Fixes
Diffstat:
5 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -85,7 +85,7 @@ class Home extends PureComponent<Props, State>{
}
});
return (
- <div className='h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Home</title>
<meta property="og:title" content="Matrix Art | Home" key="og-title" />
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -97,14 +97,14 @@ class Login extends PureComponent<Props, State> {
if (loading) {
return (
<>
- <div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='min-h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Login</title>
<meta property="og:title" content="Matrix Art | Login" key="og-title" />
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className="h-full lg:pt-20 pt-56">
+ <main className="min-h-full lg:pt-20 pt-56">
<div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
<h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Log In</h1>
@@ -122,7 +122,7 @@ class Login extends PureComponent<Props, State> {
//TODO make better
return (
<>
- <div className='h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Login</title>
<meta property="og:title" content="Matrix Art | Login" key="og-title" />
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -122,7 +122,7 @@ class Post extends PureComponent<Props, State> {
if (!hasFullyLoaded) {
return (
- <div className='h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+ <div className='min-h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<Head>
<title key="title">Matrix Art | Post not Found</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -142,7 +142,7 @@ class Post extends PureComponent<Props, State> {
if (!this.props.event_id || !this.props.event_id?.startsWith("$")) {
return (
- <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | Post not Found</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -169,7 +169,7 @@ class Post extends PureComponent<Props, State> {
post_title = (caption[0] as { body: string; mimetype: string; }).body;
}
return (
- <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | {post_title}</title>
<meta property="og:title" content={`Matrix Art | ${post_title}`} key="og-title" />
@@ -204,7 +204,7 @@ class Post extends PureComponent<Props, State> {
);
} else {
return (
- <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | Post not Found</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
@@ -284,7 +284,7 @@ class Post extends PureComponent<Props, State> {
<img loading="eager" width={imageEvent.content['m.image'].width - 1} height={imageEvent.content['m.image'].height - 1} alt={caption} title={caption} className="h-auto w-full relative -ml-[100%] object-cover align-bottom max-h-[54.25rem]" src={thumbnail_url} />
</div>
) : (
- <img loading="eager" width={imageEvent.content['m.image'].width - 1} height={imageEvent.content['m.image'].height - 1} className="h-auto w-full max-h-[54.25rem]" alt={caption} title={caption} src={thumbnail_url} />
+ <img loading="eager" width={imageEvent.content['m.image'].width - 1} height={imageEvent.content['m.image'].height - 1} className="h-auto w-full max-h-[54.25rem]" alt={caption} title={caption} src={thumbnail_url} />
);
return (
<>
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -116,7 +116,7 @@ class Profile extends PureComponent<Props, State> {
renderNotFound() {
return (
- <div className="h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
+ <div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
<title key="title">Matrix Art | User not Found</title>
<meta property="og:title" content="Matrix Art | User not Found" key="og-title" />
@@ -143,7 +143,7 @@ class Profile extends PureComponent<Props, State> {
const image_events = events.filter((event) => event.type == "m.image_gallery" || event.type == "m.image") as MatrixImageEvents[];
// TODO opengraph shows mxid instead of displayname
return (
- <div className="h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]">
+ <div className="min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]">
<Head>
<title key="title">Matrix Art | {displayname}</title>
<meta property="og:title" content={`Matrix Art | ${displayname}`} key="og-title" />
diff --git a/pages/submit.tsx b/pages/submit.tsx
@@ -92,7 +92,7 @@ class Submit extends PureComponent<Props, State> {
render(): ReactNode {
return (
- <div className='h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+ <div className='min-h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<Head>
<title key="title">Matrix Art | Submit Post</title>
<meta property="og:title" content="Matrix Art | Submit Post" key="og-title" />
@@ -110,7 +110,7 @@ class Submit extends PureComponent<Props, State> {
<input {...getInputProps()} />
<p className="text-base text-gray-900 dark:text-gray-200">Drag 'n' drop some images here, or click to select images</p>
</div>
- <ul className="flex flex-row flex-wrap gap-1 mt-4">
+ <ul className="flex flex-row flex-wrap gap-1 mt-4 max-w-[50rem] justify-evenly">
{this.renderThumbs()}
<li className='grow-[10]'></li>
</ul>
