commit 2eb908695a96260a8f5c3ea7e86fd9f439818e5a
parent 1af94bf82380177cddec65c18939ade5382133f5
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 5 Jan 2022 03:34:39 +0100
Ensure consistent sizes
Diffstat:
6 files changed, 75 insertions(+), 72 deletions(-)
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -4,7 +4,7 @@ import { Component } from "react";
export default class Footer extends Component {
render() {
return (
- <footer className="relative left-0 right-0 bottom-0 h-[400px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] flex justify-center items-center">
+ <footer className="relative left-0 right-0 bottom-0 h-[25rem] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] flex justify-center items-center">
<Link href={`https://github.com/MTRNord/matrix-art`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Github</a></Link>
<Link href={`https://matrix.to/#/#matrix-art:nordgedanken.dev`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Matrix</a></Link>
<Link href={`/profile/${encodeURIComponent("@mtrnord:nordgedanken.dev")}`} passHref><a className="px-16 text-lg text-gray-700 dark:text-gray-400 font-bold">Developer</a></Link>
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,30 +7,30 @@ export default class Header extends Component {
render() {
return (
<>
- <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 bottom-0 lg:h-[108px] h-[216px] z-[100] items-center lg:flex-row flex-col'>
+ <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 bottom-0 lg:h-20 h-54 z-[100] items-center lg:flex-row flex-col'>
<span className='flex items-center h-full lg:mx-10 my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
<div className='flex flex-1 items-center lg:flex-row flex-col'>
<div className='flex grow-[1] h-full relative items-center'>
- <form className='w-[200px] text-gray-900 dark:text-gray-200'>
+ <form className='w-52 text-gray-900 dark:text-gray-200'>
<div className='flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400'>
- <input className='bg-transparent min-w-[20px] focus:outline-none flex-[1] border-none' type="text" placeholder='Search & Discover' />
+ <input className='bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none' type="text" placeholder='Search & Discover' />
<span className='inline-flex items-center justify-center cursor-pointer'>
- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" className='fill-gray-900 dark:fill-gray-200'><path d="M0 0h24v24H0z" fill="none" /><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
</span>
</div>
</form>
</div>
<nav className='flex flex-shrink-0 relative mr-0 h-full'>
- {this.context.client.isGuest ? <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/register">Join</Link></span> : null}
- {this.context.client.isGuest ? <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/login">Log in</Link></span> : null}
- {!this.context.client.isGuest ? <span className='px-4 h-auto min-w-[24px] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href={"/profile/" + encodeURIComponent(this.context.client.userId!)}>Profile</Link></span> : null}
+ {this.context.client.isGuest ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/register">Join</Link></span> : null}
+ {this.context.client.isGuest ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href="/login">Log in</Link></span> : null}
+ {!this.context.client.isGuest ? <span className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium'><Link href={"/profile/" + encodeURIComponent(this.context.client.userId!)}>Profile</Link></span> : null}
</nav>
</div>
- <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-[27px]'></span>
+ <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-7'></span>
<div className='relative lg:m-0 mt-4'>
<div className='flex'>
- <button className='text-teal-400 bg-transparent relative h-[54px] min-w-[150px] z-[2] cursor-auto font-bold'>Submit</button>
+ <button className='text-teal-400 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-auto font-bold'>Submit</button>
</div>
</div>
</header>
diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -138,9 +138,9 @@ export default class Home extends Component<Props, State>{
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-[108px] pt-[216px] z-0'>
- <div className='z-[100] sticky lg:top-[108px] top-[216px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
- <div className='h-[72px] px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+ <main className='h-full lg:pt-20 pt-56 z-0'>
+ <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'>Home</h1>
</div>
</div>
@@ -159,4 +159,4 @@ export default class Home extends Component<Props, State>{
}
}
-Home.contextType = ClientContext;
-\ No newline at end of file
+Home.contextType = ClientContext;;
+\ No newline at end of file
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -68,6 +68,7 @@ class Login extends Component<Props, State> {
serverUrl = constMatrixArtServer + "/_matrix/client";
}
+ // TODO join required rooms
if (this.state.mxid && this.state.password) {
this.setState({
loading: true
@@ -89,18 +90,20 @@ class Login extends Component<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className="lg:pt-[108px] pt-[216px]">
- <div className='z-[100] sticky lg:top-[108px] top-[216px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
- <div className='h-[72px] px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+ <main className="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>
</div>
</div>
{/* TODO fix loader */}
</main>
+ <Footer></Footer>
</div>
</>
);
}
+ //TODO make better
return (
<>
<div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
@@ -111,9 +114,9 @@ class Login extends Component<Props, State> {
</Head>
<Header></Header>
- <main className='lg:pt-[108px] pt-[216px]'>
- <div className='z-[100] sticky lg:top-[108px] top-[216px] bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
- <div className='h-[72px] px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
+ <main className='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>
</div>
</div>
@@ -123,7 +126,7 @@ class Login extends Component<Props, State> {
<div className="mt-2">
<div>
<label className="inline-flex items-center">
- <input className="cursor-pointer h-[16px] w-[16px]" type="checkbox" name="showServerField" checked={this.state.showServerField} onChange={this.handleInputChange} />
+ <input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={this.state.showServerField} onChange={this.handleInputChange} />
<span className="ml-2 text-gray-900 dark:text-gray-200">Use custom Server</span>
</label>
</div>
@@ -137,25 +140,25 @@ class Login extends Component<Props, State> {
}} id="homeserverField">
<span className="text-gray-900 dark:text-gray-200">Homeserver:</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[20px] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="serverUrl" value={this.state.serverUrl} onChange={this.handleInputChange} />
+ <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="serverUrl" value={this.state.serverUrl} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
<span className="text-gray-900 dark:text-gray-200">Username:</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[20px] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="mxid" value={this.state.mxid} onChange={this.handleInputChange} />
+ <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="mxid" value={this.state.mxid} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
<span className="text-gray-900 dark:text-gray-200">Password:</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[20px] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="password" name="password" value={this.state.password} onChange={this.handleInputChange} />
+ <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="password" name="password" value={this.state.password} onChange={this.handleInputChange} />
</div>
</label>
- <input className="bg-teal-400 hover:bg-teal-500 cursor-pointer h-[42px] rounded dark:text-gray-900 text-gray-200" type="submit" value="Log In" />
+ <input className="bg-teal-400 hover:bg-teal-500 cursor-pointer h-10 rounded dark:text-gray-900 text-gray-200" type="submit" value="Log In" />
</form>
</div>
</main>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -133,7 +133,7 @@ class Post extends Component<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-[108px] pt-[216px] z-0 flex items-center justify-center'>
+ <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
</main>
<Footer></Footer>
@@ -161,9 +161,9 @@ class Post extends Component<Props, State> {
</Head>
<Header></Header>
- <main className='flex-col h-full flex lg:pt-[108px] pt-[216px] z-0'>
+ <main className='flex-col h-full flex 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-[400px] flex flex-col items-center">
+ <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"><Link href={"/profile/" + encodeURIComponent(image_event.sender)}>{this.state.displayname}</Link></h3>
@@ -189,7 +189,7 @@ class Post extends Component<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-[108px] pt-[216px] z-0 flex items-center justify-center'>
+ <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
</main>
<Footer></Footer>
@@ -241,7 +241,7 @@ class Post extends Component<Props, State> {
<div className="flex justify-center p-10 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<LightGallery
plugins={[lgThumbnail, lgZoom]}
- elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[871px] shadow-black cursor-zoom-in"
+ elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[54.25rem] shadow-black cursor-zoom-in"
key={imageEvent.event_id}
thumbnail={true}
>
@@ -280,7 +280,7 @@ class Post extends Component<Props, State> {
<div className="flex justify-center p-10 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<LightGallery
plugins={[lgThumbnail, lgZoom]}
- elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[871px] shadow-black cursor-zoom-in"
+ elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[54.25rem] shadow-black cursor-zoom-in"
key={imageEvent.event_id}
thumbnail={true}
>
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -114,7 +114,7 @@ class Profile extends Component<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='h-full lg:pt-[108px] pt-[216px] z-0 flex items-center justify-center'>
+ <main className='h-full lg:pt-20 pt-56 z-0 flex items-center justify-center'>
<h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The User you wanted does not exist!</h1>
</main>
</div>
@@ -140,57 +140,57 @@ class Profile extends Component<Props, State> {
<meta property="og:type" content="website" key="og-type" />
</Head>
<Header></Header>
- <main className='lg:pt-[108px] pt-[216px] z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <main className='lg:pt-20 pt-56 z-0 bg-[#f8f8f8] dark:bg-[#06070D]'>
{banner_event ? <div style={{
backgroundImage: `url(${this.context.client.downloadLink((banner_event as BannerEvent).content["m.file"].url)})`
}}
- className="fixed top-[54px] w-full h-[520px] bg-cover bg-[position:50%]"
+ className="fixed top-14 w-full h-[32.5rem] bg-cover bg-[position:50%]"
></div> : null}
<div className="relative">
- <div className="relative mb-0 min-h-[700px]">
- <div id="transparent_gradient" className="absolute left-0 right-0 top-[626px] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
- <div className="px-[60px] relative pt-[250px] pb-96 ">
+ <div className="relative mb-0 min-h-[43.75rem]">
+ <div id="transparent_gradient" className="absolute left-0 right-0 top-[39rem] bottom-0 bg-[#f8f8f8] dark:bg-[#06070D]"></div>
+ <div className="px-14 relative pt-[15.5rem] pb-96 ">
<div className="relative mt-0">
- <div className="relative inline-flex z-[1] mb-[40px]">
+ <div className="relative inline-flex z-[1] mb-10">
<span>
<div className="block relative">
{/* TODO fallback*/}
- <img className="block object-cover rounded-[4px]" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={this.state.displayname} title={this.state.displayname} />
+ <img className="block object-cover rounded-md" src={this.context.client.downloadLink(avatar_url)!} height="100" width="100" alt={this.state.displayname} title={this.state.displayname} />
</div>
</span>
- <div className="ml-[20px] flex flex-col justify-center">
- <h1 className="font-extrabold text-5xl text-gray-900 dark:text-gray-200 mt-[-17px] flex items-end">{this.state.displayname}</h1>
+ <div className="ml-5 flex flex-col justify-center">
+ <h1 className="font-extrabold text-5xl text-gray-900 dark:text-gray-200 mt-[-1rem] flex items-end">{this.state.displayname}</h1>
</div>
</div>
</div>
- <div className="h-[52px] relative w-full">
+ <div className="relative w-full h-14">
<div className="min-h-0">
- <nav className="w-full h-[52px] box-border flex items-center bg-[#f8f8f8] dark:bg-[#06070D]">
+ <nav className="w-full h-14 box-border flex items-center bg-[#f8f8f8] dark:bg-[#06070D]">
<span id="magic-spacer"></span>
<div className="flex items-center w-full h-full overflow-hidden whitespace-nowrap box-border min-w-fit">
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-[8px] px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Home</a></Link>
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Gallery</a></Link>
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-[32px] relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>About</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-2 px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Home</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Gallery</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>About</a></Link>
</div>
- <div className="pr-[15px]">
+ <div className="pr-4">
{/*TODO Share menu here*/}
</div>
<div>
- <button id="reflection" className="min-w-[126px] h-[52px] min-h-[40px] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-[20px] flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">Follow</button>
+ <button id="reflection" className="min-w-[7.75rem] h-14 min-h-[2.5rem] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-5 flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">Follow</button>
</div>
</nav>
</div>
</div>
<div className="w-full bg-transparent">
- <div className="pt-[20px]">
+ <div className="pt-5">
<div className="flex">
- <div className="mr-[60px] overflow-hidden pb-4 flex-[auto]">
+ <div className="mr-16 overflow-hidden pb-4 flex-[auto]">
<div>
- <section className="pb-[15px] block">
- <div className="w-full flex items-center mt-[30px] mb-[15px]">
+ <section className="pb-4 block">
+ <div className="w-full flex items-center mt-8 mb-4">
<h2 className="font-bold text-lg tracking-[.3px] leading-[1.22] text-gray-900 dark:text-gray-200">Gallery</h2>
<div className="ml-4 flex flex-[1] items-center relative justify-end">
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/gallery`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-[22px] uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>See All</a></Link>
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/gallery`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>See All</a></Link>
</div>
</div>
<div>
@@ -201,36 +201,36 @@ class Profile extends Component<Props, State> {
</section>
</div>
</div>
- <div className="w-[600px] flex-none">
+ <div className="w-[37.5rem] flex-none">
<div>
- <section className="pb-[15px] block">
- <div className="w-full flex items-center mt-[30px] mb-[15px]">
+ <section className="pb-4 block">
+ <div className="w-full flex items-center mt-8 mb-4">
<h2 className="font-bold text-gray-900 dark:text-gray-200 text-lg tracking--[.3px] leading-[1.22] max-w-[90%] mr-auto overflow-hidden text-ellipsis whitespace-nowrap">{`About ${this.state.displayname} (Currently Hardcoded)`}</h2>
- <div className="ml-[16px] flex flex-[1] items-center relative justify-end">
- <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-[22px] uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>More</a></Link>
+ <div className="ml-4 flex flex-[1] items-center relative justify-end">
+ <Link href={`/profile/${encodeURIComponent(this.props.mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>More</a></Link>
</div>
</div>
- <div className="bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] pt-[27px] w-ull flex flex-col box-border tracking--[.3px] text-gray-900 dark:text-gray-200">
- <div className="px-[32px]">
- <div className="mb-[32px] font-regular text-base leading-[1.22] whitespace-pre-wrap">
+ <div className="bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] pt-7 w-ull flex flex-col box-border tracking--[.3px] text-gray-900 dark:text-gray-200">
+ <div className="px-8">
+ <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
Coder // Photographer // Student
</div>
</div>
- <div className="px-[32px]">
- <div className="mb-[32px] flex items-start justify-between flex-wrap w-full">
- <div className="h-[44px] mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Pronouns</div>
+ <div className="px-8">
+ <div className="mb-8 flex items-start justify-between flex-wrap w-full">
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Pronouns</div>
<div className="w-full justify-items-end">They/Them</div>
</div>
</div>
- <div className="px-[32px]">
- <div className="mb-[32px] flex items-start justify-between flex-wrap w-full">
- <div className="h-[44px] mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Follow me on</div>
- <div className="w-full max-w-[344px] grid gap-4 auto-cols-[44px] auto-rows-[44px] grid-flow-col justify-items-end">{/*TODO Social Icons */}</div>
+ <div className="px-8">
+ <div className="mb-8 flex items-start justify-between flex-wrap w-full">
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Follow me on</div>
+ <div className="w-full max-w-[21.5rem] grid gap-4 auto-cols-[2.75rem] auto-rows-[2.75rem] grid-flow-col justify-items-end">{/*TODO Social Icons */}</div>
</div>
</div>
- <div className="px-[32px]">
- <div className="mb-[32px] font-regular text-base leading-[1.22] whitespace-pre-wrap">
- <div className="h-[44px] mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">My Bio</div>
+ <div className="px-8">
+ <div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">My Bio</div>
<div className="text-base font-regular">Hi! I am MTRNord :) I like to photograph since quite a while. A lot of different things like Flowers or architecture but also nature.<br /><br />I also very much like doing things in 3D in blender that I may share here :)</div>
</div>
</div>
