Add full-width header image option for all content pages

* feature is consistent across Posts, Projects, Talks, Publications, and nodes (#105)
* `image` parameter is moved under a `[header]` section at the end of existing content's frontmatter
* `caption` parameter can be used to specify image credit/caption (#103)
* set `preview = false` under `[header]` to hide a post's thumbnail on homepage (#113)
* add example of customizing a taxonomy list page at `/tags/academic/`
* revert i18n->hard-coded change for node page titles (#118)

archetypes/post.md

@@ -1,6 +1,11 @@
 +++
-image = ""
 math = false
 highlight = true
 tags = []
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

archetypes/project.md

@@ -9,9 +9,6 @@ summary = ""
 # Optional image to display on homepage.
 image_preview = ""
 
-# Optional image to display on project detail page.
-image = ""
-
 # Optional external URL for project (replaces project detail page).
 external_link = ""
 
@@ -20,4 +17,10 @@ math = false
 
 # Does the project detail page use source code highlighting?
 highlight = true
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

archetypes/publication.md

@@ -28,9 +28,6 @@ math = false
 # Does this page require source code highlighting? (true/false)
 highlight = true
 
-# Featured image (optional)
-image = ""
-
 # Featured image thumbnail (optional)
 image_preview = ""
 
@@ -45,4 +42,9 @@ url_project = ""
 url_slides = ""
 url_video = ""
 
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

archetypes/talk.md

@@ -1,14 +1,22 @@
 +++
-math = false
-highlight = true
 title = ""
 abstract = ""
 abstract_short = ""
 event = ""
 event_url = ""
 location = ""
+
 selected = false
+math = false
+highlight = true
+
 url_pdf = ""
 url_slides = ""
 url_video = ""
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

exampleSite/content/post/_index.md

@@ -3,4 +3,10 @@ title = "Posts"
 date = "2017-01-01T00:00:00Z"
 math = false
 highlight = false
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

exampleSite/content/post/getting-started.md

@@ -1,13 +1,17 @@
 +++
 date = "2016-04-20T12:00:00"
 draft = false
-image = "banners/getting-started.png"
 tags = ["academic", "hugo"]
 title = "Getting started with the Academic framework for Hugo"
 math = true
 summary = """
 Create a beautifully simple personal or academic website in under 10 minutes. 
 """
+
+[header]
+image = "headers/getting-started.png"
+caption = "Image credit: [**Academic**](https://github.com/gcushen/hugo-academic/)"
+
 +++
 
 The Academic framework enables you to easily create a beautifully simple personal or academic website using the [Hugo](https://gohugo.io) static site generator.

exampleSite/content/post/managing-content.md

@@ -12,7 +12,18 @@ To enable LaTeX math rendering for a page, you should include `math = true` in t
 
 To disable source code highlighting by default for all pages, set `highlight = false` in `config.toml`. You can then enable source code highlighting only on pages that need it by setting `highlight = true` in that page's preamble. See the [code-highlighting docs]({{< ref "post/writing-markdown-latex.md#code-highlighting" >}}) for more details.
 
-To display an image in publication, post, or project page headers, you can include the `image = "my-image.jpg"` option in the page `+++` preamble. It is automatically assumed that the image is located in your `static/img/` folder. In the context of posts and projects, the image is intended to behave as a full width banner across the top of the article.
+To display a featured image in content page headers, the parameters below can be inserted towards the end of a page's `+++` preamble. It is assumed that the image is located in your `static/img/` folder, so the full path in the example below will be `static/img/headers/getting-started.png`. The `caption` parameter can be used to write an image caption or credit. 
+
+```toml
+[header]
+image = "headers/getting-started.png"
+caption = "Image credit: [**Academic**](https://github.com/gcushen/hugo-academic/)"
+
+```
+
+{{% alert note %}}
+If you wish to prevent a featured image automatically being used for a post's thumbnail on the homepage, the `preview = false` parameter can be added to `[header]`.
+{{% /alert %}}
 
 ## Create a publication
 

exampleSite/content/project/deep-learning.md

@@ -11,9 +11,6 @@ summary = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 # Optional image to display on homepage (relative to `static/img/` folder).
 image_preview = "bubbles.jpg"
 
-# Optional image to display on project detail page (relative to `static/img/` folder).
-image = ""
-
 # Tags: can be used for filtering projects.
 # Example: `tags = ["machine-learning", "deep-learning"]`
 tags = ["deep-learning"]
@@ -24,6 +21,11 @@ external_link = ""
 # Does the project detail page use math formatting?
 math = false
 
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = "headers/bubbles-wide.jpg"
+caption = "My caption :smile:"
+
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida.

exampleSite/content/project/example-external-project.md

@@ -11,9 +11,6 @@ summary = "An example of linking directly to an external project website using `
 # Optional image to display on homepage (relative to `static/img/` folder).
 image_preview = "boards.jpg"
 
-# Optional image to display on project detail page (relative to `static/img/` folder).
-image = ""
-
 # Tags: can be used for filtering projects.
 # Example: `tags = ["machine-learning", "deep-learning"]`
 tags = ["demo"]

exampleSite/content/publication/_index.md

@@ -3,4 +3,10 @@ title = "Publications"
 date = "2017-01-01T00:00:00Z"
 math = false
 highlight = false
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

exampleSite/content/publication/clothing-search.md

@@ -3,7 +3,6 @@ abstract = "We present a mobile visual clothing search system whereby a smart ph
 abstract_short = "A mobile visual clothing search system is presented whereby a smart phone user can either choose a social networking image or capture a new photo of a person wearing clothing of interest and search for similar clothing in a large cloud-based ecommerce database. The phone's GPS location is used to re-rank results by retail store location, to inform the user of local stores where similar clothing items can be tried on."
 authors = ["GA Cushen", "MS Nixon"]
 date = "2013-07-01"
-image = ""
 image_preview = ""
 math = true
 publication_types = ["1"]
@@ -22,6 +21,11 @@ url_video = "#"
 name = "Custom Link"
 url = "http://www.example.org"
 
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = "headers/bubbles-wide.jpg"
+caption = "My caption :smile:"
+
 +++
 
 More detail can easily be written here using *Markdown* and $\rm \LaTeX$ math code.

exampleSite/content/publication/person-re-identification.md

@@ -3,7 +3,6 @@ abstract = "Person re-identification is a critical security task for recognizing
 abstract_short = ""
 authors = ["GA Cushen"]
 date = "2015-09-01"
-image = ""
 image_preview = ""
 math = true
 publication_types = ["2"]

exampleSite/content/tags/academic/_index.md

@@ -0,0 +1,14 @@
++++
+title = "Content tagged as 'Academic'"
+date = "2017-01-01T00:00:00"
+math = false
+highlight = false
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = "headers/bubbles-wide.jpg"
+caption = ""
+
++++
+
+Here is a list of all the content that has been tagged as *academic*.

exampleSite/content/talk/_index.md

@@ -3,4 +3,10 @@ title = "Recent & Upcoming Talks"
 date = "2017-01-01T00:00:00Z"
 math = false
 highlight = false
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = ""
+caption = ""
+
 +++

exampleSite/content/talk/example-talk.md

@@ -1,16 +1,24 @@
 +++
 date = "2017-01-01T00:00:00"
-math = true
 title = "Example Talk"
 abstract = ""
 abstract_short = ""
 event = "Hugo Academic Theme Conference"
 event_url = "https://example.org"
 location = "London, United Kingdom"
+
 selected = false
+math = true
+
 url_pdf = ""
 url_slides = ""
 url_video = ""
+
+# Optional featured image (relative to `static/img/` folder).
+[header]
+image = "headers/bubbles-wide.jpg"
+caption = "My caption :smile:"
+
 +++
 
 Embed your slides or video here using [shortcodes](https://gcushen.github.io/hugo-academic-demo/post/writing-markdown-latex/). Further details can easily be added using *Markdown* and $\rm \LaTeX$ math code. 

i18n/en.yaml

@@ -87,3 +87,14 @@
 
 - id: open_project_site
   translation: Go to Project Site
+
+# Default node titles
+
+- id: posts
+  translation: Posts
+
+- id: publications
+  translation: Publications
+
+- id: talks
+  translation: Talks

layouts/_default/list.html

@@ -1,7 +1,21 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
+
+{{ if .Params.header.image }}
+<div class="article-header">
+  <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+  {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+</div>
+{{end}}
+
 <div class="universal-wrapper">
 
+  {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+
+  {{ with .Content }}
+  <div class="article-style" itemprop="articleBody">{{ . }}</div>
+  {{ end }}
+
   {{ $paginator := .Paginate .Data.Pages }}
   {{ range $paginator.Pages }}
   <div>

layouts/_default/single.html

@@ -3,8 +3,11 @@
 
 <article class="article" itemscope itemtype="http://schema.org/Article">
 
-  {{ if .Params.image }}
-  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="article-banner" itemprop="image">
+  {{ if .Params.header.image }}
+  <div class="article-header">
+    <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+    {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+  </div>
   {{end}}
 
   <div class="article-container">

layouts/partials/post_li.html

@@ -2,10 +2,10 @@
 {{ $page := .page }}
 
 <div class="article-list-item" itemscope itemprop="blogPost">
-  {{ if $post.Params.image }}
+  {{ $preview := $post.Params.header.preview | default true }}
+  {{ if and $post.Params.header.image $preview }}
   <a href="{{ $post.Permalink }}">
-    <img src="{{ "/img/" | relURL }}{{ $post.Params.image }}" class="article-banner"
-    itemprop="image">
+    <img src="{{ "/img/" | relURL }}{{ $post.Params.header.image }}" class="article-banner" itemprop="image">
   </a>
   {{end}}
   <h3 class="article-title" itemprop="name">

layouts/partials/publication_li_detailed.html

@@ -5,17 +5,17 @@
 
     <div class="col-md-12">
       <a href="{{ .Permalink }}">
-        <img src="{{ $.Site.BaseURL }}img/{{ .Params.image_preview }}" class="pub-banner"
+        <img src="{{ "/img/" | relURL }}{{ .Params.image_preview }}" class="pub-banner"
              itemprop="image">
       </a>
     </div>
     <div class="col-md-12">
 
-    {{ else if .Params.image}}
+    {{ else if .Params.header.image}}
 
     <div class="col-md-12">
       <a href="{{ .Permalink }}">
-        <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
+        <img src="{{ "/img/" | relURL }}{{ .Params.header.image }}" class="pub-banner" itemprop="image">
       </a>
     </div>
     <div class="col-md-12">

layouts/project/single.html

@@ -1,11 +1,16 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="article-container">
 
-  <article class="article article-project" itemscope itemtype="http://schema.org/Article">
-    {{ if .Params.image }}
-    <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="article-banner" itemprop="image">
-    {{end}}
+<article class="article article-project" itemscope itemtype="http://schema.org/Article">
+
+  {{ if .Params.header.image }}
+  <div class="article-header">
+    <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+    {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+  </div>
+  {{end}}
+
+  <div class="article-container">
 
     <div class="pub-title">
       <h1 itemprop="name">{{ .Title }}</h1>
@@ -22,9 +27,9 @@
     <div class="article-style" itemprop="articleBody">
       {{ .Content }}
     </div>
-  </article>
 
-</div>
+  </div>
+</article>
 
 <div class="container">
   {{ partial "section_pager.html" . }}

layouts/publication/single.html

@@ -1,8 +1,15 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="container pub" itemscope itemtype="http://schema.org/CreativeWork">
+<div class="pub" itemscope itemtype="http://schema.org/CreativeWork">
 
-  <div class="pub-title">
+  {{ if .Params.header.image }}
+  <div class="article-header">
+    <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+    {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+  </div>
+  {{end}}
+
+  <div class="container pub-title">
     <h1 itemprop="name">{{ .Title }}</h1>
     <span class="pub-authors" itemprop="author">
       {{ with .Params.authors }}
@@ -18,7 +25,7 @@
 <div class="article-container">
 
   {{ if .Params.image }}
-  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
+  <img src="{{ "/img/" | relURL }}{{ .Params.image }}" class="pub-banner" itemprop="image">
   {{end}}
 
   <h3>{{ i18n "abstract" }}</h3>

layouts/section/post.html

@@ -1,8 +1,16 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
+
+{{ if .Params.header.image }}
+<div class="article-header">
+  <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+  {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+</div>
+{{end}}
+
 <div class="universal-wrapper">
 
-  <h1>{{ .Title | default "Posts" }}</h1>
+  <h1>{{ .Title | default (i18n "posts") }}</h1>
 
   {{ with .Content }}
   <div class="article-style" itemprop="articleBody">{{ . }}</div>

layouts/section/publication.html

@@ -1,9 +1,17 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
+
+{{ if .Params.header.image }}
+<div class="article-header">
+  <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+  {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+</div>
+{{end}}
+
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <h1>{{ .Title | default "Publications" }}</h1>
+      <h1>{{ .Title | default (i18n "publications") }}</h1>
 
       {{ with .Content }}
       <div class="article-style" itemprop="articleBody">{{ . }}</div>

layouts/section/talk.html

@@ -1,9 +1,17 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
+
+{{ if .Params.header.image }}
+<div class="article-header">
+  <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+  {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+</div>
+{{end}}
+
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <h1>{{ .Title | default "Talks" }}</h1>
+      <h1>{{ .Title | default (i18n "talks") }}</h1>
 
       {{ with .Content }}
       <div class="article-style" itemprop="articleBody">{{ . }}</div>

layouts/talk/single.html

@@ -1,98 +1,104 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-<div class="article-container pub" itemscope itemtype="http://schema.org/CreativeWork">
+<div class="pub" itemscope itemtype="http://schema.org/CreativeWork">
 
-  <div class="pub-title">
-    <h1 itemprop="name">{{ .Title }}</h1>
-    <span class="pub-authors" itemprop="author">
-      {{ with .Params.authors }}
-      {{ delimit . ", " }}
-      {{ end }}
-    </span>
-    <span class="pull-right">
-      {{ partial "share.html" . }}
-    </span>
+  {{ if .Params.header.image }}
+  <div class="article-header">
+    <img src="{{ "/img/" | relURL }}/{{ .Params.header.image }}" class="article-banner" itemprop="image">
+    {{ with .Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
   </div>
-
-  {{ if .Params.image }}
-  <img src="{{ $.Site.BaseURL }}img/{{ .Params.image }}" class="pub-banner" itemprop="image">
   {{end}}
 
-  {{ if .Params.abstract }}
-    <h3>{{ i18n "abstract" }}</h3>
-    <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
-  {{ else }}
-    <br>
-  {{ end }}
+  <div class="article-container">
 
-  <div class="row">
-    <div class="col-sm-1"></div>
-    <div class="col-sm-10">
-      <div class="row">
-        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
-        <div class="col-xs-12 col-sm-9" itemprop="datePublished">
-          {{ .Date.Format $.Site.Params.date_format }}
+    <div class="pub-title">
+      <h1 itemprop="name">{{ .Title }}</h1>
+      <span class="pub-authors" itemprop="author">
+        {{ with .Params.authors }}
+        {{ delimit . ", " }}
+        {{ end }}
+      </span>
+      <span class="pull-right">
+        {{ partial "share.html" . }}
+      </span>
+    </div>
+
+    {{ if .Params.abstract }}
+      <h3>{{ i18n "abstract" }}</h3>
+      <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
+    {{ else }}
+      <br>
+    {{ end }}
+
+    <div class="row">
+      <div class="col-sm-1"></div>
+      <div class="col-sm-10">
+        <div class="row">
+          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
+          <div class="col-xs-12 col-sm-9" itemprop="datePublished">
+            {{ .Date.Format $.Site.Params.date_format }}
+          </div>
         </div>
       </div>
+      <div class="col-sm-1"></div>
     </div>
-    <div class="col-sm-1"></div>
-  </div>
-  <div class="visible-xs space-below"></div>
+    <div class="visible-xs space-below"></div>
 
-  <div class="row">
-    <div class="col-sm-1"></div>
-    <div class="col-sm-10">
-      <div class="row">
-        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "event" }}</div>
-        <div class="col-xs-12 col-sm-9">
-          {{ with .Params.event_url }}<a href="{{ . }}" target="_blank">{{ end }}
-          {{ .Params.event | markdownify }}
-          {{ if .Params.event_url }}</a>{{ end }}
+    <div class="row">
+      <div class="col-sm-1"></div>
+      <div class="col-sm-10">
+        <div class="row">
+          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "event" }}</div>
+          <div class="col-xs-12 col-sm-9">
+            {{ with .Params.event_url }}<a href="{{ . }}" target="_blank">{{ end }}
+            {{ .Params.event | markdownify }}
+            {{ if .Params.event_url }}</a>{{ end }}
+          </div>
         </div>
       </div>
+      <div class="col-sm-1"></div>
     </div>
-    <div class="col-sm-1"></div>
-  </div>
-  <div class="visible-xs space-below"></div>
-
-  {{ with .Params.location }}
-  <div class="row">
-    <div class="col-sm-1"></div>
-    <div class="col-sm-10">
-      <div class="row">
-        <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "location" }}</div>
-        <div class="col-xs-12 col-sm-9">{{ . | markdownify }}</div>
-      </div>
-    </div>
-    <div class="col-sm-1"></div>
-  </div>
-  <div class="visible-xs space-below"></div>
-  {{ end }}
-
-  {{ if .Params.url_pdf | or .Params.url_slides | or .Params.url_video | or .Params.url_custom }}
-  <div class="row" style="padding-top: 10px">
-    <div class="col-sm-1"></div>
-    <div class="col-sm-10">
-      <div class="row">
-        <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
-        <div class="col-xs-12 col-sm-9">
-
-          {{ partial "talk_links" (dict "content" . "is_list" 0) }}
+    <div class="visible-xs space-below"></div>
 
+    {{ with .Params.location }}
+    <div class="row">
+      <div class="col-sm-1"></div>
+      <div class="col-sm-10">
+        <div class="row">
+          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "location" }}</div>
+          <div class="col-xs-12 col-sm-9">{{ . | markdownify }}</div>
         </div>
       </div>
+      <div class="col-sm-1"></div>
     </div>
-    <div class="col-sm-1"></div>
+    <div class="visible-xs space-below"></div>
+    {{ end }}
+
+    {{ if .Params.url_pdf | or .Params.url_slides | or .Params.url_video | or .Params.url_custom }}
+    <div class="row" style="padding-top: 10px">
+      <div class="col-sm-1"></div>
+      <div class="col-sm-10">
+        <div class="row">
+          <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
+          <div class="col-xs-12 col-sm-9">
+
+            {{ partial "talk_links" (dict "content" . "is_list" 0) }}
+
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-1"></div>
+    </div>
+    <div class="visible-xs space-below"></div>
+    {{ end }}
+
+    <div class="space-below"></div>
+
+    <div class="article-style">
+      {{ .Content }}
+    </div>
+
   </div>
-  <div class="visible-xs space-below"></div>
-  {{ end }}
-
-  <div class="space-below"></div>
-
-  <div class="article-style">
-    {{ .Content }}
-  </div>
-
 </div>
 
 <div class="container">

static/css/hugo-academic.css

@@ -387,6 +387,41 @@ article {
   margin: 0 auto 0 auto;
 }
 
+.article-header {
+  position: relative;
+  clear: both;
+}
+
+.article-banner {
+  width: 100%;
+  height: auto;
+}
+
+.article-header-caption {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 2px 5px;
+  color: #fff;
+  font-size: .7em;
+  background: #000;
+  text-align: right;
+  z-index: 5;
+  opacity: 0.65;
+  border-radius: 5px 0 0 0;
+}
+@media (min-width: 64em) {
+  .article-header-caption {
+    padding: 5px 10px;
+  }
+}
+
+.article-header-caption a {
+  color: #fff;
+  text-decoration: none;
+}
+
 .article-title {
   font-size: 1.75rem;
 }
@@ -430,11 +465,6 @@ article {
   margin-right: 10px;
 }
 
-.article-banner {
-  width: 100%;
-  height: auto;
-}
-
 .article-style img,
 .article-style video {
   box-shadow: 1px 1px 0px #edefed, -1px -1px 0px #edefed, 1px -1px 0px #edefed, -1px 1px 0px #edefed;
@@ -457,7 +487,7 @@ article {
 }
 
 #comments {
-  padding: 20px;
+  padding-top: 1rem;
 }
 
 /*************************************************