mcg/mlpcardgame
2
0
Fork 0
Code Issues 23 Pull requests 1 Releases Wiki Activity

Add home page #24

Merged
hamcha merged 1 commit from feature/homepage into master 2019-09-16 20:31:05 +00:00
Conversation 0 Commits 1 Files changed 1 +112 -2
1 changed files with 112 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 258e78dac4 - Show all commits

114
src/views/Home.vue
View file

@ -1,12 +1,122 @@
<template>
<section class="home"></section>
<section class="home">
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
{{ projectName }}
</h1>
<h2 class="subtitle">
An unofficial, fan-made MLP:CCG simulator
</h2>
<br />
<b-button
tag="router-link"
to="/lobby"
@click="gotoLobby"
class="is-primary"
inverted
outlined
>Play now!</b-button
>
</div>
</div>
</section>
<section class="section">
<div class="container is-widescreen landing-content">
<div class="columns">
<div class="column">
<section class="has-text-centered">
<div class="title is-4">
<strong>Web-based</strong>
</div>
</section>
<div class="content">
The entire client runs in your browser. No downloads necessary!
</div>
</div>
<div class="column">
<section class="has-text-centered">
<div class="title is-4">
<strong>Constructed</strong>
<span class="behind fantasy"> & </span>
<strong>Limited</strong>
</div>
</section>
<div class="content">
You can build decks or draft them with friends. You can even do
cube drafts!
</div>
</div>
<div class="column">
<section class="has-text-centered">
<div class="title is-4">
<strong>Peer-to-Peer</strong>
</div>
</section>
<div class="content">
The entire client uses WebRTC for P2P communications. No
registration required to play!
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container is-widescreen">
<div class="content has-text-centered">
<p>
<strong>{{ projectName }}</strong> is not affiliated with Hasbro in
any way.<br />
Come look at the
<a href="https://git.fromouter.space/mcg/mlpcardgame"
>source code</a
>
(ISC licensed)!
</p>
</div>
</div>
</footer>
</section>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/_variables.scss";
.home {
user-select: text;
}
.behind {
opacity: 0.8;
}
.fantasy {
font-family: $fantasy;
}
.landing-content .column {
border: 1px solid $grey;
border-radius: 10px;
margin: 10px;
.title {
padding-bottom: 10px;
border-bottom: 1px solid rgba($white, 0.2);
}
.content {
padding: 10px;
font-size: 11pt;
}
}
</style>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {}
})
export default class Home extends Vue {}
export default class Home extends Vue {
private projectName: string = "MLPCARDGAME";
}
</script>