commit 919ecbcf9eee310b1c41d716bc2637271e9d7e42
parent 6ace122a47bfa6f91e7e201c52a15b051e9e1662
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 14 Jan 2022 15:42:20 +0100
Fix multiple safari css issues on the frontpage
Diffstat:
3 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,28 +7,28 @@ export default class Header extends PureComponent {
render() {
return (
<>
- <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 bottom-0 lg:h-20 h-52 z-[100] items-center lg:flex-row flex-col shadow-black drop-shadow-xl'>
- <span className='flex items-center h-full lg:mx-10 my-auto 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'>
+ <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 lg:h-20 h-auto z-[100] items-center lg:flex-row flex-col shadow-black drop-shadow-xl'>
+ <span className='flex items-center lg:mx-10 lg:my-auto my-4 text-gray-900 dark:text-gray-200 font-bold'><Link href="/">Matrix Art</Link></span>
+ <div className='flex lg:flex-1 items-center justify-between lg:flex-row flex-col'>
+ <div className='flex grow items-center'>
<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-[1.25rem] focus:outline-none flex-[1] border-none' type="text" placeholder='Search & Discover' />
- <span className='inline-flex items-center justify-center cursor-pointer'>
+ <span className='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>
</span>
</div>
</form>
</div>
- <nav className='flex flex-shrink-0 relative mr-0 h-full'>
+ <nav className='flex lg:flex-shrink-0 my-4'>
{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> : undefined}
{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> : undefined}
{!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> : undefined}
</nav>
</div>
- <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'>
+ <span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] lg:h-7 h-0'></span>
+ <div className='relative lg:m-0'>
<div className='flex'>
<a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>Submit</a>
</div>
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -95,7 +95,7 @@ class Home extends PureComponent<Props, State>{
</Head>
<Header></Header>
<main className='mb-auto lg:pt-20 pt-52 z-0'>
- <div className='z-[100] sticky lg:top-20 top-52 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
+ <div className='z-[100] sticky lg:top-20 top-[12.5rem] 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>
diff --git a/styles/globals.css b/styles/globals.css
@@ -122,6 +122,8 @@ html, body, #__next {
}
-.gap-safari > * {
- margin: 0.25rem;
+@media only screen and (max-width: 1024px) {
+ .gap-safari > * {
+ margin: 0.25rem;
+ }
}
\ No newline at end of file
