Apply card style to detailed list view and refactor

layouts/partials/css/academic.css

@@ -48,6 +48,19 @@ body {
   }
 }
 
+.max-width-640 {
+  max-width: 640px;
+}
+
+.margin-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.center-text {
+  text-align: center;
+}
+
 /* Body text */
 p {
   margin-top: 0;
@@ -606,14 +619,19 @@ article {
 }
 
 .article-metadata {
-  margin-bottom: 20px;
-  line-height: 30px; /* Match share bar line height. */
+  margin-bottom: 15px;
   overflow: hidden;
   font-size: 14px;
   letter-spacing: 0.03em;
   color: #888;
 }
 
+/* For article page only, not lists. */
+article .article-metadata {
+  margin-bottom: 20px;
+  line-height: 30px; /* Match share bar line height. */
+}
+
 .article-metadata a {
   color: #888;
 }
@@ -622,18 +640,6 @@ article {
   color: {{ .Get "primary" }};
 }
 
-.article-list-item {
-  margin-bottom: 40px;
-}
-
-.article-list-item:last-child {
-  margin-bottom: 0 !important;
-}
-
-.article-list-item .article-metadata {
-  margin-bottom: 5px;
-}
-
 .middot-divider {
   padding-right: .45em;
   padding-left: .45em;
@@ -706,10 +712,6 @@ article {
   margin-right: auto;
 }
 
-.pub .pub-title {
-  margin-bottom: 5px;
-}
-
 .pub .pub-authors {
   font-style: italic;
   line-height: 30px; /* Match share bar line height. */
@@ -719,10 +721,6 @@ article {
   font-weight: bold;
 }
 
-.pub-list-item {
-  margin-bottom: 40px;
-}
-
 .pub-list-item .pub-abstract {
   font-size: 1rem;
 }
@@ -811,6 +809,29 @@ article {
  *  Card component
  **************************************************/
 
+.card-simple {
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,0,0,.04);
+  border: 1px solid rgba(0,0,0,.09);
+  border-radius: 3px;
+  margin-top: 20px;
+  padding: 15px 20px 15px 20px;
+}
+
+.card-simple:first-of-type {
+  margin-top: 0;
+}
+
+.card-simple p.read-more {
+  margin: 0;
+}
+
+.dark .card-simple {
+  background: rgb(40, 42, 54);
+  box-shadow: 0 1px 4px rgba(0,0,0,.04);
+  border: 1px solid rgb(68, 71, 90);
+}
+
 .card {
   margin-bottom: 1.5rem;
   overflow: hidden;

layouts/partials/post_li.html

@@ -1,6 +1,8 @@
 {{ $post := .post }}
 
-<div class="article-list-item" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
+<div class="card-simple" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
+  {{ partial "article_metadata" (dict "content" $post "is_list" 1) }}
+
   {{ $preview := $post.Params.header.preview | default true }}
   {{ if and $post.Params.header.image $preview }}
   <a href="{{ $post.Permalink }}">
@@ -10,7 +12,6 @@
   <h3 class="article-title" itemprop="headline">
     <a href="{{ $post.Permalink }}" itemprop="url">{{ $post.Title }}</a>
   </h3>
-  {{ partial "article_metadata" (dict "content" $post "is_list" 1) }}
   <div class="article-style" itemprop="articleBody">
     {{ if $post.Params.summary }}
     <p>{{ printf "%s" $post.Params.summary | markdownify }}</p>

layouts/partials/publication_li_detailed.html

@@ -1,62 +1,47 @@
-<div class="pub-list-item" itemscope itemtype="http://schema.org/CreativeWork">
-  <div class="row">
-
-    {{ if .Params.image_preview }}
-
-    <div class="col-md-12">
-      <a href="{{ .Permalink }}">
-        <img src="{{ "/img/" | relURL }}{{ .Params.image_preview }}" class="pub-banner"
-             itemprop="image">
-      </a>
-    </div>
-    <div class="col-md-12">
-
-    {{ else if .Params.header.image}}
+<div class="pub-list-item card-simple" itemscope itemtype="http://schema.org/CreativeWork">
+
+  {{ if .Params.image_preview }}
+    {{ .Scratch.Set "image" .Params.image_preview }}
+  {{ else if .Params.header.image }}
+    {{ .Scratch.Set "image" .Params.header.image }}
+  {{ end }}
+  {{ if .Scratch.Get "image" }}
+  <div>
+    <a href="{{ .Permalink }}">
+      <img src="{{ "/img/" | relURL }}{{ .Scratch.Get "image" }}" class="pub-banner" itemprop="image">
+    </a>
+  </div>
+  {{ end }}
 
-    <div class="col-md-12">
-      <a href="{{ .Permalink }}">
-        <img src="{{ "/img/" | relURL }}{{ .Params.header.image }}" class="pub-banner" itemprop="image">
-      </a>
-    </div>
-    <div class="col-md-12">
+  <h3 class="article-title" itemprop="name">
+    <a href="{{ .Permalink }}" itemprop="url">{{ .Title }}</a>
+  </h3>
 
+  <div class="pub-abstract" itemprop="text">
+    {{ if .Params.abstract_short }}
+    {{ .Params.abstract_short | markdownify }}
     {{ else }}
-
-    <div class="col-md-12">
-
+    {{ .Params.abstract | markdownify}}
     {{ end }}
+  </div>
 
-      <h3 class="article-title" itemprop="name">
-        <a href="{{ .Permalink }}" itemprop="url">{{ .Title }}</a>
-      </h3>
-
-      <div class="pub-abstract" itemprop="text">
-        {{ if .Params.abstract_short }}
-        {{ .Params.abstract_short | markdownify }}
-        {{ else }}
-        {{ .Params.abstract | markdownify}}
-        {{ end }}
-      </div>
-
-      <div class="pub-authors" itemprop="author">
-        {{ with .Params.authors }}
-        {{ delimit . ", " | markdownify }}
-        {{ end }}
-      </div>
-
-      <div class="pub-publication">
-        {{ if .Params.publication_short }}
-        {{- .Params.publication_short | markdownify -}},
-        {{ else if .Params.publication }}
-        {{- .Params.publication | markdownify -}},
-        {{- end -}}
-        {{- .Date.Format "2006" -}}
-      </div>
+  <div class="pub-authors" itemprop="author">
+    {{ with .Params.authors }}
+    {{ delimit . ", " | markdownify }}
+    {{ end }}
+  </div>
 
-      <div class="pub-links">
-        {{ partial "publication_links" (dict "content" . "is_list" 1) }}
-      </div>
+  <div class="pub-publication">
+    {{ if .Params.publication_short }}
+    {{- .Params.publication_short | markdownify -}},
+    {{ else if .Params.publication }}
+    {{- .Params.publication | markdownify -}},
+    {{- end -}}
+    {{- .Date.Format "2006" -}}
+  </div>
 
-    </div>
+  <div class="pub-links">
+    {{ partial "publication_links" (dict "content" . "is_list" 1) }}
   </div>
+
 </div>

layouts/partials/talk_li_detailed.html

@@ -1,66 +1,51 @@
-<div class="pub-list-item" itemscope itemtype="http://schema.org/Event">
-  <div class="row">
-
-    {{ if .Params.image_preview }}
-
-    <div class="col-md-12">
-      <a href="{{ .Permalink }}">
-        <img src="{{ "/img/" | relURL }}{{ .Params.image_preview }}" class="pub-banner"
-        itemprop="image">
-      </a>
-    </div>
-    <div class="col-md-12">
-
-    {{ else if .Params.header.image}}
+<div class="card-simple" itemscope itemtype="http://schema.org/Event">
+
+  {{ if .Params.image_preview }}
+    {{ .Scratch.Set "image" .Params.image_preview }}
+  {{ else if .Params.header.image }}
+    {{ .Scratch.Set "image" .Params.header.image }}
+  {{ end }}
+  {{ if .Scratch.Get "image" }}
+  <div>
+    <a href="{{ .Permalink }}">
+      <img src="{{ "/img/" | relURL }}{{ .Scratch.Get "image" }}" class="pub-banner" itemprop="image">
+    </a>
+  </div>
+  {{ end }}
+
+  <h3 class="article-title" itemprop="name">
+    <a href="{{ .Permalink }}" itemprop="url">{{ .Title }}</a>
+  </h3>
+
+  <div class="talk-metadata" itemprop="startDate">
+    {{ $date := .Params.time_start | default .Date }}
+    {{ (time $date).Format $.Site.Params.date_format }}
+    {{ if $.Site.Params.talks.time }}
+      {{ (time $date).Format ($.Site.Params.time_format | default "3:04 PM") }}
+      {{ with .Params.time_end }}
+        &mdash; {{ (time .).Format ($.Site.Params.time_format | default "3:04 PM") }}
+      {{ end }}
+    {{ end }}
+  </div>
 
-    <div class="col-md-12">
-      <a href="{{ .Permalink }}">
-        <img src="{{ "/img/" | relURL }}{{ .Params.header.image }}" class="pub-banner" itemprop="image">
-      </a>
-    </div>
-    <div class="col-md-12">
+  <div class="talk-metadata">
+    {{ if .Params.event }}
+    {{ .Params.event | markdownify }}
+    {{ else if .Params.event_short }}
+    {{ .Params.event_short | markdownify }}
+    {{ end }}
+  </div>
 
+  <div class="talk-abstract" itemprop="text">
+    {{ if .Params.abstract_short }}
+    {{ .Params.abstract_short | markdownify }}
     {{ else }}
-
-    <div class="col-md-12">
-
+    {{ .Params.abstract | markdownify }}
     {{ end }}
+  </div>
 
-      <h3 class="article-title" itemprop="name">
-        <a href="{{ .Permalink }}" itemprop="url">{{ .Title }}</a>
-      </h3>
-
-      <div class="talk-metadata" itemprop="startDate">
-        {{ $date := .Params.time_start | default .Date }}
-        {{ (time $date).Format $.Site.Params.date_format }}
-        {{ if $.Site.Params.talks.time }}
-          {{ (time $date).Format ($.Site.Params.time_format | default "3:04 PM") }}
-          {{ with .Params.time_end }}
-            &mdash; {{ (time .).Format ($.Site.Params.time_format | default "3:04 PM") }}
-          {{ end }}
-        {{ end }}
-      </div>
-
-      <div class="talk-metadata">
-        {{ if .Params.event }}
-        {{ .Params.event | markdownify }}
-        {{ else if .Params.event_short }}
-        {{ .Params.event_short | markdownify }}
-        {{ end }}
-      </div>
-
-      <div class="talk-abstract" itemprop="text">
-        {{ if .Params.abstract_short }}
-        {{ .Params.abstract_short | markdownify }}
-        {{ else }}
-        {{ .Params.abstract | markdownify }}
-        {{ end }}
-      </div>
-
-      <div class="talk-links">
-        {{ partial "talk_links" (dict "content" . "is_list" 1) }}
-      </div>
-
-    </div>
+  <div class="talk-links">
+    {{ partial "talk_links" (dict "content" . "is_list" 1) }}
   </div>
+
 </div>