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,42 @@
+// 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);

[juliandoucette, 2017/09/22 13:49:14]

This should be smaller/texturized/repeated and transparent.

[ire, 2017/09/25 07:25:28]

I don't see the difference between the implementation and the design here.

- Why smaller? The image is the same size as in the mockup/spec
- The background image isn't supposed to be repeated. It's supposed to fade out
as it does here. 
- It is already transparent?

(Since I'm about to close this issue, we can continue this discuss in IRC or you
can create an issue with more info)

+  background-repeat: no-repeat;
+}
+
+#main
+{
+  padding-top: $lg;

[juliandoucette, 2017/09/22 13:49:15]

Can we get rid of these custom spaces entirely in a separate issue? We already
have space variables in website-defaults that we can set.

[ire, 2017/09/25 07:25:28]

https://issues.adblockplus.org/ticket/5765

+  padding-bottom: $xl;
+
+  @media (min-width: $phablet-breakpoint)
+  {
+    padding-top: $xl;
+  }
+}
+
+.section
+{
+  margin-bottom: $lg;
+
+  @media (min-width: $phablet-breakpoint)
+  {
+    margin-bottom: $xl;
+  }
+}