Fix alignment of deep link icon

Setting manual margins is fragile. Remove them to fix bad alignment in
about pages, since the icon is vertically aligned already.

It looks good to me as is, but if we want to change the alignment, we
should change the SVG instead.

site/gdocs/components/AllCharts.tsx

@@ -52,7 +52,7 @@ export function AllCharts(props: AllChartsProps) {
                 className="article-block__heading h1-semibold"
                 id={ALL_CHARTS_ID}
             >
-                {heading}
+                <span>{heading}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={ALL_CHARTS_ID}

site/gdocs/components/KeyInsights.tsx

@@ -321,7 +321,7 @@ export const KeyInsights = ({
                 className="article-block__heading h1-semibold"
                 id={KEY_INSIGHTS_ID}
             >
-                {heading}
+                <span>{heading}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={KEY_INSIGHTS_ID}

site/gdocs/components/ResearchAndWriting.scss

@@ -15,10 +15,6 @@ $rw-margin-bottom-grid-cell: 4px;
     @include sm-up {
         margin: 32px 0 24px;
     }
-
-    a.deep-link {
-        margin-top: 11px;
-    }
 }
 
 .research-and-writing-row__heading {

site/gdocs/components/ResearchAndWriting.tsx

@@ -201,7 +201,7 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
                 className="article-block__heading span-cols-12 h1-semibold"
                 id={slug}
             >
-                {heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}
+                <span>{heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={slug}

site/gdocs/components/centered-article.scss

@@ -288,46 +288,22 @@ $banner-height: 200px;
     }
 }
 
-.article-block__heading {
-    a.deep-link {
-        position: absolute;
-    }
-
-    &:hover {
-        a.deep-link {
-            opacity: 1;
-        }
-    }
-}
-
 h1.article-block__heading {
     a.deep-link {
-        margin-top: 16px;
         height: 16px;
         width: 16px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 h2.article-block__heading {
     a.deep-link {
-        margin-top: 11px;
         height: 14px;
         width: 14px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 h3.article-block__heading {
     a.deep-link {
-        margin-top: 8px;
         height: 12px;
         width: 12px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 

site/gdocs/components/topic-page.scss

@@ -203,38 +203,23 @@
     }
     h1.article-block__heading.h1-semibold {
         font-size: 2.25rem;
-        a.deep-link {
-            margin-top: 19px;
-        }
+
         @include sm-up {
             font-size: 2.625rem;
-            a.deep-link {
-                margin-top: 23px;
-            }
         }
     }
     h2.article-block__heading.h2-bold {
         font-size: 1.5rem;
-        a.deep-link {
-            margin-top: 13px;
-        }
+
         @include sm-up {
             font-size: 2rem;
-            a.deep-link {
-                margin-top: 19px;
-            }
         }
     }
     h3.article-block__heading.h3-bold {
         font-size: 1.25rem;
-        a.deep-link {
-            margin-top: 10px;
-        }
+
         @include sm-up {
             font-size: 1.5rem;
-            a.deep-link {
-                margin-top: 12px;
-            }
         }
     }
 }

site/owid.scss

@@ -210,7 +210,6 @@ main {
     display: inline-block;
     width: 28px;
     height: 20px;
-    margin-left: 0.5rem;
     font-size: 16px;
     background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDgyIDYuNTE3MThDMTMuNTgyNSA4LjYxOTg0IDEzLjU1MzYgMTEuOTkwOSAxMS40OTQ2IDE0LjA2MTRDMTEuNDkwOCAxNC4wNjU2IDExLjQ4NjIgMTQuMDcwMiAxMS40ODIgMTQuMDc0NEw5LjExOTQ4IDE2LjQzNjlDNy4wMzU3NyAxOC41MjA2IDMuNjQ1NjkgMTguNTIwMyAxLjU2MjMgMTYuNDM2OUMtMC41MjE0MTYgMTQuMzUzNSAtMC41MjE0MTYgMTAuOTYzIDEuNTYyMyA4Ljg3OTY4TDIuODY2OCA3LjU3NTE4QzMuMjEyNzQgNy4yMjkyNCAzLjgwODUgNy40NTkxNiAzLjgyNjM2IDcuOTQ4MDRDMy44NDkxNCA4LjU3MTA4IDMuOTYwODcgOS4xOTcwNCA0LjE2NzAyIDkuODAxNTJDNC4yMzY4NCAxMC4wMDYyIDQuMTg2OTYgMTAuMjMyNiA0LjAzNDAzIDEwLjM4NTVMMy41NzM5NCAxMC44NDU2QzIuNTg4NjUgMTEuODMwOSAyLjU1Nzc0IDEzLjQzNTIgMy41MzMzMyAxNC40MzAyQzQuNTE4NTUgMTUuNDM0OSA2LjEzNzkyIDE1LjQ0MDkgNy4xMzA2OSAxNC40NDgxTDkuNDkzMTkgMTIuMDg1OUMxMC40ODQzIDExLjA5NDggMTAuNDgwMSA5LjQ5MjkyIDkuNDkzMTkgOC41MDU5N0M5LjM2MzA4IDguMzc2MTEgOS4yMzIwMiA4LjI3NTIxIDkuMTI5NjQgOC4yMDQ3MkM5LjA1NzIyIDguMTU0OTkgOC45OTc0MiA4LjA4OTAxIDguOTU1MDIgOC4wMTIwN0M4LjkxMjYxIDcuOTM1MTIgOC44ODg3OCA3Ljg0OTMzIDguODg1NDEgNy43NjE1NEM4Ljg3MTQ5IDcuMzkwMDQgOS4wMDMxMiA3LjAwNzIzIDkuMjk2NjcgNi43MTM2N0wxMC4wMzY5IDUuOTczNDZDMTAuMjMwOSA1Ljc3OTM2IDEwLjUzNTQgNS43NTU1MiAxMC43NjA1IDUuOTEyNkMxMS4wMTgzIDYuMDkyNTggMTEuMjU5NyA2LjI5NDg5IDExLjQ4MiA2LjUxNzE4VjYuNTE3MThaTTE2LjQzNjcgMS41NjIxOUMxNC4zNTMzIC0wLjUyMTI0IDEwLjk2MzMgLTAuNTIxNTIyIDguODc5NTQgMS41NjIxOUw2LjUxNzA0IDMuOTI0NjlDNi41MTI4MiAzLjkyODkxIDYuNTA4MjUgMy45MzM0OCA2LjUwNDM5IDMuOTM3N0M0LjQ0NTQyIDYuMDA4MTIgNC40MTY1NiA5LjM3OTIyIDYuNTE3MDQgMTEuNDgxOUM2LjczOTMzIDExLjcwNDIgNi45ODA3NCAxMS45MDY1IDcuMjM4NDggMTIuMDg2NEM3LjQ2MzU1IDEyLjI0MzUgNy43NjgwOCAxMi4yMTk2IDcuOTYyMTQgMTIuMDI1Nkw4LjcwMjMyIDExLjI4NTRDOC45OTU4OCAxMC45OTE4IDkuMTI3NSAxMC42MDkgOS4xMTM1OCAxMC4yMzc1QzkuMTEwMjEgMTAuMTQ5NyA5LjA4NjM4IDEwLjA2MzkgOS4wNDM5OCA5Ljk4Njk2QzkuMDAxNTcgOS45MTAwMSA4Ljk0MTc3IDkuODQ0MDQgOC44NjkzNSA5Ljc5NDMxQzguNzY2OTcgOS43MjM4MiA4LjYzNTkxIDkuNjIyOTIgOC41MDU4IDkuNDkzMDZDNy41MTg4NiA4LjUwNjExIDcuNTE0NzEgNi45MDQxOCA4LjUwNTggNS45MTMwOUwxMC44NjgzIDMuNTUwOTRDMTEuODYxMSAyLjU1ODE3IDEzLjQ4MDQgMi41NjQxNCAxNC40NjU3IDMuNTY4ODdDMTUuNDQxMiA0LjU2MzggMTUuNDEwNCA2LjE2ODEyIDE0LjQyNTEgNy4xNTM0MUwxMy45NjUgNy42MTM1QzEzLjgxMiA3Ljc2NjQzIDEzLjc2MjEgNy45OTI4MyAxMy44MzIgOC4xOTc1MUMxNC4wMzgxIDguODAxOTkgMTQuMTQ5OSA5LjQyNzk1IDE0LjE3MjYgMTAuMDUxQzE0LjE5MDUgMTAuNTM5OSAxNC43ODYzIDEwLjc2OTggMTUuMTMyMiAxMC40MjM5TDE2LjQzNjcgOS4xMTkzNEMxOC41MjA0IDcuMDM2MDIgMTguNTIwNCAzLjY0NTU1IDE2LjQzNjcgMS41NjIxOVYxLjU2MjE5WiIgZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz48L3N2Zz4=")
         no-repeat left;
@@ -227,21 +226,48 @@ main {
     &:focus {
         opacity: 1;
     }
+}
 
-    @include touch-device {
-        // It's not visible because of the opacity anyway, but if it's the
-        // only reason the whole heading wraps to the next line, it adds
-        // vertical space, which shouldn't be there.
-        display: none;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    // Avoid wrapping the deep-link to the next line as an orphan. Using  
+    // doesn't work and programmatically wrapping the last word and the
+    // deep-link in a span with text-wrap: nowrap would be an even bigger hack.
+    &:has(.deep-link) {
+        > *:first-child {
+            padding-right: 2rem;
+
+            // On touch devices, the deep-link is hidden, so we don't need the
+            // padding to make space for it.
+            @include touch-device {
+                padding-right: 0;
+            }
+        }
+    }
+
+    .deep-link {
+        // Margin is a bit smaller than the padding on the preceding element to
+        // add a bit of space between them.
+        margin-left: -1.5rem;
+
+        @include touch-device {
+            // It's not visible because of the opacity anyway, but it can add
+            // enough vertical space to cause the heading to wrap to the next
+            // line. Hide it instead, so the heading can use as much space as
+            // possible.
+            display: none;
+        }
     }
-}
 
-h2:hover .deep-link,
-h3:hover .deep-link,
-h4:hover .deep-link,
-h5:hover .deep-link,
-h6:hover .deep-link {
-    opacity: 1;
+    &:hover {
+        .deep-link {
+            opacity: 1;
+        }
+    }
 }
 
 .heading-latest {