Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improves responsiveness of landing page for larger displays #8386

Merged
merged 2 commits into from
Feb 13, 2021
Merged

Improves responsiveness of landing page for larger displays #8386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34bb5b5
Improves responsiveness of landing page for larger screens
gdixon Feb 12, 2021
3c9bb38
Fixes font-size for < $laptop and improves padding-top for > $desktop
gdixon Feb 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 25 additions & 20 deletions app/assets/landingpage/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ html {
font-kerning: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; }
text-rendering: optimizeLegibility;
font-size: calc(1vw + 1vh); }

h1 {
font-size: 250%;
Expand All @@ -68,14 +69,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%; } }

@media (max-width: 992px) {
html {
font-size: 110%; } }
Expand All @@ -91,7 +84,7 @@ p {
margin-top: -2.5em;
left: 3em; }
#logo img {
width: 200px; }
width: 8.7rem; }

@media (max-width: 688px) {
#logo {
Expand Down Expand Up @@ -138,6 +131,7 @@ section.grid {
section.grid div.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-top: calc(3vh + 3vw);
margin-bottom: 3em; }
section.grid div.grid div {
align-self: center;
Expand Down Expand Up @@ -612,12 +606,13 @@ section#intro {
margin-left: 1em;
width: 98%;
display: grid;
grid-template-columns: repeat(2, 1fr); }
grid-template-columns: 1.5fr 1fr;
padding-top: 1rem; }
section#intro div {
align-self: center;
max-width: 700px; }
max-width: 100%; }
section#intro div p {
max-width: 600px; }
max-width: 20rem; }
section#intro div .big {
font-size: 1.5em; }
section#intro figure {
Expand Down Expand Up @@ -779,12 +774,12 @@ section#twitter {
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 {
Expand Down Expand Up @@ -833,14 +828,24 @@ section#newsletter {
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 {
margin-left: 1.5em;
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; }
Expand Down Expand Up @@ -887,8 +892,8 @@ section#footersocial {
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 {
Expand All @@ -903,6 +908,6 @@ section#footersocial {
margin-right: 1.5em; } }

section#footerconsensys figure {
width: 200px;
width: 8rem;
margin: auto;
padding: 3em 0em; }
2 changes: 1 addition & 1 deletion app/assets/landingpage/logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

img{
//width: 150px;
width: 200px;
width: 8.7rem;
}
}

Expand Down
2 changes: 1 addition & 1 deletion app/assets/landingpage/section_footerconsensys.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ section#footerconsensys{


figure{
width: 200px;
width: 8rem;
margin: auto;
padding: 3em 0em;
}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/landingpage/section_footersocial.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ section#footersocial{
stroke: var(--starwhite);
stroke-width: 2;
stroke-miterlimit: 5;
width: 64px;
height: 64px;
width: 3rem;
height: 3rem;
fill: none;


Expand Down
1 change: 1 addition & 0 deletions app/assets/landingpage/section_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ section.grid{

display: grid;
grid-template-columns: repeat(2, 1fr);
padding-top: calc(3vh + 3vw);
margin-bottom: 3em;

div{
Expand Down
16 changes: 8 additions & 8 deletions app/assets/landingpage/section_intro.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ section#intro{
margin-left: 3em;

display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 3em;
grid-template-columns: 1.5fr 1fr;
padding-top: 1rem;

div{
align-self: center;
max-width: 700px;
max-width: 100%;

p{
max-width: 600px;
}
.big{
font-size: 1.5em;
}
max-width: 20rem;
}
.big{
font-size: 1.5em;
}
}

figure{
Expand Down
20 changes: 18 additions & 2 deletions app/assets/landingpage/section_newsletter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,15 @@ section#newsletter{

button.btn{
background-color: var(--vinuspurple);
}
margin-left: 0.5rem;
}


.options input[type="radio"] {
border: 0px;
width: 0.6rem;
height: 0.6rem;
}


}
Expand All @@ -77,11 +84,20 @@ section#newsletter{
label{
padding: 0rem 0rem;
}

div.inputs {
flex-direction: column;
padding: 1rem;
}

button.btn {
margin-left: 0;
}

margin-left: 1.5em;
margin-right: 1.5em;

}
}
}


Expand Down
6 changes: 3 additions & 3 deletions app/assets/landingpage/section_twitter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ section#twitter{


img{
width: 80px;
width: 3rem;
height: auto;
border-radius: 80px;
border-radius: 3rem;
margin: auto;
position: relative;
top: - 40px;
top: -1.5rem;
}

figcaption{
Expand Down
13 changes: 1 addition & 12 deletions app/assets/landingpage/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ html{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-size: calc(1vw + 1vh);
}


Expand Down Expand Up @@ -36,18 +37,6 @@ p{



@media #{$desktop} {
html{
font-size:130%;
}
}

@media #{$laptop} {
html{
font-size: 120%;
}
}

@media #{$tablet} {
html{
font-size: 110%;
Expand Down
6 changes: 3 additions & 3 deletions app/retail/templates/home/index2020.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ <h1>
<h2>Here to Earn?</h2>
<p>
Build exciting projects and upskill on development while earning
Ethereum and other tokens. Find mentorship by connecting with
ETH and other tokens. Find mentorship by connecting with
talented developers and leaders of Ethereum’s top companies.
</p>
<div class="actions">
Expand Down Expand Up @@ -194,7 +194,7 @@ <h2>Get the Latest Gitcoin News! Join Our Newsletter.</h2>
<label for="work">work on bounties</label>
</div>

<div>
<div class="inputs d-flex justify-content-center">
<input type="email" name="EMAIL" placeholder="Enter your email" required />

<button type="submit" class="btn fe-pulse">Subscribe</button>
Expand Down Expand Up @@ -400,7 +400,7 @@ <h2>Legal</h2>

<!-- footer social icons -->

<section id="footersocial">
<section id="footersocial" class="d-flex justify-content-center">
<figure>
<a href="/fb">
<svg class="fusion">
Expand Down