Add merriweather font for deck title
This commit is contained in:
parent
1751df6a91
commit
89122a915e
3 changed files with 50 additions and 26 deletions
|
@ -169,3 +169,6 @@ $input-background-color: $black-ter;
|
||||||
$input-border-color: $grey-darker;
|
$input-border-color: $grey-darker;
|
||||||
$input-focus-border-color: $turquoise;
|
$input-focus-border-color: $turquoise;
|
||||||
$input-hover-border-color: scale-color($turquoise, $lightness: -30%);
|
$input-hover-border-color: scale-color($turquoise, $lightness: -30%);
|
||||||
|
|
||||||
|
$fantasy: 'Merriweather';
|
||||||
|
$primary-text: scale-color($primary, $saturation: -50%, $lightness: 20%);
|
|
@ -4,6 +4,7 @@
|
||||||
@import "~bulma/sass/utilities/derived-variables";
|
@import "~bulma/sass/utilities/derived-variables";
|
||||||
@import "~bulma";
|
@import "~bulma";
|
||||||
@import "~buefy/src/scss/buefy";
|
@import "~buefy/src/scss/buefy";
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,400i,700&display=swap');
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scrollbar-color: #404245 #2f3132;
|
scrollbar-color: #404245 #2f3132;
|
||||||
|
@ -12,5 +13,5 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: white;
|
color: $white;
|
||||||
}
|
}
|
|
@ -55,12 +55,17 @@
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<section class="decklist">
|
<section class="decklist">
|
||||||
|
<header>
|
||||||
|
<h1>{{ deckname }}</h1>
|
||||||
|
</header>
|
||||||
<DeckList :cards="decklist" />
|
<DeckList :cards="decklist" />
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/_variables";
|
||||||
|
|
||||||
.deckbuilder {
|
.deckbuilder {
|
||||||
background: url("../assets/images/backgrounds/deckbuilderbg.webp") center;
|
background: url("../assets/images/backgrounds/deckbuilderbg.webp") center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -68,13 +73,15 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 3fr minmax(250px, 1fr);
|
grid-template-columns: 3fr minmax(250px, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
.cardlist {
|
.cardlist {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-template-rows: 110px 1fr;
|
grid-template-rows: 110px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
@ -86,16 +93,25 @@
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards {
|
.cards {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 5% 1fr 5%;
|
grid-template-columns: 5% 1fr 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decklist {
|
||||||
|
header {
|
||||||
|
padding: 10px;
|
||||||
|
padding-top: 15px;
|
||||||
|
color: $primary-text;
|
||||||
|
font-family: $fantasy;
|
||||||
|
h1 {
|
||||||
|
font-size: 20pt;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.decklist {
|
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorfilter,
|
.colorfilter,
|
||||||
|
@ -313,6 +329,9 @@ export default class DeckBuilder extends Vue {
|
||||||
private elementFilters!: string[];
|
private elementFilters!: string[];
|
||||||
private typeFilters!: string[];
|
private typeFilters!: string[];
|
||||||
|
|
||||||
|
// Decklist options
|
||||||
|
private deckname!: string;
|
||||||
|
|
||||||
// Navigation
|
// Navigation
|
||||||
private offset!: number;
|
private offset!: number;
|
||||||
|
|
||||||
|
@ -330,7 +349,8 @@ export default class DeckBuilder extends Vue {
|
||||||
typeFilters: [],
|
typeFilters: [],
|
||||||
colors: colorNames,
|
colors: colorNames,
|
||||||
sets: allSets.slice(0, -1),
|
sets: allSets.slice(0, -1),
|
||||||
types: typeNames
|
types: typeNames,
|
||||||
|
deckname: "Unnamed deck"
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue