Revise and correct buttons, unify form styles and delete unused secti…

…on (#159) * delete unused sections and text * delete <button> tags on navigation anchors and added .button class, update font-weight and unified form styles * update nav button
virto-network · Jun 27, 2024 · f725d1b · f725d1b
1 parent b16ffa8
commit f725d1b
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 239 deletions.
diff --git a/_data/index.yml b/_data/index.yml
@@ -1,9 +1,6 @@
 description: |
   Impactful marketplace infrastructure for
 
-default_message:
-  Coming soon.
-
 globals:
   calendly: https://calendly.com/katherinelopezvirto/45min
   apply: https://apply.virto.network/

diff --git a/_includes/footer.liquid b/_includes/footer.liquid
@@ -4,9 +4,6 @@
         </a>
         <nav>
             <ul class="nav-links bolder">
-			<div class="hide">
-                <li><a href="/comunidades-locales/">Comunidades locales</a></li>
-			</div>
 				<li><a href="/sobre-virto/" >Sobre Nosotros</a></li>
 				<li><a href="/servicios/" >Servicios</a></li>
 				<li><a href="/casos-de-uso/" >Casos de uso</a></li>

diff --git a/_includes/nav.liquid b/_includes/nav.liquid
@@ -8,11 +8,6 @@
 		<a class="menu-item {% if page.data.route == "/"%}current{% endif %}" href="/" id="virto-logo" role="menuitem" aria-label="Inicio">
 			{% include "virto_logo.svg" %}
 		</a>
-		<div class="hide">
-		<a class="menu-item {% if page.data.route == "comunidades-locales"%}current{% endif %}" href="/comunidades-locales/" role="menuitem" aria-label="Comunidades locales">
-				Comunidades locales
-			</a>
-		</div>
 		<a class="menu-item {% if page.data.route == "sobre-nosotros"%}current{% endif %}" href="/sobre-nosotros/" role="menuitem" aria-label="Sobre Nosotros">
 			Sobre Nosotros
 		</a>
@@ -25,11 +20,9 @@
 		<a class="menu-item {% if page.data.route == "blog"%}current{% endif %}" href="/blog/" role="menuitem" aria-label="Blog">
 			Blog
 		</a>
-		<button class="app-button">
-			<a class="app-button-link" href="https://virto.app/">
+		<a class="app-button-link button" href="https://virto.app/">
 			Ingresar a la app
-			</a>
-		</button>
+		</a>
 		<a id="menu-icon" class="menu-icon" aria-label="Abrir menú" tabindex="1">
 			<svg width="30" height="30" viewBox="-2 -2 34 34" aria-labelledby="Icono menu mobile">
 				<title id="Icono menu mobile">Menu mobile</title>
@@ -40,11 +33,6 @@
 		</a>
 		<nav id="menu-dropdown" aria-label="Secundaria">
 		    <a id="close-menu" class="close-menu" aria-label="Cerrar menú"></a>
-			<div class="hide">
-			<a class="menu-item {% if page.data.route == "comunidades-locales"%}current{% endif %}" href="/comunidades-locales/" role="menuitem" aria-label="Comunidades locales">
-				Comunidades locales
-			</a>
-			</div>
 			<a class="menu-item {% if page.data.route == "sobre-nosotros"%}current{% endif %}" href="/sobre-nosotros/" role="menuitem" aria-label="Sobre Nosotros">
 				SOBRE NOSOTROS
 			</a>
@@ -57,11 +45,9 @@
 			<a class="menu-item {% if page.data.route == "blog"%}current{% endif %}" href="/blog/" role="menuitem" aria-label="Blog">
 				BLOG
 			</a>
-			<button class="app-button-mobile dark-olive-text">
-				<a href="https://virto.app/">
+			<a class="app-button-link button" href="https://virto.app/">
 				Ingresar a la app
-				</a>
-		</button>
+			</a>
 		</nav>
 	</div>
 </nav>

diff --git a/about.liquid b/about.liquid
@@ -217,11 +217,9 @@ section >  article {
 		<h3 class="regular">{{ about.subtitle }}</h3>
 		<h2>{{ about.title }}</h2>
 		<h3 class="bold white-text">{{ about.paragraph }}</h3>
-		<button>
-			<a href={{ form }}>
+			<a class="button" href={{ form }}>
 				{{ about.call_to_action }}
 			</a>	
-		</button>
 	</article>
 </section>
 {% endif %}

diff --git a/communities.liquid b/communities.liquid
diff --git a/css/common.css b/css/common.css
@@ -21,39 +21,28 @@ section>article.max {
     /* justify-content: space-evenly; */
 }
 
-input {
+button, .button {
     border: none;
     margin: 1em 0;
-    border-radius: 50px;
-    width: 80%;
-    padding: clamp(5px, 2vh, 20px) clamp(20px, 4vw, 40px);
-    font-size: var(--font-size-button);
-}
-
-button {
-    border: none;
-    margin: 1em 0;
-    font-weight: 400;
+    font-weight: var(--font-weight-600);
     border-radius: 50px;
     width: fit-content;
     padding: clamp(5px, 2vh, 20px) clamp(20px, 4vw, 40px);
     text-align: center;
 	background-color: var(--clr-green-darker);
 	font-size: var(--font-size-button);
 	transition: background-color 650ms ease, color 650ms ease;
+    color: var(--clr-olive-darker);
 
     &:hover {
-        background-color: var(--clr-lavender-darker); color: white;
+        background-color: var(--clr-lavender-darker); color: white !important;
+        text-decoration: none;
     }
     &:focus-visible {
         outline: 2px solid var(--clr-lavender-darker); 
     }
 }
 
-/*Property added in order to avoid default iOS configurations, once deployed it needs to be tested */
-button a { color: inherit !important; }
-button a:hover { text-decoration: none; }
-
 /*Classes for links with an arrow on them*/
 .center-arrow { display: flex; align-items: center; }
 .link-arrow { height: 1em; width: 1em; margin-left: 0.5em; }
@@ -232,3 +221,45 @@ dialog img {
     cursor: pointer;
 }
 
+/* Mail Form */
+.mail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2em;
+}
+
+#mail-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100%;
+    margin: 1em 0;
+}
+
+#mail-form input {
+    border: none;
+    border-radius: 50px;
+    padding: clamp(5px, 2vh, 20px) clamp(20px, 4vw, 40px);
+    margin: 0.25em 0;
+    font-size: var(--font-size-button);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#mail-button {
+    padding: clamp(5px, 2vh, 20px) clamp(20px, 4vw, 40px);
+    font-size: 1.2rem;
+    width: 100%;
+    background-color: var(--clr-lavender-lighter);
+    color: var(--clr-olive-darker);
+}
+
+#mail-button:focus-visible, .button:focus-visible {
+    outline: 2px solid var(--clr-lavender-darker);
+}
+
+#mail-button:hover {
+    background-color: var(--clr-lavender-darker); color: white;
+    text-decoration: none;
+}
diff --git a/css/index.css b/css/index.css
@@ -245,18 +245,3 @@ figure.logo svg {
 .link-to:hover {
     transform: scale(1.2);
 }
-
-/*Mail Section*/
-
-#mail-button {
-    background-color: var(--clr-lavender-darker);
-    color: var(--clr-white);
-}
-
-#mail-cta {
-    width: 100%;
-}
-
-#mail-cta * {
-    width: 90%;
-}
diff --git a/css/layout.css b/css/layout.css
@@ -93,15 +93,16 @@ nav a:not(.logo) {
 
 .top-nav a.app-button-link  {
   height: 6vh;
-  border-radius:50px;
 }
 
-.app-button, .app-button-mobile {
+.app-button-link {
+  font-weight: var(--font-weight-500);
   padding: 0;
+  color: var(--clr-olive-darker) !important;
 }
 
 @media screen and (max-width: 1300px) {
-  .top-nav a:not(.menu-icon), .app-button {
+  .top-nav a:not(.menu-icon) {
     display: none;
   }
 }

diff --git a/index.liquid b/index.liquid
@@ -50,14 +50,14 @@ data:
 </section>
 {% endif %}
 
-<section {% if home_section.id == "mail-cta" %} id="mail-cta" class="light-lavender-bg dark-olive-text">
+<section {% if home_section.id == "mail-cta" %} id="mail-cta" class="mail light-lavender-bg dark-olive-text">
 	<article class="animated max">
-		<h1 class="header-0">{{ home_section.title }}</h1>
+		<h3 class="header-1 boldest">{{ home_section.title }}</h3>
 		<form id="mail-form">
 			<input type="text" name="contactName" placeholder="{{ home_section.placeholder_name }}">
 			<input type="text" name="contactLastName" placeholder="{{ home_section.placeholder_last_name }}">
 			<input type="email" name="contactEmail" placeholder="{{ home_section.placeholder_email }}" required>
-			<button type="submit" id="mail-button" class="bolder">{{ home_section.cta }}</button>
+			<button type="submit" id="mail-button">{{ home_section.cta }}</button>
 		</form>
 	</article>
 </section>
@@ -116,7 +116,7 @@ data:
 				<ul class="faq-list">
 					{% for question in home_section.questions %}
 						<li>
-							<button class="question-button bolder">{{ question.question }}</button>
+							<button class="question-button">{{ question.question }}</button>
 							<div class="answer hidden">
 								<p>{{ question.answer }}</p>
 							</div>
@@ -151,7 +151,7 @@ data:
 			<span>{{ home_section.title }}</span>
 		</h2>
 		<h3>{{ home_section.content  }}</h3>
-		<button class="bolder"><a href={{ form }} >{{ home_section.call_to_action }}</a></button>
+		<a class="button" href={{ form }} >{{ home_section.call_to_action }}</a>
 		<ul>
 		{% for social in home_section.socials %}
 			<a class="link-to" title={{ social.title }} href={{ social.link }}>