gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix cards

Browse Source
This commit is contained in:
André Weller
2019-05-14 21:54:40 +02:00
parent eeaed99e38
commit 8327412a0a
1 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/Card.vue
View File

@@ -1,19 +1,14 @@
<template lang="pug"> <template lang="pug">
.card(@click="goToSite(title,url)") .card
a.card--link(:href="url" :target='title' rel='noreferrer')
p.card--title {{title}} p.card--title {{title}}
.card--body p.card--description {{desc}}
p {{desc}} a(:href="url" :target='title' rel='noreferrer') Visit Website
a(:href="url" :target='title' rel='noreferrer') Visit Website
</template> </template>
<script> <script>
export default { export default {
props: ['title', 'desc', 'url'], props: ['title', 'desc', 'url'],
methods: {
goToSite(title,url){
window.open(url, title)
}
}
} }
</script> </script>
@@ -24,13 +19,24 @@ export default {
border-radius: .3rem; border-radius: .3rem;
padding: 1rem; padding: 1rem;
transition: .2s ease-in-out; transition: .2s ease-in-out;
display: flex;
flex-direction: column;
position: relative;
&--link {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
&:hover { &:hover {
transform: scale(1.002); transform: scale(1.002);
background: #008190; background: #008190;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06); box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06);
} }
&--title { &--title {
@@ -38,23 +44,24 @@ export default {
margin: 0; margin: 0;
} }
&--body { &--description {
display:flex; display: flex;
align-content: stretch;
flex: 1 1 auto;
flex-direction: column; flex-direction: column;
justify-content: space-between; }
p {
p { font-size: 13px;
font-size: 13px; color: white;
color: white; margin: 0 0 .7rem 0;
margin: 0 0 .7rem 0; line-height: 1.3;
line-height: 1.3; letter-spacing: .5px;
letter-spacing: .5px; z-index: 1;
} }
a { a {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
align-self: flex-end; align-self: flex-end;
}
} }
} }
</style> </style>