Add back drop shadows and rounded corners

This commit is contained in:
Joseph Hutchinson
2018-03-26 14:03:19 -04:00
parent 833d412dc7
commit 3e151b1311
2 changed files with 6 additions and 2 deletions

View File

@@ -1,4 +1,4 @@
<a ontouchstart="this.classList.add('card-link-wrapper-active');" ontouchend="this.classList.remove('card-link-wrapper-active');" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" > <a ontouchstart="cardPressed()" ontouchend="cardReleased()" href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" >
{{ if isset .Params "featuredimage" }} {{ if isset .Params "featuredimage" }}
<img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img"> <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
{{ end }} {{ end }}

View File

@@ -67,15 +67,19 @@ img {
color: rgb(52, 58, 63); color: rgb(52, 58, 63);
display: block; display: block;
background-color: white; background-color: white;
transition: transform 0.3s; border-radius: 0.5em;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 1em 1.6em 0 rgba(0, 0, 0, 0.06);
} }
.card-link-wrapper-active { .card-link-wrapper-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.8em 1.4em 0 rgba(0, 0, 0, 0.08);
} }
.card { .card {
padding: 1em; padding: 1em;
} }
.card-img { .card-img {
border-radius: 0.4em 0.4em 0 0;
margin-bottom: -1.2em; margin-bottom: -1.2em;
max-height: 10em; max-height: 10em;
object-fit: cover; object-fit: cover;