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

static/scss/layout/_body.scss

Index: static/scss/layout/_body.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/scss/layout/_body.scss
@@ -0,0 +1,52 @@
+// 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
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
+
+.outer
+{
+  background-image: url(/img/png/help-bg.png);
+  background-repeat: no-repeat;
+}
+
+#main
+{
+  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;
+  }
+}