Fix vertical alignment of icons

_includes/footer.njk

@@ -15,7 +15,7 @@
 
   <nav>
     <a id="footer-links" href="https://github.com/sublimehq/package_control_channel">Submit your own package</a>
-    <a class="github-link" href="https://github.com/packagecontrol/thecrawl/tree/gh-pages">
+    <a class="github-link inline-icon" href="https://github.com/packagecontrol/thecrawl/tree/gh-pages">
       {{ util.icon('octocat') }}
       <span class="screenreader-only">This website on GitHub</span>
     </a>

_includes/header.njk

@@ -39,7 +39,7 @@
     <nav>
       {% if isPackagePage %}
         <a class="search-toggle" href="/#search-field">
-          {{ util.icon('search') }}
+          <span class="inline-icon">{{ util.icon('search') }}</span>
           <span class="screenreader-only">Search</span>
         </a>
       {% endif %}

_includes/packages/macros.njk

@@ -42,7 +42,7 @@
   {% endif %}
 
   <span class="download-notes-sep">·</span>
-  <a class="download" href="{{ version.download_url or version.url }}" title="Download package">
+  <a class="download inline-icon" href="{{ version.download_url or version.url }}" title="Download package">
     {{ util.icon('download') }}
   </a>
 
@@ -127,7 +127,7 @@
 {% macro installs(count, pretty=false) %}
   {% if count > 0 %}
     <li class="installs" title="Installed {{ count }} {{ 'time' if count < 2 else 'times' }}">
-      <span aria-hidden="true">{{ util.icon('download') }}</span>
+      <span class="icon" aria-hidden="true">{{ util.icon('download') }}</span>
       <span class="counter">{{ (count | compact) if pretty else (count | grouping) }}</span>
       <span class="screenreader-only">installs</span>
     </li>
@@ -137,7 +137,7 @@
 {% macro stars(count, pretty=false) %}
   {% if count > 0 %}
     <li class="stars" title="{{ count }} {{ 'star' if count < 2 else 'stars' }} on GitHub">
-      <span aria-hidden="true">{{ util.icon('star') }}</span>
+      <span class="icon" aria-hidden="true">{{ util.icon('star') }}</span>
       <span class="counter">{{ (count | compact) if pretty else (count | grouping) }}</span>
       <span class="screenreader-only">stars</span>
     </li>
@@ -184,7 +184,7 @@
             {% set icon_id = (label | label_icon_id) if with_icons else '' %}
             {% if icon_id %}
               {% set tint = (label | label_icon_tint) if with_icons else '' %}
-              <svg class="label-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
+              <svg class="inline-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
                 <use href="/{{ 'static/label-icons.svg' | bust }}#{{ icon_id }}"></use>
               </svg>
             {% endif %}

index.njk

@@ -68,7 +68,7 @@ page_type: home
         </span>
         {% if pkg.stars > 0 %}
           <span class="remarkable-stars" title="{{ pkg.stars }} {{ 'star' if pkg.stars == 1 else 'stars' }} on GitHub">
-            <span aria-hidden="true">{{ util.icon('star') }}</span>
+            <span class="icon" aria-hidden="true">{{ util.icon('star') }}</span>
             <span class="counter">{{ pkg.stars | compact }}</span>
             <span class="screenreader-only">stars</span>
           </span>

labels.njk

@@ -55,7 +55,7 @@ page_type: labels
           {% set icon_id = item.key | label_icon_id %}
           {% if icon_id %}
             {% set tint = item.key | label_icon_tint %}
-            <svg class="label-icon{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
+            <svg class="{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
               <use href="/{{ 'static/label-icons.svg' | bust }}#{{ icon_id }}"></use>
             </svg>
           {% endif %}

static/style/footer.css

@@ -17,7 +17,6 @@ footer {
 
   .github-link {
     margin-left: 0.9ex;
-    vertical-align: -1px;
     padding: 2px 0px 1px 4px;
     border-radius: 50%;
 

static/style/label-icons.css

@@ -11,10 +11,6 @@
   --label-icon-color-graphite: var(--graphite-1);
 }
 
-.label-icon {
-  fill: currentColor;
-}
-
 .label-icon--orange {
   color: var(--label-icon-color-orange);
 }

static/style/package.css

@@ -45,8 +45,8 @@ html.page-package {
 }
 
 .download {
+  display: inline-block;
   color: var(--foreground-2);
-  vertical-align: -1px;
   margin-left: 2px;
 
   &:hover {
@@ -84,6 +84,11 @@ ul.stats {
   > * {
     display: flex;
     margin: 0;
+
+    > * {
+      display: flex;
+      align-items: center;
+    }
   }
 
   svg {
@@ -284,11 +289,6 @@ section[name="package"] > ul.stats .platforms {
       }
     }
   }
-
-  a svg {
-    width: 16px;
-    height: 16px;
-  }
 }
 
 .warning-message {

static/styles.css

@@ -107,14 +107,20 @@ summary {
   cursor: pointer;
 }
 
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.inline-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+
 svg {
   fill: currentColor;
-  p > &,
-  span > &,
-  a > & {
-    /* alignment of icons in text is just slightly off */
-    vertical-align: -1px;
-  }
 }
 
 code {