SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use proper BEM conventions for attacks

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-06 18:56:39 +01:00
parent fc94921554
commit 19ea11c7f2
1 changed files with 40 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/views/Abilities.vue
View file

@ -10,14 +10,14 @@
<h3>Attacks</h3> <h3>Attacks</h3>
<div class="attacks"> <div class="attacks">
<div class="row"> <div class="attack">
<div class="col"> <div class="attack__illustration">
<img <img
src="@/assets/refs/attacks/sebin-fire_breath-hires.png" src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
alt="Sebin Fire Breath" alt="Sebin Fire Breath"
/> />
</div> </div>
<div class="col"> <div class="attack__description">
<p><strong>Fire Breath</strong></p> <p><strong>Fire Breath</strong></p>
<p> <p>
Like most fire dragons, Sebin can breathe fire. In order to do this, Like most fire dragons, Sebin can breathe fire. In order to do this,
@ -30,14 +30,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="attack">
<div class="col"> <div class="attack__illustration">
<img <img
src="@/assets/refs/attacks/sebin-flame_toss-hires.png" src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
alt="Sebin Flame Toss" alt="Sebin Flame Toss"
/> />
</div> </div>
<div class="col"> <div class="attack__description">
<p><strong>Flame Toss</strong></p> <p><strong>Flame Toss</strong></p>
<p> <p>
By spitting fire into his hands, Sebin can form it into a ball and By spitting fire into his hands, Sebin can form it into a ball and
@ -49,14 +49,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="attack">
<div class="col"> <div class="attack__illustration">
<img <img
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png" src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
alt="Sebin Kindled Fist" alt="Sebin Kindled Fist"
/> />
</div> </div>
<div class="col"> <div class="attack__description">
<p><strong>Kindled Fist</strong></p> <p><strong>Kindled Fist</strong></p>
<p> <p>
Apart from throwing projectiles, Sebin can also use the fireballs to Apart from throwing projectiles, Sebin can also use the fireballs to
@ -67,14 +67,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="attack">
<div class="col"> <div class="attack__illustration">
<img <img
src="@/assets/refs/attacks/sebin-burning_twister-hires.png" src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
alt="Sebin Burning Twister" alt="Sebin Burning Twister"
/> />
</div> </div>
<div class="col"> <div class="attack__description">
<p><strong>Burning Twister</strong></p> <p><strong>Burning Twister</strong></p>
<p> <p>
A technique used in aerial combat, Sebin uses his fire breath to A technique used in aerial combat, Sebin uses his fire breath to
@ -84,6 +84,11 @@
</div> </div>
</div> </div>
</div> </div>
<p>
Image Credit:
<a href="https://twitter.com/GafreitasArt">Gabriel Freitas</a>
</p>
</prose> </prose>
</template> </template>
@ -114,7 +119,7 @@ export default {
max-width: 70em; max-width: 70em;
} }
.row { .attack {
flex: 0 1 100%; flex: 0 1 100%;
display: flex; display: flex;
@ -129,7 +134,8 @@ export default {
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.col { .attack__illustration,
.attack__description {
&:first-child { &:first-child {
order: 1; order: 1;
} }
@ -144,35 +150,37 @@ export default {
&:nth-child(even) { &:nth-child(even) {
text-align: left; text-align: left;
.col { .attack__illustration,
.attack__description {
&:first-child { &:first-child {
order: 0; order: 0;
} }
} }
} }
} }
}
.col { &__illustration,
flex: 1 1 auto; &__description {
flex: 1 1 auto;
&:first-child { &:first-child {
text-align: center; text-align: center;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
}
@include mq-desktop {
flex: 0 0 15em;
height: 15em;
}
} }
@include mq-desktop { &:last-child {
flex: 0 0 15em; @include mq-desktop {
height: 15em; padding: 0 1rem;
} }
}
&:last-child {
@include mq-desktop {
padding: 0 1rem;
} }
} }
} }