Simplified design, moved TOC to sidebar

* Easier navigation with TOC on sidebar
* Removed hanging borders throughout
* Improved styling to have more consistent sizes across screens
* Made body layout fluuuuuuid
* BigCheckbox now leans more towards the medium side of the spectrum

Author: blakeeb

lib/big_checkbox.rb

@@ -4,31 +4,32 @@ class BigCheckbox < Erector::Widget
   # needs :size => "48px"  # todo
 
   external :style, scss(<<-CSS)
-  $big_checkbox_size: 48px;
+  $big_checkbox_size: 20px;
   
   input.big_checkbox[type=checkbox] {
     display:none;
     + label {
        height: $big_checkbox_size;
        width: $big_checkbox_size;
        display:inline-block;
-       padding: 0 0 0 0px;
-       margin: 0 4px -8px 0;
+       padding: 2px;
+       margin: 0 12px -8px 0;
        background-color: white;
        z-index: 2;
-       border: 4px solid #dadada;
-       @include border-radius(10px);
+       border: 2px solid #dadada;
     }
      
     + label:hover {
        background-image: url(/img/check-dim.png);
+       background-size: cover;
        cursor: pointer;
     }
   }
   
   input.big_checkbox[type=checkbox]:checked {
     + label {
       background-image: url(/img/check.png);
+      background-size: cover;
     }
   }
   CSS

lib/contents.rb

@@ -159,7 +159,6 @@ def toc_list toc_items
 
   def content
     div id: "table_of_contents", class: "toc" do
-      h1 "Contents"
       toc_list hierarchy
 
       unless orphans.empty?

lib/doc_page.rb

@@ -78,7 +78,7 @@ def page_title
   class TopLink < Erector::Widget
     needs :name, :href, :onclick => nil
     def content
-      a "[#{@name}]", :class => "top_link", :href => @href, :onclick => @onclick
+      a "#{@name}", :class => "top_link", :href => @href, :onclick => @onclick
     end
   end
 
@@ -96,7 +96,6 @@ def top_links
     [
       TopLink.new(:name => "sites", :href => "#", :onclick => "$('#site_index').toggle(); return false;"),
       TopLink.new(:name => "src", :href => "#{file_name.split('.').first}/src"),
-      TopLink.new(:name => "toc", :href => "#", :onclick => "$('#table_of_contents').toggle(); return false;"),
       TopLink.new(:name => "git", :href => git_url),
     ]
   end

lib/step.rb

@@ -90,7 +90,7 @@ def step name = nil, options = {}
     div :class => "step", :title => name do
       h1 do
         widget BigCheckbox
-        prefix "Step #{num}: "
+        prefix "Step #{num}" + (!name.nil? ? ': ' : '')
         text name
       end
       _render_inner_content &Proc.new if block_given?

public/css/doc_page.css

@@ -5,7 +5,7 @@ body {
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 1.5em;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
@@ -15,79 +15,112 @@ h1 {
 .top {
   margin-bottom: 1em;
   padding: 2px 6px;
+  background-color: black;
 }
+
 .top h1 {
-  font-size: 2.5em;
-  font-weight: 800;
+  padding: 0.5em 0em 0.5em 1.4em;
+  font-size: 1.4em;
+  font-weight: normal;
+  color: white;
 }
+
 .top a {
   text-decoration: none;
+  color: white;
 }
+
 .top a:visited {
-  color: black;
+  color: white;
 }
 
 .bottom {
   min-height: 60px;
   text-align: center;
-  border-top: 1px solid #333;
+  border-top: 1px solid #ccc;
+  font-size: 0.8em;
 }
 
 /* toc = Table of Contents */
 
 .toc {
-  background: #e2f2f2;
   padding: 0 0 1em 0;
   margin: 0 0 1em 1em;
-  border: 1px solid blue;
-  float: right;
   width: 26em;
-  overflow-x: hidden;
-  display: none;
   /* if the toc isn't "positioned", images will show on top of it */
   position: relative;
 }
 
+#table_of_contents {
+  float: left;
+  width: 17em;
+}
+#table_of_contents h1 {
+  font-size: 0.9em;
+}
+
+#site_index {
+  float: right;
+  display: none;
+  position: absolute;
+  right: 0px;
+  top: 55px;
+  z-index: 2;
+  background-color: white;
+  border: 1px solid grey;
+}
+
 .toc h1 {
-  border-bottom: 1px solid blue;
   padding-left: 12px;
 }
 
 .toc ul {
-  margin-left: 12px;
-  padding-left: 12px;
+  margin-left: 20px;
+  padding-left: 0px;
+  list-style-type: none;
 }
 
 .toc li a {
   font-size: 11pt;
   padding: 1px 2px;
-  border: 1px solid #e2f2f2;
+  /*border: 1px solid #e2f2f2;*/
   text-decoration: none;
+
   display: block; /* fill the entire containing li */
 }
 
 .toc li a:hover {
-  background: #a2aBFD;
   border-color: blue;
   cursor: pointer;
-  font-weight: bold;
+  text-decoration: underline;
 }
 
 .toc .current {
   font-weight: bold;
   padding: 1px 2px
 }
 
+.toc ul:not(:first-child) {
+    border-left: 2px solid #eee;
+    margin-left: 3px;
+    padding-left: 6px;
+    list-style-type: circle;
+    list-style-position: inside;
+}
+
 /**/
 
 .main {
-  padding-left: 4em;
+  position: relative;
+  margin-left: 300px;
+  margin-right: 20px;
+  position: relative;
 }
+
 .main h1.doc_title {
-  background: #e2e2f2;
-  padding: .5em .5em .25em;
-  margin-bottom: .25em;
-  margin-left: -2em;
+  margin-bottom: 1em;
+  padding-bottom: .25em;
+  border-bottom: 1px solid #ccc;
 }
 
 .doc {
@@ -107,9 +140,15 @@ h1 {
   padding-right: 4px;
 }
 .doc h1 {
-  border-bottom: 1px solid blue;
-  margin-top: 1em;
-  margin-left: -.5em;
+  border-bottom: 2px solid #EEE;
+  padding-left: 12px;
+}
+
+.doc blockquote {
+  -webkit-margin-before: 0.5em;
+  -webkit-margin-after: 0.5em;
+  -webkit-margin-start: 20px;
+  -webkit-margin-end: 0px;
 }
 
 .top .top_links {
@@ -119,10 +158,31 @@ h1 {
 .top a.top_link {
   float: right;
   margin: 2px;
+  border: 1px solid #999;
+  padding: 5px 10px 5px 10px;
+  margin-top: 8px;
+  margin-right: 15px;
+  background-color: #555;
 }
 
 img {
-  border: 1px solid #aaa;
   margin: auto;
   display: block;  /* otherwise centering doesn't happen */
 }
+
+/* Clearfix for bottom of page */
+.bottom {
+  clear: both;
+  *zoom: 1;
+}
+
+.bottom:before, 
+.bottom:after {
+  display: table;
+  line-height: 0;
+}
+
+.bottom:after {
+  clear: both;
+}
+

public/css/step.css

@@ -1,12 +1,23 @@
 @charset "UTF-8";
 
-.step h1 > span.prefix {
-  color: blue;
+.step h1 {
+  border: 0;
 }
-.step blockquote {
-  border-left: 1px dotted blue;
-  padding-left: 1.5em;
-  margin-left: .25em;
+
+span.prefix {
+  font-size: 0.7em;
+  padding-left: 8px;
+}
+
+.step h1 {
+  font-size: 1em;
+  padding: 10px 0 0 10px;
+}
+
+.step h1 span.prefix {
+  font-size: 0.9em;
+  padding-left: 0;
+  padding-right: 8px;
 }
 
 img.noborder {
@@ -38,11 +49,13 @@ img.noborder {
 
 .important {
   border: 1px solid red;
+  border: 5px solid maroon;
 }
 
 .tip {
   border: 1px solid blue;
   padding: 1em;
+  border: 10px solid #eee;
 }
 
 .tip > span {
@@ -66,32 +79,28 @@ div.back:before {
   content: "← ";
 }
 
-.doc > div > h1 {
-  padding-left: .25em;
-}
-
 .doc > div {
   padding-bottom: 1em;
 }
 
 .goals > h1 {
-  background-color: #FECACD;
+  border-left: 20px solid #FECACD;
 }
 
 .steps > h1 {
-  background-color: #FBFFCA;
+  border-left: 20px solid #FBFFCA;
 }
 
 .explanation > h1 {
-  background-color: #C8FFC9;
+  border-left: 20px solid #C8FFC9;
 }
 
 .deploying > h1 {
-  background-color: #B0DEE7;
+  border-left: 20px solid #B0DEE7;
 }
 
 .further-reading > h1 {
-  background-color: #87e5f2;
+  border-left: 20px solid #87e5f2;
 }
 
 table.bordered td,
@@ -104,19 +113,19 @@ table.bordered tr {
 }
 
 .requirements > h1 {
-  background-color: #93B5DA;
+  border-left: 20px solid #93B5DA;
 }
 
 .discussion > h1 {
-  background-color: #92F59A;
+  border-left: 20px solid #92F59A;
 }
 
 .hints > h1 {
-  background-color: #86DFD4;
+  border-left: 20px solid #86DFD4;
 }
 
 .tools_and_references > h1 {
-  background-color: #C8A9E0;
+  border-left: 20px solid #C8A9E0;
 }
 
 .console > pre {
@@ -131,7 +140,7 @@ table.bordered tr {
 }
 
 .fuzzy-result {
-  margin-bottom: 20px;
+  margin  : 20px;
 }
 .fuzzy-result > pre {
   margin-bottom: 0px;

sites/frontend/frontend.step

@@ -94,13 +94,11 @@ end</pre>
 </div>
 MARKDOWN
 
-choice  do
+
   option "Are your tools installed?" do
     link "get_a_sticker"
   end
 
   option "Do you need to set up your tools?" do
     link "tool_installation"
   end
-end
-