Issue 5385 - Create Site Header Component for Help Center

static/scss/base/_variables.scss

Index: static/scss/base/_variables.scss
===================================================================
--- a/static/scss/base/_variables.scss
+++ b/static/scss/base/_variables.scss
@@ -7,17 +7,17 @@
 // (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 acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.

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

NIT: Let's fix this in the prior commit before we push it to the help center
repository :D

+// along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
 
 // Colors //////////////////////////////////////////////////////////////////////
 
 // Grayscale
 
 $white: #fff;
 $gray: #D2D2D2;
 $gray-light: #ECECEC;
@@ -46,21 +46,43 @@
 
 $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.

+
 // 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;
+
+// Header & Footer
+
+$site-header-height: 65px;
+
+// Searchform
+
+$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;
+
 // Spacers /////////////////////////////////////////////////////////////////////
 
 // Columns /////////////////////////////////////////////////////////////////////
 
 // Breakpoints /////////////////////////////////////////////////////////////////
 
-// Placeholders ////////////////////////////////////////////////////////////////
+$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)

+
+// Placeholders ////////////////////////////////////////////////////////////////