settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

refactoring

Browse Source
This commit is contained in:
Settel 2021-07-30 22:00:04 +02:00
parent 6eb0f6c6bf
commit 8bee534e60
2 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/components/TitleBox.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="titlebox">
<div class="titlebox__titlebox">
<div class="titlebox__titleborderbox2" />
<div class="titlebox__titleborderbox3" />
<div class="titlebox__titleborderbox1">
<h1 class="titlebox__title">
Know Your Teammates!
</h1>
</div>
</div>
</div>
</template>
<style lang="scss">
.titlebox {
&__titlebox {
position: relative;
margin: 120px 0;
display: flex;
justify-content: center;
}
&__titleborderbox1,
&__titleborderbox2,
&__titleborderbox3 {
border: 4px solid #808040;
border-radius: 16px;
background-color: #6040c0;
}
&__titleborderbox1 {
display: flex;
width: 600px;
height: 200px;
justify-content: center;
align-items: center;
z-index: 3;
}
&__titleborderbox2 {
position: absolute;
top: 40px;
width: 720px;
height: 120px;
z-index: 2;
}
&__titleborderbox3 {
position: absolute;
top: 80px;
width: 760px;
height: 40px;
z-index: 1;
}
&__title {
color: #e0e080;
font-size: 64px;
font-family: 'Wendy One';
color: #ffff80;
text-align: center;
}
}
</style>

52
client/src/pages/index.vue
View File

@ -1,14 +1,6 @@
<template>
<div class="startpage">
<div class="startpage__titlebox">
<div class="startpage__titleborderbox2" />
<div class="startpage__titleborderbox3" />
<div class="startpage__titleborderbox1">
<h1 class="startpage__title">
Know Your Teammates!
</h1>
</div>
</div>
<TitleBox />
<div class="startpage__buttonline">
<NuxtLink class="startpage__playbutton" to="/play">
Play!
@ -22,48 +14,6 @@
<style lang="scss">
.startpage {
&__titlebox {
position: relative;
margin: 120px 0;
display: flex;
justify-content: center;
}
&__titleborderbox1,
&__titleborderbox2,
&__titleborderbox3 {
border: 4px solid #808040;
border-radius: 16px;
background-color: #6040c0;
}
&__titleborderbox1 {
display: flex;
width: 600px;
height: 200px;
justify-content: center;
align-items: center;
z-index: 3;
}
&__titleborderbox2 {
position: absolute;
top: 40px;
width: 720px;
height: 120px;
z-index: 2;
}
&__titleborderbox3 {
position: absolute;
top: 80px;
width: 760px;
height: 40px;
z-index: 1;
}
&__title {
color: #e0e080;
font-size: 64px;
font-family: 'Wendy One';
color: #ffff80;
text-align: center;
}
&__buttonline {
display: flex;
justify-content: center;