fontify the thread expanders

h/static/fonts/h.svg

@@ -77,6 +77,7 @@
 <glyph unicode="&#xe60a;" d="M476.698 442.679l-2.014 2.021c-47.074 47.067-124.097 47.067-171.163 0l-109.053-109.068c-47.067-47.066-47.067-124.088 0-171.155l2.013-2.013c3.916-3.924 8.073-7.462 12.368-10.729l39.924 39.925c-4.651 2.747-9.063 6.036-13.058 10.030l-2.021 2.021c-25.557 25.549-25.557 67.136 0 92.695l109.064 109.056c25.558 25.559 67.137 25.559 92.693 0l2.021-2.012c25.55-25.558 25.55-67.146 0-92.695l-49.343-49.343c8.566-21.154 12.624-43.7 12.269-66.193l76.302 76.302c47.067 47.068 47.067 124.089-0.002 171.158zM315.521 285.533c-3.916 3.916-8.073 7.461-12.368 10.72l-39.924-39.916c4.652-2.748 9.063-6.037 13.058-10.031l2.021-2.020c25.558-25.558 25.558-67.136 0-92.694l-109.065-109.067c-25.559-25.551-67.138-25.551-92.694 0l-2.021 2.021c-25.549 25.56-25.549 67.138 0 92.694l49.344 49.343c-8.567 21.153-12.623 43.701-12.269 66.193l-76.301-76.299c-47.068-47.066-47.068-124.089 0-171.162l2.013-2.016c47.076-47.064 124.096-47.064 171.164 0l109.055 109.059c47.067 47.066 47.067 124.097 0 171.163l-2.013 2.012z" />
 <glyph unicode="&#xe60b;" d="M421.647 480h-361.412c-33.13 0-60.236-30.118-60.236-66.259v-228.894c0-36.141 27.106-66.259 60.236-66.259h30.118v-150.588l144.565 150.588h186.73c33.13 0 60.236 30.118 60.236 66.259v228.894c0 36.141-27.106 66.259-60.236 66.259zM361.412 269.177h-90.353v-90.353h-60.236v90.353h-90.353v60.236h90.353v90.353h60.236v-90.353h90.353v-60.236z" />
 <glyph unicode="&#xe60c;" d="M480 64l-124.563 124.563c17.781 29.031 28.563 62.859 28.563 99.438 0 106.015-86 192-192 192-106.016 0-192-85.985-192-192 0-106 85.984-192 192-192 36.578 0 70.406 10.781 99.438 28.5l124.563-124.5c8.75-8.75 23.25-8.688 32 0l32 32c8.75 8.75 8.75 23.25 0 32zM192 160c-70.688 0-128 57.313-128 128s57.313 128 128 128 128-57.313 128-128-57.313-128-128-128z" horiz-adv-x="487" />
+<glyph unicode="&#xe60d;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
 <glyph unicode="&#xf000;" d="M0 480l512-512h-512z" />
 <glyph unicode="&#xf06e;" d="M475.429 205.714q-43.429 67.429-108.857 100.857 17.429-29.714 17.429-64.286 0-52.857-37.571-90.429t-90.429-37.571-90.429 37.571-37.571 90.429q0 34.571 17.429 64.286-65.429-33.429-108.857-100.857 38-58.571 95.286-93.286t124.143-34.714 124.143 34.714 95.286 93.286zM269.714 315.429q0 5.714-4 9.714t-9.714 4q-35.714 0-61.286-25.571t-25.571-61.286q0-5.714 4-9.714t9.714-4 9.714 4 4 9.714q0 24.571 17.429 42t42 17.429q5.714 0 9.714 4t4 9.714zM512 205.714q0-9.714-5.714-19.714-40-65.714-107.571-105.286t-142.714-39.571-142.714 39.714-107.571 105.143q-5.714 10-5.714 19.714t5.714 19.714q40 65.429 107.571 105.143t142.714 39.714 142.714-39.714 107.571-105.143q5.714-10 5.714-19.714z" />
 <glyph unicode="&#xf070;" d="M158.571 98.571l22.286 40.286q-24.857 18-38.857 45.429t-14 58q0 34.571 17.429 64.286-65.429-33.429-108.857-100.857 47.714-73.714 122-107.143zM269.714 315.429q0 5.714-4 9.714t-9.714 4q-35.714 0-61.286-25.571t-25.571-61.286q0-5.714 4-9.714t9.714-4 9.714 4 4 9.714q0 24.571 17.429 42t42 17.429q5.714 0 9.714 4t4 9.714zM373.429 370q0-2-0.286-2.571-30-53.714-90-161.714t-90.286-162l-14-25.429q-2.857-4.571-8-4.571-3.429 0-38.286 20-4.571 2.857-4.571 8 0 3.429 12.571 24.857-40.857 18.571-75.286 49.429t-59.571 70q-5.714 8.857-5.714 19.714t5.714 19.714q43.714 67.143 108.571 106t141.714 38.857q25.429 0 51.429-4.857l15.429 27.714q2.857 4.571 8 4.571 1.429 0 5.143-1.714t8.857-4.429 9.429-5.286 9-5.286 5.571-3.286q4.571-2.857 4.571-7.714zM384 242.286q0-39.714-22.571-72.429t-59.714-47l80 143.429q2.286-12.857 2.286-24zM512 205.714q0-10-5.714-19.714-11.143-18.286-31.143-41.429-42.857-49.143-99.286-76.286t-119.857-27.143l21.143 37.714q60.571 5.143 112.143 39.143t86.143 87.714q-32.857 51.143-80.571 84l18 32q27.143-18.286 52.143-43.714t41.286-52.571q5.714-9.714 5.714-19.714z" />

h/static/icomoon.css

 @font-face {
 	font-family: 'h';
-	src:url('fonts/h.eot?jsvc9t');
-	src:url('fonts/h.eot?#iefixjsvc9t') format('embedded-opentype'),
-		url('fonts/h.woff?jsvc9t') format('woff'),
-		url('fonts/h.ttf?jsvc9t') format('truetype'),
-		url('fonts/h.svg?jsvc9t#h') format('svg');
+	src:url('fonts/h.eot?-f82t8p');
+	src:url('fonts/h.eot?#iefix-f82t8p') format('embedded-opentype'),
+		url('fonts/h.woff?-f82t8p') format('woff'),
+		url('fonts/h.ttf?-f82t8p') format('truetype'),
+		url('fonts/h.svg?-f82t8p#h') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -23,6 +23,36 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.icon-minus:before {
+	content: "\e60d";
+}
+.icon-users:before {
+	content: "\e603";
+}
+.icon-user:before {
+	content: "\e604";
+}
+.icon-bullhorn:before {
+	content: "\e605";
+}
+.icon-bubbles:before {
+	content: "\e606";
+}
+.icon-bubbles2:before {
+	content: "\e607";
+}
+.icon-bell:before {
+	content: "\e608";
+}
+.icon-earth:before {
+	content: "\e609";
+}
+.icon-link:before {
+	content: "\e60a";
+}
+.icon-search:before {
+	content: "\e60c";
+}
 .icon-window:before {
 	content: "\2e";
 }
@@ -221,30 +251,3 @@
 .icon-icon-comment:before {
 	content: "\e60b";
 }
-.icon-users:before {
-	content: "\e603";
-}
-.icon-user:before {
-	content: "\e604";
-}
-.icon-bullhorn:before {
-	content: "\e605";
-}
-.icon-bubbles:before {
-	content: "\e606";
-}
-.icon-bubbles2:before {
-	content: "\e607";
-}
-.icon-bell:before {
-	content: "\e608";
-}
-.icon-earth:before {
-	content: "\e609";
-}
-.icon-link:before {
-	content: "\e60a";
-}
-.icon-search:before {
-	content: "\e60c";
-}

h/static/styles/base.scss

@@ -66,7 +66,7 @@ $highlight-mode-color-second: rgba(206, 206, 60, 0.4);
 $highlight-mode-color-third: rgba(192, 192, 49, 0.4);
 $highlight-mode-active-color: rgba(255, 255, 60, 0.7);
 $thread-padding: 1em;
-$threadexp-width: .72em;
+$threadexp-width: .6em;
 $score-width: 40px;
 $score-height: $score-width;
 $heatmap-width: 22px;

h/static/styles/common.scss

@@ -566,15 +566,28 @@ blockquote {
   }
 
   .threadexp {
-    font-size: 1.1em;  // to match the username header
-    height: $threadexp-width;
-    width: $threadexp-width;
+    background: $white;
+    color: $gray-light;
     position: absolute;
-    // .7em is 50% of a line-height of 1.4;
-    top: .7em - ($threadexp-width / 2);
-    left: -($threadexp-width / 2);
-    outline: 1px solid #aaa;
-    @include icon("minus_1.png");
+    width: 1.4em;
+    height: 1.4em;
+    top: 0;
+    left: -.7em;
+
+    span {
+      position: absolute;
+      top: (1.4 - $threadexp-width) / 2;
+      left: (1.4 - $threadexp-width) / 2;
+      width: $threadexp-width;
+      height: $threadexp-width;
+
+      &:before {
+        font-size: $threadexp-width;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
   }
 
   .annotation {