First commit changes PR

General: Line-height unified which allowed to deleted unused regular-font and medium-paragraph classes. Remove TM for logos. Fixed indentation -let me know if there's still something where it's still not clear.-. Changed nested articles for divs. Deleted br's and set the styles as closest as I could using max-width. Particular: Fixed logo on mobile. Deleted second footer's nav and outdated html elements, fixed it for mobile. You decide section: Set contact links always to one row anc changed article for ul. Here-you-can section: Changed gap so it fits with the next section. Pending changed on next commit

_includes/footer.liquid

@@ -1,26 +1,14 @@
 <footer>
-    <div class="max footer-container">
         <a href="#" class="logo">
             {% include "virto_logo_small.svg" %}
         </a>
-        <div class="nav-container">
-            <nav>
-                <ul class="nav-links bolder">
-                    <li><a href="">Sobre Virto</a></li>
-                    <li><a href="#">Comunidades locales</a></li>
-                    <li><a href="#">Para desarrolladores</a></li>
-                    <li><a href="#">Blog</a></li>
-                    <li><a href="#">Contacto</a></li>
-                </ul>
-            </nav>
-        </div>
         <nav>
-            <ul class="secondary-links thin">
-                <li><a href="#">© 2023 Virto</a></li>
-                <li><a href="#">Legal</a></li>
-                <li><a href="#">Privacidad</a></li>
-                <li><a href="#">Cookies</a></li>
+            <ul class="nav-links bolder">
+                <li><a href="">Sobre Virto</a></li>
+                <li><a href="#">Comunidades locales</a></li>
+                <li><a href="#">Para desarrolladores</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Contacto</a></li>
             </ul>
         </nav>
-    </div>
 </footer>

_includes/nav.liquid

@@ -1,6 +1,6 @@
 <nav class="{{ class }} top-nav">
 	<div class="max row bold">
-		<a href="/#home" class="logo">
+		<a href="/#home" id="virto-logo">
 			{% include "virto_logo.svg" %}
 		</a>
 		<a {% if active == "about" %}class="active"{% endif %} href="/about/">

css/index.css

@@ -25,17 +25,6 @@ figure.logo svg {
     height: fit-content;
 }
 
-/*Text styles (colors, fonts, links, arrows) */
-.regular-font {
-    line-height: 35px;
-}
-
-.medium-paragraph {
-    line-height: 50px;
-    text-align: center;
-    letter-spacing: 1px;
-}
-
 .arrow {
     width: clamp(2em, 3vw, 4em);
     height: auto;
@@ -72,7 +61,7 @@ figure.logo svg {
 .light-green-text { color: var(--clr-green-lighter); }
 .light-lavender-text { color: var(--clr-lavender-lighter); }
 
-a, button, .regular-font, .subtitle, .medium-paragraph {
+a, button, p, .subtitle {
     font-family:  var(--font-secondary);
 }
 
@@ -97,7 +86,7 @@ a, button, .regular-font, .subtitle, .medium-paragraph {
 #home figure.logo { align-items: start; }
 
 @media (max-width: 1200px) {
-    #home .text-section, #presentacion>article> *, .max.footer-container {
+    #home .text-section, #presentacion>article> *, footer {
         text-align: center;
         align-items: center;
         justify-content: center;
@@ -132,22 +121,23 @@ a, button, .regular-font, .subtitle, .medium-paragraph {
     flex-wrap: wrap;
 }
 
-#presentacion > article > article.text-section {
+#presentacion > article > article.text-section, #presentacion figure.logo {
     margin-top: 2em;
 }
 
 /*Not sure about the name of this class*/
-.column { display: flex; gap: 2em; flex-direction: column;}
+.column { display: flex; flex-direction: column;}
 .link-arrow.color { color: var(--clr-green-lighter); }
 
 /*Not a programmer*/
-#not-programmer h2 { text-align: center;}
+#not-programmer h2 { text-align: center; max-width: 700px;}
 #not-programmer { justify-content: center; }
-#not-programmer>article { 
+#not-programmer, #not-programmer>article { 
     align-items: center; 
-    flex-direction: column; 
-    gap: 5rem;
+    flex-direction: column;
 }
+#not-programmer>article { gap: 5rem; }
+#not-programmer>article.max { margin-top: 5rem; max-width: 800px; }
 #not-programmer button { background-color: var(--clr-lavender-lighter);}
 
 /*Here you can*/
@@ -156,7 +146,7 @@ a, button, .regular-font, .subtitle, .medium-paragraph {
     align-items: center;
     display: grid;
     grid-template-columns: auto 1fr auto;
-    gap: 4em;
+    row-gap: 4em;
 }
 
 #here-you-can > h3.dark-olive-text, #here-you-can > .auto-grid {
@@ -189,8 +179,8 @@ a.center-arrow.dark-olive-text.boldest {
 /*Local community*/
 #local-community { background-color: var(--clr-whitest); display: grid; gap: 1rem; }
 
-#local-community > article > article {
-    gap: clamp(2em, 10vw, 5em);
+#local-community > article > article { 
+    gap: clamp(20em, 10vw, 50em);
 }
 
 .logo.build-machine svg {
@@ -199,13 +189,13 @@ a.center-arrow.dark-olive-text.boldest {
 
 @media (min-width: 1200px) {
     .build-machine::after {
-      content: url('../img/arrow_left.svg');
-      display: inline-block;
-    position: relative;
-    bottom: 35vh;
-    left: 7vw;
-    width: 10vw;
-    height: auto;
+        content: url('../img/arrow_left.svg');
+        display: inline-block;
+        position: relative;
+        bottom: 35vh;
+        left: 7vw;
+        width: 10vw;
+        height: auto;
     }
   }
 
@@ -232,7 +222,6 @@ a.center-arrow.dark-olive-text.boldest {
 #you-decide h2 {
     text-align: center;
     font-size: clamp(2.5rem, 5vw, 5.75rem);
-    line-height: 1;
 }
 
 #you-decide h3 { text-align: center;}
@@ -242,15 +231,14 @@ a.center-arrow.dark-olive-text.boldest {
 }
 
 #you-decide button { background-color: var(--clr-green-darker); margin: -3rem 0 3rem 0; }
-#you-decide>article.max {
+#you-decide>ul.max {
     align-items: center;
 	display: flex;
-    gap: 7rem;
-	flex-wrap: wrap;
+    gap: clamp(.5rem, 6vw, 3rem);;
 	justify-content: center;
 }
 
-#you-decide>article.max a {
+#you-decide>ul.max a {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -259,7 +247,7 @@ a.center-arrow.dark-olive-text.boldest {
     gap: 2em;
 }
 
-#you-decide>article svg {
+#you-decide>ul svg {
     fill: var(--clr-olive-darker);
     height: 4rem; width: 4rem;
 }
@@ -275,7 +263,7 @@ a.center-arrow.dark-olive-text.boldest {
 /*Media queries*/
 @media screen and (max-width:1200px) {
     figure { display: flex; } 
-    section>article, .max.footer-container { flex-direction: column; }
+    section>article { flex-direction: column; }
     #local-community .max {
         align-items: start;
         gap: 2rem;

css/layout.css

@@ -4,15 +4,19 @@ body { background: var(--clr-olive-darker); font-family:  var(--font-primary); c
 h1, h2, h3, h4, h5, h6, p {
 	margin: 0;
 	padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
 	line-height: calc(1em + 0.5vh);
-  }
+}
 
 h1, h2 {
 	font-size: var(--font-size-title-page);
 }
 
 p, a {
 	font-size: var(--font-size-paragraph);
+	line-height: clamp(1.5, 3vw, 1.6);
 }
 
 h3, h4 {
@@ -27,7 +31,7 @@ button {
 .sticky-hack { border: none; display: block; height: 1px; margin: 0; width: 100%; }
 
 /** Top navigation**/
-nav { height: var(--nav-height); padding: 2.5rem 4rem; }
+nav { height: var(--nav-height); }
 nav .row {
 	align-items: center;
 	box-sizing: border-box;
@@ -48,17 +52,19 @@ nav a {
 nav a.active { font-weight: 700; }
 nav a.active svg path { stroke-width: 3; }
 
-nav a.logo {
+.top-nav { padding: 2.5rem 4rem; }
+
+#virto-logo {
 	margin-right: auto;
-	margin-left: 1rem;
+	display: flex;
 	height: calc(var(--nav-height) - 1rem);
-	width: calc(var(--nav-height) - 1.4rem);
-}
-nav a.logo svg {
-	height: 100%;
 	width: auto;
+}
+#virto-logo svg {
 	align-self: start;
 	fill: var(--clr-olive-darker);
+	width: auto;
+    height: 60%;
 }
 
 nav a:not(.logo) {
@@ -89,79 +95,79 @@ nav a:not(.logo) svg {
 
 @media screen and (min-width:600px) {
 	nav svg { display: initial; margin-right: 0.5rem; }
-	nav a.logo { width: initial; height: calc(var(--nav-height) - 3rem); }
 	nav a.logo svg #letters { display: initial; }
+	nav a.logo { width: initial; height: calc(var(--nav-height) - 3rem); }
 }
-@media print { nav { display: none; } }
 
 @media screen and (max-width:1300px) {
-    .top-nav a:not(.logo):not(.menu-icon) {
+    .top-nav a:not(.menu-icon) {
         display: none;
     }
 }
+
 @media screen and (min-width:1300px) {
     nav a.menu-icon {
         display: none;
     }
 }
 
-/**
- * Footer links
- */
- footer {
-    display: block;
-}
-
-.max.footer-container {
+/** Footer **/
+footer {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
     flex-wrap: wrap;
+	margin: 3rem;
+	gap: 3rem;
 }
 
-.max.footer-container > .nav-container {
+footer > nav {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: calc(100% - 6vw - 10rem); /* El ancho restante después de restar el ancho del logo y el margen */
+    width: calc(100% - 6vw - 10rem);
 }
 
-footer .max {
-    align-items: center;
-    display: flex;
-    justify-content: space-evenly;
-    width: 100%;
+footer .nav-links {
+	text-align: center;
+	max-width: 800px;
 }
 
-.nav-links, .secondary-links {
+.nav-links {
     display: flex;
     gap: 3.5rem;
     flex-direction: row;
     align-items: center;
     list-style: none;
-    width: 90%;
-}
-
-.nav-links {
+    width: 100%;
 	flex-wrap: wrap;
 	row-gap: 1rem;
-	padding: 1rem 0 0 3rem;
+}
+
+.nav-links li {
+    align-self: flex-start;
+    margin-bottom: 1rem;
 }
 
  /*Logo's margin and size*/
-.max.footer-container > a.logo svg {
+footer > a.logo svg {
     width: 6vw; 
     height: auto;
-	margin: 4rem;
 }
 
 /*Font color and family font footer*/
-footer .footer-container nav a {
+footer nav a {
 	color: var(--clr-lavender-lightest);
 	font-family: var(--font-secondary);
 }
 
-ul.secondary-links> * { margin: 8rem 0 5rem -2rem;}
+@media screen and (max-width:700px) {
+	.nav-links {
+		justify-content: center;
+		margin: 0 auto;
+	}
+	footer { flex-direction: column; }
+}
 
-@media print { footer { display: none; } }
+@media print { footer, nav { display: none; } }