Web: The corners or #upper_left and .bounty don't line up

[shrugs]

#upper_left has a min-height of 140px and the .bounty_def element adjacent to it has a height of 136px.

A quick solution, at least on the latest chrome, is to give .bounty_def a height of 140px. A more expressive solution is most likely to either share some sass variables or use flexbox, depending on how the page is laid out.

via https://twitter.com/mattgcondon/status/935955005366067201

---

of note, the 10px padding on .bounty_left is a bit odd. I'm not familiar with this grid library, but the bounding boxes on these elements are a little odd; any ideas on why that 10px offset is necessary?

[owocki]

A quick solution, at least on the latest chrome, is to give .bounty_def a height of 140px. A more expressive solution is most likely to either share some sass variables or use flexbox, depending on how the page is laid out.

ill bounty 0.02 for a stopgap fix (described above), and will tip on top of that based upon a root cause fix.

[gitcoinbot]

__This issue now has a funding of 0.02 ETH (9.53 USD) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here

[gitcoinbot]

⚡️ A tip worth 0.02 ETH has been granted to @Kielek for this issue. ⚡️

Nice work @Kielek, check your email for further instructions. | Send a Tip

[owocki]

thanks @Kielek for the stopgap fix. saving the remainder of the bounty for someone who fixes the root caus!

[monokh]

@owocki Having a look at the current structure, I don't think its preferable to make a flex layout that contains the network section and call to action. This is because it doesn't appear on all pages so would need different structure for others - seems like it could get messy :slightly_smiling_face:
To keep things simple, i would vote for sass but it isn't built into the project yet. Is that something you are interested in having?

[owocki]

isnt sass a way of structuring css files? maybe im slow this sunday am, im not making the connection between the css file flavor and the page layout

[monokh]

@owocki Correct :slightly_smiling_face: This issue essentially stemmed from having 2 different values for the height that broke the layout. I believe the suggestion Shrugs was making by share some sass variables was to have the height of the network section and call to action be a sass variable = 300px. This way there is no chance for them to fall out of line in the future in addition to other elements in the layout being able to assume the same height and stay in line (for example if you had another similar box on the right side)

[owocki]

thanks for walking me through this. it all makes sense now :)

in an effort to not scar on the first cut i'm going to say lets not make the move to sass just yet. i'll keep this in the back of my mind though as we progress forward.

[gitcoinbot]

__The funding of 0.02 ETH attached to this issue has been approved & issued.__

Learn more at: https://gitcoin.co/funding/details?url=https://github.com/gitcoinco/web/issues/54

[thelostone-mc]

@owocki A thought -> what are the cons shifting to sass at an earlier stage

Reason I ask
moving to scss/sass

• makes css more maintainable, gives structure to it.
  The css I had written up for the testimonial would have been neater if I had sass IMHO
• cross compatibility across browsers ( not supported -> fallback logic )

Ignoring all that, the later this is pushed , the more effort would have to be put in to re-writing the old css, wouldn't it?

[owocki]

that's true; it would be.

i am convinced this is a good idea, i am just not as convinced it is a good idea relative to all the other things that are going on. each takes up a tiny bit of cognitive load, and it all adds up. i think this will get better once the team grows (esp when we have a someone focusing full time on frontend)

hindsight being 20/20, i wish i had designed main.css to be less of a giant monolith so that we could be enabled to experiment more piecemeal.

[thelostone-mc]

Haha fair enough ^_^

[owocki]

hindsight being 20/20, i wish i had designed main.css to be less of a giant monolith so that we could be enabled to experiment more piecemeal.

this might be a pattern we can start following in the future which will allow you @thelostone-mc to experiment with stuff like this

[shrugs]

it happens again!

[thelostone-mc]

@shrugs we have an PR open for that which will get merged over the weekend !! ^_^

https://github.com/gitcoinco/web/pull/323