heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Style cards

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
layouts/_default/li.html
View File

@@ -8,7 +8,10 @@
<article class="card-body"> <article class="card-body">
<h2 class="card-title">{{ .Title }}</h2> <h2 class="card-title">{{ .Title }}</h2>
<p class="card-text">{{ .Description }}</p> <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> <div class="card-subtext">
<!-- {{ if .Truncated }}<a class="moretag" href="{{ .Permalink }}">Continue reading</a>{{ end }} --> <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> </article>
</a> </a>

6
layouts/_default/list.html
View File

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

35
static/css/style.css
View File

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