Add docs directory

docs/css/main.css

@@ -0,0 +1,121 @@
+body { color: #777; }
+
+.pure-img-responsive { max-width: 100%; height: auto; }
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout, #menu, .menu-link { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout { position: relative; left: 0; padding-left: 0; }
+
+#layout.active #menu { left: 150px; width: 150px; }
+
+#layout.active .menu-link { left: 150px; }
+
+/*
+The content `<div>` is where all your content goes.
+*/
+.content { margin: 0 auto; padding: 0 2em; max-width: 800px; margin-bottom: 50px; line-height: 1.6em; }
+
+.header { margin: 0; color: #333; text-align: center; padding: 2.5em 2em 0; border-bottom: 1px solid #eee; }
+
+.header h1 { margin: 0.2em 0; font-size: 3em; font-weight: 300; }
+
+.header h2 { font-weight: 300; color: #ccc; padding: 0; margin-top: 0; }
+
+.content-subhead { margin: 50px 0 20px 0; font-weight: 300; color: #888; }
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+#menu { margin-left: -150px; /* "#menu" width */ width: 150px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; /* so the menu or its navicon stays above all content */ background: #191818; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+
+/*
+All anchors inside the menu should be styled like this.
+*/
+#menu a { color: #999; border: none; padding: 0.6em 0 0.6em 0.6em; }
+
+/*
+Remove all background/borders, since we are applying them to #menu.
+*/
+#menu .pure-menu, #menu .pure-menu ul { border: none; background: transparent; }
+
+/*
+Add that light border to separate items into groups.
+*/
+#menu .pure-menu ul, #menu .pure-menu .menu-item-divided { border-top: 1px solid #333; }
+
+/*
+Change color of the anchor links on hover/focus.
+*/
+#menu .pure-menu li a:hover, #menu .pure-menu li a:focus { background: #333; }
+
+/*
+This styles the selected menu item `<li>`.
+*/
+#menu .pure-menu-selected, #menu .pure-menu-heading { background: #1f8dd6; }
+
+/*
+This styles a link within a selected menu item `<li>`.
+*/
+#menu .pure-menu-selected a { color: #fff; }
+
+/*
+This styles the menu heading.
+*/
+#menu .pure-menu-heading { font-size: 110%; color: #fff; margin: 0; }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link { position: fixed; display: block; /* show this only on small screens */ top: 0; left: 0; /* "#menu width" */ background: #000; background: rgba(0, 0, 0, 0.7); font-size: 10px; /* change this value to increase/decrease button size */ z-index: 10; width: 2em; height: auto; padding: 2.1em 1.6em; }
+
+.menu-link:hover, .menu-link:focus { background: #000; }
+
+.menu-link span { position: relative; display: block; }
+
+.menu-link span, .menu-link span:before, .menu-link span:after { background-color: #fff; width: 100%; height: 0.2em; }
+
+.menu-link span:before, .menu-link span:after { position: absolute; margin-top: -0.6em; content: " "; }
+
+.menu-link span:after { margin-top: 0.6em; }
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) { .header, .content { padding-left: 2em; padding-right: 2em; }
+  #layout { padding-left: 150px; /* left col width "#menu" */ left: 0; }
+  #menu { left: 150px; }
+  .menu-link { position: fixed; left: 150px; display: none; }
+  #layout.active .menu-link { left: 150px; } }
+@media (max-width: 48em) { /* Only apply this when the window is small. Otherwise, the following case results in extra padding on the left: Make the window small. Tap the menu to trigger the active state. Make the window large again. */
+  #layout.active { position: relative; left: 150px; } }
+html { height: 100%; }
+
+body { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #1a1a1a; background-color: #fdfdfd; }
+
+h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif; font-weight: 700; color: #333; }
+
+h1 { font-size: 2.5em; line-height: 1.2; }
+
+ol ol, ul ol { list-style-type: lower-roman; }
+
+.content { margin-top: 80px; }
+
+.content a { word-break: break-word; }
+
+.content code { background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 90%; margin: 0; padding: 0.2em; }
+
+#menu .pure-menu-label { color: #999; border: none; padding: 0.6em 0 0.6em 0.6em; }