ChitoWarlock/soc_site-astro
1
0
Fork 0
mirror of https://github.com/jorgev259/soc_site-astro.git synced 2025-06-29 07:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update to tailwind V4

Browse source
This commit is contained in:
Jorge Vargas 2025-02-18 21:14:28 -06:00
parent fee27fa99e
commit 44ffb3d986
13 changed files with 262 additions and 434 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/AlbumBox.astro
View file

@ -16,7 +16,7 @@ const { title, href, image, loading = false } = props
{
loading ? (
<div class='pt-2.5'>
<div class='rounded animate-pulse bg-gray size-40 mx-auto' />
<div class='rounded-md animate-pulse bg-gray size-40 mx-auto' />
</div>
) : (
<Image
@ -33,8 +33,8 @@ const { title, href, image, loading = false } = props
loading ? (
<div class='animate-pulse p-2.5 px-4'>
<div class='space-y-3'>
<div class='h-2 rounded bg-gray' />
<div class='h-2 rounded bg-gray' />
<div class='h-2 rounded-md bg-gray' />
<div class='h-2 rounded-md bg-gray' />
</div>
</div>
) : (

7
src/components/albumPage/DownloadBtn.astro
View file

@ -14,12 +14,13 @@ const disabled = direct && !permissions.includes('SKIP_ADS')
<a
class:list={[
'flex-1 rounded-md bg-btn-gray hover:bg-dark border-none border-2 border-link hover:border-solid flex justify-center items-center uppercase',
{ 'border-gold hover:text-gold ': direct, 'bg-btn-disabled text-btn-gray': disabled }
direct ? 'border-gold hover:text-gold' : 'border-link hover:text-link',
disabled ? 'bg-btn-disabled text-btn-gray' : 'bg-btn-gray text-white',
' flex justify-center items-center flex-1 rounded-md hover:bg-dark border-none border-2 hover:border-solid uppercase'
]}
target='_blank'
href={href}
>
{icon ? <Image class='rounded' width={20} height={20} alt={alt ?? ''} src={icon} /> : null}
{icon ? <Image class='rounded-md' width={20} height={20} alt={alt ?? ''} src={icon} /> : null}
<slot />
</a>

14
src/components/form/ForgorForm.tsx
View file

@ -40,13 +40,23 @@ export default function ForgorForm(props: { token: string }) {
<label htmlFor='password' className='font-medium text-black'>
{m.newPassword()}:
</label>
<input type='password' name='password' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
<input
type='password'
name='password'
className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black'
required
/>
</div>
<div className='flex flex-col'>
<label htmlFor='password2' className='font-medium text-black'>
{m.newPasswordRetype()}:
</label>
<input type='password' name='password2' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
<input
type='password'
name='password2'
className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black'
required
/>
</div>
<div className='mx-auto'>
<Button type='submit' loading={loading} disabled={loading}>

2
src/components/form/Input.tsx
View file

@ -9,7 +9,7 @@ export default function Input(props: PropsWithChildren<ComponentProps<'input'>>)
<label htmlFor={name} className='font-medium text-black'>
{children}:
</label>
<input {...attrs} name={name} className={clsx('bg-zinc-200 rounded p-2 mt-2 mb-3 text-black', className)} />
<input {...attrs} name={name} className={clsx('bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black', className)} />
</div>
)
}

11
src/components/header/LoginButton.tsx
View file

@ -65,13 +65,18 @@ function LoginForm(props: { setForm: SetState<FormOptions>; setModalOpen: SetSta
<label htmlFor='username' className='font-medium text-black'>
{m.username()}:
</label>
<input type='text' name='username' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
<input type='text' name='username' className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black' required />
</div>
<div className='flex flex-col'>
<label htmlFor='password' className='font-medium text-black'>
{m.password()}:
</label>
<input type='password' name='password' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
<input
type='password'
name='password'
className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black'
required
/>
</div>
</div>
<div className='flex'>
@ -132,7 +137,7 @@ function CreateForgorForm(props: { setForm: SetState<FormOptions>; setModalOpen:
<label htmlFor='email' className='font-medium text-black'>
{m.email()}:
</label>
<input type='email' name='email' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
<input type='email' name='email' className='bg-zinc-200 rounded-md p-2 mt-2 mb-3 text-black' required />
</div>
<div className='mx-auto'>
<Button loading={loading} disabled={loading}>

1
src/layouts/base.astro
View file

@ -6,6 +6,7 @@ import Header from 'components/Header.astro'
import Footer from 'components/Footer.astro'
import 'styles/global.css'
import 'styles/tailwind.css'
---
<html lang={languageTag()} dir={Astro.locals.paraglide.dir} class='h-full'>

4
src/pages/album/[id].astro
View file

@ -49,7 +49,7 @@ const locale = navigator.languages && navigator.languages.length ? navigator.lan
</style>
<BaseLayout>
<div class='flex flex-col flex-1 max-w-[2000px] px-6 py-3'>
<div class='flex flex-col flex-1 max-w-[2000px] px-10 py-3'>
<div class='flex gap-x-3'>
<div class='flex-1'>
<div class='size-full relative cursor-pointer'>
@ -244,7 +244,7 @@ const locale = navigator.languages && navigator.languages.length ? navigator.lan
<div class='flex gap-2 my-2'>
<div>
<Image
class='rounded'
class='rounded-md'
width={30}
height={30}
alt={provider}

10
src/styles/global.css
View file

@ -1,11 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
* {
color: white;
font-family: 'Rubik', Sans-serif;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
}

45
src/styles/tailwind.css Normal file
View file

@ -0,0 +1,45 @@
@import 'tailwindcss';
@theme {
--breakpoint-*: initial;
--breakpoint-md: 880px;
--color-dark: #212529;
--color-dark-hover: #2b3035;
--color-gold: #ffdb37;
--color-btn-gray: rgb(108, 117, 125);
--color-btn-disabled: rgba(108, 117, 125, 0.65);
--color-gray: #3f3f3f;
--color-gray-hover: #4f4f4f;
--color-soc-green: #4b7667;
--color-soc-green-dark: rgba(17, 17, 17, 0.7);
--color-link: rgb(110, 168, 254);
--color-hover-link: #00d4ff;
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
* {
color: white;
font-family: 'Rubik', Sans-serif;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
}
}