Skip to content

Commit 9b38e37

Browse files
MaypherMaypher
committed
Tweak css
1 parent 91ec61e commit 9b38e37

File tree

7 files changed

+31
-46
lines changed

7 files changed

+31
-46
lines changed

‎src/app/(frontend)/[locale]/conclusion/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import whiteLogo from '@public/images/logoWhite.svg'
66
import { RichText } from '@payloadcms/richtext-lexical/react'
77
import { Link } from '@/i18n/navigation'
88
import Image from 'next/image'
9-
import '@styles/conclusion.css'
109
import { draftMode } from 'next/headers'
1110

1211
export const dynamic = 'error'
@@ -28,12 +27,10 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
2827
{isEnabled && <RefreshRouteOnSave />}
2928
<div className="set-header-screen bg-vector-grey min-h-150 relative flex items-center justify-evenly overflow-clip">
3029
<p
31-
className="text-vector-cream flex flex-col relative bottom-[12ch] text-xl font-thin italic leading-10 md:bottom-[4ch] md:text-4xl [&_br]:hidden whitespace-pre"
30+
className="text-vector-cream flex flex-col relative bottom-[12ch] text-xl font-thin italic leading-10 md:bottom-[4ch] md:text-4xl whitespace-pre"
3231
id="slogan"
3332
>
34-
{conclusionData.slogal?.split('\n').map((line, i) => (
35-
<span key={i}>{`${line}\n`}</span> // Mapping them to spans so I can style each line separetly
36-
))}
33+
{conclusionData.slogal}
3734
</p>
3835

3936
<div className="-top-1/10 right-1/5 absolute flex h-full w-0.5 flex-col items-center overflow-visible md:relative md:right-auto md:ml-4 lg:ml-0">
@@ -51,7 +48,7 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
5148
className="hidden h-10 lg:block w-fit"
5249
/>
5350
</Link>
54-
<div className="top-1/9 relative flex basis-1/2 flex-col items-center gap-y-10 md:top-auto lg:hidden">
51+
<div className="top-1/9 relative flex basis-1/2 max-w-[45svw] flex-col items-center gap-y-10 md:top-auto lg:hidden">
5552
<div className="bg-vector-grey">
5653
<div className="text-vector-cream text-justify brightness-50 lg:bg-transparent [&_strong]:text-white">
5754
<RichText data={conclusionData.message} />

‎src/app/(frontend)/[locale]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,14 @@ function imageBlock(
9797
</figure>
9898
</div>
9999
<figure
100-
className={`flex py-20 lg:hidden justify-center gap-y-16 grow`}
100+
className={`flex py-20 lg:hidden justify-center gap-y-16 grow w-full`}
101101
style={{
102102
flexDirection: flexDirectionMobile,
103103
}}
104104
>
105105
<ImageSkeleton
106106
image={imageFile}
107-
className={`shrink ${overflowMobile ? '' : 'max-w-5/6 mx-auto'} max-h-140`}
107+
className={`shrink ${overflowMobile ? '' : 'max-w-5/6 mx-auto max-h-1/2'}`}
108108
sizes={overflowMobile ? '100vw' : '90vw'}
109109
/>
110110
{image.description && descPosMobile && (
@@ -153,12 +153,12 @@ function navBlock(
153153
if (imageFile && imageFile.url) {
154154
return (
155155
<div
156-
className="xl:h-[70svh] w-full flex flex-col xl:flex-row gap-y-10 items-center justify-evenly overflow-hidden"
156+
className="lg:h-[70svh] w-full flex flex-col lg:flex-row gap-y-10 items-center justify-evenly overflow-hidden"
157157
id="nav"
158158
>
159159
<div
160160
style={{ height: `${image.imgSize}%` }}
161-
className="relative max-xl:h-fit! max-xl:w-full [&_img]:w-full!"
161+
className="relative max-xl:h-fit! max-xl:w-full lg:max-w-1/2 max-xl:max-w-none [&_img]:w-full!"
162162
>
163163
<ImageSkeleton image={image.image as Media} sizes={`(max-width: 1024px) 100vw, 50vw`} />
164164
</div>

‎src/app/(frontend)/[locale]/projects/[id]/page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function PhoneImage(img: ProjectImage): ReactNode {
9999
alt={imageFile.alt}
100100
width={imageFile.width!}
101101
height={imageFile.height!}
102-
className={`max-h-160 ${
102+
className={`${
103103
img.phoneConf?.imgAlign === 'left'
104104
? 'w-4/5 mr-auto'
105105
: img.phoneConf.imgAlign === 'right'
@@ -113,6 +113,8 @@ function PhoneImage(img: ProjectImage): ReactNode {
113113
? '80vw'
114114
: '70vw'
115115
}
116+
placeholder="blur"
117+
blurDataURL={imageFile.sizes!.loading!.url!}
116118
/>
117119
{img.description && img.phoneConf.descPos && (
118120
<figcaption className="max-w-9/10 mx-auto text-pretty!" style={{ textWrap: 'balance' }}>
@@ -174,10 +176,14 @@ const Page = async ({ params }: Props) => {
174176
style={{ backgroundColor: image.bgColor }}
175177
key={`${img.id}-desktop`}
176178
>
177-
<ImageSkeleton
178-
image={imageFile}
179+
<Image
180+
src={imageFile.url!}
181+
alt={imageFile.alt}
179182
sizes={imageFile.width! <= imageFile.height! ? '40vw' : '70vw'}
180183
style={{ height: `${image.deskConf.imageSize}svh` }}
184+
placeholder="blur"
185+
blurDataURL={imageFile.sizes!.loading!.url!}
186+
priority
181187
/>
182188
<figcaption className="max-w-2/5">
183189
<div className="font-Nexa text-vector-cream flex w-full flex-col flex-wrap gap-y-20">

‎src/components/carousel.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function Carousel({ projects }: Props) {
5656
const t = useTranslations()
5757

5858
return (
59-
<div className="bg-vector-grey flex flex-col justify-evenly lg:gap-y-10 set-header-screen">
59+
<div className="bg-vector-grey flex flex-col justify-around set-header-screen">
6060
<h1 className="text-2xl! font-bold text-center">{t('NavBar.projects')}</h1>
6161
<div id="carousel" className="hidden lg:block">
6262
<div className="glide__track h-fit bg-vector-grey relative" data-glide-el="track">
@@ -70,39 +70,42 @@ export default function Carousel({ projects }: Props) {
7070
<li className="glide__slide h-fit! flex justify-center items-center" key={id}>
7171
<Link
7272
href={`/projects/${id}`}
73-
className="size-fit flex-col items-start transition-transform hover:scale-110 hover:cursor-pointer flex"
73+
className="size-fit flex-col items-start transition-transform hover:cursor-pointer flex gap-y-5"
7474
>
7575
<figure
7676
className="h-100 relative overflow-hidden"
77-
style={{ aspectRatio: '0.705' }}
77+
style={{ aspectRatio: '0.705', maxHeight: '50svh' }}
7878
>
7979
<Image
8080
src={thumbnail.url!}
8181
alt={thumbnail.alt!}
8282
fill
8383
sizes="33vw"
84-
className="object-cover blur-[2px]"
84+
className="object-cover"
8585
/>
8686
<div className="img-overlay"></div>
8787
<figcaption className="font-Nexa uppercase text-center text-sm w-4/5 absolute z-20 top-1/2 left-1/2 bg-vector-black/70 -translate-1/2 border-1 border-vector-cream/30 p-2">
8888
{i + 1}. {name}
8989
</figcaption>
9090
</figure>
91+
<div className="text-vector-black bg-vector-orange hover:bg-vector-black hover:text-vector-cream transition-colors mx-auto py-2 px-5 rounded-lg">
92+
{locale === 'es' ? 'Ver' : 'View'}
93+
</div>
9194
</Link>
9295
</li>
9396
)
9497
})}
9598
</ol>
9699
<div
97100
data-glide-el="controls"
98-
className="pointer-events-none flex items-center justify-end gap-x-5 px-20 text-xl mt-5"
101+
className="pointer-events-none flex items-center justify-end gap-x-5 px-20 text-4xl mt-5"
99102
>
100103
<button
101104
data-glide-dir="<"
102105
className="font-Nexa hover:scale-120 pointer-events-auto cursor-pointer transition-transform"
103106
aria-label={locale === 'es' ? 'Anterior' : 'Previous'}
104107
>
105-
<div className="font-Nexa gradient-background text-vector-cream h-fit text-6xl font-extrabold">
108+
<div className="font-Nexa gradient-background text-vector-cream h-fit font-extrabold">
106109
<div id="carouselArrow">&lt;</div>
107110
</div>
108111
</button>
@@ -111,7 +114,7 @@ export default function Carousel({ projects }: Props) {
111114
className="font-Nexa hover:scale-120 pointer-events-auto cursor-pointer transition-transform"
112115
aria-label={locale === 'es' ? 'Siguiente' : 'Next'}
113116
>
114-
<div className="font-Nexa gradient-background text-vector-cream h-fit text-6xl font-extrabold">
117+
<div className="font-Nexa gradient-background text-vector-cream h-fit font-extrabold">
115118
<div id="carouselArrow">&gt;</div>
116119
</div>
117120
</button>
@@ -133,7 +136,7 @@ export default function Carousel({ projects }: Props) {
133136
<li className="glide__slide h-fit!" key={id}>
134137
<Link
135138
href={`/projects/${id}`}
136-
className="mx-auto w-fit flex-col items-start transition-transform hover:scale-110 hover:cursor-pointer flex"
139+
className="mx-auto w-fit flex-col items-start transition-transform hover:cursor-pointer flex"
137140
>
138141
<figure
139142
className="h-100 relative overflow-hidden"

‎src/components/global/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function Header() {
5252
<Image src={logo} alt="Vector: Interior Design" className="h-full w-fit" />
5353
</Link>
5454
<ul
55-
className={`${['/es', '/en', '/es/', '/en/'].includes(pathname) ? '' : 'lg:flex'} text-vector-black hidden gap-10 xl:gap-20 [&_a]:transition-colors`}
55+
className={`${['/es', '/en', '/es/', '/en/'].includes(pathname) ? '' : 'xl:flex'} text-vector-black hidden gap-10 xl:gap-20 [&_a]:transition-colors`}
5656
>
5757
<li>
5858
<Link href="/" className="hover:text-vector-orange">
@@ -80,12 +80,12 @@ export default function Header() {
8080
</Link>
8181
</li>
8282
</ul>
83-
<div className="hidden lg:block">
83+
<div className="hidden xl:block">
8484
<LanguageSelect />
8585
</div>
8686
<button
8787
type="button"
88-
className={`text-vector-black text-3xl transition-transform lg:hidden ${menuOpen ? '-rotate-90' : ''}`}
88+
className={`text-vector-black text-3xl transition-transform xl:hidden ${menuOpen ? '-rotate-90' : ''}`}
8989
onClick={() => setMenuOpen((prevValue) => !prevValue)}
9090
ref={menuBtn}
9191
>

‎src/components/global/LanguageSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function LocaleSwitcherSelect() {
2929

3030
return (
3131
<select
32-
className={`${nexaFont.className} lg:text-vector-black pr-1`}
32+
className={`${nexaFont.className} xl:text-vector-black text-vector-cream pr-1`}
3333
defaultValue={params.locale}
3434
disabled={isPending}
3535
onChange={onSelectChange}

‎src/lib/styles/conclusion.css‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)