Issue 5963 - Fix alignment of product icon next to article title on help.eyeo.com

static/scss/components/_article.scss

 // This file is part of help.eyeo.com.
 // Copyright (C) 2017 Eyeo GmbH
 //
 // help.eyeo.com is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // help.eyeo.com is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 18 matching lines @@
 }
 
 .article-heading,
 .article-browser-selector
 {
   padding-bottom: $md;
   margin-bottom: $md;
   border-bottom: 1px dotted $gray;
 }
 
+.article-heading .has-pre-icon
+{
+  @media (max-width: $phablet-breakpoint + 1)

[juliandoucette, 2017/11/09 14:22:30]

+1 should be -1.

(See 577px width)

[ire, 2017/11/10 09:44:25]

Oops you're right. I always mix up whether it's +1 or -1 :P

Fixed.

+  {
+    padding: 0;
+  }
+}
+
+.article-heading .pre-icon
+{
+  display: none;
+
+  @media (min-width: $phablet-breakpoint)
+  {
+    display: block;
+    top: 0.25em; // Align icon to first line of heading
+    margin-top: 0;
+  }
+}
+
 .article-browser-selector
 {
   @extend .clearfix;
   display: none;
 }
 
 .js .article-browser-selector
 {
   display: block;
 }
@@ skipping 11 matching lines @@
   display: none;
 }
 
 @each $browser in $supported-browsers
 {
   .js .ua-#{$browser} .platform-#{$browser}
   {
     display: block;
   }
 }