add hint arrow on sidebar

mollymca · Nov 23, 2015 · c3f209d · c3f209d
1 parent 7beb909
commit c3f209d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -11,6 +11,11 @@
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  <script src="{{ site.baseurl }}/bootstrap-toc.js" charset="utf-8"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#toc').append('<div class="hint">(creates this)</div>');
+ });
+ </script>
  </head>
  <body data-spy="scroll" data-target="#toc">
  <a href="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/afeld/bootstrap-toc">

diff --git a/assets/screen.css b/assets/screen.css
@@ -4,6 +4,22 @@
  padding-bottom: 40px;
 }
 
+.hint {
+ color: #563d7c;
+ display: inline-block;
+ font-weight: bold;
+ left: 20px; /* match the left margin of the top-level nav items */
+ position: relative;
+ top: 0.5em;
+}
+.hint:before {
+ content: '↑';
+ display: block;
+ font-size: 3em;
+ margin-bottom: 5px;
+ text-align: center;
+}
+
 /* small screens */
 @media (max-width: 768px) {
  /* override the Affix plugin so that the navigation isn't sticky */

diff --git a/index.md b/index.md
@@ -3,7 +3,7 @@ layout: default
 permalink: /
 ---
 
-# Bootstrap Table of Contents plugin
+# Table of Contents plugin for Bootstrap
 {: .page-header}
 
 [![Build Status](https://travis-ci.org/afeld/bootstrap-toc.svg?branch=gh-pages)](https://travis-ci.org/afeld/bootstrap-toc)
@@ -86,11 +86,11 @@ This plugin isn't opinionated about where it should be placed on the page, but a
  <div class="container">
  <div class="row">
   <!-- sidebar, which will move to the top on a small screen -->
-  <div class="col-sm-4">
+  <div class="col-sm-3">
   <nav id="toc" data-spy="affix" data-toggle="toc"></nav>
   </div>
   <!-- main content area -->
-  <div class="col-sm-8">
+  <div class="col-sm-9">
   ...
   </div>
  </div>