Issue 5385 - Create Site Header Component for Help Center

static/scss/base/_variables.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 @@
 $gray-medium: #AEAEAE;
 $gray-dark: #757575;
 $black: #161616;
 
 // Brand colors
 
 $eyeo-black: $black;
 $abp-red: #C70D2B;
 $abb-blue: #0D79C7;
 
+$primary: $eyeo-black;
+
 // Typography //////////////////////////////////////////////////////////////////
 
 // Font stack
 
 $primary-font: "Source Sans Pro", sans-serif;
 
 // Font colours
 
 $font-color-default: $eyeo-black;
 $font-color-link: $abb-blue;
 
 // Font sizes (headings)
 
 $font-size-h1: 3em;
 $font-size-h2: 2em;
 $font-size-h3: 1.4em;
 $font-size-h4: 1em;
 $font-size-h5: $font-size-h4;
 $font-size-h6: $font-size-h4;
 
 // Font sizes (general)
 
 $small-font: 0.9em;
-$xsmall-font: 0.8em;

[juliandoucette, 2017/07/19 18:03:34]

NIT: "x" -> "extra" ... This one is hard for me to point out :D - I don't like
"$extra-small-font" | "$very-small-font" ... Maybe $tiny-font? ;)

[ire, 2017/07/21 10:23:27]

I acknowledge that the x is hard to read. I think tiny works. But the lack of
consistency might bother me :P . Are we going to stop using "extra" everywhere?
E.g. xlarge, etc. 

[juliandoucette, 2017/07/24 21:08:07]

Acknowledged.

+$tiny-font: 0.8em;
 
 // Font weights
 
 $bold-weight: 700;
 
 // Sizes ///////////////////////////////////////////////////////////////////////
 
 // Container widths
 
-$content-max-width: 90%;

[juliandoucette, 2017/07/19 18:03:34]

It seems like we should support the same max content with across websites in the
form of a $large-desktop-width or similar.

[ire, 2017/07/21 10:23:26]

I assumed this is what the $dekstop-width was, which is why I used it below.
This $content-max-width is to ensure the content on the page never spans full
width (essentially padding).

[juliandoucette, 2017/07/24 21:08:07]

Why should we use a width percentage instead of actual padding? 

-$content-width: $desktop-width;

[juliandoucette, 2017/07/19 18:03:35]

Note: This isn't currently being used.

[ire, 2017/07/21 10:23:27]

Yes its for the main part of the page. The $navbar-width was actually supposed
to reference the $content-width variable, not the $desktop-width directly. Will
change.

[juliandoucette, 2017/07/24 21:08:08]

Acknowledged.

-$navbar-width: $desktop-width + 100px;
+$content-width: 960px;
+$navbar-width: $content-width + 100px;
 
 // Header & Footer
 
-$site-header-height: 65px;
+$site-header-height: 70px;
+$site-header-content-line-height: 40px;
 
-// Searchform
+// Search form
 
-$searchform-width: 320px;

[juliandoucette, 2017/07/19 18:03:35]

NIT/Suggest: "search-" or "search-form" ... "searchform" is not a word?

[ire, 2017/07/21 10:23:27]

I think "searchform" is one of those names like "navbar" I see used. But I don't
feel particularly strongly about it so I've changed it to "search-form"
everywhere

[juliandoucette, 2017/07/24 21:08:08]

Acknowledged.

I'm not familiar with this pattern (that doesn't mean it's not common).

-$searchform-height: 35px;
+$search-form-width: 320px;
+$search-form-height: 35px;
 
 // Spacers /////////////////////////////////////////////////////////////////////
+
+$xl: 60px;
+$lg: 30px;
+$md: 15px;
+$sm: 10px;
+$xs: 5px;
 
 // Columns /////////////////////////////////////////////////////////////////////
 
 // Breakpoints /////////////////////////////////////////////////////////////////
 
-$mobile-breakpoint: 544px;

[juliandoucette, 2017/07/19 18:03:35]

Is the width provided by website-defaults wrong?

[ire, 2017/07/21 10:23:27]

There is no $mobile-breakpoint variable in website-defaults

[juliandoucette, 2017/07/24 21:08:07]

I did that on purpose so that we would develop mobile-first ;)

(Acknowledging that my original comment was invalid)

+$phablet-breakpoint: 576px;
 
 // Placeholders ////////////////////////////////////////////////////////////////