fix: prevent quick-facts column styling on mobile

This commit is contained in:
Sebin Nyshkim 2022-01-11 22:57:44 +01:00
parent be83f74658
commit 17ffad3441
2 changed files with 18 additions and 14 deletions

View file

@ -47,7 +47,7 @@
<data-table class="prose" :dataset="getSebinData.colors" /> <data-table class="prose" :dataset="getSebinData.colors" />
<quick-facts> <quick-facts>
<ul> <ul class="col-2">
<li>Bipedal plantigrade</li> <li>Bipedal plantigrade</li>
<li>Red and yellow scales</li> <li>Red and yellow scales</li>
<li>Yellow scales under chin, torso, underside of tail</li> <li>Yellow scales under chin, torso, underside of tail</li>
@ -78,7 +78,7 @@
<h3>Wings</h3> <h3>Wings</h3>
<quick-facts> <quick-facts>
<ul> <ul class="col-2">
<li> <li>
Wingspan {{ wingspan / 100 }} meters ({{ toImperial(this.wingspan) }}) Wingspan {{ wingspan / 100 }} meters ({{ toImperial(this.wingspan) }})
</li> </li>
@ -120,7 +120,7 @@
</ref-figure> </ref-figure>
<quick-facts> <quick-facts>
<ul> <ul class="col-2">
<li>Round pupils, green iris</li> <li>Round pupils, green iris</li>
<li>Yellow spikes for eyebrows</li> <li>Yellow spikes for eyebrows</li>
<li>Yellow spikes on cheeks</li> <li>Yellow spikes on cheeks</li>
@ -151,7 +151,7 @@
<h3>Upper Body</h3> <h3>Upper Body</h3>
<quick-facts> <quick-facts>
<ul> <ul class="col-2">
<li>Strong upper body</li> <li>Strong upper body</li>
<li>Big pecs</li> <li>Big pecs</li>
<li>Defined abs</li> <li>Defined abs</li>
@ -371,7 +371,7 @@
<data-table :dataset="getSebinData.penis" /> <data-table :dataset="getSebinData.penis" />
<quick-facts> <quick-facts>
<ul> <ul class="col-2">
<li>Human-shaped with ridges</li> <li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li> <li>Ring-like sheath surrounding shaft</li>
<li> <li>

View file

@ -139,7 +139,7 @@
<data-table :dataset="getSebinData.preferences" /> <data-table :dataset="getSebinData.preferences" />
<quick-facts> <quick-facts>
<ul class="col-3"> <ul class="col-2">
<li>Supremely horny</li> <li>Supremely horny</li>
<li>Confident, knows what he's got</li> <li>Confident, knows what he's got</li>
<li>Dominant lover, likes it rough but is no brute</li> <li>Dominant lover, likes it rough but is no brute</li>
@ -200,17 +200,21 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/scss/_mixins.scss";
ul { ul {
&.col-2 { @include mq-desktop {
columns: 2 auto; &.col-2 {
} columns: 2 auto;
}
&.col-3 { &.col-3 {
columns: 3 auto; columns: 3 auto;
} }
&.col-4 { &.col-4 {
columns: 4 auto; columns: 4 auto;
}
} }
} }
</style> </style>