Add responsive styles, search, example docs structure

[kapunahelewong]

Signed-off-by: Kapunahele Wong kapunahelewong@gmail.com

Responsive updates (320px & up)

• Responsive top navbar
• Responsive left nav
• Make left nav collapsable at small screen sizes
• Responsive toc
• Add flexbox sticky footer
• Update font styles so navs stay readable
• Add touch enhancements (padding that can more easily accommodate touch and assistive technology)

Update styles

• Update fonts with a suggested pairing for headers/copy
• Minor adjustments for an updated minimal style
• Increase contrast of default font color and background color to meet accessibility standards

Also adds placeholder responsive Programmable Google Search.

cc @caniszczyk @celestehorgan

[kapunahelewong]

Preview: https://deploy-preview-73--cncf-hugo-starter.netlify.app/

To see responsive updates, resize the browser window.

[nate-double-u]

There are some great changes here, thanks @kapunahelewong

My only comment on a quick once over is that the Jumbotron on the front page is lined up with the logo rather than the content. I think this is because there may be a left side menu present on other pages that also lines up with the logo, but it looks a little off with out it (IMO). A potential fix (aside from moving the Jumbotron text right) may be to align the footer (left justify rather than centred) with the logo and jumbotron on the top.

[kapunahelewong]

My only comment on a quick once over is that the Jumbotron on the front page is lined up with the logo rather than the content.

Thanks for catching that, @nate-double-u! It was a Bootstrap media query applying via a rogue class only to that middle section. Everything should be aligned now.

[celestehorgan]

@kapunahelewong awesome! Update the branch so we can merge, and otherwise this LGTM

[kapunahelewong]

Rebased and pushed. Thank you, @celestehorgan!