diff --git a/css/common.css b/css/common.css index 267f4e2..812fb14 100644 --- 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 that contains an arrow*/ diff --git a/css/index.css b/css/index.css index 9346907..7e434b3 100644 --- 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 index f8b3fa7..4349f0d 100644 --- 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 index 6424d6b..65a76f2 100644 --- a/img/underline.svg +++ b/img/underline.svg @@ -1,7 +1,7 @@ + viewBox="0 0 702.4 20.3" style="enable-background:new 0 0 702.4 20.3;" xml:space="preserve"> -
+
{% include "right.svg" %}
@@ -72,7 +72,7 @@ data:

Conoce más sobre