Fixes/68 home (#69)

* Improve positioning of Virto logo, menu icon and underlined.svg; delete old unused css properties * Change position properties of svg on local-community section and delete gap due to deprecated html structure * Test: anchor color on iOS Read line 22 of common.css * Move margin-top property from common.css to layout.css In order to avoid using -important- * Hide banner arrows The buttons-container will be hidden until the content is defined. Once that happens, funcionality will be added to the arrows * Closes #68 Change alt content of know-more section
virto-network · Oct 3, 2023 · 2257fcd · 2257fcd
1 parent 2ffb74d
commit 2257fcd
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 58 deletions.
diff --git a/css/common.css b/css/common.css
@@ -1,5 +1,4 @@
 * { margin: 0; padding: 0; font-family: var(--font-primary); box-sizing: border-box;}
-body { margin-top: var(--nav-height) !important; } /*temporary solution*/
 a, button { text-decoration: none; cursor: pointer; }
 main { display: flex; flex-direction: column; }
 section { display: flex; padding: calc(2rem + 5vmin) calc(1rem + 4vmin); min-height: 90dvh; padding-top: var(--nav-height); }
@@ -18,7 +17,9 @@ button {
 	font-size: var(--font-size-button);
 	transition: background-color 650ms ease, color 650ms ease;
 }
-button a { color: inherit; }
+
+/*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; }
 
 .center-arrow { /*Applied to <a> that contains an arrow*/

diff --git a/css/index.css b/css/index.css
@@ -161,10 +161,6 @@ a.center-arrow.dark-olive-text.boldest {
 /*Local community*/
 #local-community { display: grid; gap: 1rem; }
 
-#local-community > article > article { 
-    gap: clamp(20em, 10vw, 50em);
-}
-
 .logo.build-machine img {
     width:clamp(300px, 38vw, 800px);
 }
@@ -173,10 +169,11 @@ a.center-arrow.dark-olive-text.boldest {
     .build-machine::after {
         content: url('../img/arrow_left.svg');
         display: inline-block;
-        position: relative;
-        bottom: 35vh;
-        left: 7vw;
-        width: 10vw;
+        position: absolute;
+        bottom: 70%;
+        left: 45%;
+        transform: translate(-100%, -50%);
+        width: 20px;
         height: auto;
     }
   }
@@ -208,19 +205,10 @@ a.center-arrow.dark-olive-text.boldest {
 #you-decide article>ul.max {
     align-items: center;
 	display: flex;
-    gap: clamp(.5rem, 6vw, 3rem);;
+    gap: clamp(.5rem, 6vw, 3rem);
 	justify-content: center;
 }
 
-#you-decide article>ul.max a {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    gap: 2em;
-}
-
 #you-decide article>ul svg {
     fill: var(--clr-olive-darker);
     height: 4rem; width: 4rem;
@@ -229,8 +217,9 @@ a.center-arrow.dark-olive-text.boldest {
 .underlined-element::after {
     content: url('../img/underline.svg');
     position: relative;
-    bottom: 3vh;
-    width: 10vw;
+    bottom: clamp(3vh, 4vh + 1vw, 7vh);
+	left: 7.5vw;
+    width: 7vw;
     height: auto;
 }
 

diff --git a/css/layout.css b/css/layout.css
@@ -1,15 +1,21 @@
 @media print { :root { --color-text: black; } }
 html, body { all: initial; display: block; scroll-behavior: smooth; }
-body { background: var(--clr-olive-darker); font-family:  var(--font-primary); color: var(--color-text); min-height: 100vh }
+body { background: var(--clr-olive-darker); font-family:  var(--font-primary); color: var(--color-text); min-height: 100vh; margin-top: var(--nav-height); }
 body.hidden { opacity: 0;}
 
 .max { width: 100%; }
-.sticky-hack { border: none; display: block; height: 1px; margin: 0; width: 100%; }
 
 /** Top navigation**/
-#nav { background-color: var(--clr-green-lighter);}
+#nav { 
+	background-color: var(--clr-green-lighter);
+	height: var(--nav-height);
+	padding: 2.5rem 1rem;
+	position: fixed;
+	width: 100%;
+    top: 0;
+	z-index: 99;
+}
 
-nav { height: var(--nav-height); }
 nav .row {
 	align-items: center;
 	box-sizing: border-box;
@@ -27,16 +33,6 @@ nav a {
 	overflow: hidden;
 	font-family: var(--font-primary);
 }
-nav a.active { font-weight: 700; }
-nav a.active svg path { stroke-width: 3; }
-
-.top-nav { 
-	padding: 2.5rem 4rem;
-	position: fixed;
-	width: 100%;
-    top: 0;
-	z-index: 99;
-}
 
 #virto-logo {
 	margin-right: auto;
@@ -68,22 +64,7 @@ nav a:not(.logo) {
 	font-size: clamp(1rem, calc(0.9rem + 0.7vw), 1.3rem);
 }
 
-/*color nav about link*/
-#about-link, h1>span {
-	color: var(--clr-lavender-darker);
-}
-
-/* icons */
-nav a:not(.logo) svg {
-	stroke: var(--color-accent);
-	stroke-width: 2;
-}
-
-@media screen and (min-width:600px) {
-	nav svg { display: initial; margin-right: 0.5rem; }
-	nav a.logo svg #letters { display: initial; }
-	nav a.logo { width: initial; height: calc(var(--nav-height) - 3rem); }
-}
+#about-link { color: var(--clr-lavender-darker); }
 
 @media screen and (max-width:1300px) {
     .top-nav a:not(.menu-icon) {
@@ -97,7 +78,6 @@ nav a:not(.logo) svg {
     }
 }
 
-/** Footer **/
 footer {
     display: flex;
     flex-direction: row;

diff --git a/img/underline.svg b/img/underline.svg
diff --git a/index.liquid b/index.liquid
@@ -18,7 +18,7 @@ data:
 				</figure>
 	 		</a>
 		</div>
-		<div class="buttons-container">
+		<div class="buttons-container hide">
 			<figure>
 				{% include "right.svg" %}
 			</figure>
@@ -72,7 +72,7 @@ data:
 	<h3 class="boldest dark-olive-text">Conoce más sobre</h3>
 	<ul class="auto-grid max">
 		<li class="animated">
-			<img src="img/build.svg" alt="Define when content is decided"/>
+			<img src="img/build.svg" alt="build"/>
 			<h3 class="bolder dark-olive-text">¿Por qué Virto?</h3>
 			<p class="grey-text regular">Explora cómo Virto equipa con herramientas para crear en la Web 3.0, impulsando soluciones reales en un ecosistema descentralizado.</p>
 			<a class="bold dark-olive-text center-arrow" href="/coming-soon/">
@@ -81,7 +81,7 @@ data:
 			</a>
 		</li>
 		<li class="animated">
-			<img src="img/window.svg" alt="Define when content is decided"/>
+			<img src="img/window.svg" alt="window"/>
 			<h3 class="bolder dark-olive-text">Quienes nos apoyan</h3>
 			<p class="grey-text regular">Conoce a nuestros partners estratégicos que respaldan la visión de Virto, uniendo fuerzas para una Web 3.0 inclusiva y sostenible.</p>
 			<a class="bold dark-olive-text center-arrow" href="/about/#partners">
@@ -90,7 +90,7 @@ data:
 			</a>
 		</li>
 		<li class="animated">
-			<img src="img/group.svg" alt="Define when content is decided"/>		
+			<img src="img/group.svg" alt="community"/>		
 			<h3 class="bolder dark-olive-text">Unirte a comunidades locales</h3>
 			<p class="grey-text regular">Descubre cómo Virto reduce costos de intermediación, fomentando democracia y colaboración en comunidades locales a través de la blockchain.</p>
 			<a class="bold dark-olive-text center-arrow" href="/coming-soon/">