mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 18:15:31 +00:00
Apply card style to detailed list view and refactor
This commit is contained in:
George Cushen committed
1 parent
9e8cb50889
commit
b02f5eceda
4 files changed
+138
-146
No files matched your search
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,62 +1,47 @@
|
||||
<div class="pub-list-item" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
<div class="row">
|
||||
<div class="pub-list-item card-simple" itemscope itemtype="http://schema.org/CreativeWork">
|
||||
|
||||
{{ 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="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">
|
||||
|
||||
{{ else }}
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
{{ end }}
|
||||
|
||||
<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-links">
|
||||
{{ partial "publication_links" (dict "content" . "is_list" 1) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ 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="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-links">
|
||||
{{ partial "publication_links" (dict "content" . "is_list" 1) }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,66 +1,51 @@
|
||||
<div class="pub-list-item" itemscope itemtype="http://schema.org/Event">
|
||||
<div class="row">
|
||||
<div class="card-simple" itemscope itemtype="http://schema.org/Event">
|
||||
|
||||
{{ 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="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">
|
||||
|
||||
{{ else }}
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
{{ 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 }}
|
||||
— {{ (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>
|
||||
{{ 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 }}
|
||||
— {{ (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>
|
||||
Reference in new issue
Block a user