search

tinmagpie / deepdev

Deeper and deeper, where no browser has gone before...
113 stars 19 forks source link

Flexbox that front page #46

Closed rachelnabors closed 8 years ago

rachelnabors commented 8 years ago

SO!

We have 3 major components on that first screen:

  1. the logo
  2. the sub
  3. the text

At a narrow viewport, they stack on top of one another. So far so good.

But when they go side to side at a wider viewport, there's an issue: sometimes they push the waves outside the viewport. The .segment they're in have a 100vh height: height of the screen. We want to keep everyone inside that 100vh, waves included.

The wildcard is the text: it's responsive, it's em-based. It could be any height!

But the logo and the sub are SVG: they could be any height--if it helps the text fit.

Use Flexbox, set the SVG components to percentages, use CSS's calc(), whatever it takes, to ensure that the contents never push the waves down in this double column layout.

rachelnabors commented 8 years ago

Work in _title-card.scss.

operatorjen commented 8 years ago

@rachelnabors To be clear, you just don't want the sub to increase in height in order to make the waves drop, correct? Would setting a max-height on the sub in vh work as a solution?