Ajout de couleurs css

This commit is contained in:
kitoy 2023-10-06 05:14:12 +02:00
parent 4f4a9bc5bf
commit 62e21ce417
13 changed files with 321 additions and 177 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
public/
update.sh
content/googleef522002f5b05e71.html

View File

@ -1,6 +1,11 @@
# The URL the site will be built for
base_url = "https://kitoy.me"
title = "kitoy.me"
title = "Bienvenue sur kitoy.me"
description = "Tutroriels informatique OpenBSD et Linux, Jardinage, Compositions musicales"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true

View File

@ -9,7 +9,7 @@ J'ai décidé d'écrire un article sur la récente migration de masse suite au f
## Un avis mitigé
Ouaip, j'ai un avis un peu partagé sur la saga de ce rachat… À la fois, je suis content que les utilisateurs d'une plateforme manifeste leur mécontentement et en même temps quand je vois que la direction du Twitter était prête à assigné Monsieur E.Musk en justice quand il a dit : "finalement non..." Bien, je me dis qu'ils ont n'en ont vraiment rien à foutre des gens qui ont fait vivre et fait que cette plateforme se vende à prix d'or aujourd'hui.
Ouaip, j'ai un avis un peu partagé sur la saga de ce rachat… À la fois, je suis content que les utilisateurs d'une plateforme manifeste leur mécontentement et en même temps quand je vois que la direction de Twitter était prête à assigné Monsieur E.Musk en justice quand il a dit : "finalement non..." Bien, je me dis qu'ils en ont vraiment rien à foutre des gens qui ont fait vivre et fait que cette plateforme se vende à prix d'or aujourd'hui.
Certes Elon Musk n'est pas une personnalité très appréciable avec un égo démesuré comme beaucoup de personnes ayant son compte en banque et son influence, mais je suis étonné que la migration se fasse une fois le rachat effectué et pas avant; en voyant l'ignorance que les dirigeants actuels de Twitter ont eu pour les utilisateurs·rices.
@ -19,7 +19,7 @@ Et ça tombe bien, car c'est tombé sur quelqu'un à qui ça ne va pas bien fair
## Putain, mais arrête, ça n'a rien à voir avec le titre là !
Ben si un peu, si je commence avec intro peut être un peu maladroite (ouais tkt ça m'connait) c'est parce que Mastodon est très différent de Twitter sur ces points-là essentiellement. Mastodon c'est le nom d'un programme déjà… et pas d'une plateforme ou encore d'une entreprise. C'est un programme que l'on installe sur un ordinateur connecté à internet et qui fait des trucs. Là, c'est du microblogging en l'occurrence, du coup il y a des personnes qui s'y connaissent en ordinateur qui installe ce programme et le rendent disponible aux gens sur Internet; c'est le principe d'un service sur Internet. Souvent, c'est une asso, un groupe de potes, une seule personne qui s'occupe de cet ordinateur et ça change beaucoup de choses et si ça vous dit, vous pouvez faire pareil.
Ben si un peu, si je commence avec cette intro peut être un peu maladroite (ouais tkt ça m'connait) c'est parce que Mastodon est très différent de Twitter sur ces points-là essentiellement. Mastodon c'est le nom d'un programme déjà… et pas d'une plateforme ou encore d'une entreprise. C'est un programme que l'on installe sur un ordinateur connecté à internet et qui fait des trucs. Là, c'est du microblogging en l'occurrence, du coup il y a des personnes qui s'y connaissent en ordinateur qui installe ce programme et le rendent disponible aux gens sur Internet; c'est le principe d'un service sur Internet. Souvent, c'est une asso, un groupe de potes, une seule personne qui s'occupe de cet ordinateur et ça change beaucoup de choses et si ça vous dit, vous pouvez faire pareil.
Alors pourquoi ils font ça ?
@ -27,10 +27,10 @@ Alors pourquoi ils font ça ?
Et oui contrairement aux gens derrière Twitter qui cherchent à faire de l'argent, eux le font pour leur plaisir, car ils aiment ces trucs cool et pratiques qu'ont amenés les réseaux sociaux dans notre vie quotidienne. Tu vois de quoi je parle, car tu le fais aussi sur Twitter je te fais une petite liste non exhaustive :
* Faire profiter des photos des vacances à sa famille et ses amis
* Partager ses dernières créations !
* Relayer des articles/musiques/videos qu'on a trouvé qu'on a aimé
* Resté en contact avec des gens qu'on a rencontré à une soirée ou un évènement.
* Faire profiter des photos des vacances à sa famille et ses amis
* Partager ses dernières créations !
* Relayer des articles/musiques/videos qu'on a trouvé qu'on a aimé
* Resté en contact avec des gens qu'on a rencontré à une soirée ou un évènement.
* S'informer (Tain celle-là elle est drôle)
* Gueuler de la merde en pleine place publique. (Oui Twitter et les réseaux sociaux, c'est comme une place publique)
@ -48,13 +48,13 @@ Ce qui diffère des plateformes commerciales (Twitter et cie) c'est qu'il est ra
* Les gens qui s'occupent du service ont une vie et font ce qu'ils peuvent pour faire le bonheur de leurs utilisateurs·rices et ne doivent rien à des actionnaires.
L'ordinateur sur lequel est installé le programme et la connexion internet derrière, en général, c'est les gens qui fournissent le service qui la paye. Ce n'est pas vraiment l'argent qui ça leur rapporte qui les intéressent, mais plus la liberté que ça leur donne. Généralement, ça leur coute plus d'argent que ça en leur rapporte et ils peuvent demander des dons pour financer l'achat de matériel ou pour financer la connexion internet nécessaire au fonctionnement du service.
L'ordinateur sur lequel est installé le programme et la connexion internet derrière, en général, c'est les gens qui fournissent le service qui la paye. Ce n'est pas vraiment l'argent que ça leurs rapportent qui les intéressent, mais plus la liberté que ça leur donne. Généralement, ça leurs coutent plus d'argent que ça en leurs rapportent et ils peuvent demander des dons pour financer l'achat de matériel ou pour financer la connexion internet nécessaire au fonctionnement du service.
Hé oui, chaque personne derrière une instance fait ce qu'elle peut pour faire fonctionner le logiciel avec des moyens souvent modeste ( surtout comparé aux plateformes commerciales ). C'est bien d'en avoir conscience, car si le service ne marche plus ne t'inquiète pas les administrateurs sont aussi confus·es que toi sinon plus, ils sont autant emm.... que toi et en plus, ils/elles font le taf pour remettre le truc sur pied. Donc si tu as des problèmes pour accéder à ton service Mastodon fait comme moi quand il me prend l'envi de travailler : *Assis toi et attend que ça passe !* Généralement, ils/elles font ce qu'ils peuvent et il y a beaucoup de bonne volonté derrière.
### Toi aussi participes aux plaisirs des autres !
Bon, tu viens de t'inscrire tout seul où avec ta bande de copains/copines et tout va bien ! Quand tu arrives sur Mastodon, la meilleure chose à faire, c'est un peu comme quand tu rentres dans un bistrot ou une fête où tu ne connais personne. Dis simplement : "Salut je viens d'arriver, ça a l'air cool ici !" ou un truc du genre, un truc gentil quoi ! T'as compris ! Tu verras, tu vas avoir des réponses gentilles, des partages, ça va lancer la machine et ça va faire plaisir à tout le monde ! Les gens sont très accueillants sur Masto.
Bon, tu viens de t'inscrire tout seul ou avec ta bande de copains/copines et tout va bien ! Quand tu arrives sur Mastodon, la meilleure chose à faire, c'est un peu comme quand tu rentres dans un bistrot ou une fête où tu ne connais personne. Dis simplement : "Salut je viens d'arriver, ça a l'air cool ici !" ou un truc du genre, un truc gentil quoi ! T'as compris ! Tu verras, tu vas avoir des réponses gentilles, des partages, ça va lancer la machine et ça va faire plaisir à tout le monde ! Les gens sont très accueillants sur Masto.
Comporte-toi comme un abruti et ça se passera mal et tu vas gâcher le plaisir de tout le monde, au mieux tu vas générer du bruit et ton ego de troll sera content, mais très vite, tu seras banni et désinscrit non pas par un algorithme, mais par des gens qui seront tous d'accord pour que tu dégages ! Vraiment comme dans une teuf quoi.
@ -76,7 +76,7 @@ Mais tu peux très bien t'abonner à des gens qui sont un serveur différent. En
Dans le fil global, il y a les posts de tous les abonnements des utilisateurs·rices du serveur mis en commun. Et ça, c'est plutôt cool, car du coup sur un serveur qui affiche un thème précis ou des gens qui se retrouve autour d'idées politiques ou autres, on va moins avoir le cas ou des personnes irréconciliables doivent se supporter les uns les autres. Ça fait des petites communautés qui interagissent les unes avec les autres sans encourager le conflit social. Chaque utilisateur·rice est donc partie prenante de ce qui se retrouve dans le fil global du serveur et c'est plutôt cool :tada: .
Donc pour résumer, on a :
### Donc pour résumer, on a :
* Ton fil perso où il y a tes abonnements
* Le fil local où les posts de utilisateurs·rices du serveur

View File

@ -4,6 +4,7 @@ date = 2021-11-08
description = "Plusieurs solutions pour faire de bonnes sauvegardes :sourire: "
template = "articles.html"
+++
# Réaliser ses sauvegardes sous OpenBSD
Je vais tenter dans cet article de vous présenter mes diverses solutions pour réaliser ses sauvegardes sous OpenBSD ainsi qu'une solution plus personnelle et plus rapide que j'utilise depuis un bon bout de temps.
@ -14,34 +15,35 @@ Ouais ! Bon alors avec OpenBSD il y a deux méthodes vraiment sympas, je te donn
### Le dossier /altroot
Donc le principe du dossier /altroot c'est que si ton premier disque tombe en panne, hé ben c'est le disque que tu vas monter sur le dossier /altroot qui prendra le relais ! Ainsi pour mon serveur autohebergé, j'ai une grosse partition racine et comme ça tout est sauvegardé dedans chaque nuit à MINUIT; et quand mon disque SSD se cassera (j'en ai jamais cassé) hé bien j'aurais le disque de secours prêt à démarrer et je pourrais recommencer le processus avec un autre disque.
Donc le principe du dossier /altroot c'est que si ton premier disque tombe en panne, hé ben c'est le disque que tu vas monter sur le dossier /altroot qui prendra le relais ! Ainsi pour mon serveur autohebergé, j'ai une grosse partition racine et comme ça tout est sauvegardé dedans chaque nuit à MINUIT; et quand mon disque SSD se cassera (j'en ai jamais cassé) hé bien j'aurais le disque de secours prêt à démarrer et je pourrais recommencer le processus avec un autre disque.
### Dump et restore
Ensuite il y a une méthode avec dump et restore, l'avantage de cet outil, c'est sait automagiquement ce qu'il faut sauvegarder comme fichier ou pas. Il ne les choisit pas hein, il n'y pas d'IA de m..... ou quoi, il sait simplement que tels fichiers sont générés par des processus ou au démarrage et ne concerne pas les données des utilisateurs alors, il ne les sauvegarde pas. Ça évite les erreurs lors de copies massives. Et de se prendre la tête, à savoir les dossiers à exclure ou pas.
Là aussi, tu peux brancher un disque en USB ou autres et sauvegarder les dossiers qui t'intéressent avec la commande :
Là aussi, tu peux brancher un disque en USB ou autres et sauvegarder les dossiers qui t'intéressent avec la commande:
**cd /Mon\_dossier/a sauvegarder && dump 0f - . | (cd /mon\_dossier\_de\_sauvegarde && restore -rf - )**
cd /Mon_dossier_a_sauvegarder && dump 0f - . | (cd /mon_dossier_de_sauvegarde && restore -rf - )
## Ouais, mais les sauvegardes, elles doivent être un peu longue là non ?
Ouais, mais on s'en fout un peu dans ce cas-là, tu ne vas pas brancher ton disque avant de partir prendre le train en devant absolument le débrancher quand c'est fini sinon ce n'est pas bon ! C'est complètement con.
Ouais, mais on s'en fout un peu dans ce cas-là, tu ne vas pas brancher ton disque avant de partir prendre le train en devant absolument le débrancher quand c'est fini sinon ce n'est pas bon ! C'est complètement con.
Ce que je fais pour être un plus rapide, c'est que je sauvegarde aussi sur ma station de travail les données de mon serveur. Elles sont chiffrées pour l'essentiel et le disque de ma station de travail est chiffré aussi. Et au moins en cas de pépins ou que sais-je, ben j'ai une copie de secours disponible rapidement. Par contre là c'est intéressant que ce soit rapide. Je veux une modif sur le serveur; je sauvegarde vite fait et hop ! En avant les conneries !
Donc j'utilise rsync pour ça et ca fonctionne bien jusqu'a présent:
rsync -av --exclude={'run', 'cache'} -e "ssh -i ma\_clef\_ssh" [root@kitoy.me](mailto:root@kitoy.me):/var/ sauvegarde\_serveur/var/
rsync -av -e "ssh -i ma\_clef\_ssh" [root@kitoy.me](mailto:root@kitoy.me):/home/ sauvegarde\_serveur/home/
rsync -av --exclude={'run', 'cache'} -e "ssh -i ma\_clef\_ssh" root@kitoy.me:/var/ sauvegarde_serveur/var/
rsync  -av -e "ssh -i ma\_clef\_ssh" [root@kitoy.me](mailto:root@kitoy.me):/etc/ sauvegarde\_serveur/etc/
rsync -av -e "ssh -i ma_clef_ssh" root@kitoy.me:/home/ sauvegarde_serveur/home/
rsync -av -e "ssh -i ma_clef_ssh" root@kitoy.me:/etc/ sauvegarde\_serveur/etc/
Et puis pour les bases de données, je finis avec un pg dans Paul comme ceci :
ssh -i mes\_clef [root@kitoy.me](mailto:root@kitoy.me) pg\_dumpall -U votreuser > sauvegarde\_serveur/save\_postgres.sql
ssh -i ma_clef root@kitoy.me pg_dumpall -U votreuser > sauvegarde_serveur/save_postgres.sql
J'ai bien évidemment tout ça dans un script et donc je peux faire ces opérations en une commande et ça prend quelques minutes à moins d'une minute selon s'il y a de l'activité ou pas… Je sais que : plus je le fais; plus c'est rapide. Plus je tarde, plus c'est long. Donc ça encourage à en faire souvent.
J'ai bien évidemment tout ça dans un script et donc je peux faire ces opérations en une commande et ça prend quelques minutes à moins d'une minute selon s'il y a de l'activité ou pas… Je sais que: plus je le fais; plus c'est rapide. Plus je tarde, plus c'est long. Donc ça encourage à en faire souvent.
## Ouais, mais pourquoi tu fais ça comme ça ... tu peux générer des archives en local et les récupérer, c'est plus simple ?

View File

@ -1,3 +1,4 @@
+++
title = "Une mini centrale électrique Bluetti"
date = 2023-08-24
@ -74,11 +75,11 @@ Là-encore pas de miracles (comme annoncer sur un site de vidéos en ligne), se
La première si je fais le choix de moins consommer d'électricité, c'est rajouté un limiteur de puissance [comme ça](https://reeline.fr/product-fre-21941-Limiteur-de-puissance-electrique-consommee-pour-circuits-avec-transformateurs-de-courant-p-ex-LED-et-temps-de-retour-reglable-OM-632-F-F.htmll) au tableau électrique de ma maison pour éviter d'éventuels désagréments, comme ça, si je ne fais pas attention à la consommation dans la maison cela n'impactera pas le petit Datacenter.
La deuxième serait de connecter toutes le circuits des trucs qui consomment directement sur la ligne du fournisseur. Genre le chauffage électrique les prises dans le jardin si je branche une machine qui consomme (broyeur, tronconneurse, etc. J'ai déjà un répartiteur [comme ça](https://www.lelectricien.net/repartiteur-modulaire/2976-8187-repartiteur-bipolaire.html#/1077-nombre_de_depart-repartieur_bipolaire_14_departs_125a) prévue à cet effet. Biensur il faut mettre ce répartiteur après le dijoncteur différentiels 30mA et un fusible sur chaque départs.
La deuxième serait de connecter tous les circuits des trucs qui consomment sans avoir besoin d'être alimentés absolument, directement sur la ligne du fournisseur. Genre le chauffage électrique les prises dans le jardin si je branche une machine qui consomme (broyeur, tronconneurse, etc. J'ai déjà un répartiteur [comme ça](https://www.lelectricien.net/repartiteur-modulaire/2976-8187-repartiteur-bipolaire.html#/1077-nombre_de_depart-repartieur_bipolaire_14_departs_125a) prévue à cet effet. Biensur il faut mettre ce répartiteur après le dijoncteur différentiels 30mA et un fusible sur chaque départs.
### En conclusion qu'est-ce que tu me conseilles frère !?
Hé bien en conclusion, les conseilleurs ne sont pas les payeurs, retiens bien ça, ça te servira dans la vie, mais bref si j'avais eu les finances pour partir sur du neuf moi j'aurais choisi le AC500+B300S directement et au moins je serai plus tranquille et même si je les consommes jamais au moins j'ai de la marge.
Mais comme mes finances ne sont pas très élevées les modèles AC300 plus la batterie B300 se trouve a moins de 2000€ d'occasions et les panneaux solaires ça se trouve d'occasion pour pas trop cher non plus. C'est une bonne façon de commencer l'autoconsommation électrique pour moi, car ça évite de se retrouver sans courant sur une trop longue période parce qu'on a fait un mauvais calcul parce qu'on a pas l'habitude et que donc on a vidé notre batterie parce qu'on a vu tous les équipements qui consomment trop. Du coup, on peut dimensionner correctement son installation découvrir/choisir de moins consommer d'énergie ou pas et en prime avoir une sécurité sur son installation électrique tout en gagnant un peu d'indépendance. Ça permet de lisser les augmentations du coût de l'énergie sans pour autant avoir les inconvénients de s'en passer totalement.
Mais comme mes finances ne sont pas très élevées les modèles AC300 plus la batterie B300 se trouve à moins de 2000€ d'occasions et les panneaux solaires ça se trouve d'occasion pour pas trop cher non plus (~80€/250W). C'est une bonne façon de commencer l'autoconsommation électrique pour moi, car ça évite de se retrouver sans courant sur une trop longue période parce qu'on a fait un mauvais calcul parce qu'on a pas l'habitude et que donc on a vidé notre batterie parce qu'on a pas vu tous les équipements qui consomment trop. Du coup, on peut dimensionner correctement son installation découvrir/choisir de moins consommer d'énergie ou pas et en prime avoir une sécurité sur son installation électrique tout en gagnant un peu d'indépendance. Ça permet de lisser les augmentations du coût de l'énergie sans pour autant avoir les inconvénients de s'en passer totalement.

View File

@ -2,36 +2,39 @@
@import "./color.scss";
@import "./fonts.scss";
$font-stack: 'Rosa Black Sans', sans-serif;
html{
height: 100%;
width: 80%;
margin-left: 10%;
}
body {
font-weight: 700;
color: $color_lines;
background-color: $back;
color: $color_lines;
background-color: $back;
}
.icon{
margin-bottom:5px;
}
.icons{
width:26px;
height:26px;
margin-top:10px;
.icons img {
width: 2vw;
height: 2vw;
margin-top: 10px;
display:inline-block;
align-items:center;
background-color: $color_title;
border-radius: 50%;
}
hr {
color: $color_lines;
}
* {-moz-box-sizing: border-box; box-sizing: border-box;}
@ -44,7 +47,7 @@
margin-bottom: 0;
}
.slug{
.slug {
//margin-left: 1rem;
text-align: left;
margin-bottom: 2rem;
@ -93,8 +96,8 @@
border-radius: 50%;
position: fixed;
margin: 140px;
margin-left: 110px;
top: 100px;
margin-left: 10%;
top: 20%;
bottom: 0px;
left: 0px;
right: 0px;
@ -102,20 +105,21 @@
.toggle h2 {
margin-top : 1.5em;
color: $back;
}
.menu {
background-color: $color_lines;
background-color: $color_title;
height: 100px;
width: 100px;
transform: scale(0);
border-radius: 50%;
border-style: double;
border-color: $color_button;
border-color: $color_lines;
position: fixed;
margin-top: 140px;
margin-left: 110px;
top: 100px;
margin-left: 10%;
top: 20%;
bottom: 0px;
left: 0px;
right: 0px;
@ -123,6 +127,7 @@
transition: 0.7s;
}
.menu a {
display: inline-block;
position: fixed;
@ -130,91 +135,107 @@
color: $back;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu p{
margin-top: -4px;
font-size: 5px;
.menu p {
margin-top: -4px;
font-size: 5px;
}
//Accueil
a:nth-child(1){
top: 3px;
left: 37px;
top: 3px;
left: 37px;
}
//Musique
a:nth-child(2){
top: 35px;
left: 7px;
top: 35px;
left: 7px;
}
// Le blog
a:nth-child(3){
top: 67px;
left: 37px;
top: 67px;
left: 37px;
}
//contact
a:nth-child(4){
top: 35px;
left: 69px;
top: 35px;
left: 69px;
}
a:nth-child(6){
top: 15px;
left: 35px;
}
}
.articles {
margin-left: 21rem;
margin-top: 5rem;
margin-bottom: 3rem;
padding:0.5em;
border: 7px double;
border-color: $color_lines;
border-radius: 10px 10px 10px 10px;
margin-left: 21rem;
margin-top: 5rem;
margin-bottom: 3rem;
padding:0.5em;
border: 7px double;
border-color: $color_lines;
border-radius: 10px 10px 10px 10px;
line-height: 1.5;
letter-spacing: 0.1vw;
}
.articles h1 {
color: $color_lines;
text-align: center;
.articles ul {
list-style-type: disc;
margin: 5vw;
padding-top: 1vw;
padding-bottom: 1vw;
padding-left: 1.5vw;
}
.articles h2, h3, h4 {
color: $color_title;
}
.articles .titre {
color: $color_title;
text-align: center;
}
.articles img {
height: 300px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-bottom: 2vw;
}
.articles .description {
text-align: center;
font-weight: 300;
font-style: italic;
font-size: 17px;
padding-bottom: 30px;
color: $color_lines;
.articles .description {
text-align: center;
font-weight: 300;
font-style: italic;
font-size: 1vw;
padding-bottom: 30px;
color: $color_text;
}
.pagination a {
border: 1px solid;
border-color: $color_title;
padding: 3px;
font-size: 13px;
border: 1px solid;
border-color: $color_title;
padding: 3px;
font-size: 13px;
}
.center {
margin: auto;
width: 50%;
padding: 10px;
margin: auto;
width: 50%;
padding: 10px;
}
.contact{
@ -222,94 +243,159 @@ ul {
}
footer {
position: relative;
bottom:0px;
width: 100%;
text-align:center;
position: relative;
bottom:0px;
width: 100%;
text-align:center;
}
@media only screen and (max-width: 980px)
{
.articles {
margin-left: 0;
position: relative;
}
.articles .description {
font-size: 4vw;
}
.articles {
margin-left: 0;
position: relative;
font-size: 3.5vw;
}
.toggle {
display:none;
}
.toggle {
display:none;
}
.menugauche {
max-width: unset;
position: sticky;
top: 0px;
z-index: 5;
width: 100%;
}
.menugauche {
max-width: unset;
position: sticky;
top: 0px;
z-index: 5;
width: 100%;
}
.menu {
width: 100%;
height: 13vw;
border-radius: 0%;
border: 5px double;
border-color: $color_button;
position: sticky;
margin-top: 0rem;
border-radius: 10px 10px 10px 10px;
margin-bottom: 0px;
margin-left: 0;
transform: none;
}
.menu a
{
display: inline-block;
position: absolute;
}
.menu img
{
transform: scale(4)
}
.menu p
{
margin:0.3rem;
font-size: 13px
}
.menu img:hover{
transform: scale(5);
}
a:nth-child(1){
top: 4vw;
left: 20%;
}
.menu {
width: 100%;
height: 13vw;
border-radius: 0%;
border: 5px double;
border-color: $color_button;
position: sticky;
margin-top: 0rem;
border-radius: 10px 10px 10px 10px;
margin-bottom: 0px;
margin-left: 0;
transform: none;
}
a:nth-child(4){
top: 4vw;
left: 40%;
}
a:nth-child(2){
top: 4vw;
left: 60%;
}
a:nth-child(3){
top: 4vw;
left: 80%;
}
.menu a {
display: inline-block;
position: absolute;
}
footer {
font-size: 3vw;
}
.icons img {
width: 7vw;
height: 7vw;
margin: 20px;
display:inline-block;
align-items:center;
}
.menu img {
transform: scale(4)
}
.articles img {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
.menu p {
margin:0.3rem;
font-size: 13px
}
.menu img:hover{
transform: scale(5);
}
a:nth-child(1){
top: 35px;
left: 20%;
}
a:nth-child(4){
top: 35px;
left: 40%;
}
a:nth-child(2){
top: 35px;
left: 60%;
}
a:nth-child(3){
top: 35px;
left: 80%;
}
}
@media only screen and (max-width: 980px){
.menu p{
display:none;
}
.menu {
align-self: center;
// margin-right: 0rem;
}
html{
height: 100%;
width: 100%;
margin: 0;
}
.menu p{
display:none;
}
.menu {
align-self: center;
}
}
@media only screen and (max-width: 768px)
{
.menu {
height: 15vw;
}
.menu img {
max-width: 10px;
max-height: 10px;
}
.title h1 {
font-size: 5vw;
}
.icons img {
width: 7vw;
height: 7vw;
margin: 20px;
display:inline-block;
align-items:center;
}
}

View File

@ -1,8 +1,9 @@
/* Autonme */
/*$color_lines: #88A850;
$grey: #A3A599;
$color_button: #FBCD4B;
$back: #282623;*/
$color_lines: #fff487;
$color_text: #fff487;
$color_title: #D39050;
$color_button: #fff487;
$back: #45050C;
/* Hiver */
/*
@ -12,7 +13,10 @@ $color_button: #D70026;
$back: #000B29;
*/
/* Printemps */
$color_lines: #DFE166;
$color_title: #9A9EAB;
$color_button: #ED5752;
$back: #282529;
/*
$color_lines: #DF8C76;
$color_title: #DF8C76;
$color_button: #152A25;
$back: #152A25;
*/

View File

@ -1 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
<g>
<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
<g>
<g>
<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"/>
</g>
</g>
</g>
<script xmlns=""/></svg>

Before

Width:  |  Height:  |  Size: 307 B

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -1 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="svg2" sodipodi:version="0.32" inkscape:version="0.47 r22583" inkscape:output_extension="org.inkscape.output.svg.inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" sodipodi:docname="rss-feed.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<path fill="#E15A00" d="M9.496,210.008c0,19.6,15.888,35.486,35.486,35.486h164.034c19.604,0,35.487-15.889,37.487-34.82 l-0.001-164.013c-1.999-20.266-17.888-36.155-37.484-36.155H44.982c-19.599,0-35.486,15.889-35.486,35.487V210.008z"/>
<g id="layer1" transform="translate(-373.642,-318.344)" inkscape:groupmode="layer" inkscape:label="Layer 1">
<path id="path5270" sodipodi:cy="200.64285" sodipodi:type="arc" sodipodi:cx="360.35715" sodipodi:rx="24.642859" sodipodi:ry="23.928572" fill="#FFFFFF" d=" M469.09,505.078c0,11.498-9.598,20.817-21.438,20.817c-11.84,0-21.438-9.319-21.438-20.817c0-11.496,9.599-20.816,21.438-20.816 C459.491,484.262,469.09,493.582,469.09,505.078z"/>
<path id="path5805" sodipodi:nodetypes="ccccc" fill="#FFFFFF" d="M426.835,455.057l-0.073-30.273 c64.706,3.375,100.618,49.674,101.5,101.939h-30.318C497.441,480.781,466.204,456.728,426.835,455.057z"/>
<path id="path5807" sodipodi:nodetypes="ccccc" fill="#FFFFFF" d="M427.202,404.572l-0.879-30.758 c99.428,4.616,152.676,76.769,153.348,152.909l-31.197-0.439C549.839,477.58,513.808,406.017,427.202,404.572z"/>
</g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="102.5" y1="-491.002" x2="102.5" y2="-598.5135" gradientTransform="matrix(1 0 0 -1 25.5 -353)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.15"/>
<stop offset="0.6626" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M9.496,115.402v94.606c0,19.6,15.888,35.486,35.487,35.486h164.033 c19.604,0,35.488-15.889,37.488-34.82v-95.952c-36.779,15.182-77.074,23.577-119.337,23.577 C85.542,138.299,45.825,130.154,9.496,115.402z"/>
</g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="102.4995" y1="-364.168" x2="102.4995" y2="-491.7969" gradientTransform="matrix(1 0 0 -1 25.5 -353)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.66" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M209.018,10.505H44.983c-19.599,0-35.487,15.889-35.487,35.487v69.409 c36.33,14.751,76.046,22.897,117.671,22.897c42.263,0,82.558-8.396,119.336-23.577v-68.06 C244.504,26.395,228.615,10.505,209.018,10.505z"/>
<path fill="none" stroke="#E15A00" stroke-width="2" stroke-miterlimit="10" d="M246.503,114.721V46.66 c-1.999-20.266-17.888-36.155-37.485-36.155H44.982c-19.599,0-35.486,15.889-35.486,35.487v69.409"/>
<g>
<g>
<g>
<path fill="none" stroke="#B34700" stroke-width="2" stroke-miterlimit="10" d="M9.496,115.401v94.605 c0,19.6,15.888,35.486,35.486,35.486h164.034c19.604,0,35.487-15.889,37.487-34.819v-95.952"/>
</g>
</g>
</g>
<script xmlns=""/></svg>

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -2,7 +2,7 @@
{% import "post_macros.html" as post_macros %}
{% block content %}
<h1> {{ page.title }} </h1>
<h2 class="titre" > {{ page.title }} </h2>
<h2 class="description"> {{ post_macros::polish(content=page.description) }} </h2>
<hr />
{{ post_macros::polish(content=page.content) }}

View File

@ -4,7 +4,7 @@
{% block content %}
<h1> {{ page.title }} </h1>
<h2 class="titre"> {{ page.title }} </h2>
{{ post_macros::polish(content=page.content) }}

View File

@ -5,27 +5,19 @@
<head>
{% include "partials/head.html" %}
{% block title -%}
{% block title -%}
<title> {{ config.title }} </title>
{%- endblock title %}
{% if config.generate_rss %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
{% endif %}
</head>
<body>
<div class="title">
<h1 style="text-align:center;"> {{ config.title }}
<a href="/rss.xml" class="icons">
<img src="/img/rss.svg" alt="rss" class="icon">
</a>
<a href="/git/" class="icons">
<img src="/img/code.svg" alt="rss" class="icon">
</a>
</h1>
<div class="title">
<h1 style="text-align:center;"> {{ config.title }} </h1>
</div>
{% include "partials/menu.html" %}
@ -36,7 +28,11 @@
{% endblock content %}
</div>
<footer><span class="copyleft">©</span> kitoy.me <br/> Site généré avec <a href="https://getzola.org/"> Zola </a> </footer>
<footer><span class="copyleft">©</span> kitoy.me <br/> Site généré avec <a href="https://getzola.org/"> Zola </a> <br/>
<a href="/rss.xml" class="icons"><img src="/img/rss.svg" alt="rss" class="icon"></a>
<a href="/git/" class="icons"> <img src="/img/code.svg" alt="rss" class="icon"></a>
</footer>
{% block js -%}
<script src="/js/menu.js"></script>

View File

@ -2,3 +2,9 @@
<link rel="stylesheet" href="/base.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if config.description %}
<meta name='description' content='{{ config.description }}'>
{% endif %}