Merge pull request #103 from hryanjones/gh-pages_FIXED_TOC

Sorry I didn't see this sooner, I'm not sure how I missed it! This is a good fix, thanks.

Author: cmontella

README.md

@@ -0,0 +1,21 @@
+# Getting started
+
+These are the documentation pages for http://witheve.com/ and use [Jekyll integration with Github pages][jekyll].
+
+## Install dependencies
+
+- ruby
+    - you may need [the development version][ruby-dev])
+- [gem][gem]
+- [bundler][bundler]
+    - you may need to install zlib as well
+- run the bundle command `bundle install`
+
+## Running
+
+`bundle exec jekyll serve`
+
+[jekyll]: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#step-4-build-your-local-jekyll-site
+[ruby-dev]: https://stackoverflow.com/questions/4304438/gem-install-failed-to-build-gem-native-extension-cant-find-header-files
+[gem]: https://rubygems.org/pages/download/)
+[bundler]: http://bundler.io/

css/style.css

@@ -85,7 +85,12 @@ time, mark, audio, video {
         vertical-align: baseline;
 }
 
-body { display: flex; flex-direction: column; margin: 0; background: white; color: #555; line-height: 1.7; font-family: "Open Sans", Avenir, "Helvetica neue", sans-serif;}
+html, body { /* This is required so scroll will work correctly on main article and navigation */
+  height: 100%;
+  overflow: hidden;
+}
+
+body {display: flex; flex-direction: column; margin: 0;background: white; color: #555; line-height: 1.7; font-family: "Open Sans", Avenir, "Helvetica neue", sans-serif;}
 
 
 pre {
@@ -149,15 +154,15 @@ img {
 }
 
 .main {
-  display: flex;
-  align-items: stretch;
-  min-height: 100%;
+  margin-top: 80px;
+  margin: 5px;
 }
 
 .drawer {
   color: rgb(85, 85, 85);
   padding-bottom: 20px;
-  padding-top: 10px;
+  padding: 20px;
+  height: auto;
 }
 
 .highlight {
@@ -176,6 +181,7 @@ img {
 .article {
   padding-left: 50px;
   padding-bottom: 200px;
+  overflow: auto;
 }
 
 .article a {
@@ -256,14 +262,14 @@ b {
 .flex-row.double-spaced > * + * { margin-left: 60px; }
 .flex-row.stretched { align-self: stretch; }
 
-.layer-wrapper { display: flex; flex-direction: column; align-items: center; margin-top: 60px; padding: 0 40px; }
-.layer { max-width: 100%; width: 960px; display: flex; align-items: center; }
-.toplayer { max-width: 100%; width: 960px; display: flex; align-items: top; }
+.layer-wrapper { display: flex; flex-direction: column; align-items: center; margin-top: 20px;}
+.layer {width: 95%; display: flex;align-items: center; flex-wrap: wrap;}
+.toplayer {width: 100%;display: flex; height: auto; padding: 7px; overflow: hidden;}
 .sub-layer { margin-top: 30px; }
 
-.header-wrapper { }
-.logo { display: flex; flex: 0 0 auto; align-items: center; padding: 0; }
-.logo > img { max-width: 60px; }
+.header-wrapper {margin: 0px; width: 100%; padding: 10px 0px; box-shadow: 0 0 1.25rem #9da5ab; flex-shrink: 0;}
+.logo {display: flex;flex: 0 0 auto;align-items: center;padding: 0;}
+.logo > img {max-width: 45px;}
 .logo > h1 { margin: 0; margin-left: 18px; padding: 0; height: 26px; margin-top: -32px; }
 .logo > h1 > img { height: 100%; }
 
@@ -273,11 +279,6 @@ nav > *:hover { background: #f2f2f2; }
 nav > *:active { background: #e9e9e9; }
 nav > .play-cta { margin: 0; padding: 10px 20px; color: white; }
 
-@media (max-width: 760px) {
-    header { flex-direction: column; }
-    header .logo { margin-bottom: 30px; }
-}
-
 @media (max-width: 540px) {
     nav { flex-wrap: wrap; }
     nav > * { flex: 1 0 auto; padding: 10px 15px; text-align: center; }