diff --git a/.pretierrc b/.pretierrc index d65b421..5b07cfc 100644 --- a/.pretierrc +++ b/.pretierrc @@ -6,5 +6,6 @@ "tabWidth": 2, "useTabs": false, "arrowParens": "always", - "endOfLine": "lf" + "endOfLine": "lf", + "htmlWhitespaceSensitivity": "css" } diff --git a/README.md b/README.md index 33df1a0..7d40089 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,12 @@ Eliges las tarjetas. Se pulsa el botón grande. Obtienes una lista de cocktails que pueden hacerse con esos licores. -## Stack +## Stack + vite con vanilla javascript. Ejecútalo en local: + ```bash npm run dev ``` diff --git a/index.html b/index.html index 3a66914..7c01e51 100644 --- a/index.html +++ b/index.html @@ -7,58 +7,77 @@ - - - + + + - + Licores son Amores -
+
-

Licores son Amores

-

Descubre qué cócteles puedes preparar

- + +

Descubre qué cócteles puedes preparar

+
-

Tus Licores

-
-
- + +
+ - -
- - -
+ +
-

Recetas Disponibles

-
-

Selecciona tus licores y presiona "¡A Mezclar!" para descubrir qué cócteles puedes preparar.

-
+

Recetas Disponibles

+
+

+ Selecciona tus licores y presiona "¡A Mezclar!" para descubrir qué + cócteles puedes preparar. +

+
-

Advertencia ⚠️

-
-

El consumo de alcohol está prohibido a menores de 18 años 🔞

-

No te recomiendo el consumo de alcohol en general 🚱

-

Si vas a consumir alcohol siempre con moderación 🍷✋

-
+

Advertencia ⚠️

+
+

+ El consumo de alcohol está prohibido a menores de 18 años 🔞 +

+

+ No te recomiendo el consumo de alcohol en general 🚱 +

+

+ Si vas a consumir alcohol siempre con moderación 🍷✋ +

+
-
+
diff --git a/package.json b/package.json index a6231f9..e33086e 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "dev": "vite", "build": "vite build", "preview": "vite preview", - "format": "prettier --write \"src/**/*.{js,json,css,md}\"", - "format:check": "prettier --check \"src/**/*.{js,json,css,md}\"" + "format": "prettier --write \"./**/*.{js,json,css,md,html}\"", + "format:check": "prettier --check \"src/**/*.{js,json,css,md,html}\"" }, "devDependencies": { "prettier": "^3.8.1", diff --git a/public/banner.png b/public/banner.png new file mode 100644 index 0000000..bfa8edc Binary files /dev/null and b/public/banner.png differ diff --git a/src/styles.css b/src/styles.css index f67513e..77507a8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -73,21 +73,15 @@ body::before { header { text-align: center; - margin-bottom: 4rem; + margin-bottom: 2rem; position: relative; } -h1 { - font-family: "Fredoka", sans-serif; - font-size: 4.5rem; - font-weight: 700; - color: var(--deep-red); +.header-image { + border-radius: 1rem; + max-width: 768px; + margin: 0; margin-bottom: 0.5rem; - letter-spacing: -0.02em; - text-shadow: - 2px 2px 0 var(--amber), - 4px 4px 0 var(--cream); - animation: fadeInDown 0.8s ease-out; } .subtitle { @@ -95,6 +89,7 @@ h1 { color: var(--olive); font-style: italic; animation: fadeIn 1s ease-out 0.3s backwards; + margin-bottom: 0.5rem; } @keyframes fadeInDown { @@ -463,8 +458,8 @@ h2 { } @media (max-width: 768px) { - h1 { - font-size: 3rem; + .header-image { + max-width: 100%; } .spirits-grid { diff --git a/vite.config.js b/vite.config.js index 38ba467..8b1d22f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,5 @@ -import { defineConfig } from 'vite' +import { defineConfig } from "vite"; export default defineConfig({ - base: '/', -}) + base: "/", +});