add brand, fix typo, clickable cards

This commit is contained in:
André Weller
2019-05-14 20:27:33 +02:00
parent 52ff516442
commit db89ce6d89
4 changed files with 48 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
<template lang="pug">
.card
.card(@click="goToSite(url)")
.card--title
p {{title}}
.card--body
@@ -9,7 +9,12 @@
<script>
export default {
props: ['title', 'desc', 'url']
props: ['title', 'desc', 'url'],
methods: {
goToSite(url){
location.href = url
}
}
}
</script>
@@ -19,6 +24,17 @@ export default {
background: #2D3748;
border-radius: .3rem;
padding: 1rem;
transition: .2s ease-in-out;
display:flex;
flex-direction: column;
&:hover {
transform: scale(1.002);
background: #008190;
cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06);
}
&--title {
p{
@@ -38,6 +54,7 @@ export default {
a {
font-size: 12px;
line-height: 1;
align-self: bottom;
}
}
}

View File

@@ -1,15 +1,38 @@
<template lang="pug">
nuxt-link(to="/").logo
.logo(@click="goToHome")
img(src="~/assets/logo.svg")
p webgems.io
</template>
<script>
export default {
methods: {
goToHome(){
this.$router.push("/")
}
}
}
</script>
<style lang="scss" scoped>
.logo {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
&:hover {
cursor: pointer;
}
img {
max-width:30px;
}
p {
margin: 0 0 0 .3rem;
font-size: 12px;
}
}
img {
padding: .2rem;
}
</style>

View File

@@ -7,7 +7,7 @@ export default {
** Headers of the page
*/
head: {
title: '💎webgems',
title: 'webgems',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },

View File

@@ -2,8 +2,7 @@
div
main
h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
span.text-teal webgems 💎&nbsp;
| ?
span 💎 webgems ?
p As of now, it's a curated list of resources for developers and designers. If you want to suggest a resource, go ahead and contact me&nbsp;
a(href="https://twitter.com/lostdesign") @lostdesign&nbsp;
| or lost#0001 on discord