natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2021-03-06 12:18:46 +09:00
parent fc98552fdc
commit 4a9e9b4eea
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/pages/welcome.entrance.a.vue
View File

@ -3,7 +3,8 @@
<div class="top"> <div class="top">
<MkFeaturedPhotos class="bg"/> <MkFeaturedPhotos class="bg"/>
<XTimeline class="tl"/> <XTimeline class="tl"/>
<div class="shape"></div> <div class="shape1"></div>
<div class="shape2"></div>
<img src="/assets/misskey.svg" class="misskey"/> <img src="/assets/misskey.svg" class="misskey"/>
<div class="emojis"> <div class="emojis">
<MkEmoji :normal="true" :no-style="true" emoji="👍"/> <MkEmoji :normal="true" :no-style="true" emoji="👍"/>
@ -18,7 +19,9 @@
</div> </div>
<div class="fg"> <div class="fg">
<h1> <h1>
<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> <!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
<!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
<span class="text">{{ instanceName }}</span>
</h1> </h1>
<div class="about"> <div class="about">
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div> <div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
@ -154,8 +157,8 @@ export default defineComponent({
> .bg { > .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; right: 0;
width: 100%; width: 80%; // 100%からshapeの幅を引いている
height: 100%; height: 100%;
} }
@ -176,14 +179,24 @@ export default defineComponent({
} }
} }
> .shape { > .shape1 {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
clip-path: polygon(0% 0%, 50% 0%, 15% 100%, 0% 100%); clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
}
> .shape2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--accent);
clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
opacity: 0.5;
} }
> .misskey { > .misskey {