Merge pull request #169 from felixicaza/fix/footer

chore: update footer
UXCorpRangel · Jul 10, 2024 · d5edb6b · d5edb6b
2 parents adee72a + 7122bc3
commit d5edb6b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 29 deletions.
diff --git a/public/img/emoji-heart-fire.webp b/public/img/emoji-heart-fire.webp
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -96,6 +96,7 @@ import Twitch from '../../public/svg/twitch.svg';
   </div>
   <div class="copyright">
     <p set:html={t('copyright')} />
+    <p class="community" set:html={t('copyright_community')} />
   </div>
 </footer>
 
@@ -104,52 +105,35 @@ import Twitch from '../../public/svg/twitch.svg';
     border-top: 1px solid #2f303f;
     background: radial-gradient(334.99% 90.54% at 0.35% 53.17%, #010119 0%, #0d0d0e 100%);
     width: 100%;
-    padding-inline: 0;
-    margin-inline: 0;
-  }
+    padding: 2rem 1rem;
+    text-align: center;
 
-  .container {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    padding-block: 1.5rem;
-    padding-inline: 4.5rem;
-    margin: 0;
-    width: 100%;
+    & > * + * {
+      margin-top: 3rem;
+    }
   }
 
   .column1 {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
     gap: 2rem;
-    width: 100%;
-    @media (width <= 570px) {
-      justify-content: center;
-    }
   }
 
   .social {
-    inline-size: 100%;
-    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 
   .social p {
-    color: hsl(0deg 0% 100%);
-    width: fit-content;
-    @media (width <= 570px) {
-      text-align: center;
-      justify-content: center;
-    }
-    @media (width <= 570px) {
-      width: 100%;
-    }
+    color: white;
   }
 
   .social-icons {
     display: flex;
+    justify-content: center;
     gap: 1rem;
-    margin-block-start: 1rem;
-    width: fit-content;
   }
 
   .icon {
@@ -163,8 +147,17 @@ import Twitch from '../../public/svg/twitch.svg';
   .copyright {
     color: hsl(0deg 0% 100%);
     display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    line-height: initial;
+  }
+
+  .community {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     justify-content: center;
-    padding-bottom: 25px;
   }
 
   .logo {

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -20,6 +20,7 @@
   "thunder_desc": "It is my next design system, currently under creation, with a firm commitment to universal accessibility. It's not ready yet, but my goal is clear: to create an accessible and functional experience for different products.",
   "social_net": "Social Networks",
   "copyright": "&copy; 2024 Proudly powered by Ana Rangel.",
+  "copyright_community": "Made with <span class=\"heart\"><img src=\"/img/emoji-heart-fire.webp\" width=\"32\" height=\"32\" alt=\"love\" loading=\"lazy\"></span> for the community",
   "about_me_title": "Not only do I have experience in companies, I like to contribute to communities and share knowledge.",
   "about_studies_title": "Studies",
   "about_studies_desc": "Graduated in Advertising and Marketing, UX/UI courses, artificial intelligence management, and programming.",

diff --git a/src/locales/es/common.json b/src/locales/es/common.json
@@ -20,6 +20,7 @@
   "thunder_desc": "Es mi próximo sistema de diseño, actualmente en proceso de creación, con un compromiso firme hacia la accesibilidad universal. Aún no está listo, pero mi meta es clara: crear una experiencia accesible y funcional para distintos productos.",
   "social_net": "Redes Sociales",
   "copyright": "&copy; 2024 Orgullosamente impulsado por Ana Rangel.",
+  "copyright_community": "Hecho con <span class=\"heart\"><img src=\"/img/emoji-heart-fire.webp\" width=\"32\" height=\"32\" alt=\"love\" loading=\"lazy\"></span> por la comunidad",
   "about_me_title": "No sólo tengo experiencia en empresas, me gusta contribuir en comunidades y compartir conocimiento.",
   "about_studies_title": "Estudios",
   "about_studies_desc": "Graduada en Publicidad y Mercadeo, cursos de UX/UI, manejo de inteligencia artificial, y programación.",

diff --git a/src/styles/base/_general.scss b/src/styles/base/_general.scss
@@ -52,4 +52,22 @@ body {
 
 	max-inline-size: 5.5rem;
 	max-block-size: 1.5rem;
+}
+
+.heart {
+	display: inline-block;
+	animation: pulse 0.9s ease-out infinite;
+	filter: drop-shadow(0 0 0.5rem #f82e03);
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.2);
+	}
+	100% {
+		transform: scale(1);
+	}
 }