!19 : Ajout de la police Luciole + switch vers le thème accessible

public/font/icon.svg

@@ -16,11 +16,17 @@
 
 <glyph glyph-name="link" unicode="&#xe804;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
 
+<glyph glyph-name="heart" unicode="&#xe805;" d="M500-79q-14 0-25 10l-348 336q-5 5-15 15t-31 37-38 54-30 67-13 77q0 123 71 192t196 70q34 0 70-12t67-33 54-38 42-38q20 20 42 38t54 38 67 33 70 12q125 0 196-70t71-192q0-123-128-251l-347-335q-10-10-25-10z" horiz-adv-x="1000" />
+
+<glyph glyph-name="eye" unicode="&#xe806;" d="M929 314q-85 132-213 197 34-58 34-125 0-103-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 243 68 186 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
+
 <glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
 
 <glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="blind" unicode="&#xf29d;" d="M204 677q-35 0-61 25t-26 62q0 35 26 61t61 25 61-25 26-61q0-37-26-62t-61-25z m308-359q0-28-17-37t-35-4-27 19l-205 244q-4 7-8 9t-6 1l-1-2q-4-4 2-12l68-77 1-198-90-255q-38-107-52-130-8-15-15-18-28-15-58-1-16 7-23 24t-5 32q1 9 110 345l3 232-48-91 20-124q2-14-1-24t-8-15-10-9-10-4l-4-1q-10-2-19 1t-13 9-8 13-4 10-2 6l-25 167 118 212q12 19 63 19 41 0 59-22l237-291q4-3 8-9l1-2 0-1q4-7 4-16z m-225-83q24-64 49-126t39-94l13-31q21-51 24-69 6-39-20-54-20-13-37-9t-28 12-17 19h0q-4 9-5 14l-69 196z m460-331q17-27 17-32 0-3-2-4-5-2-8 1t-8 14-9 17q-64 96-236 369 1 0 4 1t3 2l2 1q6 5 6 10z" horiz-adv-x="785.7" />
 </font>
 </defs>
 </svg>

sass/icons.scss

@@ -37,9 +37,12 @@
 .icon-search:before { content: '\e802'; } /* '' */
 .icon-mail:before { content: '\e803'; } /* '' */
 .icon-link:before { content: '\e804'; } /* '' */
+.icon-heart:before { content: '\e805'; } /* '' */
+.icon-eye:before { content: '\e806'; } /* '' */
 .icon-spin:before { content: '\e839'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
+.icon-blind:before { content: '\f29d'; } /* '' */
 
 .animate-spin {
     animation: spin 2s infinite linear;

sass/index.scss

@@ -25,6 +25,7 @@
 // @import "components/quote";
 
 // SPÉCIFIQUE AU SITE
+@import './fonts';
 @import './global';
 @import './navbar';
 @import './forms';

sass/navbar.scss

@@ -289,6 +289,10 @@
         flex-wrap: wrap;
         justify-content: flex-start;
 
+        .button {
+            margin-right: 0.75rem;
+        }
+
         &:last-child {
             margin-bottom: -0.5rem;
         }

views/index.ejs

@@ -20,6 +20,10 @@
         <script src="/libs/vue/vue.global.prod.js"></script>
     
         <script>
+            /**
+             * Fonction permettant d'afficher un message dans un toastr
+             * @param {String} message
+             */
             function showToastr(message) {
                 let x = document.getElementById("toastr");
                 if ( message ) {
@@ -30,12 +34,82 @@
                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
             };
 
+            /**
+             * Fonction permettant de masquer le toastr
+             */
             function hideToastr() {
                 let x = document.getElementById("toastr");
                 
                 x.className = x.className.replace("show", "");
+                x.getElementsByTagName("SPAN")[0].innerHTML = "";
             }
 
+            /**
+             * Fonction permettant de récupérer la valeur d'un cookie
+             * @param {String} cname
+             * @param {String} defaultValue
+             * 
+             * @return {String}
+             */
+            function getCookie(cname, defaultValue = 'false') {
+                let name = cname + "=";
+                let decodedCookie = decodeURIComponent(document.cookie);
+                let ca = decodedCookie.split(';');
+                for(let i = 0; i < ca.length; i+=1) {
+                    let c = ca[i];
+                    while (c.charAt(0) == ' ') {
+                    c = c.substring(1);
+                    }
+                    if (c.indexOf(name) == 0) {
+                    return c.substring(name.length, c.length);
+                    }
+                }
+                return defaultValue;
+            }
+
+            /**
+             * Fonction permettant de créer un cookie
+             * @param {String} cname
+             * @param {String} cvalue
+             * @param {Number} exdays
+             */
+            function setCookie(cname, cvalue, exdays = 30) {
+                const d = new Date();
+                d.setTime(d.getTime() + (exdays*24*60*60*1000));
+                let expires = "expires="+ d.toUTCString();
+                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+            }
+
+            /**
+             * Fonction de (dé)charger le thème accessible
+             * @param {String} value
+             */
+            function setAriaTheme(value) {
+                let body = document.body;
+                if ( value === 'true' ) {
+                    let classesString = body.className || "";
+                    if (classesString.indexOf("is-accessible") === -1) {
+                        body.classList.add("is-accessible");
+                    }
+                } else {
+                    body.classList.remove("is-accessible");
+                }
+            }
+
+            /**
+             * Fonction de (dé)charger  le thème accessible
+             */
+            function switchAriaTheme() {
+                let body = document.body;
+                
+                body.classList.toggle("is-accessible");
+
+                setCookie('ariatheme', body.classList.contains("is-accessible"));
+            }
+    
+            /**
+             * Ensemble d'actions effectuées au chargement de la page
+             */
             document.addEventListener('DOMContentLoaded', () => {
                 const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
                 if ($navbarBurgers.length > 0) {
@@ -49,6 +123,11 @@
                         });
                     });
                 }
+
+                const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
+                switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
+
+                setAriaTheme(getCookie('ariatheme'));
             });
         </script>
     </head>
@@ -105,6 +184,9 @@
                     <% } %>
                     <div class="navbar-item">
                         <div class="buttons">
+                            <button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site">
+                                <i class="icon-eye"></i>
+                            </button>
                             <% if ( !user ) { %>
                             <a class="button is-link" href="/connexion">
                                 <strong>Connexion</strong>
@@ -157,7 +239,7 @@
         <footer class="footer layout-hero">
             <p>
                 <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
-                Fait avec ❤ à Bordeaux.
+                Fait avec ❤️ à Bordeaux.
                 Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>.
             </p>
         </footer>