PR #1 - Add Medium social media tag, accessibility, and update Summar…

…y fields I proposed the Medium icon and accessibility pieces of this PR to the master project in this PR: theNewDynamic#143 (comment) The summary page updates are for me
hannahhenderson · Nov 27, 2018 · 0f32d03 · 0f32d03
2 parents cd09f25 + 91d5c9d
commit 0f32d03
Show file tree

Hide file tree

Showing 12 changed files with 6,130 additions and 40 deletions.
diff --git a/archetypes/default.md b/archetypes/default.md
@@ -1,7 +1,8 @@
 +++
 title =  "{{ replace .TranslationBaseName "-" " " | title }}"
+subtitle = ""
+description = ""
 date = {{ .Date }}
 tags = []
 featured_image = ""
-description = ""
 +++
diff --git a/data/webpack_assets.json b/data/webpack_assets.json
@@ -1,6 +1,6 @@
 {
   "app": {
     "js": "js/app.3fc0f988d21662902933.js",
-    "css": "css/app.e08a958ae3e530145318b6373195c765.css"
+    "css": "css/app.955516233bcafa4d2a1c13cea63c7b50.css"
   }
 }
diff --git a/layouts/partials/new-window-icon.html b/layouts/partials/new-window-icon.html
@@ -0,0 +1,2 @@
+{{ $new_window_icon_size := "8px" }}
+<span class="new-window">{{ partial "svg/new-window.svg" (dict "size" $new_window_icon_size) }}</span>
diff --git a/layouts/partials/social-follow.html b/layouts/partials/social-follow.html
@@ -1,37 +1,55 @@
 <!-- TODO: Add follow intents where available TODO: Revisit color and hover color -->
+<div hidden>
+  <span id="new-window-0">Opens in a new window</span>
+  <span id="new-window-1">Opens an external site</span>
+  <span id="new-window-2">Opens an external site in a new window</span>
+</div>
 {{ $icon_size := "32px" }}
 {{ with .Param "facebook" }}
-  <a href="{{ . }}" class="link-transition facebook link dib z-999 pt3 pt0-l mr2" title="Facebook link">
-    {{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr1" title="Facebook link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "twitter" }}
-  <a href="{{ . }}" class="link-transition twitter link dib z-999 pt3 pt0-l mr2" title="Twitter link">
-    {{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "instagram" }}
-  <a href="{{ . }}" class="link-transition instagram link dib z-999 pt3 pt0-l mr2" title="Instagram link">
-    {{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr1" title="Instagram link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "youtube" }}
-  <a href="{{ . }}" class="link-transition youtube link dib z-999 pt3 pt0-l mr2" title="Youtube link">
-    {{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "linkedin" }}
-  <a href="{{ . }}" class="link-transition linkedin link dib z-999 pt3 pt0-l mr2" title="LinkedIn link">
-    {{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "github" }}
-  <a href="{{ . }}" class="link-transition github link dib z-999 pt3 pt0-l mr2" title="Github link">
-    {{ partial "svg/github.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/github.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
 {{ with .Param "gitlab" }}
-  <a href="{{ . }}" class="link-transition gitlab link dib z-999 pt3 pt0-l mr2" title="Gitlab link">
-    {{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
-  </a>
+<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
 {{ end }}
+{{ with .Param "medium" }}
+<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr1" title="Medium link" rel="noopener" aria-describedby="new-window-0">
+  {{ partial "svg/medium.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
+</a>
+{{ end }}
diff --git a/layouts/partials/summary-with-image.html b/layouts/partials/summary-with-image.html
@@ -1,26 +1,33 @@
 {{ $featured_image := .Params.featured_image }}
+{{ $subtitle := .Params.subtitle }}
+{{ $description := .Params.description }}
 <article class="bb b--black-10">
   <div class="db pv4 ph3 ph0-l no-underline dark-gray">
     <div class="flex flex-column flex-row-ns">
       {{ if .Params.featured_image }}
-          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-        {{ $featured_image := (trim $featured_image "/") | absURL }}
-        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
-          <a href="{{.URL}}" class="db grow">
-            <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
-          </a>
-        </div>
+      {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+      {{ $featured_image := (trim $featured_image "/") | absURL }}
+      <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+        <a href="{{.URL}}" class="db grow">
+          <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+        </a>
+      </div>
       {{ end }}
       <div class="blah w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.URL}}" class="color-inherit dim link">
             {{ .Title }}
-            </a>
+          </a>
         </h1>
+        <h3 class="f4 fw1 athelas mt0 lh-title">
+          <a href="{{.URL}}" class="color-inherit dim link">
+            {{ $subtitle }}
+          </a>
+        </h3>
         <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
-          {{ .Summary }}
+          {{ $description }}
         </div>
-          <a href="{{.URL}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{$.Param "read_more_copy" | default "read more" }}</a>
+        <a href="{{.URL}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{$.Param "read_more_copy" | default "read more" }}</a>
         {{/* TODO: add author
         <p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}
       </div>

diff --git a/layouts/partials/summary.html b/layouts/partials/summary.html
@@ -1,3 +1,5 @@
+{{ $subtitle := .Params.subtitle }}
+{{ $description := .Params.description }}
 <div class="relative w-100 mb4 bg-white nested-copy-line-height">
   <div class="bg-white mb3 pa4 gray overflow-hidden">
     <span class="f6 db">{{ humanize .Section }}</span>
@@ -6,8 +8,16 @@ <h1 class="f3 near-black">
         {{ .Title }}
       </a>
     </h1>
-    <div class="nested-links f5 lh-copy nested-copy-line-height">
-      {{ .Summary  }}
+    <h3 class="f4 fw1 athelas mt0 lh-title">
+      <a href="{{.URL}}" class="color-inherit dim link">
+        {{ $subtitle }}
+      </a>
+    </h3>
+    <div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
+      {{ $description }}
     </div>
+    <a href="{{.URL}}" class="ba b--moon-gray bg-light-gray br2 color-inherit dib f7 hover-bg-moon-gray link mt2 ph2 pv1">{{$.Param "read_more_copy" | default "read more" }}</a>
+    {{/* TODO: add author
+    <p class="f6 lh-copy mv0">By {{ .Author }}</p> */}}
   </div>
 </div>
diff --git a/layouts/partials/svg/medium.svg b/layouts/partials/svg/medium.svg
diff --git a/layouts/partials/svg/new-window.svg b/layouts/partials/svg/new-window.svg
diff --git a/src/css/_social-icons.css b/src/css/_social-icons.css
@@ -1,6 +1,16 @@
-.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .linkedin {
+.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .linkedin, .medium {
   fill: #BABABA;
 }
+
+.new-window {
+  opacity: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+.link-transition:hover .new-window{
+  opacity: 1;
+}
+
 .facebook:hover {
   fill: #3b5998;
 }
@@ -28,3 +38,7 @@
 .linkedin:hover {
   fill: #0077b5
 }
+
+.medium:hover {
+  fill: #0077b5
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{{ $new_window_icon_size := "8px" }}
		<span class="new-window">{{ partial "svg/new-window.svg" (dict "size" $new_window_icon_size) }}</span>