add shadows everywhere because *material design*

This commit is contained in:
Youwen Wu 2024-02-14 00:38:45 -08:00
parent 3f64142e4d
commit 0f1fc5d2c3
8 changed files with 18 additions and 13 deletions

View file

@ -36,10 +36,10 @@ export default function Page({
return (
<div>
<div className='grid grid-cols-1 max-w-3xl mx-auto'>
<div className='mx-auto mb-4 w-[90vw] md:w-auto md:h-[40vw] lg:h-[20vw]'>
<div className='mx-auto mb-4 max-w-3xl md:w-auto md:h-[40vw] lg:h-[20vw]'>
<img
alt='profile picture'
className='rounded-sm mx-auto object-cover w-full h-full'
className='rounded-sm mx-auto object-cover w-full h-full shadow-md shadow-slate-400'
src={image}
/>
</div>

View file

@ -41,7 +41,7 @@ export default function AuthorDisplay({
<img
src={affiliations[a.split('@')[1]].image}
alt={affiliations[a.split('@')[1]].name}
className='h-12 mr-2'
className='h-12 mr-3 shadow-md shadow-slate-300'
/>
</Link>
))}
@ -110,7 +110,7 @@ export default function AuthorDisplay({
<div className='flex items-center'>
<img
src={flag}
className='w-10 border-2 border-slate-200'
className='w-10 shadow-md shadow-slate-300'
alt={`${demonym} flag`}
/>
<span className='mx-3 font-semibold'>{demonym}</span>

View file

@ -38,7 +38,9 @@ export default function MobileMenu() {
>
<RxHamburgerMenu size={40} />
</button>
<div className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu}`}>
<div
className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu} shadow-md shadow-slate-300`}
>
<span className={styles['search-bar']}>
<SearchBar onSubmit={handleSubmit} />
</span>

View file

@ -2,10 +2,10 @@ import Link from 'next/link'
export default function News() {
return (
<div className='bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto'>
<span className='text-3xl md:text-4xl text-slate-200'>eeXiv News</span>
<div className='bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-md shadow-slate-500'>
<span className='text-3xl text-slate-200'>eeXiv News</span>
<br className='my-2' />
<span className='text-xl text-slate-400'>
<span className='text-lg text-slate-400'>
Stay up to date with what is happening at eeXiv.
</span>
<br className='my-2' />

View file

@ -52,7 +52,7 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
</p>
<ItemBadge itemName={type as DocumentType} />
<Status statusName={status} />
<span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2'>
<span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2 shadow-sm shadow-slate-300'>
Revision {latest}
</span>
<hr className='my-4' />

View file

@ -21,11 +21,11 @@ a:hover {
}
.button-default {
@apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2;
@apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-500;
}
.badge-base {
@apply px-3 py-1.5 rounded inline-block w-fit mr-2 my-1 text-slate-50 border-2;
@apply px-3 py-1.5 rounded inline-block w-fit mr-2 my-1 text-slate-50 border-2 shadow-sm shadow-slate-500;
}
.badge-draft {

View file

@ -56,7 +56,9 @@ export default function RootLayout({
</p>
</div>
</div>
<div className={`${styles.banner} w-full h-[100px] mb-[50px]`}>
<div
className={`${styles.banner} w-full h-[100px] mb-[50px] shadow-md shadow-slate-400`}
>
<div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
<h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
<Link href='/' className='no-link-style'>

View file

@ -41,8 +41,9 @@ const SearchResult = ({
return (
<div
className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer'
className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
onClick={handleClick}
role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
>
<h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
<p className='text-slate-500 py-2 text-md mt-2'>