Implementing new branding/design on nav and footer #603

magwalk · 2016-06-01T16:27:18Z

Also includes adding the fonts to our repo instead of hosting them on Google Fonts.

Updates the styles, markup, and scripts to reflect the new design. Signed-off-by: Maggie Walker <[email protected]>

Updates header font to Montserrat Alternates, also adds a /fonts directory for us to self-host our fonts instead of importing them from Google Fonts. Signed-off-by: Maggie Walker <[email protected]>

Also modifies some of the styling for headings/paragraphs in Try Habitat to be more specific to that section, since the styles were being applied too globally. Signed-off-by: Maggie Walker <[email protected]>

thesentinels · 2016-06-01T16:27:20Z

By analyzing the blame information on this pull request, we identified @cwebberOps and @ryankeairns to be potential reviewers

Signed-off-by: Maggie Walker <[email protected]>

ryankeairns · 2016-06-01T16:43:29Z

@magwalk this is sooooo great, nice work!

Just a few edits/suggestions:

the 'Try the Demo' button in the top nav should link to /try not /tutorials
add the drop shadow on the mobile nav div/bg when it expands down
let's change the default link color to the Hab green #87B09A instead of orange
can the footer bg image/pattern repeat horizontally?
habitat logo in the footer should link to home

Thanks :)

Signed-off-by: Maggie Walker <[email protected]>

ryankeairns · 2016-06-01T16:54:10Z

www/source/stylesheets/_fonts.scss

@@ -0,0 +1,43 @@
+@font-face {


Yay for the self-hosted folks!

Also modifies the logic of the mobile nav slightly to support this new styling. Signed-off-by: Maggie Walker <[email protected]>

Signed-off-by: Maggie Walker <[email protected]>

Reflects new branding identity. Signed-off-by: Maggie Walker <[email protected]>

ryankeairns · 2016-06-01T17:16:00Z

@magwalk Those all look great! Discovered two more tweaks:

add top margin above the footer: rem-calc(90)
the fixed mobile nav needs a drop shadow too (after you scroll a bit; when in the unexpanded state)

Thanks

Signed-off-by: Maggie Walker <[email protected]>

Since this styling is only used in the footer cta, it is now only applied to that specific class. Signed-off-by: Maggie Walker <[email protected]>

Signed-off-by: Maggie Walker <[email protected]>

ryankeairns · 2016-06-01T17:36:51Z

lgtm, but I can't r+
@smith can you assist with that?

bookshelfdave · 2016-06-01T18:27:47Z

wow, looks super nice!

cwebberOps · 2016-06-01T18:28:16Z

@thesentinels r+

cwebberOps · 2016-06-01T18:33:36Z

@thesentinels r+

juliandunn · 2016-06-01T18:34:42Z

@thesentinels r+

thesentinels · 2016-06-01T18:34:42Z

📌 Commit 17ed766 has been approved by juliandunn

cwebberOps · 2016-06-01T18:37:17Z

@thesentinels r+

thesentinels · 2016-06-01T18:37:21Z

💡 This pull request was already approved, no need to approve it again.

There's another pull request that is currently being tested, blocking this pull request: Reword egress TCP requirement for clarity. #605

thesentinels · 2016-06-01T18:37:21Z

📌 Commit 17ed766 has been approved by cwebberOps

thesentinels · 2016-06-01T19:54:49Z

⌛ Testing commit 17ed766 with merge e7886a3...

Updates the styles, markup, and scripts to reflect the new design. Signed-off-by: Maggie Walker <[email protected]> Pull request: #603 Approved by: cwebberOps

Updates header font to Montserrat Alternates, also adds a /fonts directory for us to self-host our fonts instead of importing them from Google Fonts. Signed-off-by: Maggie Walker <[email protected]> Pull request: #603 Approved by: cwebberOps

Also modifies some of the styling for headings/paragraphs in Try Habitat to be more specific to that section, since the styles were being applied too globally. Signed-off-by: Maggie Walker <[email protected]> Pull request: #603 Approved by: cwebberOps