website update
This commit is contained in:
parent
0f521acb07
commit
7109705e29
|
|
@ -2,6 +2,7 @@
|
|||
--black: #232D37;
|
||||
--white: #FAE2D3;
|
||||
--success: #3CB57F;
|
||||
--link: hsl(14, 100%, 74%);
|
||||
--fail: #F52D0A;
|
||||
--fg: #e9d2d2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -263,3 +263,15 @@ section.comments {
|
|||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a.ext {
|
||||
color: var(--link) !important;
|
||||
}
|
||||
|
||||
a.ext::after {
|
||||
font-family: "brz9";
|
||||
content: "\e9cb";
|
||||
|
||||
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
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}"
|
||||
|
|
@ -226,8 +224,8 @@ let vm = new Vue({
|
|||
"location2",
|
||||
"map",
|
||||
"map2",
|
||||
"office",
|
||||
"home",
|
||||
"office",
|
||||
"lab",
|
||||
"binoculars"
|
||||
],
|
||||
|
|
@ -312,6 +310,8 @@ let vm = new Vue({
|
|||
"copy",
|
||||
"paste",
|
||||
"paint-format",
|
||||
"eyedropper",
|
||||
"droplet",
|
||||
"list-numbered",
|
||||
"list-check",
|
||||
"list-bullet",
|
||||
|
|
@ -321,9 +321,7 @@ let vm = new Vue({
|
|||
"sort-numberic-desc",
|
||||
"sort-numeric-asc",
|
||||
"table",
|
||||
"table2",
|
||||
"eyedropper",
|
||||
"droplet"
|
||||
"table2"
|
||||
],
|
||||
ratings: [
|
||||
"star-empty",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue