diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx index 484dfaf5..aeabc85d 100644 --- a/src/camera/PhotoCamera.tsx +++ b/src/camera/PhotoCamera.tsx @@ -32,13 +32,13 @@ export default function PhotoCamera({ title="Apple" className={cc( 'text-icon', - 'translate-x-[-2.5px] translate-y-[-2px]', + 'translate-x-[-2.5px] translate-y-[-1.5px]', )} size={14} /> : } type={showAppleIcon && isCameraApple ? 'icon-first' : type} badged={badged} diff --git a/src/components/EntityLink.tsx b/src/components/EntityLink.tsx index 2a4a5aaf..4a36e14e 100644 --- a/src/components/EntityLink.tsx +++ b/src/components/EntityLink.tsx @@ -27,7 +27,7 @@ export default function EntityLink({ title?: string hoverEntity?: ReactNode } & EntityLinkExternalProps) { - const renderContent = () => <> + const renderLabel = () => <> {labelSmall ?? label} @@ -42,7 +42,7 @@ export default function EntityLink({ href={href} title={title} className={cc( - 'inline-flex gap-1', + 'inline-flex gap-[0.2rem]', !badged && 'text-main hover:text-gray-900 dark:hover:text-gray-100', dim && 'text-dim', )} @@ -51,16 +51,16 @@ export default function EntityLink({ {badged ? - {renderContent()} + {renderLabel()} : - {renderContent()} + {renderLabel()} } } {icon && type !== 'text-only' && diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index 6db32045..9819f76e 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -5,9 +5,7 @@ import AnimateItems from '@/components/AnimateItems'; import { Camera } from '@/camera'; import MorePhotos from '@/photo/MorePhotos'; import { FilmSimulation } from '@/simulation'; -import { GRID_ASPECT_RATIO } from '@/site/config'; - -const HIGH_DENSITY = GRID_ASPECT_RATIO <= 1; +import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config'; export default function PhotoGrid({ photos, @@ -43,7 +41,7 @@ export default function PhotoGrid({ 'grid gap-0.5 sm:gap-1', small ? 'grid-cols-3 xs:grid-cols-6' - : HIGH_DENSITY + : HIGH_DENSITY_GRID ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-5' : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4', 'items-center', diff --git a/src/photo/PhotoSetHeader.tsx b/src/photo/PhotoSetHeader.tsx index cec0c70f..62c2fee6 100644 --- a/src/photo/PhotoSetHeader.tsx +++ b/src/photo/PhotoSetHeader.tsx @@ -3,6 +3,7 @@ import { Photo, PhotoDateRange, dateRangeForPhotos } from '.'; import ShareButton from '@/components/ShareButton'; import AnimateItems from '@/components/AnimateItems'; import { ReactNode } from 'react'; +import { HIGH_DENSITY_GRID } from '@/site/config'; export default function PhotoSetHeader({ entity, @@ -37,14 +38,22 @@ export default function PhotoSetHeader({ items={[
- {entity} + + {entity} + {selectedPhotoIndex !== undefined // eslint-disable-next-line max-len diff --git a/src/site/config.ts b/src/site/config.ts index 400013a4..4da17d0e 100644 --- a/src/site/config.ts +++ b/src/site/config.ts @@ -59,6 +59,8 @@ export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO export const OG_TEXT_BOTTOM_ALIGNMENT = (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM'; +export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1; + export const CONFIG_CHECKLIST_STATUS = { hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0, hasBlob: HAS_VERCEL_BLOB || HAS_AWS_S3_STORAGE, diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx index 796152ef..2ab66b7c 100644 --- a/src/tag/PhotoTag.tsx +++ b/src/tag/PhotoTag.tsx @@ -22,7 +22,7 @@ export default function PhotoTag({ size={11} className={cc( 'flex-shrink-0', - 'text-icon translate-y-[0.5px]', + 'text-icon translate-y-[1px]', )} />} type={type}