Fixing centering of urls

Author: RSTZZZ

_includes/author-profile.html

@@ -52,7 +52,7 @@ <h3 class="author-name">
                 {% for link in author.links %}
                 {% include infer-icon.html link=link %}
                 {% if icon %}
-                <li class="author-links-horizontal">
+                <li>
                     <a href="{{ link.url }}" class="author-button">
                         <i class="{{ icon }} author-button" aria-label="Access author's external link for {{ icon }}">
                         </i>

_sass/custom/authors.scss

@@ -1,9 +1,5 @@
-.author-button {
-    margin-right: .2em;
-    font-size: x-large;
-    color: $primary-color
-}
-
-.author-links-horizontal {
-    display: inline-flex;
+.author-button {
+    margin-right: .2em;
+    font-size: x-large;
+    color: $primary-color
 }

_sass/custom/display-author-page.scss

@@ -9,18 +9,19 @@ article.author-page-card {
     grid-template-columns: 300px 1fr;
 
     @media (max-width: 900px) {
-        grid-template-columns: 1fr 2fr;    
+        grid-template-columns: 1fr 2fr;
     }
+
     // For mobile devices, we want to stack the thumbnail on top of the rest of the content
     // to make it easier to read.
     @media (max-width: 500px) {
         grid-template-areas:
-        "name"
-        "thumbnail"
-        "."
-        "role"
-        "bio"
-        "links";
+            "name"
+            "thumbnail"
+            "."
+            "role"
+            "bio"
+            "links";
         grid-template-columns: 1fr;
         justify-items: center;
         text-align: center;
@@ -59,6 +60,7 @@ article.author-page-card {
     font-weight: bold;
     font-size: 1.25em;
 }
+
 .author-page-bio {
     grid-area: bio;
     font-weight: italic;
@@ -72,4 +74,4 @@ article.author-page-card {
     text-decoration: none;
     margin-right: 15px;
     display: inline-block;
-}
+}

_sass/custom/people-card.scss

@@ -42,6 +42,162 @@ div.author-avatar {
     }
 }
 
+.author__urls-wrapper {
+    position: relative;
+    display: table-cell;
+    vertical-align: middle;
+    font-family: $sans-serif;
+    z-index: 20;
+    cursor: pointer;
+
+    li:last-child {
+        a {
+            margin-bottom: 0;
+        }
+    }
+
+    .author__urls {
+        display: none;
+        /* Hide the list by default */
+        flex-direction: row;
+        /* Ensures the items are in a row */
+        justify-content: space-between;
+        /* Centers the list horizontally */
+        list-style-type: none;
+        /* Removes bullet points */
+        padding: 0;
+        margin: 0;
+
+        li {
+            flex: 1;
+            text-align: center;
+            justify-content: center;
+        }
+
+    }
+
+    @include breakpoint($large) {
+        display: block;
+
+        .author__urls {
+            display: flex;
+            /* Show the list when in large screen */
+        }
+    }
+
+    button {
+        position: relative;
+        margin-bottom: 0;
+
+        &:before {
+            @supports (pointer-events: none) {
+                content: '';
+                position: fixed;
+                top: 0;
+                inset-inline-start: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+            }
+        }
+
+        &.open {
+            &:before {
+                pointer-events: auto;
+            }
+        }
+
+        @include breakpoint($large) {
+            display: none;
+        }
+    }
+}
+
+.author__urls {
+    display: none;
+    position: absolute;
+    inset-inline-end: 0;
+    margin-top: 15px;
+    padding: 10px;
+    list-style-type: none;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    background: $background-color;
+    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+    cursor: default;
+
+    &.is--visible {
+        display: block;
+    }
+
+    @include breakpoint($large) {
+        display: block;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+    }
+
+    &::before {
+        display: block;
+        content: "";
+        position: absolute;
+        top: -11px;
+        inset-inline-start: calc(50% - 10px);
+        width: 0;
+        border-style: solid;
+        border-width: 0 10px 10px;
+        border-color: $border-color transparent;
+        z-index: 0;
+
+        @include breakpoint($large) {
+            display: none;
+        }
+    }
+
+    &:after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: -10px;
+        inset-inline-start: calc(50% - 10px);
+        width: 0;
+        border-style: solid;
+        border-width: 0 10px 10px;
+        border-color: $background-color transparent;
+        z-index: 1;
+
+        @include breakpoint($large) {
+            display: none;
+        }
+    }
+
+    ul {
+        padding: 10px;
+        list-style-type: none;
+    }
+
+    li {
+        white-space: nowrap;
+    }
+
+    a {
+        display: block;
+        margin-bottom: 5px;
+        padding-block: 2px;
+        padding-inline-end: 5px;
+        color: inherit;
+        font-size: $type-size-6;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
 .author-info {
     display: inline-block;
     width: max(calc(99% - 160px), calc(65% - 10px));
@@ -82,4 +238,10 @@ div.author-avatar {
     @media (min-width: 601px) {
         width: 49%;
     }
+}
+
+.author-button {
+    margin-right: .2em;
+    font-size: x-large;
+    color: $primary-color
 }