misskey/src/web/app/desktop/views/pages/welcome.vue

143 lines
2.5 KiB
Vue
Raw Normal View History

2018-02-10 06:56:33 +01:00
<template>
2018-02-10 11:57:37 +01:00
<div class="mk-welcome">
2018-02-10 06:56:33 +01:00
<main>
<div>
2018-02-10 07:06:11 +01:00
<h1>Share<br>Everything!</h1>
2018-02-10 06:56:33 +01:00
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったこと共有したいことをシンプルに書き残せますタイムラインを見れば皆の反応や皆がどう思っているのかもすぐにわかります<a>詳しく...</a></p>
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
</div>
<div>
</div>
</main>
<mk-forkit/>
<footer>
<div>
<mk-nav-links/>
<p class="c">{ _COPYRIGHT_ }</p>
</div>
</footer>
2018-02-10 11:57:37 +01:00
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">新規登録</header>
<mk-signup :class="$style.signupForm"></mk-signup>
2018-02-10 08:22:14 +01:00
</modal>
2018-02-10 06:56:33 +01:00
</div>
</template>
2018-02-10 08:22:14 +01:00
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
methods: {
signup() {
this.$modal.show('signup');
}
2018-02-10 06:56:33 +01:00
}
2018-02-10 08:22:14 +01:00
});
</script>
<style>
#wait {
right: auto;
left: 15px;
}
2018-02-10 06:56:33 +01:00
</style>
<style lang="stylus" scoped>
2018-02-10 11:57:37 +01:00
.mk-welcome
2018-02-10 08:22:14 +01:00
display flex
flex-direction column
flex 1
background #eee
$width = 1000px
> main
2018-02-10 06:56:33 +01:00
display flex
flex 1
2018-02-10 08:22:14 +01:00
max-width $width
margin 0 auto
padding 80px 0 0 0
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> div:first-child
margin 0 auto 0 0
width calc(100% - 500px)
color #777
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> h1
margin 0
font-weight normal
font-variant small-caps
letter-spacing 12px
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> p
margin 0.5em 0
line-height 2em
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
button
padding 8px 16px
font-size inherit
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
.signup
color $theme-color
border solid 2px $theme-color
border-radius 4px
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
&:focus
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
&:hover
color $theme-color-foreground
background $theme-color
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
.signin
&:focus
color #444
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
&:hover
color #444
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
&:active
color #333
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> div:last-child
margin 0 0 0 auto
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> footer
background #fff
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
*
color #fff !important
text-shadow 0 0 8px #000
font-weight bold
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> div
max-width $width
margin 0 auto
padding 16px 0
text-align center
border-top solid 1px #fff
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> .c
margin 0
line-height 64px
font-size 10px
2018-02-10 06:56:33 +01:00
</style>
2018-02-10 11:57:37 +01:00
<style lang="stylus" module>
.signupForm
padding 24px 48px 48px 48px
.signupFormHeader
padding 48px 0 12px 0
margin: 0 48px
font-size 1.5em
color #777
border-bottom solid 1px #eee
</style>