diff --git a/assets/css/colors.css b/assets/css/colors.css index e144247..ce46c9c 100644 --- a/assets/css/colors.css +++ b/assets/css/colors.css @@ -2,6 +2,7 @@ --black: #232D37; --white: #FAE2D3; --success: #3CB57F; + --link: hsl(14, 100%, 74%); --fail: #F52D0A; --fg: #e9d2d2; } diff --git a/assets/css/style.css b/assets/css/style.css index 6a04b9c..dd91b81 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -262,4 +262,16 @@ section.comments { text-align: center; margin-top: 20px; margin-bottom: 20px; +} + +a.ext { + color: var(--link) !important; +} + +a.ext::after { + font-family: "brz9"; + content: "\e9cb"; + + + padding-left: 0.2em; } \ No newline at end of file diff --git a/index.php b/index.php index f6de165..81e4283 100644 --- a/index.php +++ b/index.php @@ -20,7 +20,10 @@
-

Bienvenu sur mon site.

+

+Discographie +Projets +Ressources
diff --git a/proj/fonts/README.md b/proj/fonts/README.md new file mode 100644 index 0000000..811ab31 --- /dev/null +++ b/proj/fonts/README.md @@ -0,0 +1,35 @@ +It's declared this way: + +let vm = new Vue({ + data() { + return { + testText: "The quick brown fox jumps over the lazy dog", + planck : { + "name": "Planck", + "fonts" : [ + "400" + ], + "tags" : ["sans-serif"], + }, + bizon : { + "name": "Bizon", + "fonts" : [ + "400" + ], + "tags" : ["sans-serif"], + }, + archive : { + "name": "Archive", + "fonts" : [ + "400" + ], + "tags" : ["sans-serif"], + }, + typefaceList : [ + this.archive, + this.planck, + this.bizon + ] + } + } +}).$mount('#root') \ No newline at end of file diff --git a/proj/fonts/fonts.js b/proj/fonts/fonts.js new file mode 100644 index 0000000..ddc4b13 --- /dev/null +++ b/proj/fonts/fonts.js @@ -0,0 +1,1400 @@ +Vue.component('icon', { + template: ` +
+ + Copied! +

{{ this.name }}

+
+ `, + props: ['name'], + data() { + return { + utf8: '', + isCopied: false + } + }, + computed: { + class: function () { + return "brz9-icon-" + this.name; + }, + span: function () { + return ''; + } + }, + 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: ` +
+

+ +

+ +
+ `, + props: ['typeface'], + data() { + return { + isCopied: false, + linkText: '' + } + }, + methods: { + copyToClipboard() { + let text = this.linkText + this.typeface.name.toLowerCase() + ".css" + this.linkTextEnd; + 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; + }); + } + } +}) + +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(); + }, + 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); + } + }, + data() { + return { + testText: "The quick brown fox jumps over the lazy dog", + selection : [], + selectedTags: [], + alvania : { + "name": "Alvania", + "fonts": [ + "400", + ], + "tags": ["display","comic"], + "link": "https://www.graphicpear.com/alvania-typeface/", + "creator": "Angélica Cardona", + "creatorLink": "https://www.behance.net/angelicardona", + "licence": "c", + "commercial": false, + "open": false, + }, + ambidexter : { + "name": "Ambidexter", + "fonts": [ + "400", + ], + "tags": ["display", "fancy"], + "link": "https://www.paratype.com/fonts/eb/ambidexter", + "creator": "Egor Belozerov", + "creatorLink": "https://www.instagram.com/egaindahouse/", + "licence": "SIL", + "commercial": true, + "open": true, + }, + archive : { + "name": "Archive", + "fonts": [ + "400", + ], + "tags": ["display","allcaps"], + "link": "https://www.fontfabric.com/fonts/archive/", + "creator": "Slava Kirilenko", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + arturito : { + "name": "Arturito", + "fonts": [ + "400", + ], + "tags": ["display"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + avara : { + "name": "Avara", + "fonts": [ + "400", + "400i", + ], + "tags": ["serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + avenirnext : { + "name": "AvenirNext", + "fonts": [ + "200", + "300", + "200i", + "300i", + "800i", + "100", + "500i", + "400i", + "800", + "500", + "100i", + "400", + "600", + "700", + "600i", + "700i", + ], + "tags": ["sans-serif", "neo-grotesque"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + axis : { + "name": "Axis", + "fonts": [ + "400", + ], + "tags": ["display","allcaps"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + baldur : { + "name": "Baldur", + "fonts": [ + "400", + ], + "tags": ["art-nougvaeu", "display"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + banco : { + "name": "Banco", + "fonts": [ + "400", + ], + "tags": ["graphic"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + bizon : { + "name": "Bizon", + "fonts": [ + "400", + ], + "tags": ["display","allcaps"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + blankenburg : { + "name": "Blankenburg", + "fonts": [ + "400", + ], + "tags": ["blackletter","display"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + blazed : { + "name": "Blazed", + "fonts": [ + "400", + ], + "tags": ["graphic","display"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + bondi : { + "name": "Bondi", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + boston : { + "name": "Boston", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + catreporter : { + "name": "CATReporter", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + canobis : { + "name": "Canobis", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + cherish : { + "name": "Cherish", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + comictantrum : { + "name": "ComicTantrum", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + communenuitdebout : { + "name": "CommuneNuitDebout", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + communenuitdeboutpochoir : { + "name": "CommuneNuitDeboutPochoir", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + disket : { + "name": "Disket", + "fonts": [ + "400", + "600", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + donjose : { + "name": "DonJose", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + doppelganger : { + "name": "Doppelganger", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + envycoder : { + "name": "EnvyCodeR", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + feastofflesh : { + "name": "FeastOfFlesh", + "fonts": [ + "400", + "400i", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + forta : { + "name": "Forta", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + grobedeutschmeister : { + "name": "GrobeDeutschmeister", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + gulfsdisplay : { + "name": "GulfsDisplay", + "fonts": [ + "600i", + "800i", + "400i", + "800", + "200i", + "200", + "500i", + "600", + "400", + "300", + "500", + "300i", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + hamletcicero : { + "name": "HamletCicero", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + hamlettertia : { + "name": "HamletTertia", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + harbinger : { + "name": "Harbinger", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + hermanoaltoround : { + "name": "HermanoAltoRound", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + hermit : { + "name": "Hermit", + "fonts": [ + "600i", + "400i", + "200i", + "200", + "400", + "600", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + humane : { + "name": "Humane", + "fonts": [ + "800", + "400", + "600", + "200", + "500", + "100", + "300", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + imposible : { + "name": "Imposible", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + inter : { + "name": "Inter", + "fonts": [ + "600", + "100i", + "700", + "600i", + "700i", + "500", + "400", + "800", + "800i", + "900i", + "200i", + "300i", + "100", + "900", + "200", + "500i", + "400i", + "300", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + kielo : { + "name": "Kielo", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + laborunion : { + "name": "LaborUnion", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + laborunionsoft : { + "name": "LaborUnionSoft", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + leaguegothic : { + "name": "LeagueGothic", + "fonts": [ + "400i", + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + leaguegothiccondensed : { + "name": "LeagueGothicCondensed", + "fonts": [ + "400i", + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + leiko : { + "name": "Leiko", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + lemonmilk : { + "name": "LemonMilk", + "fonts": [ + "500i", + "400", + "600i", + "600", + "400i", + "200", + "500", + "200i", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + mdtall : { + "name": "MDTall", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + mamenchisa : { + "name": "Mamenchisa", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + mammutcat : { + "name": "MammutCAT", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + margaret : { + "name": "Margaret", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + marvinvisionsbig : { + "name": "MarvinVisionsBig", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + mersad : { + "name": "Mersad", + "fonts": [ + "400", + "600", + "200", + "700", + "500", + "100", + "300", + "900", + "800", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + milkcarton : { + "name": "MilkCarton", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + misto : { + "name": "Misto", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + montrappist : { + "name": "MonTrappist", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "http://montifonti.tilda.ws/mon_trappist", + "creator": "Vika Usmanova", + "creatorLink": "https://www.instagram.com/viusmanova/", + "licence": "SIL", + "commercial": true, + "open": true, + }, + monolith : { + "name": "Monolith", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + mononoki : { + "name": "Mononoki", + "fonts": [ + "600i", + "400i", + "600", + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + montreau : { + "name": "Montreau", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + nim : { + "name": "NIM", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + newake : { + "name": "Newake", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + overpass : { + "name": "Overpass", + "fonts": [ + "400", + "600i", + "600", + "200i", + "800i", + "200", + "400i", + "800", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + overpassmono : { + "name": "OverpassMono", + "fonts": [ + "400", + "600", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + planck : { + "name": "Planck", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + quakep : { + "name": "Quakep", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + rafigen : { + "name": "Rafigen", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + refuse : { + "name": "Refuse", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + remboy : { + "name": "Remboy", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + resin : { + "name": "Resin", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + ribes : { + "name": "Ribes", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + roboto : { + "name": "Roboto", + "fonts": [ + "200", + "400", + "600", + "800", + "600i", + "800i", + "400i", + "200i", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + rousseaudeco : { + "name": "RousseauDeco", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + saintregus : { + "name": "SaintRegus", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + sonderregular : { + "name": "SonderRegular", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + surfingcapital : { + "name": "SurfingCapital", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + theboldfont : { + "name": "TheBoldFont", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + theater : { + "name": "Theater", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "https://www.behance.net/gallery/102849337/THEATER-FREE-FONT", + "creator": "Adrian Jordanov", + "creatorLink": "https://www.behance.net/adrianj_1", + "licence": "", + "commercial": true, + "open": false, + }, + tintin : { + "name": "Tintin", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + trappist : { + "name": "Trappist", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + tropikal : { + "name": "Tropikal", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + ustroke : { + "name": "Ustroke", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + vercetti : { + "name": "Vercetti", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + vollkorn : { + "name": "Vollkorn", + "fonts": [ + "200i", + "800i", + "800", + "400i", + "200", + "600", + "400", + "600i", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + volumedealer : { + "name": "VolumeDealer", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + wavehaus : { + "name": "Wavehaus", + "fonts": [ + "800", + "400", + "600", + "200", + "500", + "100", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + werbedeutsch : { + "name": "Werbedeutsch", + "fonts": [ + "400", + ], + "tags": ["sans-serif"], + "link": "", + "creator": "", + "creatorLink": "", + "licence": "", + "commercial": false, + "open": false, + }, + typefaceList : [] + } + }, + mounted () { + this.typefaceList = [ + this.archive, + this.misto, + this.mersad, + this.planck, + this.bizon, + this.inter, + this.resin, + this.montrappist, + this.hamletcicero, + this.imposible, + this.grobedeutschmeister, + this.theboldfont, + this.leiko, + this.harbinger, + this.kielo, + this.volumedealer, + this.leaguegothic, + this.blankenburg, + this.newake, + this.laborunion, + this.tintin, + this.bondi, + this.tropikal, + this.saintregus, + this.arturito, + this.monolith, + this.overpassmono, + this.banco, + this.baldur, + this.sonderregular, + this.communenuitdebout, + this.rafigen, + this.mammutcat, + this.envycoder, + this.milkcarton, + this.donjose, + this.werbedeutsch, + this.canobis, + this.nim, + this.hamlettertia, + this.forta, + this.trappist, + this.humane, + this.wavehaus, + this.catreporter, + this.cherish, + this.boston, + this.surfingcapital, + this.theater, + this.montreau, + this.ambidexter, + this.marvinvisionsbig, + this.vercetti, + this.roboto, + this.rousseaudeco, + this.ustroke, + this.axis, + 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, + this.remboy, + this.avara, + this.mamenchisa, + this.avenirnext, + this.hermit, + this.gulfsdisplay, + this.margaret, + this.mononoki, + this.disket, + this.leaguegothiccondensed + ], + this.typefaceList = this.typefaceList.sort((a, b) => { + if (a.name < b.name) return -1 + if (a.name > b.name) return 1 + return 0 + } ) + } +}).$mount('#root') diff --git a/proj/fonts/index.html b/proj/fonts/index.html new file mode 100644 index 0000000..fde8f1d --- /dev/null +++ b/proj/fonts/index.html @@ -0,0 +1,34 @@ + + + + + + + Fonts + + + + + + +
+ +
+

Fonts

+ + + {{ testText }} +

All the fonts

+ {{ testText }} + +
+ +
+ + + + + + \ No newline at end of file diff --git a/proj/fonts/style.css b/proj/fonts/style.css new file mode 100644 index 0000000..13d8df4 --- /dev/null +++ b/proj/fonts/style.css @@ -0,0 +1,169 @@ +@import url(../../assets/css/style.css); + +div.single-icon { + display: inline-block; + width: 120px; + height: 80px; + margin: 10px; + text-align: center; +} + +div.single-icon p { + margin-top: 15px; + font-size: 1rem; + line-height: normal; +} + +div.single-icon span.actual-icon { + font-size: 2rem; + color: inherit !important; +} + +div.single-icon span.actual-icon::before { + color: inherit !important; +} + +span.copy-icon-popup { + position: absolute; + background-color: var(--success); + color: white; + font-size: 1.5rem; + padding: 10px; + transform: rotate(12deg); + opacity: 0; +} + +span.copy-icon-popup.success { + animation: fade-in 2s forwards; +} + +@keyframes fade-in { + 0% { + opacity: 0; + scale: 0%; + } + 10% { + opacity: 1; + scale: 100%; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + +span.actual-icon, p.icon-name { + cursor: pointer; +} +/* center div.icon-grid on the screen +div.icongrid { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100%; + height: 100%;@ + margin: 0; + margin-top: 20px; + padding: 0; +}*/ + +div.icon-grid-item { + display: inline-flex; + border: 4px solid var(--white); + padding-top: 10px; + padding-bottom: 10px; + margin: -2px; +} + +div.spindemo span { + display: inline-block; + position: relative; + animation: spin 1s linear infinite; + color: var(--fail); + font-size: 3rem; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +a.go-up { + position: fixed; + bottom: 20px; + right: 20px; + font-size: 2rem; + padding: 10px; + z-index: 100; +} + + +/*smooth scroll on the whole page on a click*/ +html { + scroll-behavior: smooth; + transition: 5s; +} + +h2 { + padding-top: 20px; +} + +input { + width: 40vw; + background-color: rgba(0,0,0,0); + border: none; + color: inherit; + padding-bottom: 10px; + border-bottom: 5px solid var(--fg); +} + + +input:focus { + outline: none; + +} + + +div.single-font p { + font-size: 2rem; + font-weight: 400; + font-style: normal; + margin: 0px; + margin-bottom: 10px; +} + +div.single-font footer { + text-align: right; + margin: 0px; + padding: 0px; + margin-bottom: -15px; + margin-top: 30px; +} + +div.single-font span { + margin: 0px; + padding: 0px; +} + + +div.single-font { + border: 5px solid var(--fg); + padding: 15px; + margin-bottom: -5px; +} + +div.single-font footer span.copy-css { + cursor: pointer; +} + +div.single-font footer span.copy-icon-popup { + padding: 10px; + translate: -30px; +} \ No newline at end of file diff --git a/proj/icons/icons.js b/proj/icons/icons.js index 31379a9..5d1e1e0 100644 --- a/proj/icons/icons.js +++ b/proj/icons/icons.js @@ -1,473 +1,471 @@ -Vue.component('icon' ,{ - template : ` -
- - - - Copied! -

{{ this.name }}

-
+Vue.component('icon', { + template: ` +
+ + Copied! +

{{ this.name }}

+
`, - props : ['name'], - data () { - return { - utf8: '', - isCopied: false - } - }, - computed: { - class: function() { - return "brz9-icon-" + this.name; - }, - span: function() { - return ''; - } - }, - 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('"', '') + props: ['name'], + data() { + return { + utf8: '', + isCopied: false } + }, + computed: { + class: function () { + return "brz9-icon-" + this.name; + }, + span: function () { + return ''; + } + }, + 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('"', '') + } }) let vm = new Vue({ - data () { - return { - os : [ - "gnu", - "debian", - "void", - "archlinux", - "gentoo", - "redhat", - "fedora", - "manjaro", - "linuxmint", - "freebsd", - "apple", - "windows" - ], - streaming: [ - "bandcamp", - "spotify", - "applemusic", - "soundcloud", - "tidal" - ], - payment: [ - "cart", - "price-tag", - "price-tags", - "barcode", - "qrcode", - "ticket", - "credit-card", - "visa", - "mastercard", - "applepay", - "paypal", - "bitcoin", - "monero", - "ethereum", - "ltc", - "liberapay", - "patreon", - "tipeee", - "flattr" - ], - navigation: [ - "arrow-down", - "arrow-down-left", - "arrow-down-right", - "arrow-left", - "arrow-right", - "arrow-up", - "arrow-up-left", - "arrow-up-right", - "chevron-circle-down", - "chevron-circle-left", - "chevron-circle-right", - "chevron-circle-up", - "chevron-down", - "chevron-left", - "chevron-right", - "chevron-up", - "circle-down", - "circle-left", - "circle-right", - "circle-up", - "zoom-in", - "zoom-out", - "undo", - "redo", - "undo-arrow", - "redo-arrow", - "forward-arrow", - "reply-arrow", - "envelope", - "envelope-open", - "bubble", - "bubbles", - "bubbles2", - "shrink", - "shrink2", - "enlarge", - "enlarge2", - "share", - "share-out", - "search", - "plus", - "minus", - "cross", - "checkmark", - "checkmark-outline", - "link", - "embed", - "embed-slash" - ], - form: [ - "radio-checked", - "radio-checked-alt", - "radio-unchecked", - "checkbox-checked", - "checkbox-unchecked" - ], - network: [ - "tree", - "cloud", - "cloud-check", - "cloud-download", - "cloud-upload", - "upload", - "download", - "switch", - "sphere", - "earth", - "power", - "power-cord", - "wifi" - ], - alert: [ - "warning", - "info", - "question", - "cancel-circle", - "blocked", - "notification", - "floppy-disk", - "trophy", - "newspaper", - "pacman", - "music", - "leaf", - "gift", - "flag", - "bug", - "bell", - "bin", - "bin-alt", - "book", - "books", - "bookmark", - "bookmarks", - "attachment", - "address-book", - "accessibility" - ], - time: [ - "calendar", - "clock", - "clock2", - "alarm" - ], - login: [ - "user", - "users", - "enter", - "exit", - "equalizer", - "equalizer2", - "cog" - ], - afknav: [ - "compass", - "compass2", - "location", - "location2", - "map", - "map2", - "office", - "home", - "lab", - "binoculars" - ], - fediverse: [ - "mastodon", - "diaspora", - "peertube", - "pixelfed", - "rss", - "rss-square" - ], - socials: [ - "instagram", - "twitter", - "wordpress", - "nextcloud", - "dropbox", - "vk", - "tripadvisor", - "facebook", - "tiktok", - "twitch", - "vimeo", - "youtube", - "reddit", - "blogger", - "medium", - "stackoverflow", - "quora", - "pinterest", - "tumblr", - "unsplash", - "behance", - "deviantart", - "dribbble", - "notion", - "pocket", - "feedly", - "steam" - ], - privacy: [ - "gnuprivacyguard", - "tor", - "signal", - "ublockorigin", - "riot" - ], - spyware: [ - "telegram", - "discord", - "whatsapp", - "skype", - "slack", - "messenger" - ], - edit: [ - "bold", - "italic", - "underline", - "strikethrough", - "ligature", - "sigma", - "omega", - "text-height", - "text-width", - "font-size", - "paragraph-center", - "paragraph-justify", - "paragraph-left", - "paragraph-right", - "stats-bars", - "stats-dots", - "pie-chart", - "scissors", - "crop", - "quill", - "pen", - "pencil", - "pencil2", - "quotes-left", - "quotes-right", - "copy", - "paste", - "paint-format", - "list-numbered", - "list-check", - "list-bullet", - "filter", - "sort-alpha-asc", - "sort-alpha-desc", - "sort-numberic-desc", - "sort-numeric-asc", - "table", - "table2", - "eyedropper", - "droplet" - ], - ratings: [ - "star-empty", - "star-full", - "star-half", - "heart", - "heart-broken" - ], - keyboard: [ - "tab", - "shift", - "ctrl", - "opt", - "command" - ], - media: [ - "play", - "pause", - "stop", - "previous", - "next", - "backward", - "forward", - "first", - "last", - "play-circle", - "pause-circle", - "stop-circle", - "previous-circle", - "next-circle", - "backward-circle", - "forward-circle", - "volume-decrease", - "volume-increase", - "volume-mute", - "volume-mute2", - "volume-low", - "volume-medium", - "volume-high", - "loop", - "loop2", - "shuffle", - "infinite", - "play-yt", - "eject", - "airplayaudio", - "airplayvideo" - ], - files: [ - "folder", - "folder-open", - "folder-download", - "folder-upload", - "folder-plus", - "folder-minus", - "image", - "images", - "file-empty", - "file-music", - "file-picture", - "file-play", - "file-text2", - "file-video", - "file-zip", - "files-empty", - "box-add", - "box-remove", - "film" - ], - devices: [ - "display", - "tablet", - "mobile", - "tv", - "video-camera", - "camera", - "headphones", - "mic", - "printer", - "keyboard", - "phone", - "phone-hang-up", - "raspberrypi", - "arduino", - "terminal" - ], - screen: [ - "sun", - "brightness-contrast", - "contrast", - "eye", - "eye-blocked", - "eye-minus", - "eye-plus" - ], - programing: [ - "c", - "go", - "python", - "ruby", - "rust", - "php", - "vue-dot-js", - "react", - "angular", - "svelte", - "npm", - "html5", - "css3", - "javascript", - "typescript", - "postgresql", - "docker", - "git", - "gitea", - "github", - "gitlab", - "jupyter", - "blender", - "inkscape" - ], - spinners: [ - "spinner", - "spinner2", - "spinner3" - ], - license: [ - "cc", - "cc-zero", - "cc-sa", - "cc-nd", - "cc-nc", - "cc-remix", - "cc-by", - "cc-share", - "amicale", - "gpl", - "lgpl", - "agpl", - "wtfpl", - "ofl", - "mit", - "bsd" - ] - } + data() { + return { + os: [ + "gnu", + "debian", + "void", + "archlinux", + "gentoo", + "redhat", + "fedora", + "manjaro", + "linuxmint", + "freebsd", + "apple", + "windows" + ], + streaming: [ + "bandcamp", + "spotify", + "applemusic", + "soundcloud", + "tidal" + ], + payment: [ + "cart", + "price-tag", + "price-tags", + "barcode", + "qrcode", + "ticket", + "credit-card", + "visa", + "mastercard", + "applepay", + "paypal", + "bitcoin", + "monero", + "ethereum", + "ltc", + "liberapay", + "patreon", + "tipeee", + "flattr" + ], + navigation: [ + "arrow-down", + "arrow-down-left", + "arrow-down-right", + "arrow-left", + "arrow-right", + "arrow-up", + "arrow-up-left", + "arrow-up-right", + "chevron-circle-down", + "chevron-circle-left", + "chevron-circle-right", + "chevron-circle-up", + "chevron-down", + "chevron-left", + "chevron-right", + "chevron-up", + "circle-down", + "circle-left", + "circle-right", + "circle-up", + "zoom-in", + "zoom-out", + "undo", + "redo", + "undo-arrow", + "redo-arrow", + "forward-arrow", + "reply-arrow", + "envelope", + "envelope-open", + "bubble", + "bubbles", + "bubbles2", + "shrink", + "shrink2", + "enlarge", + "enlarge2", + "share", + "share-out", + "search", + "plus", + "minus", + "cross", + "checkmark", + "checkmark-outline", + "link", + "embed", + "embed-slash" + ], + form: [ + "radio-checked", + "radio-checked-alt", + "radio-unchecked", + "checkbox-checked", + "checkbox-unchecked" + ], + network: [ + "tree", + "cloud", + "cloud-check", + "cloud-download", + "cloud-upload", + "upload", + "download", + "switch", + "sphere", + "earth", + "power", + "power-cord", + "wifi" + ], + alert: [ + "warning", + "info", + "question", + "cancel-circle", + "blocked", + "notification", + "floppy-disk", + "trophy", + "newspaper", + "pacman", + "music", + "leaf", + "gift", + "flag", + "bug", + "bell", + "bin", + "bin-alt", + "book", + "books", + "bookmark", + "bookmarks", + "attachment", + "address-book", + "accessibility" + ], + time: [ + "calendar", + "clock", + "clock2", + "alarm" + ], + login: [ + "user", + "users", + "enter", + "exit", + "equalizer", + "equalizer2", + "cog" + ], + afknav: [ + "compass", + "compass2", + "location", + "location2", + "map", + "map2", + "home", + "office", + "lab", + "binoculars" + ], + fediverse: [ + "mastodon", + "diaspora", + "peertube", + "pixelfed", + "rss", + "rss-square" + ], + socials: [ + "instagram", + "twitter", + "wordpress", + "nextcloud", + "dropbox", + "vk", + "tripadvisor", + "facebook", + "tiktok", + "twitch", + "vimeo", + "youtube", + "reddit", + "blogger", + "medium", + "stackoverflow", + "quora", + "pinterest", + "tumblr", + "unsplash", + "behance", + "deviantart", + "dribbble", + "notion", + "pocket", + "feedly", + "steam" + ], + privacy: [ + "gnuprivacyguard", + "tor", + "signal", + "ublockorigin", + "riot" + ], + spyware: [ + "telegram", + "discord", + "whatsapp", + "skype", + "slack", + "messenger" + ], + edit: [ + "bold", + "italic", + "underline", + "strikethrough", + "ligature", + "sigma", + "omega", + "text-height", + "text-width", + "font-size", + "paragraph-center", + "paragraph-justify", + "paragraph-left", + "paragraph-right", + "stats-bars", + "stats-dots", + "pie-chart", + "scissors", + "crop", + "quill", + "pen", + "pencil", + "pencil2", + "quotes-left", + "quotes-right", + "copy", + "paste", + "paint-format", + "eyedropper", + "droplet", + "list-numbered", + "list-check", + "list-bullet", + "filter", + "sort-alpha-asc", + "sort-alpha-desc", + "sort-numberic-desc", + "sort-numeric-asc", + "table", + "table2" + ], + ratings: [ + "star-empty", + "star-full", + "star-half", + "heart", + "heart-broken" + ], + keyboard: [ + "tab", + "shift", + "ctrl", + "opt", + "command" + ], + media: [ + "play", + "pause", + "stop", + "previous", + "next", + "backward", + "forward", + "first", + "last", + "play-circle", + "pause-circle", + "stop-circle", + "previous-circle", + "next-circle", + "backward-circle", + "forward-circle", + "volume-decrease", + "volume-increase", + "volume-mute", + "volume-mute2", + "volume-low", + "volume-medium", + "volume-high", + "loop", + "loop2", + "shuffle", + "infinite", + "play-yt", + "eject", + "airplayaudio", + "airplayvideo" + ], + files: [ + "folder", + "folder-open", + "folder-download", + "folder-upload", + "folder-plus", + "folder-minus", + "image", + "images", + "file-empty", + "file-music", + "file-picture", + "file-play", + "file-text2", + "file-video", + "file-zip", + "files-empty", + "box-add", + "box-remove", + "film" + ], + devices: [ + "display", + "tablet", + "mobile", + "tv", + "video-camera", + "camera", + "headphones", + "mic", + "printer", + "keyboard", + "phone", + "phone-hang-up", + "raspberrypi", + "arduino", + "terminal" + ], + screen: [ + "sun", + "brightness-contrast", + "contrast", + "eye", + "eye-blocked", + "eye-minus", + "eye-plus" + ], + programing: [ + "c", + "go", + "python", + "ruby", + "rust", + "php", + "vue-dot-js", + "react", + "angular", + "svelte", + "npm", + "html5", + "css3", + "javascript", + "typescript", + "postgresql", + "docker", + "git", + "gitea", + "github", + "gitlab", + "jupyter", + "blender", + "inkscape" + ], + spinners: [ + "spinner", + "spinner2", + "spinner3" + ], + license: [ + "cc", + "cc-zero", + "cc-sa", + "cc-nd", + "cc-nc", + "cc-remix", + "cc-by", + "cc-share", + "amicale", + "gpl", + "lgpl", + "agpl", + "wtfpl", + "ofl", + "mit", + "bsd" + ] } + } }).$mount('#root') diff --git a/proj/icons/index.html b/proj/icons/index.html index 450917c..e98da83 100644 --- a/proj/icons/index.html +++ b/proj/icons/index.html @@ -6,7 +6,7 @@ Document - + @@ -14,7 +14,7 @@

Icon font

-

This icon font was created with Icomoon. I tried to group them by category. You can download the whole pack as a zip here. This page can be used to copy the utf8 characters by clicking on the icons. This can be useful to use them in Inkscape or GIMP after installing the .ttf file on your computer. By clicking on the name of the icon, the html span with the appropriate class in your clipboard.

+

This icon font was created with Icomoon. I tried to group them by category. You can download the whole pack as a zip here. This page can be used to copy the utf8 characters by clicking on the icons. This can be useful to use them in Inkscape or GIMP after installing the .ttf file on your computer. By clicking on the name of the icon, the html span with the appropriate class in your clipboard.