From 58bf7230a732a7d23e94bb7199f09b3d4c861daf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ail=C3=A9n=20Grimaldi?=
 <63558201+ail3ngrimaldi@users.noreply.github.com>
Date: Fri, 25 Aug 2023 19:13:58 -0300
Subject: [PATCH] Feature/39 scroll up (#57)

* Added mobile navigation

* Add scroll down link

* Closes #40 fix class name

* Add scroll up link Closes #39

* Change opacity and position of close icon

* add outline for virto-logo

* Add accessibility attributes Closes #42

* Feature/40 scroll down (#51)
---
 _includes/footer.liquid |  5 +++++
 _includes/up.svg        | 11 +++++++++++
 css/index.css           |  9 +++++++++
 css/layout.css          |  2 +-
 4 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 _includes/up.svg

diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index dd907a4..20fbb0c 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -11,4 +11,9 @@
                 <li><a href="#">Contacto</a></li>
             </ul>
         </nav>
+			<a href="#home" class="scroll-up-link lightest-lavender-text center-arrow">Volver arriba
+				<figure class="link-arrow">
+						{% include "up.svg" %}
+				</figure>
+	 		</a>
 </footer>
diff --git a/_includes/up.svg b/_includes/up.svg
new file mode 100644
index 0000000..173e349
--- /dev/null
+++ b/_includes/up.svg
@@ -0,0 +1,11 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_123_2)">
+<path d="M10.9004 21.2V0" stroke="#DED0F1" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0.700195 10.5999L10.9002 0.399902L21.1002 10.5999" stroke="#DED0F1" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_123_2">
+<rect width="21.8" height="22.2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/css/index.css b/css/index.css
index 9b5700c..ccaba41 100644
--- a/css/index.css
+++ b/css/index.css
@@ -60,6 +60,7 @@ figure.logo svg {
 .dark-olive-text { color: var(--clr-olive-darker); }
 .light-green-text { color: var(--clr-green-lighter); }
 .light-lavender-text { color: var(--clr-lavender-lighter); }
+.lightest-lavender-text { color: var(--clr-lavender-lightest); }
 
 a, button, p, .subtitle {
     font-family:  var(--font-secondary);
@@ -77,6 +78,11 @@ a, button, p, .subtitle {
 	left: 90%;
 }
 
+.scroll-up-link { 
+	position: relative; 
+	bottom: 20%; 
+}
+
 /*Home*/
 #home, .top-nav { background-color: var(--clr-green-lighter);   }
 #home button { background-color: var(--clr-green-darker); }
@@ -119,6 +125,9 @@ a, button, p, .subtitle {
 		top: auto;
 		transform: none;
 	  }
+	.scroll-up-link {
+		display: none;
+	}
 }
 
 #home .max, #presentacion .max {
diff --git a/css/layout.css b/css/layout.css
index 83151e6..983e1be 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -116,7 +116,7 @@ footer {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    justify-content: space-between;
+    justify-content: end;
     flex-wrap: wrap;
 	margin: 3rem;
 	gap: 3rem;