proj/YT2P/assets/css/fonts.css

@@ -1,20 +1,20 @@
 @font-face{
     font-family: inter;
-    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Regular.woff2");
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Regular.woff");
     font-style: normal;
     font-weight: 400;
 }
 
 @font-face{
     font-family: inter;
-    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Italic.woff2");
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Italic.woff");
     font-style: italic;
     font-weight: 400;
 }
 
 @font-face{
     font-family: inter;
-    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Bold.woff2");
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Bold.woff");
     font-style: normal;
     font-weight: 600;
 }

proj/fonts/fonts.js

@@ -1,3 +1,63 @@
+Vue.component('icon', {
+  template: `
+    <div class="single-icon">    
+      <span 
+        v-bind:class="this.class"
+        v-on:click="copyToClipboard(utf8)" 
+        class="actual-icon"
+        ref="icon"></span>
+      <span 
+      class="copy-icon-popup" 
+      v-bind:class="{ 'success': isCopied}" 
+      ref="element">Copied!</span>
+      <p 
+        class="icon-name"
+        v-on:click="copyToClipboard(span)"
+        ref="span">{{ this.name }}</p>
+    </div>
+    `,
+  props: ['name'],
+  data() {
+    return {
+      utf8: '',
+      isCopied: false
+    }
+  },
+  computed: {
+    class: function () {
+      return "brz9-icon-" + this.name;
+    },
+    span: function () {
+      return '<span class="brz9-icon-' + this.name + '"></span>';
+    }
+  },
+  methods: {
+    copyToClipboard(text) {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      this.copyDone();
+    },
+    copyDone() {
+      this.isCopied = true;
+      this.$refs.element.addEventListener('animationend', () => {
+        this.isCopied = false;
+      });
+    }
+  },
+  mounted() {
+    query = '.' + this.class
+    let span = document.querySelector(query)
+    let style = window.getComputedStyle(span, ':before')
+    let content = style.getPropertyValue('content')
+    console.log(content)
+    this.utf8 = content.replace('"', '').replace('"', '')
+  }
+})
+
 Vue.component('fontdemo', {
   template: `
     <div class="single-font">
@@ -1336,6 +1396,5 @@ let vm = new Vue({
       if (a.name > b.name) return 1
       return 0
     } )
-    this.selection = this.typefaceList
   }
 }).$mount('#root')

proj/fonts/index.html

@@ -15,17 +15,14 @@
 
     <main>
         <h3>Fonts</h3>
-        <input class="font-input" v-model="testText" placeholder="Your text"/>
+        <input v-model="testText" placeholder="Your text"/>
         <nav class="font-nav">
             <span class="style-pick" v-on:click="updateSelectedTags('graphic')">Graphic</span>
         </nav>
-    
+        <fontdemo v-for="font in this.selection" :typeface="font">{{ testText }}</fontdemo>
 <h4>All the fonts</h4>
-        <div class="font-container">
+        <fontdemo v-for="font in this.typefaceList" :typeface="font">{{ testText }}</fontdemo>
-            <div class="font-content">
+
-                <fontdemo v-for="font in this.selection" :typeface="font">{{ testText }}</fontdemo>
-            </div>
-        </div>
     </main>
 
 </div>

proj/fonts/style.css

@@ -115,36 +115,19 @@ h2 {
     padding-top: 20px;
 }
 
-input.font-input {
+input {
-    width: 30vw;
+    width: 40vw;
     background-color: rgba(0,0,0,0);
     border: none;
     color: inherit;
     padding-bottom: 10px;
     border-bottom: 5px solid var(--fg);
-    display: inline-block;
 }
 
+
 input:focus {
     outline: none;
-}
 
-nav.font-nav {
-    display: inline-block;
-}
-
-nav.font-nav span.style-pick {
-    color: var(--fg);
-    padding: 5px;
-    font-weight: 500;
-    border: 5px solid var(--fg);
-    cursor: pointer;
-}
-
-nav.font-nav span.style-pick.selected {
-    background-color: var(--fg);
-    color: black;
-    mix-blend-mode: lighten;
 }
 
 
@@ -184,51 +167,3 @@ div.single-font footer span.copy-icon-popup {
     padding: 10px;
     translate: -30px;
 }
-
-.font-container {
-    position: relative;
-    max-height: 60vh;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-.font-content {
-    position: relative;  
-  }
-
-
-.font-container::-webkit-scrollbar-track
-{
-	border-right: 5px solid var(--fg);
-    border-left: none;
-	background-color: rgba(0,0,0,0);
-}
-
-.font-container::-webkit-scrollbar
-{
-	width: 15px;
-	background-color: rgba(0,0,0,0);
-}
-
-.font-container::-webkit-scrollbar-thumb
-{
-	background-color: var(--fg);	
-}
-
-.font-container{
-    scrollbar-width: 15px;
-    scrollbar-color: var(--fg) rgba(255,255,255,0.1);
-}
-
-.font-container {
-    border-top: 5px solid var(--fg);
-    border-bottom: 5px solid var(--fg);
-}
-
-.font-content {
-    margin-top: -5px;
-    margin-bottom: -20px;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-}