Skip to content

Commit 4f66c39

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #51 from Lemoncode/feature/#50-setup-base-theme-typography-and-main-layout
Feature/#50 setup base theme typography and main layout
2 parents 170489c + 09996ca commit 4f66c39

13 files changed

Lines changed: 278 additions & 18 deletions

File tree

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["prettier-plugin-tailwindcss"]
3+
}

‎front/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"start": "next dev"
88
},
99
"dependencies": {
10+
"@fontsource/nunito-sans": "^5.2.7",
1011
"@tailwindcss/postcss": "^4.1.17",
1112
"next": "^15.4.1",
1213
"postcss": "^8.5.6",
@@ -17,6 +18,8 @@
1718
"devDependencies": {
1819
"@types/react": "^19.1.8",
1920
"@types/react-dom": "^19.1.6",
20-
"daisyui": "^5.5.5"
21+
"daisyui": "^5.5.5",
22+
"prettier": "^3.7.3",
23+
"prettier-plugin-tailwindcss": "^0.7.2"
2124
}
2225
}

‎front/public/images/logo.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎front/src/app/embalse-provincia/[provincia]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export default async function EmbalseProvinciaListadoPage({ params }: Props) {
88
const { provincia } = await params;
99
return (
1010
<div className="flex flex-col gap-8">
11-
<h2 className="text-4xl">Embalses de {provincia}</h2>
11+
<h2>Embalses de {provincia}</h2>
1212

13-
<Link href="/embalse/casasola" className="text-blue-500 text-xl">
13+
<Link href="/embalse/casasola" className="link-accessible">
1414
Embalse de Casasola
1515
</Link>
1616
</div>

‎front/src/app/embalse-provincia/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import Link from "next/link";
33
export default function EmbalsesProvinciaPage() {
44
return (
55
<div className="flex flex-col gap-8">
6-
<h2 className="text-4xl">Embalse por provincias</h2>
7-
<Link href="/embalse-provincia/malaga" className="text-blue-500 text-xl">
6+
<h2>Embalse por provincias</h2>
7+
<Link href="/embalse-provincia/malaga" className="link-accessible">
88
Málaga
99
</Link>
1010
</div>

‎front/src/app/embalse/[embalse]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default async function EmbalseDetallePage({ params }: Props) {
88
const { embalse } = await params;
99
return (
1010
<div className="flex flex-col gap-8">
11-
<h2 className="text-4xl">Detalle del embalse: {embalse}</h2>
11+
<h2>Detalle del embalse: {embalse}</h2>
1212
</div>
1313
);
1414
}

‎front/src/app/globals.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,88 @@
11
@import "tailwindcss";
22
@plugin "daisyui";
3+
4+
@import "@fontsource/nunito-sans/400.css";
5+
@import "@fontsource/nunito-sans/500.css";
6+
@import "@fontsource/nunito-sans/600.css";
7+
8+
@plugin "daisyui/theme" {
9+
name: "info-embalse";
10+
default: true;
11+
color-scheme: light;
12+
13+
--color-primary: #1b9aaa;
14+
--color-accent: #d9d900;
15+
16+
--color-base-100: #feffff; /* White background */
17+
--color-base-200: #eaeaea; /* Grey background */
18+
--color-base-content: #060d14; /* Text color */
19+
}
20+
21+
@theme {
22+
--font-sans: "Nunito Sans", sans-serif;
23+
24+
/* Title color */
25+
--color-title: #051c1f;
26+
27+
/* Accesible visited link color */
28+
--color-visited-link: #257782;
29+
30+
/*Primary color palette*/
31+
32+
--color-brand-50: #e8f5f7;
33+
--color-brand-100: #d1ebee;
34+
--color-brand-200: #a4d7dd;
35+
--color-brand-300: #76c2cc;
36+
--color-brand-400: #49aebb;
37+
--color-brand-500: #1b9aaa; /* Primary color */
38+
--color-brand-600: #167b88;
39+
--color-brand-700: #105c66;
40+
--color-brand-800: #0b3e44;
41+
--color-brand-900: #051f22;
42+
--color-brand-950: #01161a;
43+
}
44+
45+
@layer base {
46+
h1,
47+
h2,
48+
h3,
49+
h4,
50+
h5,
51+
h6 {
52+
@apply text-title opacity-95;
53+
}
54+
55+
p,
56+
body {
57+
@apply opacity-85;
58+
}
59+
60+
/* H1 Title 36px */
61+
h1 {
62+
@apply text-4xl leading-none font-semibold;
63+
}
64+
65+
/* H2 Title 28px */
66+
h2 {
67+
@apply text-[28px] leading-normal font-semibold;
68+
}
69+
70+
/* H3 Subtitle 24px */
71+
h3 {
72+
@apply text-2xl leading-none font-medium;
73+
}
74+
75+
/* Text 14px */
76+
p,
77+
body {
78+
@apply text-base-content text-base leading-normal font-normal;
79+
}
80+
}
81+
82+
@layer utilities {
83+
/*Accesible link */
84+
85+
.link-accessible {
86+
@apply link text-title visited:text-visited-link font-bold opacity-95;
87+
}
88+
}

‎front/src/app/layout.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import "./globals.css";
3+
import { FooterComponent, HeaderComponent } from "./layouts";
34

45
interface Props {
56
children: React.ReactNode;
@@ -8,18 +9,14 @@ interface Props {
89
const RootLayout = (props: Props) => {
910
const { children } = props;
1011
return (
11-
<html lang="en">
12+
<html lang="en" data-theme="info-embalse">
1213
<body
13-
className="bg-gray-100 text-gray-900 flex flex-col min-h-screen"
14+
className="bg-base-200 text-base-content flex min-h-screen flex-col"
1415
suppressHydrationWarning
1516
>
16-
<header className="bg-gray-800 text-white p-4 text-center">
17-
<p className="text-3xl">Soy un header</p>
18-
</header>
17+
<HeaderComponent />
1918
<main className="grow p-8">{children}</main>
20-
<footer className="bg-gray-800 text-white p-4 text-center">
21-
<p>Soy un footer</p>
22-
</footer>
19+
<FooterComponent />
2320
</body>
2421
</html>
2522
);

‎front/src/app/layouts/footer.component.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Link from "next/link";
2+
import { FC } from "react";
3+
4+
export const FooterComponent: FC = () => {
5+
return (
6+
<footer className="bg-base-100">
7+
<div className="border-accent flex flex-col items-center gap-2 border-t-2 p-3">
8+
<div className="flex flex-col items-center gap-2 pb-[10px]">
9+
<Link
10+
href="/embalse-provincia"
11+
className="link-accessible text-[15px] leading-none font-normal"
12+
>
13+
Embalses por provincias
14+
</Link>
15+
16+
<div className="flex justify-between gap-2">
17+
<Link
18+
href="/aviso-legal"
19+
className="link-accessible text-sm font-normal"
20+
>
21+
Aviso Legal
22+
</Link>
23+
<Link
24+
href="/politica-cookies"
25+
className="link-accessible text-sm font-normal"
26+
>
27+
Política de cookies
28+
</Link>
29+
</div>
30+
</div>
31+
32+
<p className="text-xs leading-none font-normal">
33+
Infoembalse © 2025 Todos los derechos reservados
34+
</p>
35+
</div>
36+
</footer>
37+
);
38+
};

‎front/src/app/layouts/header.component.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { FC } from "react";
2+
3+
export const HeaderComponent: FC = () => {
4+
return (
5+
<header className="bg-base-100">
6+
<div className="border-accent flex h-[60px] items-center border-b-3 pl-5">
7+
<img src="/images/logo.svg" alt="InfoEmbalse logo" />
8+
</div>
9+
</header>
10+
);
11+
};

0 commit comments

Comments
 (0)