font project update

proj/fonts/fonts.js

@@ -1,25 +1,74 @@
+Vue.component('fontpicker', {
+    template: `
+    <span 
+      class="style-pick" 
+      v-on:click="toggle" 
+      v-bind:class="{ 'tagged': tag.isTrue}">
+        <slot></slot>
+    </span>
+    `,
+    props: ['tag'],
+    methods: {
+        toggle() {
+            vm.$data.isFresh = false
+            this.tag.isTrue = !this.tag.isTrue
+        }
+    }
+}) 
+
 Vue.component('fontdemo', {
   template: `
-    <div class="single-font">
-      <p :style="{ 'font-family': typeface.name }">
+    <div class="single-font" v-show="typeface.tags.some(o => o.isTrue === true) || fresh">
+        <p :style="{ 
+            'font-family': typeface.name, 
+            'font-size' : this.fontSize, 
+            'font-weight' : this.fontWeight, 
+            'font-style' : this.fontStyle
+        }">
         <slot></slot>
       </p>
       <footer>
+        <section class="font-weights">
+            <span 
+                v-for="weight in weights" 
+                :style="{ 'font-weight': weight }" 
+                v-on:click="setWeight(weight)"
+                >{{ weight }}</span>
+            <span 
+                v-if="hasItalic"
+                class="brz9-icon-italic" 
+                v-on:click="fontStyle = fontStyle == 'normal' ? 'italic' : 'normal'"
+            ></span>
+        </section>
+
+    
+
+        <section class="font-name">
         <span class="font-name">{{ typeface.name }} - </span>
         <span class="copy-css" v-on:click="copyToClipboard()">Copy CSS Link import</span>
         <span 
       class="copy-icon-popup" 
       v-bind:class="{ 'success': isCopied}" 
       ref="element">Copied!</span>
+      </section>
       </footer>
     </div>
     `,
-  props: ['typeface'],
+  props: ['typeface', 'fresh', 'size'],
   data() {
     return {
+      hasItalic: false,
       isCopied: false,
       linkText: '<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/base/',
-      linkTextEnd: '">'
+      linkTextEnd: '">',
+      fontWeight: 400,
+      fontStyle: "normal",
+      weights : []
+    }
+    },
+    computed: {
+        fontSize () {
+            return this.size + "rem";
     }
   },
   methods: { 
@@ -38,36 +87,31 @@ Vue.component('fontdemo', {
       this.$refs.element.addEventListener('animationend', () => {
         this.isCopied = false;
       });
+    },
+    setWeight(weight) {
+        this.fontWeight = weight;
+    }
+  },
+    mounted() {
+        this.weights = this.typeface.fonts.filter(function(weight) {    
+            return weight.indexOf("i") == -1;
+        });
+        this.weights.sort(function(a, b) {
+            return a - b;
+        });
+        if (this.typeface.fonts.some(o => o.indexOf("i") > -1)) {
+            this.hasItalic = true;
+        }
     }
-  }
 })
 
 let vm = new Vue({
   methods: {
-    updateSelectedTags(tag) {
-      if (this.selectedTags.includes(tag)) {
-        this.selectedTags.splice(this.selectedTags.indexOf(tag), 1);
-      } else {
-        this.selectedTags.push(tag);
-      }
-      this.updateSelection();
+    fontSizeUp() {
+        this.fontSize += 0.2;
     },
-    add2selection(tag) {
-      this.typefaceList.forEach(typeface => {
-        if (typeface.tags.includes(tag)) {
-          this.selection.push(typeface);
-        }
-      })
-      console.log(this.selection);
-    },
-    updateSelection() {
-      this.selection = [];
-      this.typefaceList.forEach(typeface => {
-        if (this.selectedTags.every(v => typeface.tags.includes(v))) {
-          this.selection.push(typeface);
-        }
-      })
-      console.log(this.selection);
+    fontSizeDown() {
+        this.fontSize -= 0.2;
     }
   },
   data() {
@@ -75,12 +119,28 @@ let vm = new Vue({
       testText: "The quick brown fox jumps over the lazy dog",
       selection : [],
       selectedTags: [],
+      isFresh: true,
+      fontSize: 2.0,
+      taglist: {
+        display: {isTrue : false},
+        graphic: {isTrue : false},
+        mono: {isTrue : false},
+        comic: {isTrue : false},
+        neogro: {isTrue : false},
+        artnouv : {isTrue : false},
+        hand : {isTrue : false},
+        condensed : {isTrue : false},
+        goth: {isTrue : false},
+        fancy: {isTrue : false},
+        allcaps: {isTrue : false},
+        retro: {isTrue : false},
+      },
       alvania : {
-        "name": "Alvania",
-        "fonts": [
+        name : "Alvania",
+        fonts : [
             "400",
         ],
-        "tags": ["display","comic"],
+        tags : [],
         "link": "https://www.graphicpear.com/alvania-typeface/",
         "creator": "Angélica Cardona",
         "creatorLink": "https://www.behance.net/angelicardona",
@@ -93,7 +153,7 @@ let vm = new Vue({
         "fonts": [
             "400",
         ],
-        "tags": ["display", "fancy"],
+        "tags": [],
         "link": "https://www.paratype.com/fonts/eb/ambidexter",
         "creator": "Egor Belozerov",
         "creatorLink": "https://www.instagram.com/egaindahouse/",
@@ -1264,7 +1324,6 @@ let vm = new Vue({
       this.theboldfont,
       this.leiko,
       this.harbinger,
-      this.kielo,
       this.volumedealer,
       this.leaguegothic,
       this.blankenburg,
@@ -1275,7 +1334,6 @@ let vm = new Vue({
       this.tropikal,
       this.saintregus,
       this.arturito,
-      this.monolith,
       this.overpassmono,
       this.banco,
       this.baldur,
@@ -1288,10 +1346,8 @@ let vm = new Vue({
       this.donjose,
       this.werbedeutsch,
       this.canobis,
-      this.nim,
       this.hamlettertia,
       this.forta,
-      this.trappist,
       this.humane,
       this.wavehaus,
       this.catreporter,
@@ -1299,7 +1355,6 @@ let vm = new Vue({
       this.boston,
       this.surfingcapital,
       this.theater,
-      this.montreau,
       this.ambidexter,
       this.marvinvisionsbig,
       this.vercetti,
@@ -1310,13 +1365,10 @@ let vm = new Vue({
       this.feastofflesh,
       this.lemonmilk,
       this.alvania,
-      this.communenuitdeboutpochoir,
       this.doppelganger,
       this.comictantrum,
       this.blazed,
-      this.refuse,
       this.ribes,
-      this.quakep,
       this.vollkorn,
       this.mdtall,
       this.hermanoaltoround,
@@ -1337,5 +1389,80 @@ let vm = new Vue({
       return 0
     } )
     this.selection = this.typefaceList
+    this.alvania.tags = [this.taglist.display, this.taglist.comic]
+    this.ambidexter.tags = [this.taglist.display, this.taglist.fancy]
+    this.archive.tags = [this.taglist.display, this.taglist.allcaps]
+    this.arturito.tags = [this.taglist.display]
+    this.avara.tags = [this.taglist.display]
+    this.avenirnext.tags = [this.taglist.neogro]
+    this.axis.tags = [this.taglist.display, this.taglist.allcaps]
+    this.baldur.tags = [this.taglist.display, this.taglist.artnouv, this.taglist.fancy]
+    this.banco.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.graphic]
+    this.bizon.tags = [this.taglist.display, this.taglist.allcaps]
+    this.blankenburg.tags = [this.taglist.display, this.taglist.goth]
+    this.blazed.tags = [this.taglist.display, this.taglist.graphic]
+    this.bondi.tags = [this.taglist.display, this.taglist.allcaps]
+    this.boston.tags = [this.taglist.display, this.taglist.retro]  
+    this.catreporter.tags = [this.taglist.display, this.taglist.comic]
+    this.canobis.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
+    this.cherish.tags = [this.taglist.display, this.taglist.hand]
+    this.comictantrum.tags = [this.taglist.display, this.taglist.comic, this.taglist.goth]
+    this.communenuitdebout.tags = [this.taglist.display, this.taglist.condensed]
+    this.communenuitdeboutpochoir.tags = [this.taglist.display, this.taglist.condensed]
+    this.disket.tags = [this.taglist.display, this.taglist.allcaps]
+    this.donjose.tags = [this.taglist.display, this.taglist.allcaps]
+    this.doppelganger.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
+    this.envycoder.tags = [this.taglist.mono]
+    this.feastofflesh.tags = [this.taglist.graphic]
+    this.forta.tags = [this.taglist.display, this.taglist.allcaps]
+    this.grobedeutschmeister.tags = [this.taglist.goth]
+    this.gulfsdisplay.tags = [this.taglist.display]
+    this.hamletcicero.tags = [this.taglist.goth]
+    this.hamlettertia.tags = [this.taglist.goth]
+    this.harbinger.tags = [this.taglist.display, this.taglist.allcaps]
+    this.hermanoaltoround.tags = [this.taglist.display, this.taglist.condensed]
+    this.hermit.tags = [this.taglist.mono]
+    this.humane.tags = [this.taglist.display, this.taglist.condensed]
+    this.imposible.tags = [this.taglist.graphic]
+    this.inter.tags = [this.taglist.neogro]
+    this.kielo.tags = [this.taglist.display]
+    this.laborunion.tags = [this.taglist.display, this.taglist.allcaps]
+    this.leaguegothic.tags = [this.taglist.display]
+    this.leaguegothiccondensed.tags = [this.taglist.display, this.taglist.condensed]
+    this.leiko.tags = [this.taglist.serif]
+    this.lemonmilk.tags = [this.taglist.display, this.taglist.allcaps]
+    this.mdtall.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed]
+    this.mamenchisa.tags = [this.taglist.graphic]
+    this.mammutcat.tags = [this.taglist.graphic, this.taglist.comic]
+    this.margaret.tags = [this.taglist.serif]
+    this.marvinvisionsbig.tags = [this.taglist.display, this.taglist.allcaps]
+    this.mersad.tags = [this.taglist.neogro]
+    this.milkcarton.tags = [this.taglist.display, this.taglist.comic]
+    this.misto.tags = [this.taglist.display, this.taglist.comic]
+    this.montrappist.tags = [this.taglist.display]
+    this.mononoki.tags = [this.taglist.mono]
+    this.newake.tags = [this.taglist.display]
+    this.overpassmono.tags = [this.taglist.mono]
+    this.planck.tags = [this.taglist.display]
+    this.rafigen.tags = [this.taglist.display]
+    this.remboy.tags = [this.taglist.display, this.taglist.artnouv]
+    this.resin.tags = [this.taglist.display, this.taglist.allcaps]
+    this.ribes.tags = [this.taglist.display]
+    this.roboto.tags = [this.taglist.neogro]
+    this.rousseaudeco.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
+    this.saintregus.tags = [this.taglist.display]
+    this.sonderregular.tags = [this.taglist.display, this.taglist.fancy]
+    this.surfingcapital.tags = [this.taglist.graphic]
+    this.theboldfont.tags = [this.taglist.display, this.taglist.allcaps]
+    this.theater.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed]
+    this.tintin.tags = [this.taglist.display, this.taglist.comic]
+    this.tropikal.tags = [this.taglist.display, this.taglist.fancy]
+    this.ustroke.tags = [this.taglist.graphic]
+    this.vercetti.tags = [this.taglist.neogro]
+    this.vollkorn.tags = [this.taglist.serif]
+    this.volumedealer.tags = [this.taglist.graphic]
+    this.wavehaus.tags = [this.taglist.neogro]
+    this.werbedeutsch.tags = [this.taglist.goth]
+    //this..tags = [this.taglist.]
   }
 }).$mount('#root')

proj/fonts/index.html

@@ -11,25 +11,108 @@
 </head>
 <body>
 
+    <nav>
+        <section id="left-nav">
+          <a href="/">
+            <span class="byl-icon-home"></span>
+          </a>
+          <a href="/proj">
+            <span>/projets</span>
+          </a>
+        </section>
+        
+      </nav>
+
+
 <div id="root">
 
     <main>
         <h3>Fonts</h3>
         <input class="font-input" v-model="testText" placeholder="Your text"/>
         <nav class="font-nav">
-            <span class="style-pick" v-on:click="updateSelectedTags('graphic')">Graphic</span>
+            <fontpicker :tag="taglist.display">Display</fontpicker>
+            <fontpicker :tag="taglist.condensed">Condensed</fontpicker>
+            <fontpicker :tag="taglist.graphic">Graphic</fontpicker>
+            <fontpicker :tag="taglist.fancy">Fancy</fontpicker>
+            <fontpicker :tag="taglist.comic">Comic</fontpicker>
+            <fontpicker :tag="taglist.mono">Mono</fontpicker>
+        
         </nav>
     
-<h4>All the fonts</h4>
+
+<nav class="font-control">
+<span class="brz9-icon-font-size"></span>
+<span class="brz9-icon-plus" v-on:click="fontSizeUp"></span>
+<span> / </span>
+<span class="brz9-icon-minus" v-on:click="fontSizeDown"></span>
+</nav>
         <div class="font-container">
             <div class="font-content">
-                <fontdemo v-for="font in this.selection" :typeface="font">{{ testText }}</fontdemo>
+                <fontdemo v-for="font in this.selection" :typeface="font"
+                v-bind:fresh="isFresh"
+                v-bind:size="fontSize"
+                >{{ testText }}</fontdemo>
             </div>
         </div>
     </main>
 
 </div>
+<footer>
+    <section id="social">
+      <a href="/feed.xml">
+        <span class="byl-icon-rss"></span>
+      </a>
+      <a rel="me" href="https://mamot.fr/@edardach" target="_blank">
+        <span class="byl-icon-mastodon"></span>
+      </a>
+      <!--
+      <a href="https://www.instagram.com/edbrz9/"
+          target="_blank">
+        <span class="byl-icon-instagram"></span>
+      </a>
 
+      <a href="https://twitter.com/edbrz9"
+          target="_blank">
+        <span class="byl-icon-twitter"></span>
+      </a>
+      -->
+      <a href="https://git.brz9.dev/ed"
+          target="_blank">
+        <span class="byl-icon-git"></span>
+      </a>
+      <!--
+      <a href="">
+      <a rel="me" href="https://mamot.fr/@edardach">
+        <span class="byl-icon-mastodon"></span>
+      </a>
+      <a href="">
+        <span class="byl-icon-tiktok"></span>
+      </a>
+      -->
+      <a href="/BTC">
+        <span class="byl-icon-bitcoin"></span>
+      </a>
+      <a href="/ETH">
+        <span class="byl-icon-ethereum"></span>
+      </a>
+      <a href="/XMR">
+        <span class="byl-icon-monero"></span>
+      </a>
+
+    </section>
+
+    <section id ="mail">
+      <p>ed<span class="132">ehbb</span>@<span class="lskd">dllls</span>brz9.dev</p>
+    </section>
+
+    <section id="license">
+    <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
+      <img class="cc-link" src="/assets/svg/edbz9-cc-by-sa.svg"/>
+    </a>
+    </section>
+
+
+</footer>
 
 </body>
 <script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>

proj/fonts/style.css

@@ -116,7 +116,7 @@ h2 {
 }
 
 input.font-input {
-    width: 30vw;
+    width: 20vw;
     background-color: rgba(0,0,0,0);
     border: none;
     color: inherit;
@@ -137,11 +137,12 @@ nav.font-nav span.style-pick {
     color: var(--fg);
     padding: 5px;
     font-weight: 500;
+    font-size: 1rem;
     border: 5px solid var(--fg);
     cursor: pointer;
 }
 
-nav.font-nav span.style-pick.selected {
+nav.font-nav span.style-pick.tagged {
     background-color: var(--fg);
     color: black;
     mix-blend-mode: lighten;
@@ -154,10 +155,11 @@ div.single-font p {
     font-style: normal;
     margin: 0px;
     margin-bottom: 10px;
+    line-height: 150%;
+    padding-top: 5px;
 }
 
 div.single-font footer {
-    text-align: right;
     margin: 0px;
     padding: 0px;
     margin-bottom: -15px;
@@ -172,6 +174,8 @@ div.single-font span {
 
 div.single-font {
     border: 5px solid var(--fg);
+    border-left: none;
+    border-right: none;
     padding: 15px;
     margin-bottom: -5px;
 }
@@ -182,12 +186,13 @@ div.single-font footer span.copy-css {
 
 div.single-font footer span.copy-icon-popup {
     padding: 10px;
-    translate: -30px;
+    translate: -100px;
 }
 
 .font-container {
     position: relative;
     max-height: 60vh;
+    min-height: 200px;
     overflow-y: scroll;
     overflow-x: hidden;
 }
@@ -200,13 +205,13 @@ div.single-font footer span.copy-icon-popup {
 .font-container::-webkit-scrollbar-track
 {
 	border-right: 5px solid var(--fg);
-    border-left: none;
+    border-left: 5px solid var(--fg);
 	background-color: rgba(0,0,0,0);
 }
 
 .font-container::-webkit-scrollbar
 {
-	width: 15px;
+	width: 20px;
 	background-color: rgba(0,0,0,0);
 }
 
@@ -216,13 +221,14 @@ div.single-font footer span.copy-icon-popup {
 }
 
 .font-container{
-    scrollbar-width: 15px;
-    scrollbar-color: var(--fg) rgba(255,255,255,0.1);
+    scrollbar-width: 5px;
+    scrollbar-color: rgba(0,0,0,0.5) var(--fg)
 }
 
 .font-container {
     border-top: 5px solid var(--fg);
     border-bottom: 5px solid var(--fg);
+    border-left: 5px solid var(--fg);
 }
 
 .font-content {
@@ -230,5 +236,33 @@ div.single-font footer span.copy-icon-popup {
     margin-bottom: -20px;
     overflow-y: hidden;
     overflow-x: hidden;
+}
 
+nav.font-control {
+    margin-left: 0px;
+    margin-bottom: 20px;
+}
+
+nav.font-control {
+    margin-left: 0px;
+    margin-bottom: 20px;
+}
+
+nav.font-control .brz9-icon-plus, nav.font-control .brz9-icon-minus {
+    cursor: pointer;
+}
+
+div.single-font footer section {
+    display: inline-block;
+}
+
+div.single-font footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+section.font-weights span {
+    margin-right: 10px;
+    cursor: pointer;
 }