Xeven777

name

awwwards-fluid-scaling

description

Build Awwwards-level websites where the entire layout — text, spacing, images, components — scales smoothly with viewport width and stays visually identical at any browser zoom level (50%, 100%, 120%, 200%). Use this skill whenever building marketing sites, landing pages, portfolios, hero sections, or any "cinematic" frontend where visual proportions must hold across screen sizes from phone to 4K. Fully integrated with Tailwind v4 and shadcn/base-ui — standard utility classes (text-sm, p-8, gap-4, w-32) become fluid inside .stage zones with zero naming conflicts.

Awwwards-Level Fluid Scaling

A practical guide for building websites that scale like a single composed image — where everything (typography, spacing, gaps, borders, icons, gallery items) grows and shrinks together as the viewport changes, instead of breaking into discrete media-query steps.

This is the "look" of most Awwwards Site of the Day winners: zoom your browser in and out, and the layout d

Xeven777

"$schema" = "https://starship.rs/config-schema.json"

format = """
[](#9A348E)\
$username\
[](bg:#DA627D fg:#9A348E)\
$directory\
$git_branch\
$git_status\
$nodejs\

Xeven777

# 1. ENVIRONMENT & PATH

# Make $path/$PATH a unique array — zsh auto-dedupes entries.
typeset -U path PATH

export NVM_DIR="$HOME/.config/nvm"
export BUN_INSTALL="$HOME/.bun"
path=($HOME/bin $BUN_INSTALL/bin $path /usr/sbin)

# Load local environment if present

Xeven777

"use client";

import Script from "next/script";

const Clarity = () => {
  return (
    <>
      <Script strategy="lazyOnload" id="clarity-script">
        {`
          (function(c,l,a,r,i,t,y){

Xeven777

/* Sky gradient with border glow effect - reusable for buttons, tabs, cards */
.sky-gradient-glow {
  position: relative;
  background: linear-gradient(to bottom, rgb(125, 211, 252), rgb(14, 165, 233));
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 188, 255, 0.3);
}

.sky-gradient-glow::before {
  content: "";

Xeven777

@keyframes bg-pan {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.animate-bg-pan {

Xeven777

'use client';
import { useTheme } from 'next-themes';
import { Toaster } from '@/components/ui/sonner';

const ToasterwithTheme = () => {
  const { theme } = useTheme();
  return (
    <Toaster
      richColors
      closeButton

Xeven777

import { PrismaClient } from "@prisma/client";
const prismaClientSingleton = () => {
  return new PrismaClient();
};

type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClientSingleton | undefined;
};

Xeven777

/* Headings */
.markdown-body h1 {
  font-size: 2.5rem; /* 40px */
}

.markdown-body h2 {
  font-size: 2rem; /* 32px */
}

Xeven777

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}