Style cards

This commit is contained in:
Joseph Hutchinson
2018-04-16 12:44:13 -04:00
parent 584ad7c2ab
commit 1fc1a7c256
3 changed files with 36 additions and 16 deletions

View File

@@ -8,7 +8,10 @@
<article class="card-body">
<h2 class="card-title">{{ .Title }}</h2>
<p class="card-text">{{ .Description }}</p>
<p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<!-- {{ if .Truncated }}<a class="moretag" href="{{ .Permalink }}">Continue reading</a>{{ end }} -->
<div class="card-subtext">
<p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p style="margin: 0 1em 0 0;">|</p>
<p style="margin: 0 1em 0 0;">#Category</p>
</div>
</article>
</a>

View File

@@ -3,16 +3,16 @@
{{ partial "head.html" . }}
<body class="list-body">
{{ partial "nav-bar.html" . }}
<header class="list-header side-gutter">
<h1 class="list-header-title">Sensors + Smarts</h1>
<h2 class="list-header-subtext">There is so much actionable data that goes to waste. Let's put your data to work.</h2>
</header>
<main class="card-columns side-gutter">
<header class="list-header">
<h1 class="list-header-title">Sensors + Smarts</h1>
<h2 class="list-header-subtext">There is so much actionable data that goes to waste. Let's put your data to work.</h2>
</header>
{{ range .Paginator.Pages }}
{{ .Render "li" }}
{{ end }}
</main>
<div class="pagination-nav">
<div class="pagination-nav side-gutter">
<a href="#">&laquo; Older Posts</a>
<div>Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</div>
<a href="#">Newer Posts &raquo;</a>

View File

@@ -1,3 +1,11 @@
/* colors :
blue - 1A3E6E
light blue - 025A6E
creme - F0D493
light red - F2594D
red - BF2A2A */
body {
font-family: 'LatoLatinWeb', Avenir, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #3A3B3C;
@@ -75,7 +83,7 @@ img {
width: 100%;
}
.list-header {
margin: 2.5em 0;
margin: 2em 0;
text-align: center;
}
.list-header-title {
@@ -122,23 +130,32 @@ img {
object-fit: cover;
}
.card-title {
font-size: 1.25em;
margin: 0.5em 0 0 0;
line-height: 1.2;
/* text-align: center; */
font-family: 'LatoLatinWebSemibold';
font-weight: normal
}
.card-date {
margin: 0.7em 0 0 0;
display: block;
/* text-align: center; */
.card-subtext {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin: 2em 0 0 0em;
color: #7A7B7C;
font-size: 0.7em;
}
.card-text {
font-size: 0.95em;
line-height: 1.5;
margin: 1em 0;
}
.pagination-nav {
margin: 2em 0;
margin: 3em 0;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
max-width: 42em;
}
.side-gutter {
padding-left: 0.7em !important;
@@ -209,7 +226,7 @@ footer {
font-size: 1.125rem;
}
.list-header {
margin: 5em 0;
margin: 3em 0;
}
.card-columns {
grid-gap: 2em;
@@ -229,7 +246,7 @@ footer {
width: 15em;
}
.card-body {
padding: 1em 1.5em;
padding: 1em 1.3em;
}
}