Add back drop shadows and rounded corners
This commit is contained in:
@@ -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 }}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user