diff --git a/app/assets/landingpage/app.css b/app/assets/landingpage/app.css index 49957233172..f8212cc99a8 100644 --- a/app/assets/landingpage/app.css +++ b/app/assets/landingpage/app.css @@ -49,6 +49,7 @@ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + font-size: 130%; font-size: calc(1vw + 1vh); } h1 { @@ -69,16 +70,11 @@ p { line-height: 1.6em; margin-bottom: 1.6rem; } - -@media (min-width: 1313px) { - html { - font-size: calc(1vw + 1vh); } } - -@media (max-width: 1312px) { + @media (max-width: 1312px) { html { font-size: 120%; } } -@media (max-width: 992px) { + @media (max-width: 992px) { html { font-size: 110%; } } @@ -616,10 +612,10 @@ section#intro { width: 98%; display: grid; grid-template-columns: 1.5fr 1fr; - padding-top: 1rem; } + padding-top: 5rem; } section#intro div { align-self: center; - max-width: 100%; } + max-width: 39rem; } section#intro div p { max-width: 20rem; } section#intro div .big { @@ -635,7 +631,8 @@ section#intro { section#intro { height: inherit; grid-template-columns: 1fr; - margin: 0em 3em; } + margin: 0em 3em; + padding-top: 0em } section#intro div { grid-row: 2; } section#intro figure { diff --git a/app/assets/landingpage/logo.scss b/app/assets/landingpage/logo.scss index c76def8e415..90febe74e27 100644 --- a/app/assets/landingpage/logo.scss +++ b/app/assets/landingpage/logo.scss @@ -3,10 +3,10 @@ top: 3em; left: 3em; - img{ - //width: 150px; - width: 8.7rem; - } + img{ + //width: 150px; + width: 8.7rem; + } } diff --git a/app/assets/landingpage/section_footerconsensys.scss b/app/assets/landingpage/section_footerconsensys.scss index 15aa996327d..e051a5a6aab 100644 --- a/app/assets/landingpage/section_footerconsensys.scss +++ b/app/assets/landingpage/section_footerconsensys.scss @@ -2,10 +2,10 @@ section#footerconsensys{ // background-color: var(--starwhite); - figure{ - width: 8rem; - margin: auto; - padding: 3em 0em; + figure{ + width: 8rem; + margin: auto; + padding: 3em 0em; } } \ No newline at end of file diff --git a/app/assets/landingpage/section_footersocial.scss b/app/assets/landingpage/section_footersocial.scss index 17bb3921d3e..8fa8d855f9e 100644 --- a/app/assets/landingpage/section_footersocial.scss +++ b/app/assets/landingpage/section_footersocial.scss @@ -27,14 +27,14 @@ section#footersocial{ - svg{ - background-color: none; - stroke: var(--starwhite); - stroke-width: 2; - stroke-miterlimit: 5; - width: 3rem; - height: 3rem; - fill: none; + svg{ + background-color: none; + stroke: var(--starwhite); + stroke-width: 2; + stroke-miterlimit: 5; + width: 3rem; + height: 3rem; + fill: none; transition: all 500ms ease; diff --git a/app/assets/landingpage/section_grid.scss b/app/assets/landingpage/section_grid.scss index dda93d89a52..e79ec0b6bbd 100644 --- a/app/assets/landingpage/section_grid.scss +++ b/app/assets/landingpage/section_grid.scss @@ -11,10 +11,10 @@ section.grid { div.grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - padding-top: 2rem; - margin-bottom: 3em; + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 2rem; + margin-bottom: 3em; div { align-self: center; diff --git a/app/assets/landingpage/section_intro.scss b/app/assets/landingpage/section_intro.scss index 7542984be36..3d83ebea88a 100644 --- a/app/assets/landingpage/section_intro.scss +++ b/app/assets/landingpage/section_intro.scss @@ -2,20 +2,20 @@ section#intro{ height: 100vh; margin-left: 3em; - display: grid; - grid-template-columns: 1.5fr 1fr; - padding-top: 1rem; - - div { - align-self: center; - max-width: 100%; - - p { - max-width: 20rem; - } - .big { - font-size: 1.5em; - } + display: grid; + grid-template-columns: 1.5fr 1fr; + padding-top: 5rem; + + div { + align-self: center; + max-width: 39rem; + + p { + max-width: 20rem; + } + .big { + font-size: 1.5em; + } } figure { @@ -43,6 +43,7 @@ section#intro{ grid-template-columns: 1fr; margin: 0em 3em; + padding-top: 0em; div{ grid-row: 2; diff --git a/app/assets/landingpage/section_newsletter.scss b/app/assets/landingpage/section_newsletter.scss index dae2405a96c..215b042922f 100644 --- a/app/assets/landingpage/section_newsletter.scss +++ b/app/assets/landingpage/section_newsletter.scss @@ -47,16 +47,16 @@ section#newsletter{ display: block; } - button.btn{ - background-color: var(--vinuspurple); - margin-left: 0.5rem; + button.btn{ + background-color: var(--vinuspurple); + margin-left: 0.5rem; } - .options input[type="radio"] { - border: 0px; - width: 0.6rem; - height: 0.6rem; - } + .options input[type="radio"] { + border: 0px; + width: 0.6rem; + height: 0.6rem; + } } @@ -76,23 +76,23 @@ section#newsletter{ } - label { - padding: 0rem 0rem; - } + label { + padding: 0rem 0rem; + } - div.inputs { - flex-direction: column; - padding: 1rem; - } + div.inputs { + flex-direction: column; + padding: 1rem; + } - button.btn { - margin-left: 0; - } + button.btn { + margin-left: 0; + } margin-left: 1.5em; margin-right: 1.5em; - } + } } diff --git a/app/assets/landingpage/section_twitter.scss b/app/assets/landingpage/section_twitter.scss index 3fa94b37726..0d0b66301c4 100644 --- a/app/assets/landingpage/section_twitter.scss +++ b/app/assets/landingpage/section_twitter.scss @@ -38,14 +38,14 @@ section#twitter{ padding: 2em; padding-top: 0em; - img{ - width: 3rem; - height: auto; - border-radius: 3rem; - margin: auto; - position: relative; - top: -1.5rem; - } + img{ + width: 3rem; + height: auto; + border-radius: 3rem; + margin: auto; + position: relative; + top: -1.5rem; + } figcaption{ color: var(--starwhite); diff --git a/app/assets/landingpage/typography.scss b/app/assets/landingpage/typography.scss index b194e5589f1..aa858fa8fb2 100644 --- a/app/assets/landingpage/typography.scss +++ b/app/assets/landingpage/typography.scss @@ -1,10 +1,11 @@ html{ - font-family: 'Mulish', sans-serif; - font-kerning: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-size: calc(1vw + 1vh); + font-family: 'Mulish', sans-serif; + font-kerning: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-size: 130%; + font-size: calc(1vw + 1vh); } @@ -32,19 +33,13 @@ p{ -@media #{$desktop} { - html{ - font-size: calc(1vw + 1vh); - } -} @media #{$laptop} { html{ - font-size: 120%; + font-size: 120%; } } - @media #{$tablet} { html{ font-size: 110%; diff --git a/app/assets/v2/scss/landingpage/app.scss b/app/assets/v2/scss/landingpage/app.scss index 7d0485e3b89..9a5174b2ac9 100644 --- a/app/assets/v2/scss/landingpage/app.scss +++ b/app/assets/v2/scss/landingpage/app.scss @@ -45,7 +45,9 @@ html { font-kerning: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; } + text-rendering: optimizeLegibility; + font-size: 130%; + font-size: calc(1vw + 1vh); } h1 { font-size: 250%; @@ -65,10 +67,6 @@ p { line-height: 1.6em; margin-bottom: 1.6rem; } -@media (min-width: 1313px) { - html { - font-size: 130%; } } - @media (max-width: 1312px) { html { font-size: 120%; } } @@ -88,7 +86,7 @@ p { margin-top: -2.5em; left: 3em; } #logo img { - width: 200px; } + width: 8.7rem; } @media (max-width: 688px) { #logo { @@ -135,6 +133,7 @@ section.grid h1 { section.grid div.grid { display: grid; grid-template-columns: repeat(2, 1fr); + padding-top: 2rem; margin-bottom: 3em; } section.grid div.grid div { align-self: center; @@ -609,12 +608,13 @@ section#intro { margin-left: 1em; width: 98%; display: grid; - grid-template-columns: repeat(2, 1fr); } + grid-template-columns: 1.5fr 1fr; + padding-top: 5rem; } section#intro div { align-self: center; - max-width: 700px; } + max-width: 39rem; } section#intro div p { - max-width: 600px; } + max-width: 20rem; } section#intro div .big { font-size: 1.5em; } section#intro figure { @@ -628,7 +628,8 @@ section#intro figure .hidden { section#intro { height: inherit; grid-template-columns: 1fr; - margin: 0em 3em; } + margin: 0em 3em; + padding-top: 0em } section#intro div { grid-row: 2; } section#intro figure { @@ -776,12 +777,12 @@ section#twitter figure { padding: 2em; padding-top: 0em; } section#twitter figure img { - width: 80px; + width: 3rem; height: auto; - border-radius: 80px; + border-radius: 3rem; margin: auto; position: relative; - top: -40px; } + top: -1.5rem; } section#twitter figure figcaption { color: var(--starwhite); } section#twitter figure a { @@ -830,7 +831,12 @@ section#newsletter form { padding: 0; display: block; } section#newsletter button.btn { - background-color: var(--vinuspurple); } + background-color: var(--vinuspurple); + margin-left: 0.5rem; } +section#newsletter .options input[type="radio"] { + border: 0px; + width: 0.6rem; + height: 0.6rem; } @media (max-width: 688px) { section#newsletter { @@ -838,6 +844,11 @@ section#newsletter button.btn { margin-right: 1.5em; } section#newsletter h2 { padding: 0rem 1rem; } + section#newsletter div.inputs { + flex-direction: column; + padding: 1rem; } + section#newsletter button.btn { + margin-left: 0; } section#newsletter span { display: block; margin-bottom: 1rem; } @@ -884,8 +895,8 @@ section#footersocial figure svg { stroke: var(--starwhite); stroke-width: 2; stroke-miterlimit: 5; - width: 64px; - height: 64px; + width: 3rem; + height: 3rem; fill: none; transition: all 500ms ease; } section#footersocial figure svg:hover { @@ -900,6 +911,6 @@ section#footersocial figure svg:hover { margin-right: 1.5em; } } section#footerconsensys figure { - width: 200px; + width: 8rem; margin: auto; padding: 3em 0em; }