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

42
src/views/Abilities.vue
View file

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