Merge pull request #37 from hackerspace-ntnu/smooth-padding-animation

Smooth padding animation
hackerspace-ntnu · Sep 19, 2024 · 00319d2 · 00319d2
2 parents 2231865 + e6ea38a
commit 00319d2
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,9 @@ Here is a list of documentation to help you get started:
 #### Styling
 
 - [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
+  - [Fluid for Tailwind](https://fluid.tw/#basic-usage) - Fluid scale utility breakpoints
+  - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - Animation utility classes
+  - [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) - Customize scrollbar with tailwind
 - [Class Variance Authority](https://beta.cva.style/) - Tool for creating style variants in our UI components
 - [shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
   - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that shadcn/ui is built on, great documentation if you need to access the underlying components

diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
   "formatter": {
     "enabled": true,
     "indentStyle": "space"
@@ -12,7 +12,14 @@
     "rules": {
       "recommended": true,
       "nursery": {
-        "useSortedClasses": "warn"
+        "useSortedClasses": {
+          "level": "warn",
+          "fix": "safe",
+          "options": {
+            "attributes": ["className"],
+            "functions": ["cva", "cx"]
+          }
+        }
       }
     }
   },

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "prebuild": "next telemetry disable",
     "build": "next build",
     "dev": "next dev --turbo",
-    "lint": "biome check --write --unsafe",
+    "lint": "biome check --write",
     "start": "next start",
     "db:start": "docker-compose up db",
     "db:generate": "drizzle-kit generate",
@@ -59,10 +59,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
+    "@fluid-tailwind/tailwind-merge": "^0.0.2",
     "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "drizzle-kit": "^0.24.1",
+    "fluid-tailwind": "^1.0.3",
     "lefthook": "^1.7.14",
     "postcss": "^8.4.38",
     "tailwind-scrollbar": "^3.1.0",

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,6 +1,7 @@
 import { RootProviders } from '@/components/providers/RootProviders';
 import { routing } from '@/lib/locale';
 import { cx } from '@/lib/utils';
+import type { Viewport } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { Inter, Montserrat } from 'next/font/google';
 
@@ -25,6 +26,10 @@ export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }
 
+export const viewport: Viewport = {
+  themeColor: '#0c0a09',
+};
+
 export async function generateMetadata({
   params: { locale },
 }: Omit<LocaleLayoutProps, 'children'>) {
@@ -61,10 +66,6 @@ export async function generateMetadata({
       },
       { rel: 'manifest', url: '/favicon/site.webmanifest' },
     ],
-    meta: [
-      { name: 'msapplication-TileColor', content: '#0c0a09' },
-      { name: 'theme-color', content: '#0c0a09' },
-    ],
   };
 }
 
@@ -75,14 +76,14 @@ export default function LocaleLayout({
   unstable_setRequestLocale(locale);
   return (
     <html
-      className={cx('h-full w-full', inter.variable, montserrat.variable)}
+      className={cx('size-full', inter.variable, montserrat.variable)}
       lang={locale}
       dir='ltr'
       suppressHydrationWarning
     >
-      <body className='h-full w-full bg-background font-inter text-foreground antialiased'>
+      <body className='size-full bg-background font-inter text-foreground antialiased'>
         <RootProviders locale={locale}>
-          <div className='scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80 fixed top-0 bottom-0 flex h-full w-full flex-col overflow-y-scroll scroll-smooth'>
+          <div className='scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80 fixed top-0 bottom-0 flex size-full flex-col overflow-y-scroll scroll-smooth'>
             {children}
           </div>
         </RootProviders>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -175,34 +175,32 @@ function Footer() {
           </p>
         </div>
       </div>
-      <nav className='py-20'>
-        <ul className='flex flex-col justify-center gap-6 sm:flex-row md:gap-10 lg:gap-20 xl:gap-40'>
-          <li>
-            <Button asChild variant='none' size='none'>
-              <ExternalLink
-                href={t('NTNUIDIURL')}
-                prefetch={false}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <IDILogo className='p-6' title={t('NTNUIDI')} />
-              </ExternalLink>
-            </Button>
-          </li>
-          <li>
-            <Button asChild variant='none' size='none'>
-              <ExternalLink
-                href='https://www.ntnu.no/ie/kid/'
-                prefetch={false}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <NexusLogo className='p-6' title={t('NTNUKiD')} />
-              </ExternalLink>
-            </Button>
-          </li>
-        </ul>
-      </nav>
+      <ul className='flex flex-col justify-center gap-6 py-20 sm:flex-row md:gap-10 lg:gap-20 xl:gap-40'>
+        <li>
+          <Button asChild variant='none' size='none'>
+            <ExternalLink
+              href={t('NTNUIDIURL')}
+              prefetch={false}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <IDILogo className='p-6' title={t('NTNUIDI')} />
+            </ExternalLink>
+          </Button>
+        </li>
+        <li>
+          <Button asChild variant='none' size='none'>
+            <ExternalLink
+              href='https://www.ntnu.no/ie/kid/'
+              prefetch={false}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <NexusLogo className='p-6' title={t('NTNUKiD')} />
+            </ExternalLink>
+          </Button>
+        </li>
+      </ul>
       <p className='text-center'>
         {t('copyright')} &copy; {year}, Hackerspace NTNU.{' '}
         {t('allRightsReserved')}.

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -9,7 +9,7 @@ import { useTranslations } from 'next-intl';
 function Header() {
   const t = useTranslations('layout');
   return (
-    <header className='sticky top-0 z-20 mx-auto flex min-h-14 w-full max-w-screen-2xl items-center justify-between border-border/40 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
+    <header className='~px-4/24 sticky top-0 z-20 mx-auto flex min-h-14 w-full max-w-screen-2xl items-center justify-between border-border/40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
       <MobileSheet
         className='flex md:hidden'
         t={{

diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
@@ -20,8 +20,8 @@ function LogoLink({
       size='none'
     >
       <Link href='/' aria-label={t('hackerspaceHome')} onClick={onClick}>
-        <Logo className='h-6 w-6 md:h-8 md:w-8 xl:h-10 xl:w-10' />
-        <span className='font-bold font-montserrat text-md md:text-lg xl:text-2xl'>
+        <Logo className='size-6 md:size-8 lg:size-10' />
+        <span className='font-bold font-montserrat text-md md:text-lg lg:text-2xl'>
           HACKERSPACE
         </span>
       </Link>

diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -1,15 +1,15 @@
 import { cx } from '@/lib/utils';
 
 type MainProps = {
-  children?: React.ReactNode;
+  children: React.ReactNode;
   className?: string;
 };
 
 function Main({ children, className }: MainProps) {
   return (
     <main
       className={cx(
-        'fade-in max-md:slide-in-from-left-8 md:slide-in-from-top-8 mx-auto w-full max-w-screen-2xl flex-grow animate-in px-4 duration-1000 sm:px-11 md:px-16 lg:px-24',
+        '~px-4/24 mx-auto w-full max-w-screen-2xl flex-grow',
         className,
       )}
     >

diff --git a/src/components/news/ArticleItemSkeleton.tsx b/src/components/news/ArticleItemSkeleton.tsx
@@ -4,7 +4,7 @@ function ArticleItemSkeleton() {
   return (
     <div className='flex gap-4 overflow-hidden rounded-lg'>
       <div className='relative h-28 w-28 flex-shrink-0'>
-        <Skeleton className='h-full w-full rounded-lg object-cover object-center' />
+        <Skeleton className='size-full rounded-lg object-cover object-center' />
       </div>
       <div className='w-full py-2 pr-1'>
         <Skeleton className='h-[18px] w-5/6 py-[5px]' />

diff --git a/src/components/news/CardGridSkeleton.tsx b/src/components/news/CardGridSkeleton.tsx
@@ -8,7 +8,7 @@ function CardGridSkeleton() {
       {Array.from({ length: 4 }).map((_, index) => (
         <Skeleton
           className={cx(
-            'h-full w-full',
+            'size-full',
             index === 0 && 'xs:col-span-2 row-span-1 md:row-span-2',
             index === 1 && 'col-span-1 row-span-1 md:col-span-2',
             index === 3 && 'xs:col-span-2 row-span-1 md:col-span-1',

diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
@@ -2,7 +2,7 @@ import { type VariantProps, cva, cx } from '@/lib/utils';
 import type * as React from 'react';
 
 const badgeVariants = cva({
-  base: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  base: 'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   variants: {
     variant: {
       default:

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 
 const buttonVariants = cva({
-  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground hover:bg-primary/90',

diff --git a/src/components/ui/Pagination.tsx b/src/components/ui/Pagination.tsx
@@ -9,7 +9,6 @@ import * as React from 'react';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
-    role='navigation'
     aria-label='pagination'
     className={cx('mx-auto flex w-full justify-center', className)}
     {...props}

diff --git a/src/components/ui/Sheet.tsx b/src/components/ui/Sheet.tsx
@@ -29,15 +29,15 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva({
-  base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  base: 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500',
   variants: {
     side: {
-      top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+      top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
       bottom:
-        'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-      left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
+      left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
       right:
-        'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
     },
   },
   defaultVariants: {

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,5 +1,8 @@
+import { withFluid } from '@fluid-tailwind/tailwind-merge';
 import { type VariantProps, defineConfig } from 'cva';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge(withFluid);
 
 const { cva, cx, compose } = defineConfig({
   hooks: {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,20 +1,26 @@
+import tailwindFluid, { extract, screens, fontSize } from 'fluid-tailwind';
 import tailwindScrollbar from 'tailwind-scrollbar';
 import type { Config } from 'tailwindcss';
 import tailwindAnimate from 'tailwindcss-animate';
 import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
-  content: ['./src/**/*.tsx'],
+  content: {
+    files: ['./src/**/*.tsx'],
+    extract,
+  },
   darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {
         inter: ['var(--font-inter)', ...fontFamily.sans],
         montserrat: ['var(--font-montserrat)', ...fontFamily.sans],
       },
+      fontSize,
       screens: {
-        xs: '480px',
-        '2xl': '1400px',
+        xs: '30rem',
+        ...screens,
+        '2xl': '90rem',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -71,7 +77,11 @@ const config = {
       },
     },
   },
-  plugins: [tailwindAnimate, tailwindScrollbar({ nocompatible: true })],
+  plugins: [
+    tailwindFluid,
+    tailwindAnimate,
+    tailwindScrollbar({ nocompatible: true }),
+  ],
 } satisfies Config;
 
 export default config;