link to sections

tdhopper · tdhopper · commit 110912de1c34 · 2017-06-23T13:48:53.000-04:00
diff --git a/web/css/custom.css b/web/css/custom.css
@@ -25,4 +25,9 @@ body {
 
 table {
     font-family: monospace;
+}
+
+section {
+    padding-top: 60px;
+    margin-top: -60px;
 }
diff --git a/web/t_index.html b/web/t_index.html
@@ -38,6 +38,7 @@
     <link href="css/bootstrap-reboot.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-default.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
     <link href="css/pygments-native.css" rel="stylesheet">
@@ -111,9 +112,10 @@ <h5>{{ name }}</h5>
       <hr>
       <div class="row mt-4" id="examples"><div class="col-xs-12 col-md-10 offset-md-1">
         {% for (name, slug), items in plots.items() %}
-          <div class="card mb-4" id="{{ slug }}">
+        <section id="{{ slug }}">
+          <div class="card mb-4">
             <div class="card-header">
-              <h3 class="card-title mb-1">{{ name }}</h3>
+              <h3 class="card-title mb-1"><a href="#{{ slug }}"><i class="fa fa-link" aria-hidden="true"></i></a> {{ name }}</h3>
               <ul class="nav nav-tabs card-header-tabs">
                 {% for plot in items %}
                 <li class="nav-item">
@@ -155,9 +157,10 @@ <h6 class="text-muted">Note:</h6>
               </div>
             </div>
           </div>
+        </section>
         {% endfor %}
-
-      </div></div>
+        </div>
+      </div>
 
       <div class="row">
          <div class="col-3">© 2017 <a href="http://tdhopper.com">Tim Hopper</a></div>

Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,9 @@ body {`
`25`	`25`
`26`	`26`	`table {`
`27`	`27`	`font-family: monospace;`
	`28`	`+}`
	`29`	`+`
	`30`	`+section {`
	`31`	`+ padding-top: 60px;`
	`32`	`+ margin-top: -60px;`
`28`	`33`	`}`