Skip to content

Commit aa011d2

Browse files
MaypherMaypher
committed
Tweak css
1 parent d58189c commit aa011d2

File tree

5 files changed

+112
-63
lines changed

5 files changed

+112
-63
lines changed

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

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import { Link } from '@/i18n/navigation'
1818
import '@styles/descriptions.scss'
1919
import '@styles/nav.scss'
2020
import ImageSkeleton from '@/components/global/ImageSkeleton'
21+
import designer from '@public/images/tony.jpg'
22+
import Image from 'next/image'
2123

2224
type MainPageImageType = NonNullable<MainPageImage['images']>[number]
2325

@@ -53,7 +55,7 @@ function imageBlock(
5355
return (
5456
<>
5557
<div
56-
className="items-center relative hidden lg:flex desktop w-full"
58+
className="items-center relative hidden lg:flex desktop w-full px-20"
5759
style={{
5860
backgroundColor: image.bgColor,
5961
justifyContent: justifyPosDesktop,
@@ -63,8 +65,14 @@ function imageBlock(
6365
key={image.id}
6466
style={{
6567
flexDirection: descFlexDirectionDesktop,
68+
justifyContent:
69+
descriptionPositionDesktop === 'w'
70+
? 'end'
71+
: descriptionPositionDesktop === 'e'
72+
? 'start'
73+
: 'center',
6674
}}
67-
className={`min-h-160 w-full items-center justify-center gap-x-15 xl:gap-x-15 flex gap-y-10 ${imgPosDesktop === 'left' ? 'mr-auto' : imgPosDesktop === 'right' ? 'ml-auto' : 'mx-auto'}`}
75+
className={`min-h-160 w-full items-center gap-x-20 flex gap-y-10 ${imgPosDesktop === 'left' ? 'mr-auto' : imgPosDesktop === 'right' ? 'ml-auto' : 'mx-auto'}`}
6876
>
6977
<div
7078
style={{ height: `${image.deskConfig.imgSize}svh` }}
@@ -77,7 +85,7 @@ function imageBlock(
7785
</div>
7886
{image.description && descriptionPositionDesktop && (
7987
<figcaption
80-
className={`${descTopOrBottomDesktop ? 'max-w-4/5 w-full' : 'max-w-2/5 w-fit'} text-pretty`}
88+
className={`${descTopOrBottomDesktop ? 'max-w-4/5 w-full' : 'max-w-43/100 w-fit'} text-pretty`}
8189
>
8290
<RichText
8391
data={image.description}
@@ -89,7 +97,7 @@ function imageBlock(
8997
</figure>
9098
</div>
9199
<figure
92-
className={`flex py-20 lg:hidden justify-center gap-y-16 size-full`}
100+
className={`flex py-20 lg:hidden justify-center gap-y-16 grow`}
93101
style={{
94102
flexDirection: flexDirectionMobile,
95103
}}
@@ -117,13 +125,21 @@ function imageBlock(
117125

118126
function aboutUsBlock(message: Extract<MainPageImageType, { blockType: 'aboutUs' }>) {
119127
return (
120-
<section
121-
className="relative lg:h-svh w-full px-20 py-10 flex flex-col lg:flex-row items-center justify-center"
128+
<figure
129+
className="relative lg:h-svh w-full flex flex-col gap-x-20 gap-y-10 py-10 lg:py-0 lg:flex-row items-center justify-center px-8 lg:px-0"
122130
id="aboutUs"
123131
>
124-
<RichText data={message.description} className="about-us"></RichText>
132+
<Image
133+
src={designer}
134+
alt="designer"
135+
sizes="30vw"
136+
className="h-auto w-full lg:h-7/10 lg:w-auto"
137+
/>
138+
<figcaption className="lg:max-w-1/2">
139+
<RichText data={message.description} className="about-us text-sm"></RichText>
140+
</figcaption>
125141
<ScrollToTopBtn />
126-
</section>
142+
</figure>
127143
)
128144
}
129145

@@ -137,7 +153,7 @@ function navBlock(
137153
if (imageFile && imageFile.url) {
138154
return (
139155
<div
140-
className="xl:h-[70svh] w-full flex flex-col xl:flex-row mt-20 lg:mt-0 gap-y-10 items-center justify-evenly overflow-hidden"
156+
className="xl:h-[70svh] w-full flex flex-col xl:flex-row gap-y-10 items-center justify-evenly overflow-hidden"
141157
id="nav"
142158
>
143159
<div
@@ -199,7 +215,7 @@ export default async function MainPage({ params }: Props) {
199215
return (
200216
<div
201217
id="welcome"
202-
className="header-screen flex justify-stretch items-center grow lg:px-10 mb-20 lg:mb-0"
218+
className="header-screen flex flex-col lg:flex-row [&_figcaption]:flex [&_figcaption]:items-center [&_figcaption]:justify-center [&_figure]:pb-0! justify-stretch items-center grow lg:px-10 mb-20 lg:mb-0"
203219
key={image.id}
204220
style={{ backgroundColor: image.bgColor }}
205221
>
@@ -238,7 +254,7 @@ export default async function MainPage({ params }: Props) {
238254
<div
239255
style={{ backgroundColor: image.bgColor }}
240256
key={image.id}
241-
className="min-h-svh flex items-center lg:px-10"
257+
className={`${image.blockType !== 'navigation' ? 'min-h-svh' : ''} flex items-center`}
242258
>
243259
{image.blockType === 'image' && imageBlock(image)}
244260
{image.blockType === 'aboutUs' && aboutUsBlock(image)}

‎src/components/carousel.tsx‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -56,45 +56,36 @@ 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:pt-10 lg:gap-y-10 set-header-screen">
59+
<div className="bg-vector-grey flex flex-col justify-evenly lg:gap-y-10 set-header-screen">
6060
<h1 className="text-2xl! font-bold text-center">{t('NavBar.projects')}</h1>
61-
<div id="carousel" className="hidden grow lg:block">
62-
<div
63-
className="glide__track h-full bg-vector-grey relative flex flex-col"
64-
data-glide-el="track"
65-
>
66-
<ol className=" glide__slides grow flex items-center justify-center">
61+
<div id="carousel" className="hidden lg:block">
62+
<div className="glide__track h-fit bg-vector-grey relative" data-glide-el="track">
63+
<ol className=" glide__slides h-fit! flex items-center justify-center">
6764
{projects.map(({ id, name, thumbnail }, i) => {
6865
thumbnail = thumbnail as Media
6966

7067
if (!thumbnail?.url) return 'Imagen no configurada'
7168

7269
return (
73-
<li className="glide__slide flex justify-center items-center" key={id}>
70+
<li className="glide__slide h-fit! flex justify-center items-center" key={id}>
7471
<Link
7572
href={`/projects/${id}`}
7673
className="size-fit flex-col items-start transition-transform hover:scale-110 hover:cursor-pointer flex"
7774
>
78-
<figure>
79-
<div
80-
className="h-100 relative"
81-
style={{ aspectRatio: '2/3', maxHeight: '45svh' }}
82-
>
83-
<Image
84-
src={thumbnail.url!}
85-
alt={thumbnail.alt!}
86-
fill
87-
sizes="33vw"
88-
className="object-cover"
89-
/>
90-
</div>
91-
<figcaption>
92-
<p
93-
className="font-Nexa my-5 text-xs font-extralight"
94-
style={{ letterSpacing: '0.1rem' }}
95-
>
96-
{i + 1}. {name}
97-
</p>
75+
<figure
76+
className="h-100 relative overflow-hidden"
77+
style={{ aspectRatio: '0.705' }}
78+
>
79+
<Image
80+
src={thumbnail.url!}
81+
alt={thumbnail.alt!}
82+
fill
83+
sizes="33vw"
84+
className="object-cover blur-[2px]"
85+
/>
86+
<div className="img-overlay"></div>
87+
<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">
88+
{i + 1}. {name}
9889
</figcaption>
9990
</figure>
10091
</Link>
@@ -104,7 +95,7 @@ export default function Carousel({ projects }: Props) {
10495
</ol>
10596
<div
10697
data-glide-el="controls"
107-
className="pointer-events-none flex items-center justify-end gap-x-5 px-20 text-xl"
98+
className="pointer-events-none flex items-center justify-end gap-x-5 px-20 text-xl mt-5"
10899
>
109100
<button
110101
data-glide-dir="<"
@@ -127,10 +118,13 @@ export default function Carousel({ projects }: Props) {
127118
</div>
128119
</div>
129120
</div>
130-
<div id="carousel-mobile" className="lg:hidden flex flex-col justify-center bg-vector-grey">
121+
<div
122+
id="carousel-mobile"
123+
className="lg:hidden flex flex-col gap-y-5 justify-center bg-vector-grey"
124+
>
131125
<div className="glide__track bg-vector-grey" data-glide-el="track">
132126
<ol className=" glide__slides">
133-
{projects.map(({ id, name, thumbnail }) => {
127+
{projects.map(({ id, name, thumbnail }, i) => {
134128
thumbnail = thumbnail as Media
135129

136130
if (!thumbnail?.url) return 'Sin miniatura seleccionada'
@@ -141,25 +135,26 @@ export default function Carousel({ projects }: Props) {
141135
href={`/projects/${id}`}
142136
className="mx-auto w-fit flex-col items-start transition-transform hover:scale-110 hover:cursor-pointer flex"
143137
>
144-
<figure>
145-
<div className="h-100 relative" style={{ aspectRatio: '3/5' }}>
146-
<Image
147-
src={thumbnail.url!}
148-
alt={thumbnail.alt!}
149-
fill
150-
sizes="80vw"
151-
className="object-cover"
152-
placeholder="blur"
153-
blurDataURL={thumbnail.sizes!.loading!.url!}
154-
style={{
155-
objectPosition: `${thumbnail.focalX}% ${thumbnail.focalY}%`,
156-
}}
157-
/>
158-
</div>
159-
<figcaption>
160-
<p className="font-Nexa my-5" style={{ letterSpacing: '0.1rem' }}>
161-
{name}
162-
</p>
138+
<figure
139+
className="h-100 relative overflow-hidden"
140+
style={{ aspectRatio: '0.705' }}
141+
>
142+
<Image
143+
src={thumbnail.url!}
144+
alt={thumbnail.alt!}
145+
fill
146+
sizes="80vw"
147+
className="object-cover zoom"
148+
placeholder="blur"
149+
priority={i === projectIndex}
150+
blurDataURL={thumbnail.sizes!.loading!.url!}
151+
style={{
152+
objectPosition: `${thumbnail.focalX}% ${thumbnail.focalY}%`,
153+
}}
154+
/>
155+
<div className="img-overlay"></div>
156+
<figcaption className="font-Nexa uppercase font-bold text-center text-sm w-4/5 absolute z-20 top-1/2 left-1/2 bg-vector-black/40 -translate-1/2 border-1 border-vector-cream/30 p-2">
157+
{i + 1}. {name}
163158
</figcaption>
164159
</figure>
165160
</Link>

‎src/components/mainPage/Footer.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22

33
import Image from 'next/image'
44
import logoWhite from '@public/images/logoWhite.svg'
5+
import { useTranslations } from 'next-intl'
56

67
export default function Footer() {
8+
const t = useTranslations('NavBar')
9+
710
return (
811
<div>
912
<div className="relative flex flex-wrap items-center justify-center gap-x-5 px-2 my-20 bg-vector-black">
1013
<p className="border-vector-orange border-b-1 xs:border-b-0 xs:border-r-1 py-2 xs:pr-5 text-2xl">
11-
Contacto
14+
{t('contact')}
1215
</p>
1316
<a href="mailto:[email protected]" className="py-5">
1417
[email protected]

‎src/lib/styles/descriptions.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,15 @@
4848
&::first-line {
4949
color: var(--color-vector-cream);
5050
}
51+
52+
p {
53+
font-weight: bold;
54+
}
55+
56+
em {
57+
font-style: normal;
58+
color: var(--color-vector-cream);
59+
}
5160
}
5261

5362
// The elements blocks by default have h-svh. The first element in the page should have header-screen height

‎src/lib/styles/glide.css‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,30 @@
88
.glide__bullet--active {
99
scale: 2;
1010
filter: brightness(100%);
11-
}
11+
}
12+
13+
.glide__slide .img-overlay {
14+
content: '';
15+
width: 100%;
16+
height: 100%;
17+
background-color: color-mix(in srgb, var(--color-vector-grey) 10%, transparent);
18+
position: absolute;
19+
z-index: 20;
20+
}
21+
22+
.glide__slide .zoom {
23+
transform: scale(1.5);
24+
}
25+
26+
.glide__slide--active .zoom {
27+
animation: img-zoom 0.5s ease-in-out forwards;
28+
}
29+
30+
@keyframes img-zoom {
31+
from {
32+
transform: scale(1.5);
33+
}
34+
to {
35+
transform: scale(1);
36+
}
37+
}

0 commit comments

Comments
 (0)