static/scss/layout/_body.scss - Issue 29519587: Issue 5534 - Create Contact Section for help.eyeo.com

Side by Side Diff: static/scss/layout/_body.scss

Issue 29519587: Issue 5534 - Create Contact Section for help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com

Patch Set: Add footer block for contact section Created Sept. 25, 2017, 2:01 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
1 // This file is part of help.eyeo.com.	1 // This file is part of help.eyeo.com.

2 // Copyright (C) 2017 Eyeo GmbH	2 // Copyright (C) 2017 Eyeo GmbH

3 //	3 //

4 // help.eyeo.com is free software: you can redistribute it and/or modify	4 // help.eyeo.com is free software: you can redistribute it and/or modify

5 // it under the terms of the GNU General Public License as published by	5 // it under the terms of the GNU General Public License as published by

6 // the Free Software Foundation, either version 3 of the License, or	6 // the Free Software Foundation, either version 3 of the License, or

7 // (at your option) any later version.	7 // (at your option) any later version.

8 //	8 //

9 // help.eyeo.com is distributed in the hope that it will be useful,	9 // help.eyeo.com is distributed in the hope that it will be useful,

10 // but WITHOUT ANY WARRANTY; without even the implied warranty of	10 // but WITHOUT ANY WARRANTY; without even the implied warranty of

(...skipping 22 matching lines...) Expand all Loading...
33	33

34 .section	34 .section

35 {	35 {

36 margin-bottom: $lg;	36 margin-bottom: $lg;

37	37

38 @media (min-width: $phablet-breakpoint)	38 @media (min-width: $phablet-breakpoint)

39 {	39 {

40 margin-bottom: $xl;	40 margin-bottom: $xl;

41 }	41 }

42 }	42 }

	43

	44 .section-accent
	juliandoucette 2017/09/26 15:37:56 I think that I have been confused about the meanin 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 Show quoted text On 2017/09/26 15:37:56, juliandoucette wrote: > 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? 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 Show quoted text On 2017/09/28 09:43:44, ire wrote: > 3. By your own naming scheme, this section should be an accent, not a secondary > (the way I understand it anyway. e.g in http://aa.com, the green sections are "accent") I disagree. It would be secondary. And the product colours would be accent. Secondary didn't necessarily mean "opposite". Show quoted text > 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) Perhaps [primary, secondary, brand]? ire 2017/10/10 18:36:29 Isn't "brand" "primary"? Haha. I think we should c Show quoted text On 2017/10/09 22:00:38, juliandoucette wrote: > On 2017/09/28 09:43:44, ire wrote: > > 3. By your own naming scheme, this section should be an accent, not a > secondary > > (the way I understand it anyway. e.g in http://aa.com, the green sections are > "accent") > > I disagree. It would be secondary. And the product colours would be accent. > Secondary didn't necessarily mean "opposite". > > > 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) > > Perhaps [primary, secondary, brand]? Isn't "brand" "primary"? Haha. I think we should create an issue to discuss this further, and maybe get input from others as well.
	45 {

	46 padding-top: $xl;

	47 padding-bottom: $xl;

	48 background-image: url("/img/png/accent-bg.png");
	juliandoucette 2017/09/26 15:37:55 Can we do this with SVG or triangular borders? (th 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 cas Show quoted text On 2017/09/26 15:37:55, juliandoucette wrote: > Can we do this with SVG or triangular borders? (the glow/shadow may not be very > important) 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) Show quoted text On 2017/09/28 09:43:45, ire wrote: > Perhaps, but what would be the benefit in this case? (Considering we would lose > the glow/shadow) [smaller file size, less blur] (This is a NIT) ire 2017/10/10 18:36:27 Fair points. I think I will consider this somethin Show quoted text On 2017/10/09 22:00:38, juliandoucette wrote: > On 2017/09/28 09:43:45, ire wrote: > > Perhaps, but what would be the benefit in this case? (Considering we would > lose > > the glow/shadow) > > [smaller file size, less blur] > > (This is a NIT) Fair points. I think I will consider this something that can be looked into post launch.
	49 background-size: 100%;

	50 background-repeat: no-repeat;

	51 background-position: center 0;

	52 }

	53

	54 .section-accent .horizontal-list li

	55 {

	56 margin-right: $md;

	57 font-weight: $bold-weight;

	58 text-transform: uppercase;

	59 }
	juliandoucette 2017/09/26 15:37:55 All links are supposed to be blue; aren't they? All links are supposed to be blue; aren't they? ire 2017/09/28 09:43:45 Done. Show quoted text On 2017/09/26 15:37:55, juliandoucette wrote: > All links are supposed to be blue; aren't they? Done.
	60

	61 [dir="rtl"]
	juliandoucette 2017/09/26 15:37:56 Note: You could set a negative margin on the list 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 Show quoted text On 2017/09/26 15:37:56, juliandoucette wrote: > 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. 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. Ass Show quoted text On 2017/09/28 09:43:45, ire wrote: > Nice trick! But the margins between the list items don't collapse, and the > spacing between them gets too big. 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. Show quoted text On 2017/10/09 22:00:38, juliandoucette wrote: > On 2017/09/28 09:43:45, ire wrote: > > Nice trick! But the margins between the list items don't collapse, and the > > spacing between them gets too big. > > 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.) Done. ire 2017/10/10 18:36:28 Ah I see, I think I was using $md when I tried and Show quoted text On 2017/10/09 22:00:38, juliandoucette wrote: > On 2017/09/28 09:43:45, ire wrote: > > Nice trick! But the margins between the list items don't collapse, and the > > spacing between them gets too big. > > 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.) Ah I see, I think I was using $md when I tried and the spacing was much too big.
	62 {

	63 .section-accent .horizontal-list li

	64 {

	65 margin-right: 0;

	66 margin-left: $md;

	67 }

	68 }

	69

	70 .container-sm
	juliandoucette 2017/09/26 15:37:56 NIT/Suggest: Doesn't ".tablet-width" make more sen 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 sho Show quoted text On 2017/09/26 15:37:56, juliandoucette wrote: > NIT/Suggest: Doesn't ".tablet-width" make more sense? 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. Show quoted text On 2017/09/28 09:43:45, ire wrote: > (We should probably move this class to website-defaults) Acknowledged.
	71 {

	72 width: $tablet-width;

	73 }

OLD	NEW

« static/scss/base/_utilities.scss ('K') | « static/scss/content/_typography.scss ('k') | templates/default.tmpl » ('j') | templates/default.tmpl » ('J')