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

Make cards display horizontally on desktop

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-13 14:41:38 -04:00
parent fc6aba20f1
commit d0243c2c33
3 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
layouts/_default/li.html
View File

@@ -1,8 +1,11 @@
<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" > <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)"
onmouseover="cardPressed.call(this)" onmouseout="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" title="Link to {{ .Title }}" >
{{ if isset .Params "featuredimage" }} {{ if isset .Params "featuredimage" }}
<div>
<img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img"> <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
</div>
{{ end }} {{ end }}
<article class="card"> <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> <p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>

32
static/css/style.css
View File

@@ -98,9 +98,11 @@ img {
grid-gap: 1.2em; grid-gap: 1.2em;
justify-content: center; justify-content: center;
} }
.card-link-wrapper { .card {
color: rgb(52, 58, 63); color: rgb(52, 58, 63);
display: block; display: flex;
flex-direction: column;
align-items: stretch;
background-color: white; background-color: white;
border-radius: 0.2em; border-radius: 0.2em;
text-decoration: none; text-decoration: none;
@@ -108,11 +110,11 @@ img {
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 0.2em 0.7em 0 rgba(0, 0, 0, 0.1), 0 0 0.2em 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2em 0.7em 0 rgba(0, 0, 0, 0.1), 0 0 0.2em 0 rgba(0, 0, 0, 0.05);
} }
.card-link-wrapper-active { .card-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.15);
} }
.card { .card-body {
padding: 1em; padding: 1em;
} }
.card-img { .card-img {
@@ -200,10 +202,21 @@ footer {
font-size: 1.125rem; font-size: 1.125rem;
} }
.card-container{ .card-container{
max-width: 700px; max-width: 42em;
} }
.card-columns { .card-columns {
grid-template-columns: repeat(2, 1fr); grid-gap: 2em;
}
.card {
flex-direction: row;
align-items: stretch;
}
.card-img {
border-radius: 0.2em 0 0 0.2em;
margin: 0 0.5em 0 0;
max-height: unset;
height: 100%;
width: 15em;
} }
} }
@@ -212,11 +225,14 @@ footer {
.post-title { .post-title {
font-size: 2.5em; font-size: 2.5em;
} }
.card-active {
transform: scale(0.97);
}
.card-container{ .card-container{
max-width: 900px;
} }
.card-columns { .card-columns {
grid-template-columns: repeat(2, 1fr);
} }
} }

4
static/js/core.js
View File

@@ -1,8 +1,8 @@
function cardPressed() { function cardPressed() {
this.classList.add('card-link-wrapper-active'); this.classList.add('card-active');
} }
function cardReleased() { function cardReleased() {
this.classList.remove('card-link-wrapper-active'); this.classList.remove('card-active');
} }