strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Document explicit specs to <SiteGrid />

Browse Source
This commit is contained in:
Sam Becker 2024-08-11 12:29:44 -04:00
parent 9bb31c9d7a
commit 1fbe63454f
4 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/layout.tsx
View File

@ -4,7 +4,6 @@ import { clsx } from 'clsx/lite';
import { IBM_Plex_Mono } from 'next/font/google';
import {
BASE_URL,
CENTERED_LARGE_SCREENS,
DEFAULT_THEME,
SITE_DESCRIPTION,
SITE_DOMAIN_OR_TITLE,
@ -28,8 +27,6 @@ const ibmPlexMono = IBM_Plex_Mono({
subsets: ['latin'],
weight: ['400', '500', '700'],
variable: '--font-ibm-plex-mono',
display: 'swap', // font wouldn't load in vercel dev environment, solution from link below
// https://stackoverflow.com/a/76484168
});
export const metadata: Metadata = {

4
src/components/Badge.tsx
View File

@ -28,9 +28,7 @@ export default function Badge({
case 'small':
return clsx(
'h-max-baseline',
// 'px-[5px] py-[2.75px]', //original padding
'block', // added to keep gray background around text when overflowed
'px-[6px] py-[5px]', // increased padding for block and to stop content shift
'px-[5px] py-[2.75px]',
'text-[0.7rem] font-medium rounded-[0.25rem]',
highContrast
? 'text-invert bg-invert'

24
src/components/SiteGrid.tsx
View File

@ -1,6 +1,13 @@
import { clsx } from 'clsx/lite';
import { RefObject } from 'react';
import { CENTERED_LARGE_SCREENS } from '@/site/config';
/*
Max widths (lg and up)
Main: 954px +
Sidebar: 302px +
Gap: 24px =
Total: 1280px
*/
export default function SiteGrid({
containerRef,
@ -26,29 +33,18 @@ export default function SiteGrid({
'gap-x-4 lg:gap-x-6',
'gap-y-4',
'max-w-7xl',
CENTERED_LARGE_SCREENS && 'mx-auto',
className,
)}
>
<div className={clsx(
// 'col-span-1 md:col-span-9', // original
// 'col-span-1 md:col-span-9 xl:col-start-2', // without env variable
CENTERED_LARGE_SCREENS
// ? 'col-span-1 md:col-span-9 lg:col-start-2' // option for lg screens and up
? 'col-span-1 md:col-span-9 xl:col-start-2'
: 'col-span-1 md:col-span-9',
'col-span-1 md:col-span-9',
sideFirstOnMobile && 'order-2 md:order-none',
)}>
{contentMain}
</div>
{contentSide &&
<div className={clsx(
// 'col-span-1 md:col-span-3', // original
// 'col-span-1 md:col-span-3 xl:col-span-2', // without env variable
CENTERED_LARGE_SCREENS
// ? 'col-span-1 lg:col-span-2' // option for lg screens and up
? 'col-span-1 md:col-span-3 xl:col-span-2'
: 'col-span-1 md:col-span-3',
'col-span-1 md:col-span-3',
sideFirstOnMobile && 'order-1 md:order-none',
sideHiddenOnMobile && 'hidden md:block',
)}>

2
src/site/config.ts
View File

@ -155,8 +155,6 @@ export const SHOW_FILM_SIMULATIONS =
process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
export const SHOW_EXIF_DATA =
process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
export const CENTERED_LARGE_SCREENS =
process.env.NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS === '1';
export const GRID_ASPECT_RATIO =
process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)