Issue 5511 - Create Product Help Home Template for help.eyeo.com

static/scss/layout/_body.scss

 // This file is part of help.eyeo.com.
 // Copyright (C) 2017 Eyeo GmbH
 //
 // help.eyeo.com is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // help.eyeo.com is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 13 matching lines @@
 {
   padding-top: $lg;
   padding-bottom: $xl;
 
   @media (min-width: $phablet-breakpoint)
   {
     padding-top: $xl;
   }
 }
 
-.wrapper

[juliandoucette, 2017/09/12 13:21:57]

You seem to be re-writing the .container class in website-defaults _base.scss?

The existing differences are:

- You chose $md padding instead of $small-space (which are roughly equivalent,
except $small-space is arguably more accessible)
- You didn't resize this wrapper to device widths (I think that this resizing is
a good idea because it creates fewer test (and by-extension) edge cases. If the
design insists otherwise then I would suggest that we simply make this device
width resizing configurable in website-defaults.)

[ire, 2017/09/19 10:27:19]

Noted. No argument there.
I believe we discussed this before but I can't seem to find the comments
anywhere :/. My argument was basically that I prefer the continually responsive
look, than restricting the content to certain widths. You are correct that the
current .container method creates fewer test/edge cases, but I think (which is a
totally personal opinion) that my method just *looks* better.

That said, I think the best way forward is for the .container class to be used
here, and if I can come up with a convincing enough argument, we can discuss
changing the way the class works in website-defaults (or configuring it like you
mentioned). 

Also, I don't think the design specifies one way or the other (unless we ask
Jeen).

[juliandoucette, 2017/09/22 13:29:36]

Acknowledged. And I agree that we should address this separately.

Background:

I tend to agree with your taste regarding fluid vs fixed width responsive
layouts. Besides the obvious (and huge, if you are through) QA benefits (testing
every px of resize): The hard problem (for me) has been trying to limit the size
of internationalized text in 3+ column fluid layouts between mobile, phablet,
and tablet sizes (Acknowledging that not all layouts have this problem and that
fixed widths are not a cure to this illness). 

-{
-  width: $content-width;
-  max-width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: $md;
-  padding-left: $md;
-}
-
 .section
 {
   margin-bottom: $lg;
 
   @media (min-width: $phablet-breakpoint)
   {
     margin-bottom: $xl;
   }
 }