Replace old icons

This commit is contained in:
TheThomaas 2025-05-01 11:04:35 +02:00
parent 5f47e9b087
commit e1d94f515d
13 changed files with 17 additions and 92 deletions

View file

@ -22,7 +22,7 @@
"socials": [
{
"title": "Mon Github",
"icon": "icon-github",
"icon": "github",
"link": "https://github.com/TheThomaas"
}
]

View file

@ -4,10 +4,7 @@
<span></span>
<div class="links">
{%- for link in links -%}
{% capture href %}{{ link.link }}{% endcapture %}
{% capture classes %}{{ link.icon }}{% endcapture %}
{% capture label %}{{ link.title }}{% endcapture %}
{% render 'partials/components/link', showLabel: false, label: label, href: href, class: classes, target: "_blank" %}
{% render 'partials/components/link', icon: link.icon, showLabel: false, label: link.title, href: link.link, class: classes, target: "_blank" %}
{%- endfor -%}
</div>
</div>

View file

@ -5,5 +5,5 @@
{% if title %}title="{{ title }}"
{% else %}title="{{ label }}"{% endif %}
{% if target %}target="{{ target }}"{% endif %}
>{% if showLabel == true or  showLabel == nil %}{{ label }}{% endif %}
>{% if icon %}{% icon icon %}{% endif %}{% if showLabel == true or  showLabel == nil %}{{ label }}{% endif %}
</a>

View file

@ -2,17 +2,13 @@
{% if socials %}
{% for social in socials %}
<li>
{% capture href %}{{ social.link }}{% endcapture %}
{% capture classes %}{{ social.icon }} {% if showLabel == true %}{{ position | default: "icon--left" }}{% endif %}{% endcapture %}
{% capture label %}{{ social.title }}{% endcapture %}
{% render 'partials/components/link', showLabel: showLabel, label: label, href: href, class: classes, target: "_blank" %}
{% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: classes, target: "_blank" %}
</li>
{% endfor %}
{% if mail %}
<li>
{% capture href %}mailto:{{ mail }}{% endcapture %}
{% capture classes %}icon-mail {% if showLabel == true %}{{ position | default: "icon--left" }}{% endif %}{% endcapture %}
{% render 'partials/components/link', showLabel: showLabel, label: "Contactez moi par mail", href: href, class: classes, target: "_blank" %}
{% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi par mail", href: href, class: classes, target: "_blank" %}
</li>
{% endif %}
{% endif %}

View file

@ -3,9 +3,7 @@
<ul class="list-inline">
<li>Réalisé avec {% render 'partials/components/link', label: "Eleventy", href: "https://11ty.dev/", target: "_blank", rel: "nofollow" %}</li>
{% if site.repository and site.repository != "" %}
{% capture href %}{{ site.repository }}{% endcapture %}
{% capture label %}{{ site.repoSrc }}{% endcapture %}
<li>Source sur {% render 'partials/components/link', label: label, href: href, target: "_blank", rel: "nofollow" %}</li>
<li>Source sur {% render 'partials/components/link', label: site.repoSrc, href: site.repository, target: "_blank", rel: "nofollow" %}</li>
{% endif %}
</ul>

View file

@ -3,4 +3,7 @@
}
.download p {
font-size: 1.4rem;
}
.download .button {
--button-icon-size: 1.2em;
}

View file

@ -102,75 +102,6 @@
outline-style: solid;
}
/* Icons */
.icon-download:before,
.icon-download:after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
}
.icon-github:before,
.icon-github:after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-internet:before,
.icon-internet:after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-mail:before,
.icon-mail:after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
}
[class*="\ icon-"],
[class^="icon-"] {
--icon-size: 1.5rem;
vertical-align: top;
}
[class*="\ icon-"]:before,
[class*="\ icon-"]:after,
[class^="icon-"]:before,
[class^="icon-"]:after {
--m-interior: 0.5rem;
--m-exterior: -0.125rem;
background-color: var(--icon-color, currentColor);
block-size: 1.5rem;
inline-size: 1.5rem;
block-size: var(--icon-size);
inline-size: var(--icon-size);
vertical-align: calc(0.375em - 0.75rem);
vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
flex: none;
display: inline-block;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
[class*="\ icon-"]:before,
[class*="\ icon-"].icon--right:after,
[class^="icon-"]:before,
[class^="icon-"].icon--right:after {
content: "";
}
[class*="\ icon-"].icon--right:before,
[class^="icon-"].icon--right:before {
content: none;
}
.icon--left:before {
margin-inline-start: var(--m-exterior);
margin-inline-end: var(--m-interior);
}
.icon--right:after {
margin-inline-start: var(--m-interior);
margin-inline-end: var(--m-exterior);
}
.icon--sm {
--icon-size: 1rem;
}
.icon--lg {
--icon-size: 2rem;
}
/* Other */
*,
:before,

View file

@ -7,5 +7,5 @@ order: 4
<div class="flex justify-center items-center download">
<p>Vous souhaitez imprimer ce document ?</p>
<i>--></i>
<button type="button" onclick="window.print()" class="button icon--right icon-download">Télécharger en PDF</button>
<button type="button" onclick="window.print()" class="button">Télécharger en PDF {% icon "download" %}</button>
</div>

View file

@ -4,5 +4,5 @@ description: Un jeu fait pour les Portes Ouvertes 2020
links:
- title: Voir sur Github
link: https://github.com
icon: icon-github
icon: github
---

View file

@ -4,5 +4,5 @@ description: Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms
links:
- title: Voir sur Github
link: https://github.com
icon: icon-github
icon: github
---

View file

@ -4,8 +4,8 @@ description: Ajouter, voir et se connecter à des utilisateurs LDAP depuis un si
links:
- title: Voir le site
link: https://google.com
icon: icon-internet
icon: link
- title: Voir sur Github
link: https://github.com
icon: icon-github
icon: github
---

View file

@ -4,8 +4,8 @@ description: Des capteurs de température affichés sur un tableau de bord
links:
- title: Voir le site
link: https://google.com
icon: icon-internet
icon: link
- title: Voir sur Github
link: https://github.com
icon: icon-github
icon: github
---

View file

@ -5,5 +5,5 @@ background: rgb(255, 143, 143)
links:
- title: Voir sur Github
link: https://github.com
icon: icon-github
icon: github
---