ed
/
ed.brz9.dev
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

website update

This commit is contained in:
ed barz 2023-05-25 08:01:04 +02:00
parent 0f521acb07
commit 7109705e29
11 changed files with 2145 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/colors.css
View File

@ -2,6 +2,7 @@
--black: #232D37;
--white: #FAE2D3;
--success: #3CB57F;
--link: hsl(14, 100%, 74%);
--fail: #F52D0A;
--fg: #e9d2d2;
}

12
assets/css/style.css
View File

@ -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;
}

5
index.php
View File

@ -20,7 +20,10 @@
<main id="root" class="homepage">
<p>Bienvenu sur mon site.</p>
<p></p>
<a href="dico/">Discographie</a>
<a href="proj/">Projets</a>
<a href="ressources/">Ressources</a>
</main>

35
proj/fonts/README.md Normal file
View File

@ -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')

1400
proj/fonts/fonts.js Normal file
View File

File diff suppressed because it is too large Load Diff

34
proj/fonts/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.2/style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/base/all.css">
</head>
<body>
<div id="root">
<main>
<h3>Fonts</h3>
<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>
<fontdemo v-for="font in this.typefaceList" :typeface="font">{{ testText }}</fontdemo>
</main>
</div>
</body>
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
<script src="fonts.js"></script>
</html>

169
proj/fonts/style.css Normal file
View File

@ -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;
}

930
proj/icons/icons.js
View File

@ -1,473 +1,471 @@
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>
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('"', '')
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('"', '')
}
})
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')

16
proj/icons/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.2/style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.2/brz9-icon-v2.2.css">
</head>
<body>
@ -14,7 +14,7 @@
<main>
<h1>Icon font</h1>
<p>This icon font was created with <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer">Icomoon</a>. I tried to group them by category. You can download the whole pack as a zip <a href="brz9-v2.1.zip" target="_blank" rel="noopener noreferrer">here</a>. 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.</p>
<p>This icon font was created with <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer" class="ext">Icomoon</a>. I tried to group them by category. You can download the whole pack as a zip <a href="brz9-v2.1.zip" target="_blank" rel="noopener noreferrer" class="ext">here</a>. 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.</p>
<nav>
<ul>
@ -91,6 +91,18 @@
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-login">Login</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in login" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-afknav">AFK Navigation</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in afknav" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-fediverse">Fediverse</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in fediverse" :key="icon">

18
proj/icons/style.css
View File

@ -2,22 +2,20 @@
div.single-icon {
display: inline-block;
width: 200px;
height: 100px;
width: 120px;
height: 80px;
margin: 10px;
text-align: center;
}
div.single-icon code {
font-size: 1rem;
}
div.single-icon p {
margin-top: 15px;
font-size: 1rem;
line-height: normal;
}
div.single-icon span.actual-icon {
font-size: 3rem;
font-size: 2rem;
color: inherit !important;
}
@ -73,10 +71,10 @@ div.icongrid {
}*/
div.icon-grid-item {
display: inline-block;
display: inline-flex;
border: 4px solid var(--white);
padding-top: 20px;
padding-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin: -2px;
}

6
proj/index.php
View File

@ -26,9 +26,11 @@
<main id="root">
<h3>Lorem Ipsum</h3>
<h3>Projets</h3>
<a href="chordboard/">Un clavier d'accords</a>
<a href="chordboard/">Chord board</a>
<a href="fonts/">Font book</a>
<a href="icons/">Icons</a>
</main>