Better author social media on website (#1185)

* Better Author Data * Clean up * Move icons up if space * Linting fixes * Hide social media from screen-readers * Move social media to new line all the time * Revert author link change * Review feedback
HTTPArchive · Aug 10, 2020 · 20c75f0 · 20c75f0
1 parent b6253c3
commit 20c75f0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/src/static/css/page.css b/src/static/css/page.css
@@ -257,8 +257,8 @@
 .authors .name {
   font-size: 24px;
   font-size: 1.5rem;
-  margin-right: 10px;
-  margin-right: 0.625rem;
+  margin-right: 16px;
+  margin-right: 1rem;
   margin-bottom: 10px;
   margin-bottom: 0.625rem;
   display: inline-block;
@@ -280,19 +280,30 @@
 }
 
 .authors .social a {
-  margin: 0 10px 0 0;
-  margin: 0 0.625rem 0 0;
+  margin-right: 10px;
+  margin-right: 0.625rem;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   text-decoration: none;
 }
 
+.authors .social a:last-child {
+  margin-right: 0;
+}
+
 .authors .social a:hover,
 .authors .social a:focus {
   text-decoration: underline;
 }
 
+.authors .social svg {
+  width: 1em;
+  height: auto;
+  margin-right: 4px;
+  margin-right: 0.25rem;
+}
+
 #chapter-navigation {
   padding: 50px 36px;
   padding: 3.125rem 2.25rem;

diff --git a/src/templates/base/2019/base_chapter.html b/src/templates/base/2019/base_chapter.html
@@ -19,6 +19,7 @@
             "https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"
             {% if authordata.twitter %},"https://twitter.com/{{ authordata.twitter }}"{% endif %}
             {% if authordata.github %},"https://github.com/{{ authordata.github }}"{% endif %}
+            {% if authordata.linkedin %},"https://www.linkedin.com/in/{{ authordata.linkedin }}/"{% endif %}
             ],
         "name": "{{ authordata.name if authordata.name else author }}"
       }{% if loop.index < loop.length %},{% endif %}
@@ -86,7 +87,7 @@
 {% macro render_byline() %}
   <div class="byline">{{ self.written_by_before() }}
   {% for author in metadata.get('authors') %}
-    <a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}
+  <a class="author" href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}">{{ config.contributors[author].name if author in config.contributors else author }}</a>{{ self.comma() if not loop.last }}
     {% if loop.index == loop.length - 1 %}{{ self.and() }}{% endif %}
   {% endfor %}{{ self.written_by_after() }}
   </div>
@@ -129,41 +130,45 @@ <h2 id="authors">
           </div>
           <div class="info">
             <a href="{{ url_for('contributors', year=year, lang=lang, _anchor=author) }}"><span class="name">{{ authordata.name if authordata.name else author }}</span></a>
-              {% if authordata.twitter or authordata.github %}
-                  <span class="social">
+              {% if authordata.twitter or authordata.github or authordata.linkedin or authordata.website %}
+                <div class="social">
                   {% if authordata.twitter %}
                   <a class="twitter" href="https://twitter.com/{{ authordata.twitter }}" aria-labelledby="author-{{ author }}-twitter">
-                    <svg width="22" height="22" role="img">
+                    <svg width="22" height="22" role="img" aria-hidden>
                       <title id="author-{{ author }}-twitter">{{ onTwitter(authordata.twitter) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
                     </svg>
+                    @{{ authordata.twitter }}
                   </a>
                   {% endif %}
                   {% if authordata.github %}
                   <a class="github" href="https://github.com/{{ authordata.github }}" aria-labelledby="author-{{ author }}-github">
-                    <svg width="22" height="22" role="img">
+                    <svg width="22" height="22" aria-hidden>
                       <title id="author-{{ author }}-github">{{ onGitHub(authordata.github) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
                     </svg>
+                    {{ authordata.github }}
                   </a>
                   {% endif %}
                   {% if authordata.linkedin %}
                   <a class="linkedin" href="https://www.linkedin.com/in/{{ authordata.linkedin }}/" aria-labelledby="author-{{ author }}-linkedin">
-                    <svg width="22" height="22" role="img">
+                    <svg width="22" height="22" aria-hidden>
                       <title id="author-{{ author }}-linkedin">{{ onLinkedIn(authordata.name) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linkedin"></use>
                     </svg>
+                    {{ authordata.linkedin }}
                   </a>
                   {% endif %}
                   {% if authordata.website %}
                   <a class="website" href="{{ authordata.website }}" aria-labelledby="author-{{ author }}-website">
-                    <svg width="22" height="22" role="img">
+                    <svg width="22" height="22" aria-hidden>
                       <title id="author-{{ author }}-website">{{ website(authordata.name) }}</title>
                       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#globe"></use>
                     </svg>
+                    {{ authordata.website }}
                   </a>
                   {% endif %}
-                  </span>
+                </div>
               {% endif %}
               {% if authordata.tagline %}
                   <div class="tagline">