refactor styles code for home, gamemodes, for title in twoline

This commit is contained in:
Kostya
2023-11-23 20:30:10 +03:00
parent d19a511fb8
commit 11d6706632
2 changed files with 14 additions and 20 deletions

View File

@@ -142,13 +142,6 @@
height: 100%; height: 100%;
} }
.gamemode__twolines {
display: flex;
align-items: flex-start;
height: 100%;
width: 100%;
}
.gamemode__firstline { .gamemode__firstline {
margin: 0 0 18px 35px; margin: 0 0 18px 35px;
} }
@@ -190,6 +183,13 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.gamemode__twolines {
display: flex;
align-items: flex-start;
height: 100%;
width: 100%;
}
.gamemode__twoline--first__element { .gamemode__twoline--first__element {
width: 100%; width: 100%;
margin: 18px 36px 0 35px; margin: 18px 36px 0 35px;
@@ -203,8 +203,7 @@
text-align: center; text-align: center;
} }
.gamemode__twoline--first__element .linecontent-3 h3 { .title-twoline {
padding-left: 5%;
text-align: center; text-align: center;
color: #fff; color: #fff;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -214,6 +213,10 @@
text-transform: uppercase; text-transform: uppercase;
} }
.gamemode__twoline--first__element .linecontent-3 h3 {
padding-left: 5%;
}
.gamemode__twoline--first__element .container { .gamemode__twoline--first__element .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -232,15 +235,6 @@
min-height: 180px; min-height: 180px;
} }
.gamemode__twoline--two__element .linecontent-4 h3 {
color: #FFF;
text-transform: uppercase;
text-align: center;
text-shadow: 6px 12px 9px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 87px;
}
.gamemode__twoline--two__element .container { .gamemode__twoline--two__element .container {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -66,7 +66,7 @@
:key="mode" :key="mode"
> >
<div :class="'linecontent-' + mode.id"> <div :class="'linecontent-' + mode.id">
<h3>{{ mode.title }}</h3> <h3 class="title-twoline">{{ mode.title }}</h3>
</div> </div>
<div class="container"> <div class="container">
<a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a> <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
@@ -82,7 +82,7 @@
:key="mode.id" :key="mode.id"
> >
<div :class="'linecontent-' + mode.id"> <div :class="'linecontent-' + mode.id">
<h3>{{ mode.title }}</h3> <h3 class="title-twoline">{{ mode.title }}</h3>
</div> </div>
<div class="container"> <div class="container">
<a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>