Style cards
This commit is contained in:
@@ -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>
|
||||
@@ -3,16 +3,16 @@
|
||||
{{ partial "head.html" . }}
|
||||
<body class="list-body">
|
||||
{{ partial "nav-bar.html" . }}
|
||||
<header class="list-header side-gutter">
|
||||
<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>
|
||||
<main class="card-columns side-gutter">
|
||||
{{ range .Paginator.Pages }}
|
||||
{{ .Render "li" }}
|
||||
{{ end }}
|
||||
</main>
|
||||
<div class="pagination-nav">
|
||||
<div class="pagination-nav side-gutter">
|
||||
<a href="#">« Older Posts</a>
|
||||
<div>Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</div>
|
||||
<a href="#">Newer Posts »</a>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user