Issue 5534 - Create Contact Section for help.eyeo.com

static/scss/layout/_body.scss

Index: static/scss/layout/_body.scss
===================================================================
--- a/static/scss/layout/_body.scss
+++ b/static/scss/layout/_body.scss
@@ -35,8 +35,39 @@
 {
   margin-bottom: $lg;
 
   @media (min-width: $phablet-breakpoint)
   {
     margin-bottom: $xl;
   }
 }
+
+.section-accent

[juliandoucette, 2017/09/26 15:37:56]

I think that I have been confused about the meaning of "primary", "secondary",
and "accent" colors.

I was thinking:

Primary: The most common scheme e.g. black on white
Secondary: A contrasting scheme to primary e.g. white on dark gray
Accent: A highlighted / colored scheme e.g. white on red (ABP), white on blue
(ABB)

I think that this makes sense. But it's not the same as what is described here
https://material.io/guidelines/style/color.html#color-color-system.

I would call this (.section-accent) a "secondary" section. And it seems Google
would call this a "secondary" or "accent" section. 

Anyway, I'm ok with this class name. But I wanted to point out that I have been
confused. And allow you to give feedback if you think that my working
definitions did or did not make sense. Maybe we should change the
website-default colors to be more true to Google's definitions?

[ire, 2017/09/28 09:43:44]

1. I think I have been confused as well, and I can't seem to decide for myself
which definitions make the most sense.

2. I like your naming scheme, particularly your definition of "accent" (For
Google, "accent" seems to be the same as "secondary"). 

3. By your own naming scheme, this section should be an accent, not a secondary
(the way I understand it anyway. e.g in aa.com, the green sections are "accent")

4. I think the confusion comes from the naming of "secondary". Perhaps we can
change it to be called "primary-contrast" or something like that, and keep
"accent" as "accent" (i.e. remove secondary)

[juliandoucette, 2017/10/09 22:00:38]

I disagree. It would be secondary. And the product colours would be accent.
Secondary didn't necessarily mean "opposite".
Perhaps [primary, secondary, brand]?

[ire, 2017/10/10 18:36:29]

Isn't "brand" "primary"? Haha. I think we should create an issue to discuss this
further, and maybe get input from others as well.

+{
+  padding-top: $xl;
+  padding-bottom: $xl;
+  background-image: url("/img/png/accent-bg.png");

[juliandoucette, 2017/09/26 15:37:55]

Can we do this with SVG or triangular borders? (the glow/shadow may not be very
important)

[ire, 2017/09/28 09:43:45]

Perhaps, but what would be the benefit in this case? (Considering we would lose
the glow/shadow)

[juliandoucette, 2017/10/09 22:00:38]

[smaller file size, less blur]

(This is a NIT)

[ire, 2017/10/10 18:36:27]

Fair points. I think I will consider this something that can be looked into post
launch.

+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center 0;
+}
+
+.section-accent .horizontal-list li
+{
+  margin-right: $md;
+  font-weight: $bold-weight;
+  text-transform: uppercase;
+}

[juliandoucette, 2017/09/26 15:37:55]

All links are supposed to be blue; aren't they?

[ire, 2017/09/28 09:43:45]

Done.

+
+[dir="rtl"]

[juliandoucette, 2017/09/26 15:37:56]

Note: You could set a negative margin on the list and then apply an equal
positive margin left and right on the list items to avoid rtl styles here; I
think.

[ire, 2017/09/28 09:43:45]

Nice trick! But the margins between the list items don't collapse, and the
spacing between them gets too big.

[juliandoucette, 2017/10/09 22:00:38]

I was counting on the margins not collapsing.

Assuming $md = 2 * $sm (or similar)
ul (margin: 0 -$sm)
li (margin: 0 $sm)

This will equal out to $md between each.

(Note: A note is less than a NIT :D - You don't have to address this if you
don't want to.)

[ire, 2017/10/10 18:36:27]

Done.

[ire, 2017/10/10 18:36:28]

Ah I see, I think I was using $md when I tried and the spacing was much too big.

+{
+  .section-accent .horizontal-list li
+  {
+    margin-right: 0;
+    margin-left: $md;
+  }
+}
+
+.container-sm

[juliandoucette, 2017/09/26 15:37:56]

NIT/Suggest: Doesn't ".tablet-width" make more sense?

[ire, 2017/09/28 09:43:45]

Yes it makes a lot more sense haha. Done.

(We should probably move this class to website-defaults)

[juliandoucette, 2017/10/09 22:00:38]

Acknowledged.

+{
+  width: $tablet-width;
+}