Ethereum-org-website: Adjust site layout properly for XL screens

[samajammin]

Prize Bounty

50 DAI

Challenge Description

Our current layout doesn't adjust properly for XL screens (see screenshots in comments). Update the site layout to adjust properly for XL screens.

Submission Requirements

• [ ] Create centered fixed-width container (1140px) for all content (including nav & footer), similar to Medium example below that applies at XL screen breakpoint ($breakL = 1280px)
• [ ] If the content does not take up the full viewport height, position the footer at the bottom of the viewable screen. To be clear, do NOT make the footer sticky via an absolute/fixed position. Merely ensure it displays at the bottom of the screen in situations where the page content is not the full height of the screen (e.g. on the homepage for most XL screens, see comment below).

Judging Criteria

The prize will be awarded to the first submission of sufficient quality. "Sufficient quality" is an admittedly subjective evaluation. We're seeking a flexible solution that will adapt to any XL screen size, e.g. by using a flexbox pattern for alignment or viewport height rules rather than applying fixed pixel dimensions.

Winner Announcement Date

We will review work within a week of submission. Payouts will occur within a week of submission acceptance.

[sneg55]

I think expected is something like medium.com layout with equal sides and top menu with fixed-width after breakpoint:

actual behavior :

[samajammin]

Still an issue.

e.g. ethereum.org/

e.g. ethereum.org/enterpise

[samsuh]

i think mostly that the footer on the bottom left appears in the middle of the page, where i expect it to stick to the bottom of the viewable screen on the main page.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 50.0 DAI (50.0 USD @ $1.0/DAI) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $104,686.90 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 2 weeks, 2 days from now.
Please review their action plans below:

1) phantomcracker has started work.

[WAITING FOR APROVE] Create centered fixed-width container (1140px) for all content (including nav & footer), similar to Medium example below that applies at XL screen breakpoint ($breakL = 1280px)
[ WAITING FOR APROVE] If the content does not take up the full viewport height, position the footer at the bottom of the viewable screen. To be clear, do NOT make the footer sticky via an absolute/fixed position. Merely ensure it displays at the bottom of the screen in situations where the page content is not the full height of the screen (e.g. on the homepage for most XL screens, see comment below).
2) sesamestrong has started work.

I have implemented this and am just able to sign up now; the rules outside of Gitcoin allowed me to contribute first and apply for the bounty later. I was unable to sign up before because the bounty was Traditional and another person had already started work.

Learn more on the Gitcoin Issue Details page.

[samajammin]

Hey @maxstalker - thanks for applying! I'll double-check our Gitcoin bounty set up but FYI, generally we welcome all PRs & accept the first valid submission, as pointed out in the "Judging Criteria". Moving forward I’ll make sure to explicitly state that applying is not necessary.

[MaxStalker]

@samajammin understood :)

[Sesamestrong]

Would somebody mind changing this to a contest style? I have something working with all the features requested but cannot formally ask to start work.

EDIT: I now see that applying is not necessary. Sorry for the disturbance!

[Sesamestrong]

Normal functionality:

Very large screen:

[samajammin]

Hey @Sesamestrong - thanks for your interest! Those images look good from what I can tell. In case it's not clear, please submit a PR to submit a solution for us to review.

[Sesamestrong]

Got it! I'm about ready to send in the PR. Do I have to write tests for this or am I good just having the CSS and HTML changed?

[Sesamestrong]

If I have submitted the PR, do I have to do anything extra on Gitcoin?

[gitcoinbot]

@phantomcracker Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@maxstalker Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[Sesamestrong]

@samajammin
I know I did not sign up for this bounty on Gitcoin because somebody had already started work. I do not know if Gitcoin requires a deposit of DAI to their servers, or if you are free to give it of your own accord to whomever fulfills the bounty.
If the former is true, I will wait until the other bounty seeker gives up, then I will apply to "start work", at which point I assume that I can submit work by linking to my accepted PR. In the case of the latter, my Ethereum public address is 0x30f25D8c35E0f0d0a640Bb318EF3A661eB856942.

[samajammin]

@Sesamestrong there's no limit on who can "apply" to our bounties. In this format, we decided to accept "first valid submission", which you completed. Just make sure you apply to the bounty & we'll get you paid out.

[samajammin]

Closing this issue out - solved in #624. Thanks, @Sesamestrong!

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 50.0 DAI (50.0 USD @ $1.0/DAI) has been submitted by__:

1. @phantomcracker
2. @sesamestrong

@vs77bb please take a look at the submitted work:

• PR by @Sesamestrong
• PR by @PhantomCracker

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $94,201.49 more funded OSS Work available on the Gitcoin Issue Explorer

[Sesamestrong]

@samajammin I cannot apply to the bounty as it is in Traditional format and Gitcoin user phantomcracker has submitted work. In order to apply, I believe that the bounty needs to be changed to Contest format.

I'm sorry for disturbing you with this.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 50.0 DAI (50.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @Sesamestrong.__

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $69,260.56 more funded OSS Work available on the Gitcoin Issue Explorer