Fix IDs on tutorials page and add highlight effect

WasabiFan · WasabiFan · commit 7ad9bdbf9448 · 2016-09-28T20:38:26.000-07:00
diff --git a/docs/tutorials/index.html b/docs/tutorials/index.html
@@ -4,15 +4,17 @@
 include_masonry: "true"
 ---
 
-These tutorials will walk you through working with a wide range of hardware and
-software. If you're looking for help with a specific goal, this is the place to
-look!
+<p class="lead">
+    These tutorials will walk you through working with a wide range of hardware and
+    software. If you're looking for help with a specific goal, this is the place to
+    look!
+</p>
 
-<div class="row masonry-container" data-masonry='{ "itemSelector": ".tutorial-panel", "columnWidth": ".grid-sizer", "percentPosition": true }'>
+<div class="row masonry-container" data-masonry='{ "itemSelector": ".tutorial-group-item", "columnWidth": ".grid-sizer", "percentPosition": true }'>
     <div class="grid-sizer col-xs-12 col-sm-6 col-md-6"></div>
     {% for group in site.data.tutorial-groups %}
-        <div class="col-xs-12 col-sm-6 col-md-6 tutorial-panel">
-            <div class="panel panel-default rounded-panel" id="group-{{ group.name | downcase | replace: ' ','-' }}">
+        <div class="col-xs-12 col-sm-6 col-md-6 tutorial-group-item">
+            <div class="panel panel-default rounded-panel tutorial-panel" id="group-{{ group.id }}">
                 <div class="panel-heading">{{ group.title }}</div>
                 <div class="panel-body">
                     <p>
diff --git a/javascripts/style-helpers.js b/javascripts/style-helpers.js
@@ -7,4 +7,15 @@ $(document).ready(function () {
     $('.masonry-container').imagesLoaded().progress(function() {
         $('.masonry-container').masonry('layout');
     })
-})
+})
+
+// Offsets view so that nav doesn't cover URL target. There are CSS3 solutions
+// to this, but they are hacky and full of caveats.
+$(window).on('hashchange load', function () {
+    var $anchor = $(':target'),
+        fixedElementHeight = 100;
+
+    if ($anchor.length > 0) {
+        window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
+    }
+});
diff --git a/stylesheets/page-content.scss b/stylesheets/page-content.scss
@@ -1,6 +1,8 @@
 ---
 ---
 
+@import "custom-variables";
+
 .language-icon {
     height: 25px;
 }
@@ -42,4 +44,24 @@
 
 .release-link-container {
     display: none;
+}
+
+:target.tutorial-panel {
+    animation: target-tutorial-panel-fade 5s 1;
+
+    .panel-heading {
+        animation: target-tutorial-panel-header-fade 5s 1;
+    }
+}
+
+@keyframes target-tutorial-panel-fade {
+    0% { border-color: $brand-primary; }
+    80% { border-color: $brand-primary; }
+    100% { border-color: $panel-default-border; }
+}
+
+@keyframes target-tutorial-panel-header-fade {
+    0% { border-left-color: $brand-primary; }
+    80% { border-left-color: $brand-primary; }
+    100% { border-left-color: $panel-default-border; }
 }
