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

Try javascript to make cards shrink on press

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-03-26 13:45:28 -04:00
parent d9caae4bb0
commit b6fa0048da
3 changed files with 13 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/li.html
View File

@@ -1,4 +1,4 @@
<a href="{{ .Permalink }}" class="card-link-wrapper" rel="bookmark" title="Link to {{ .Title }}" > <a onmousedown="this.classList.add('card-link-wrapper-active');" onmouseup="this.classList.remove('card-link-wrapper-active');" onmouseout="this.classList.remove('card-link-wrapper-active');" 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 }}

31
static/css/style.css
View File

@@ -60,26 +60,22 @@ img {
.card-columns { .card-columns {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 2em; grid-gap: 1em;
justify-content: center; justify-content: center;
} }
.card-link-wrapper { .card-link-wrapper {
color: #3A3B3C; color: rgb(52, 58, 63);
display: block; display: block;
background-color: white; background-color: white;
border-radius: 0.4em; transition: transform 0.3s;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 1em 1.6em 0 rgba(0, 0, 0, 0.06);
} }
.card-link-wrapper:hover, .card-link-wrapper:active { .card-link-wrapper-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.8em 1.4em 0px 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;
@@ -149,13 +145,8 @@ tr:nth-child(even) td {
background: #f3f3f3; background: #f3f3f3;
} }
/* Small devices (landscape phones, 576px and up) */ /* Medium devices (tablets, ~641px and up) */
@media (min-width: 576px) { @media only screen and (min-width: 40.063em) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
body { body {
font-size: 1.125rem; font-size: 1.125rem;
} }
@@ -167,8 +158,8 @@ tr:nth-child(even) td {
} }
} }
/* Large devices (desktops, 992px and up) */ /* Large devices (desktops, ~1025px and up) */
@media (min-width: 992px) { @media only screen and (min-width: 64.063em) {
.post-title { .post-title {
font-size: 2.5em; font-size: 2.5em;
} }
@@ -176,11 +167,11 @@ tr:nth-child(even) td {
max-width: 900px; max-width: 900px;
} }
.card-columns { .card-columns {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
/* Extra large devices (large desktops, 1200px and up) */ /* Extra large devices (large desktops, ~1441px and up) */
@media (min-width: 1200px) { @media only screen and (min-width: 90.063em) {
} }

2
static/css/xcode.css
View File

@@ -4,7 +4,7 @@ XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
.hljs { .hljs {
display: block; display: block;
overflow-x: scroll; overflow-x: auto;
padding: 0.5em; padding: 0.5em;
background: #f3f3f3; background: #f3f3f3;
color: black; color: black;