Replace unicode characters with SVG for compatibility

explorer.html

@@ -38,8 +38,8 @@
         <p>Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg"> galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
         En mode <img width="14rem" src="styles/icons/list.svg"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg"> galerie, il faut cliquer sur les tableaux.<br>
         Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br>
-        Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
+        Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg"> dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
-        Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la &#x25B6;&#xFE0E; flèche pour la faire réapparaître.</p>
+        Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg"> flèche pour la faire réapparaître.</p>
 
         <h2 class="active">Configuration&nbsp;</h2>
         <form name="explorer" action="" onsubmit="onSubmit();">
@@ -178,7 +178,7 @@
                         <span><input type="checkbox" id="no" name="help" value="no">
                         <label for="no">Non</label></span>
                         <span><input type="checkbox" id="yes" name="help" value="yes">
-                        <label for="yes">&#8252;&#xFE0E;&nbsp;Oui</label></span>
+                        <label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg"> Oui</label></span>
                     </div>
                 </div>
             </div>

painting.html

@@ -53,7 +53,7 @@
                     <li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
                     <li><span class="title">tags :</span><span class="content tag">&nbsp;</span></li>
                     <li><span class="title">commentaire :</span><span class="content comment"> </span></li>
-                    <li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale ⭧</a></span></li>
+                    <li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale <img src="styles/icons/arrow.svg"></a></span></li>
                 </ul>
             </div>
         </div>

scripts/explorer.js

@@ -442,7 +442,7 @@ jQuery(document).ready(function($)
                     result += '<td class="photo">&#x2606;</td>';
 
                 if (i.help == "yes")
-                    result += '<td class="help">&#8252;&#xFE0E;</td>'
+                    result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg"></td>'
                 else
                     result += '<td>&nbsp;</td>'
 

styles/icons/arrow.svg

@@ -0,0 +1,9 @@
+<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="#38686A" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="21.08 187.43 154.57 154.57">
+  <!--Unicode Character 'NORTH EAST TRIANGLE-HEADED ARROW' (U+2B67)-->
+  <defs id="genericDefs"/>
+  <g>
+    <g>
+      <path d="M175.6406 261 L146.25 231.6094 L35.8594 342 L21.0938 327.2344 L131.4844 216.8438 L102.0938 187.4531 L175.6406 187.4531 L175.6406 261 Z" stroke="none"/>
+    </g>
+  </g>
+</svg>

styles/icons/exclamation-mark.svg

@@ -0,0 +1,9 @@
+<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="24.47 179.7 87.07 206.18">
+  <!--Unicode Character 'DOUBLE EXCLAMATION MARK' (U+203C)-->
+  <defs id="genericDefs"/>
+  <g>
+    <g>
+      <path d="M111.5156 225.4219 L104.2031 334.5469 L87.8906 334.5469 L80.0156 225.4219 L80.0156 179.7188 L111.5156 179.7188 L111.5156 225.4219 ZM55.8281 225.4219 L48.6562 334.5469 L32.2031 334.5469 L24.4688 225.4219 L24.4688 179.7188 L55.8281 179.7188 L55.8281 225.4219 ZM109.9688 385.875 L81.2812 385.875 L81.2812 357.0469 L109.9688 357.0469 L109.9688 385.875 ZM54.4219 385.875 L25.5938 385.875 L25.5938 357.0469 L54.4219 357.0469 L54.4219 385.875 Z" stroke="none"/>
+    </g>
+  </g>
+</svg>

styles/icons/triangle.svg

@@ -0,0 +1,9 @@
+<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="39.23 217.12 115.2 121.52">
+  <!--Unicode Character 'BLACK RIGHT-POINTING TRIANGLE' (U+25B6)-->
+  <defs id="genericDefs"/>
+  <g>
+    <g>
+      <path d="M154.4062 277.875 L39.2344 338.625 L39.2344 217.125 L154.4062 277.875 Z" stroke="none"/>
+    </g>
+  </g>
+</svg>

styles/main.css

@@ -65,7 +65,7 @@ header nav ul li a {
     padding:0;
 }
 
-@media only screen and (min-width:500px) and (max-width: 1200px) {
+@media only screen and (min-width:500px) and (max-width:1200px) {
     header nav ul li.title {
         display:block;
         margin-bottom:0.5rem;
@@ -81,10 +81,10 @@ header nav .mobile-menu-close {
     display:none;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width:600px) {
     header nav {
-        margin-top: 0.5rem;
+        margin-top:0.5rem;
-        margin-bottom: 0.5rem;
+        margin-bottom:0.5rem;
     }
 
     header nav #hamburger {
@@ -151,7 +151,7 @@ article {
     text-align:left;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width:1200px) {
     article {
         width:95vw;
     }
@@ -162,7 +162,7 @@ article h1 {
 }
 
 article p {
-    font-family: 'Commissioner', Helvetica;
+    font-family:'Commissioner', Helvetica;
 }
 
 article.main {
@@ -177,7 +177,7 @@ article.main img {
     display:block;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width:1200px) {
     article.main {
         width:85vw;
     }
@@ -214,7 +214,7 @@ article #gallery img {
     margin:0.5rem;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width:1000px) {
     article #gallery img {
         max-height:85vh;
         max-width:85vw;
@@ -243,7 +243,7 @@ article #gallery img {
     margin-bottom:1.5rem;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width:600px) {
     #info {
         min-width:280px;
     }
@@ -284,7 +284,7 @@ article.painting .container {
     display:flex;
     flex-direction:row;
     justify-content:center;
-    align-self: flex-end;
+    align-self:flex-end;
     position:relative;
     margin-bottom:1.8rem;
 }
@@ -304,7 +304,7 @@ article.painting .container ul.metadata {
     margin-left:0;
     position:absolute;
     bottom:0;
-    list-style-type: square;
+    list-style-type:square;
 }
 
 article.painting .container .metadata span.title {
@@ -315,7 +315,12 @@ article.painting .container .metadata span.content {
     font-size:0.9em;
 }
 
-@media only screen and (min-width:800px) and (max-width: 1200px) {
+article.painting .container .metadata span.content img {
+    display:inline-block;
+    width:0.6rem;
+}
+
+@media only screen and (min-width:800px) and (max-width:1200px) {
     article.painting .container {
         display:block;
     }
@@ -357,7 +362,7 @@ article.explorer p {
     text-align:justify;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width:1200px) {
     article.explorer p {
         width:90vw;
     }
@@ -442,7 +447,7 @@ article.explorer input[type = submit] {
     display:block;
     margin:auto;
     text-align:center;
-    border: none;
+    border:none;
     padding:0.8rem;
     margin-top:1.5rem;
     border-radius:5%;
@@ -593,7 +598,7 @@ article #stats #stat {
     margin-left:4vw;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width:1000px) {
     article #stats {
         display:block;
     }
@@ -606,7 +611,7 @@ article #stats #stat {
     }
 }
 
-@media only screen and (min-width: 1001px) and (max-width: 1200px) {
+@media only screen and (min-width:1001px) and (max-width:1200px) {
     article #stats {
         display:block;
     }