mlpcardgame/src/views/Home.vue

123 lines
3.1 KiB
Vue
Raw Normal View History

2019-09-02 07:29:49 +00:00
<template>
2019-09-16 20:31:05 +00:00
<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>
2019-09-02 07:29:49 +00:00
</template>
2019-09-16 20:31:05 +00:00
<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>
2019-09-02 07:29:49 +00:00
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
2019-09-02 16:02:40 +00:00
components: {}
2019-09-02 07:29:49 +00:00
})
2019-09-16 20:31:05 +00:00
export default class Home extends Vue {
private projectName: string = "MLPCARDGAME";
}
2019-09-02 07:29:49 +00:00
</script>