spacemono added

This commit is contained in:
ed barz 2024-02-29 14:19:55 +01:00
parent 019ea85e19
commit e4ad517e33
1 changed files with 34 additions and 20 deletions

View File

@ -1,8 +1,8 @@
Vue.component('fontpicker', { Vue.component('fontpicker', {
template: ` template: `
<span <span
class="style-pick" class="style-pick"
v-on:click="toggle" v-on:click="toggle"
v-bind:class="{ 'tagged': tag.isTrue}"> v-bind:class="{ 'tagged': tag.isTrue}">
<slot></slot> <slot></slot>
</span> </span>
@ -14,41 +14,41 @@ Vue.component('fontpicker', {
this.tag.isTrue = !this.tag.isTrue this.tag.isTrue = !this.tag.isTrue
} }
} }
}) })
Vue.component('fontdemo', { Vue.component('fontdemo', {
template: ` template: `
<div class="single-font" v-show="typeface.tags.some(o => o.isTrue === true) || fresh"> <div class="single-font" v-show="typeface.tags.some(o => o.isTrue === true) || fresh">
<p :style="{ <p :style="{
'font-family': typeface.name, 'font-family': typeface.name,
'font-size' : this.fontSize, 'font-size' : this.fontSize,
'font-weight' : this.fontWeight, 'font-weight' : this.fontWeight,
'font-style' : this.fontStyle 'font-style' : this.fontStyle
}"> }">
<slot></slot> <slot></slot>
</p> </p>
<footer> <footer>
<section class="font-weights"> <section class="font-weights">
<span <span
v-for="weight in weights" v-for="weight in weights"
:style="{ 'font-weight': weight }" :style="{ 'font-weight': weight }"
v-on:click="setWeight(weight)" v-on:click="setWeight(weight)"
>{{ weight }}</span> >{{ weight }}</span>
<span <span
v-if="hasItalic" v-if="hasItalic"
class="brz9-icon-italic" class="brz9-icon-italic"
v-on:click="fontStyle = fontStyle == 'normal' ? 'italic' : 'normal'" v-on:click="fontStyle = fontStyle == 'normal' ? 'italic' : 'normal'"
></span> ></span>
</section> </section>
<section class="font-name"> <section class="font-name">
<span class="font-name">{{ typeface.name }} - </span> <span class="font-name">{{ typeface.name }} - </span>
<span class="copy-css" v-on:click="copyToClipboard()">Copy CSS Link import</span> <span class="copy-css" v-on:click="copyToClipboard()">Copy CSS Link import</span>
<span <span
class="copy-icon-popup" class="copy-icon-popup"
v-bind:class="{ 'success': isCopied}" v-bind:class="{ 'success': isCopied}"
ref="element">Copied!</span> ref="element">Copied!</span>
</section> </section>
</footer> </footer>
@ -71,7 +71,7 @@ Vue.component('fontdemo', {
return this.size + "rem"; return this.size + "rem";
} }
}, },
methods: { methods: {
copyToClipboard() { copyToClipboard() {
let text = this.linkText + this.typeface.name.toLowerCase() + ".css" + this.linkTextEnd; let text = this.linkText + this.typeface.name.toLowerCase() + ".css" + this.linkTextEnd;
const textarea = document.createElement('textarea') const textarea = document.createElement('textarea')
@ -93,7 +93,7 @@ Vue.component('fontdemo', {
} }
}, },
mounted() { mounted() {
this.weights = this.typeface.fonts.filter(function(weight) { this.weights = this.typeface.fonts.filter(function(weight) {
return weight.indexOf("i") == -1; return weight.indexOf("i") == -1;
}); });
this.weights.sort(function(a, b) { this.weights.sort(function(a, b) {
@ -1137,6 +1137,18 @@ let vm = new Vue({
"commercial": false, "commercial": false,
"open": false, "open": false,
}, },
spacemono : {
"name": "SpaceMono",
"fonts" : [
],
"tags" : ["mono"],
"link" : "https://www.colophon-foundry.org/custom-projects/space-mono",
"creator" : "Colophon Foundry",
"creatorLink" : "https://www.colophon-foundry.org/",
"licence" : "SIL",
"commercial" : true,
"open": true,
},
surfingcapital : { surfingcapital : {
"name": "SurfingCapital", "name": "SurfingCapital",
"fonts": [ "fonts": [
@ -1319,6 +1331,7 @@ let vm = new Vue({
this.resin, this.resin,
this.montrappist, this.montrappist,
this.hamletcicero, this.hamletcicero,
this.spacemono,
this.imposible, this.imposible,
this.grobedeutschmeister, this.grobedeutschmeister,
this.theboldfont, this.theboldfont,
@ -1402,7 +1415,7 @@ let vm = new Vue({
this.blankenburg.tags = [this.taglist.display, this.taglist.goth] this.blankenburg.tags = [this.taglist.display, this.taglist.goth]
this.blazed.tags = [this.taglist.display, this.taglist.graphic] this.blazed.tags = [this.taglist.display, this.taglist.graphic]
this.bondi.tags = [this.taglist.display, this.taglist.allcaps] this.bondi.tags = [this.taglist.display, this.taglist.allcaps]
this.boston.tags = [this.taglist.display, this.taglist.retro] this.boston.tags = [this.taglist.display, this.taglist.retro]
this.catreporter.tags = [this.taglist.display, this.taglist.comic] this.catreporter.tags = [this.taglist.display, this.taglist.comic]
this.canobis.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv] this.canobis.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
this.cherish.tags = [this.taglist.display, this.taglist.hand] this.cherish.tags = [this.taglist.display, this.taglist.hand]
@ -1452,6 +1465,7 @@ let vm = new Vue({
this.rousseaudeco.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv] this.rousseaudeco.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
this.saintregus.tags = [this.taglist.display] this.saintregus.tags = [this.taglist.display]
this.sonderregular.tags = [this.taglist.display, this.taglist.fancy] this.sonderregular.tags = [this.taglist.display, this.taglist.fancy]
this.spacemono.tags = [this.taglist.mono]
this.surfingcapital.tags = [this.taglist.graphic] this.surfingcapital.tags = [this.taglist.graphic]
this.theboldfont.tags = [this.taglist.display, this.taglist.allcaps] this.theboldfont.tags = [this.taglist.display, this.taglist.allcaps]
this.theater.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed] this.theater.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed]