Resize icons in headers

_sass/_base.scss

@@ -111,6 +111,7 @@ h1, h2, h3, h4, h5, h6 {
     position: absolute;
     left: -0.6em;
     opacity: 0;
+    height: $header-icon-height;
  }
 
  h2:hover .header-link,
@@ -136,10 +137,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h3 img {
-  max-height: 77px;
+  max-height: $header-icon-height;
   padding-right: $spacing-unit / 2;
 }
 
+ .header-link .glyphicon {
+    top: $header-icon-height / 2;
+ }
+
 
 /**
  * Links

css/main.scss

@@ -35,6 +35,8 @@ $on-laptop:        800px;
 
 $break-large:      1152px;
 
+$header-icon-height: 40px;
+
 
 
 // Use media queries like this:

js/main.js

@@ -3,13 +3,14 @@ $(document).ready(function($) {
     var $el, icon, id;
     $el = $(el);
     id = $el.attr('id');
-    icon = '<i class="glyphicon glyphicon-link"></i>';
+    icon = $('<i class="glyphicon glyphicon-link"></i>');
     if (id) {
-      anchor = $("<a />").addClass("header-link").attr("href", "#" + id).html(icon);
-      if ($el.has('img').length) {
-        anchor.css('top', el.offsetTop + 23 + 'px');
-      }
-      $el.prepend(anchor);
+      return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon
+        .css('top', '50%')
+        .css('transform', 'perspective(1px) translateY(-50%)')
+        .css('-webkit-transform', 'perspective(1px) translateY(-50%)')
+        .css('-ms-transform', 'perspective(1px) translateY(-50%)')
+      ));
     }
   });
 });

stix/walkthrough.md

@@ -61,7 +61,7 @@ In the example above, the <span class="sdo">**created**</span> and <span class="
 
 The rest of the common properties are optional and will not be discussed in detail for this scenario. For more information on these properties see the [Common Properties](https://docs.google.com/document/d/1IcA5KhglNdyX3tO17bBluC5nqSf70M5qgK9nuAoYJgw/edit#heading=h.karbmftow040) section of the STIX 2.0 specification.
 
-### Indicator Object ![Indicator Icon]({{ site.baseurl }}/img/indicator.png)
+### ![Indicator Icon]({{ site.baseurl }}/img/indicator.png) Indicator Object
 
 
 Along with the common properties that are found in all STIX objects, each object has its own specific set of properties that represent information specific to that particular object. In our scenario for Company A, we use an Indicator and a Malware SDO. The Indicator object contains properties that describe that Indicator, such as its <span class="sdo">**name**</span>, a <span class="sdo">**pattern**</span> that is used for detection, a list of <span class="sdo">**labels**</span> that specify the type of indicator, and a <span class="sdo">**valid_from**</span> property that details the time from which this Indicator is still considered valid intelligence.
@@ -81,7 +81,7 @@ Along with the common properties that are found in all STIX objects, each object
 ```
 Walking through Company A’s Indicator object above, we see the four common properties first, followed by the <span class="sdo">**name**</span> of the Indicator detailing that this is CryptoLocker hash. An optional property, <span class="sdo">**description**</span>, gives more information about the Indicator object. Other optional properties can be seen in the [Indicator properties table](https://docs.google.com/document/d/1S5XhY6F5OT599b0OuHtUf8IBzFvNY8RysFHIj93DgsY/edit#heading=h.wfiae74706sw). Next, the <span class="sdo">**pattern**</span> property for this particular indicator contains the STIX patterning representation for a SHA-256 file hash along with the hash value of the CryptoLocker variant. More information about STIX patterning is available in the [STIX Patterning](https://docs.google.com/document/d/1suvd7z7YjNKWOwgko-vJ84jfGuxSYZjOQlw5leCswPY/edit#heading=h.t32x0azc539r) part of the spec. Following <span class="sdo">**pattern**</span> is a <span class="sdo">**labels**</span>  property that describes this particular type of Indicator as malicious-activity. The values for labeling Indicators come from the Indicator Label open-vocabulary located in the [Vocabularies section](https://docs.google.com/document/d/1IcA5KhglNdyX3tO17bBluC5nqSf70M5qgK9nuAoYJgw/edit#heading=h.iit7tolczlxv) of the spec, which suggest values to use but do not require them. Finally, the <span class="sdo">**valid_from**</span> property gives a timestamp for this Indicator relaying that it is only valuable intelligence from that specific date.
 
-### Malware Object ![Malware Icon]({{ site.baseurl }}/img/malware.png)
+### ![Malware Icon]({{ site.baseurl }}/img/malware.png) Malware Object
 
 A Malware SDO is used to represent information about the CryptoLocker malware Company A detected. Along with the common properties, the Malware SDO captures properties such as the malware <span class="sdo">**name**</span>, a <span class="sdo">**description**</span> that provides more details about the malware, and also a list of <span class="sdo">**labels**</span> which characterizes the malware type.
 
@@ -99,7 +99,7 @@ A Malware SDO is used to represent information about the CryptoLocker malware Co
 
 For Company A’s Malware object, we include the four common required properties followed by the <span class="sdo">**name**</span> of the malware, CryptoLocker. The <span class="sdo">**description**</span> field gives more context about CryptoLocker, and the <span class="sdo">**labels**</span> property conveys that this particular malware is ransomware. This value comes from another open vocabulary seen in the [Malware Label](https://docs.google.com/document/d/1IcA5KhglNdyX3tO17bBluC5nqSf70M5qgK9nuAoYJgw/edit#heading=h.8cyb6e9yqzwr) section of the spec.
 
-### Relationship Object ![Relationship Icon]({{ site.baseurl }}/img/relationship.png)
+### ![Relationship Icon]({{ site.baseurl }}/img/relationship.png) Relationship Object
 
 A Relationship SRO links Company A’s Indicator SDO to the Malware SDO. This object contains the same common properties as the STIX SDOs along with required properties needed to define the relationship between the two objects. For instance, every Relationship requires a <span class="sdo">**source_ref**</span>, which captures the id of the source SDO, and a <span class="sdo">**target_ref**</span>, which contains the id of the target SDO. Along with these two properties, we need a <span class="sdo">**relationship_type**</span> property to identify the type of relationship. More information about the Relationship object as well as the full list of properties is available under the [Relationship section](https://docs.google.com/document/d/1S5XhY6F5OT599b0OuHtUf8IBzFvNY8RysFHIj93DgsY/edit#heading=h.e2e1szrqfoan) of the spec.
 
@@ -124,7 +124,7 @@ With this Relationship SRO, Company A has related the Indicator SDO to the Malwa
 **STIX Diagram Showing Relationship**
 </div>
 
-### STIX Bundle ![Bundle Icon]({{ site.baseurl }}/img/bundle.png)
+### ![Bundle Icon]({{ site.baseurl }}/img/bundle.png) STIX Bundle
 
 Company A utilizes a STIX Bundle to hold these three STIX Objects. Bundles are used to share a collection of STIX objects in one JSON document and can have any number of arbitrary, unrelated objects. In this scenario the objects happen to be related, but this is not necessary or required for bundles. A Bundle is not a STIX object, so it doesn’t contain all of the common properties that objects hold. However, it does contain a <span class="sdo">**type**</span> property that must be <span class="values">bundle</span> and also a unique <span class="sdo">**id**</span> property similar to STIX objects. There is also a required <span class="sdo">**spec_version**</span> property to indicate the STIX specification which must be <span class="values">2.0</span> in this example. In addition to these required properties the list of your STIX objects is contained in the <span class="sdo">**objects**</span> property list. More information on Bundle is available in the spec under the [Bundle section](https://docs.google.com/document/d/1IcA5KhglNdyX3tO17bBluC5nqSf70M5qgK9nuAoYJgw/edit#heading=h.rvtdrdkf1jdv). Altogether, Company A’s Bundle will look like this:
 
@@ -169,7 +169,7 @@ Company A utilizes a STIX Bundle to hold these three STIX Objects. Bundles are u
 
 Company A can then publish this Bundle to a TAXII Server Company B is subscribed to for Company B to retrieve and use.
 
-### Sighting Object  ![Sighting Icon]({{ site.baseurl }}/img/sighting.png)
+### ![Sighting Icon]({{ site.baseurl }}/img/sighting.png) Sighting Object
 
 If Company B uses the Indicator provided by Company A and gets a match, it means that they probably have that same CryptoLocker Malware on their network. This is important information to share back to their community, and they can generate a Sighting object to do so. This is the other type of SRO in STIX 2.0, and means that some object has been seen. Sighting contains the same common properties as other STIX objects but only has one required property, <span class="sdo">**sighting_of_ref**</span>. This property contains a reference to the object that was sighted. Other optional properties not used can be seen in the properties table under the [Sighting section](https://docs.google.com/document/d/1S5XhY6F5OT599b0OuHtUf8IBzFvNY8RysFHIj93DgsY/edit#heading=h.a795guqsap3r) of the spec.