src/app.css

@@ -1,8 +1,5 @@
 @import '@fontsource/fira-mono';
-@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&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;

src/lib/Asesoramiento.svelte

@@ -17,8 +17,7 @@
 <style>
   .content {
     min-height: 10rem;
-    background: firebrick;
+    background: #ddd;
-    color: white;
     margin: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -42,7 +41,7 @@
     font-size: 1.2rem;
     line-height: 2.4rem;
     margin-bottom: 1rem;
-    font-family: 'Azeret Mono', cursive;
+    font-family: 'Comfortaa', cursive;
     text-transform: uppercase;
     font-weight: 500;
     text-align: center;
@@ -51,7 +50,7 @@
 
   p {
     font-size: 1.3rem;
-    color: white;
+    color: firebrick;
     font-weight: 500;
     margin-bottom: 1rem;
   }

src/lib/Header/CenterHeader.svelte

@@ -1,107 +0,0 @@
-<script></script>
-
-<header>
-  <div class="logo">
-    <img alt="Logo de la asociación Derecho a Morir Dignamente" src="https://derechoamorir.org/wp-content/uploads/2018/01/logo_sineslogan_web_72pp_transparente.png">
-  </div>
-  <div class="hamburger">
-  <svg viewBox="0 0 100 80" width="40" height="40">
-    <rect width="100" height="12"></rect>
-    <rect y="30" width="100" height="12"></rect>
-    <rect y="60" width="100" height="12"></rect>
-  </svg>
-</div>
-  <nav>
-    <ul>
-      <li>^</li>
-      <li>Conócenos</li>
-      <li>Tus derechos</li>
-      <li>Grupos</li>
-      <li>Comunicación</li>
-      <li>Contacto</li>
-      <li>Eventos</li>
-      <li class="menu-highlight">Asóciate</li>
-    </ul>
-    <div class="menumobile"> = </div>
-  </nav>
-</header>
-
-<style>
-  .hamburger {
-    width: 64px;
-    align-self: center;
-    cursor: pointer;
-  }
-  header {
-  width: 100%;
-  background: white;
-  height: 6rem;
-  padding: 1rem;
-  display: grid;
-  grid-template-columns: 64px 1fr 64px;
-  grid-auto-flow: dense;
-  grid-gap: 4rem;
-  align-items: end;
-  z-index: 50;
-}
-
-header .logo {
-  grid-column: 2/3;
-  justify-self: center;
-}
-
-header .logo img {
-  max-width: 150px;
-}
-nav {
-  display: none;
-}
-nav ul {
-  grid-column: 1/2;
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-}
-nav li {
-  text-transform: uppercase;
-  font-size: 0.8rem;
-  padding: 4px 0;
-}
-
-.menu-highlight {
-  color: white;
-  background: firebrick;
-  box-shadow: -8px 0 0 0 firebrick, 8px 0 0 0 firebrick;
-}
-
-.menumobile {
-  display: none;
-}
-@media (max-width: 768px) {
-  header {
-    grid-template-columns: 1fr 30vw;
-    grid-gap: 2rem;
-    height: auto;
-    padding: 8px;
-    align-items: end;
-    width: 100%;
-  }
-  header .logo {
-    display: grid;
-    align-items: end;
-  }
-  header .logo img {
-    max-width: 30vw;
-  }
-  nav ul {
-    display: none;
-  }
-  .menumobile {
-    display: block;
-    font-size: 3rem;
-  }
-}
-</style>
-

src/lib/Slider.svelte

@@ -5,18 +5,17 @@
 <div class="slider">
   <div class="slider-image">
     <picture>
-      <source srcset="slider02-test-500.webp" media="(max-width: 768px)">
+      <source srcset="slider01-test-500w.jpg" media="(max-width: 768px)">
-      <source srcset="slider02-test-1140.webp">
+      <source srcset="slider01-test-1108w.jpg">
-      <img srcset="slider01-test-1140.webp" alt="Globos de colores">
+      <img srcset="slider01-test-1108w.jpg" alt="Globos de colores">
     </picture>
   </div>
-  <div class="ref">Revista 87</div>
   <div class="slider-content">
     <div class="slider-title">
-      Todas las eutanasias
+      Celebramos la ley de eutanasia
     </div>
     <div class="slider-text">
-      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.
+      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!
     </div>
   </div>
 </div>
@@ -29,27 +28,28 @@
   height: 500px;
   display: grid;
   justify-content: center;
-  z-index: 0;
+  z-index: 3;
   overflow: hidden;
-  grid-template-columns: 1fr 1fr;
 }
 .slider-image {
   max-height: 500px;
   z-index: 2;
-  grid-column: 1/2;
-  overflow: hidden;
   
 }
 .slider-image img {
-  object-fit: cover;
+  width: 100%;
-  object-position: -480px bottom;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
 }
 .slider-content {
   position: absolute;
-  bottom: 0;
+  bottom: calc(1rem);
   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,34 +59,17 @@
 
 .slider-title {
   text-align: center;
-  font-size: 4rem;
+  font-size: 2rem;
   font-weight: 900;
-  font-family: 'Prata';
+  text-transform: uppercase;
-  color: #fff;
+  font-family: 'Open Sans', sans-serif;
-  line-height: 3.5rem;
+  color: #efefef;
-  text-shadow: 0 0 1.5rem rgba(124, 29, 29, 1);
 }
 
 .slider-text {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   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) {
@@ -109,16 +92,11 @@
   }
 
   .slider-title {
-    font-size: 3.5rem;
+    font-size: 1.5rem;
   }
 
   .slider-text {
-    font-size: 1.5rem;
+    font-size: 1rem;
-    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;
   }
 }
 </style>

src/routes/__layout.svelte

@@ -1,6 +1,5 @@
 <script>
-	// import Header from '$lib/Header/OldHeader.svelte';
+	import Header from '$lib/Header/Header.svelte';
-	import Header from '$lib/Header/CenterHeader.svelte';
 	import '../app.css';
 </script>
 

src/routes/index.svelte

@@ -15,17 +15,14 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";
 	<title>Asociación Derecho a Morir Dignamente</title>
 </svelte:head>
 
-<Slider />
-
 <section>
-	<Asesoramiento/>
+	<Slider />
 </section>
-
 <section>
 	<Highlights />
 </section>
 
-
+	<Asesoramiento/>
 
 <section>
 	<News />
@@ -38,11 +35,11 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";
 <style>
 	section {
 		background: white;
-		padding: 1rem 0;
+		padding: 1rem;
 		display: block;
 		position: relative;
 		min-height: 6rem;
-		margin: 2rem auto;
+		margin: 0 auto;
 	}
 	footer {
 		min-height: 6rem;