From fe0c1b7a352fae3664a5738e6b43afb67fb40c23 Mon Sep 17 00:00:00 2001 From: Borja Robert Date: Tue, 15 Feb 2022 09:38:46 +0100 Subject: [PATCH] separa el slider en dos --- src/app.css | 5 +- src/lib/Asesoramiento.svelte | 7 +- src/lib/Header/CenterHeader.svelte | 107 ++++++++++++++++++ .../{Header.svelte => OldHeader.svelte} | 0 src/lib/Slider.svelte | 62 ++++++---- src/routes/__layout.svelte | 3 +- src/routes/index.svelte | 11 +- static/ruben-bagues-YNZcOVNHv6k-unsplash.jpg | Bin 0 -> 125956 bytes static/slider02-test-1140.webp | Bin 0 -> 36484 bytes static/slider02-test-500.webp | Bin 0 -> 22536 bytes 10 files changed, 166 insertions(+), 29 deletions(-) create mode 100644 src/lib/Header/CenterHeader.svelte rename src/lib/Header/{Header.svelte => OldHeader.svelte} (100%) create mode 100644 static/ruben-bagues-YNZcOVNHv6k-unsplash.jpg create mode 100644 static/slider02-test-1140.webp create mode 100644 static/slider02-test-500.webp diff --git a/src/app.css b/src/app.css index 9fd82ef..0feaa94 100644 --- a/src/app.css +++ b/src/app.css @@ -1,5 +1,8 @@ @import '@fontsource/fira-mono'; -@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap'); + * { margin: 0; diff --git a/src/lib/Asesoramiento.svelte b/src/lib/Asesoramiento.svelte index 2669248..d930429 100644 --- a/src/lib/Asesoramiento.svelte +++ b/src/lib/Asesoramiento.svelte @@ -17,7 +17,8 @@ + diff --git a/src/lib/Header/Header.svelte b/src/lib/Header/OldHeader.svelte similarity index 100% rename from src/lib/Header/Header.svelte rename to src/lib/Header/OldHeader.svelte diff --git a/src/lib/Slider.svelte b/src/lib/Slider.svelte index 2e91471..9288bc6 100644 --- a/src/lib/Slider.svelte +++ b/src/lib/Slider.svelte @@ -5,17 +5,18 @@
- - - Globos de colores + + + Globos de colores
+
Revista 87
- Celebramos la ley de eutanasia + Todas las eutanasias
- El 25 de junio, por la tarde, DMD organiza concentraciones en varias ciudades para celebrar la entrada en vigor de la ley de eutanasia. También pondremos mesas informativas para resolver dudas sobre la ley a quien lo necesite. ¡Apúntate! + En el primer año de la LORE se ha ayudado a morir a personas en situaciones que en otros países costaron años.
@@ -28,28 +29,27 @@ height: 500px; display: grid; justify-content: center; - z-index: 3; + z-index: 0; overflow: hidden; + grid-template-columns: 1fr 1fr; } .slider-image { max-height: 500px; z-index: 2; + grid-column: 1/2; + overflow: hidden; } .slider-image img { - width: 100%; - position: absolute; - bottom: 0; - left: 0; - z-index: 1; + object-fit: cover; + object-position: -480px bottom; } .slider-content { position: absolute; - bottom: calc(1rem); + bottom: 0; right: calc(1rem - 12px); width: 60%; height: auto; - background: linear-gradient(120deg, rgba(179, 15, 29, 0.75) 0%, #B30F1D 100%); display: grid; align-content: center; justify-content: center; @@ -59,17 +59,34 @@ .slider-title { text-align: center; - font-size: 2rem; + font-size: 4rem; font-weight: 900; - text-transform: uppercase; - font-family: 'Open Sans', sans-serif; - color: #efefef; + font-family: 'Prata'; + color: #fff; + line-height: 3.5rem; + text-shadow: 0 0 1.5rem rgba(124, 29, 29, 1); } .slider-text { - font-size: 1.2rem; + font-size: 1.5rem; margin-top: 1rem; color: white; + /* background: linear-gradient(180deg, rgba(179, 15, 29, 0) 10%, #B30F1Dcc 100%); */ + /* background: rgba(178, 34, 34, 0.7 ); */ + /* background: rgba(124, 58, 58,0.85); */ + background: linear-gradient(140deg, rgba(124, 43, 43, 0.5) 0%, rgba(128, 29, 29, 0.8) 70%); + padding: 1rem; + border-radius: 8px; + font-family: 'Oswald'; +} + +.ref { + position: absolute; + top: 2rem; + left: 1rem; + color: firebrick; + font-size: 1rem; + z-index: 10; } @media (max-width: 768px) { @@ -92,11 +109,16 @@ } .slider-title { - font-size: 1.5rem; + font-size: 3.5rem; } .slider-text { - font-size: 1rem; + font-size: 1.5rem; + line-height: 1.8rem; + background: linear-gradient(140deg, rgba(124, 43, 43, 0.2) 0%, rgba(128, 29, 29, 0.9) 50%); + } + .ref { + top: 1rem; } } \ No newline at end of file diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 3ee92c6..f68b5ad 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,5 +1,6 @@ diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 99fb5f7..24a2870 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -15,14 +15,17 @@ import Asesoramiento from "$lib/Asesoramiento.svelte"; Asociación Derecho a Morir Dignamente + +
- +
+
- +
@@ -35,11 +38,11 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";