Skip to content

Instantly share code, notes, and snippets.

@MulverineX
Created February 16, 2019 22:10
Show Gist options
  • Save MulverineX/b991e6f01a1c93cedbc7b197277c721e to your computer and use it in GitHub Desktop.
Save MulverineX/b991e6f01a1c93cedbc7b197277c721e to your computer and use it in GitHub Desktop.
Store Page
<template>
<div class="main">
<title>PreMiD - Store</title>
<div class="listing">
<div class="content">
<div class="logo">
<img src="https://svgur.com/i/BEw.svg">
</div>
<h2>
Twitch
<span>
-
<a>Timeraa</a>
</span>
</h2>
<p
class="desc"
>We are a global community of millions who come together each day to create their own entertainment.</p>
</div>
<div class="buttons">
<div class="container">
<div class="left">
<button class="service">
<span class="icon">(a)</span> Service
</button>
</div>
<div class="right">
<button class="add">
<span class="icon">+</span> Add to PreMiD
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "store"
};
</script>
<style lang="less" scoped>
@import "./../stylesheets/colors.less";
.main {
padding: 1rem;
}
.listing {
width: 16rem;
height: 24rem;
background: @background-secondary;
border-radius: 0.5rem;
padding: 0.5rem;
transition: box-shadow 120ms;
color: @white;
display: table-cell;
&:hover {
box-shadow: 0.25rem 0.25rem rgba(0, 0, 0, 0.09);
transition: box-shadow 120ms;
}
.content {
padding: 0.5rem;
.logo {
width: 15rem;
height: 15rem;
background: linear-gradient(135deg, #6441a5 0%, transparent 100%);
border-radius: 0.4rem;
img {
width: 6rem;
height: 6rem;
top: 30%;
left: 30%;
position: relative;
filter: drop-shadow(0rem 0rem 0.7rem rgba(0, 0, 0, 0.5));
}
}
h2 {
font-size: 1.3rem;
line-height: 0.2rem;
span {
color: @white-2;
font-size: 1.1rem;
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
}
}
p {
color: @white-2;
font-weight: bold;
font-size: 0.8rem;
}
}
.buttons {
display: table-footer-group;
width: 100%;
margin: 0 auto;
position: relative;
.container {
display: grid;
grid-template-areas: "left right";
.left {
grid-area: left;
justify-self: left;
}
.right {
grid-area: right;
justify-self: right;
}
}
button {
border: none;
border-radius: 0.2rem;
padding: 0.4rem;
font-weight: bold;
font-family: Roboto;
letter-spacing: 0.06rem;
&.service {
background: @background-primary;
color: @white-2;
}
&.add {
background: @accent-primary;
color: @white;
}
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment