From e9dcc57fd4d6edb42aaf5b75977927f2aaff5db4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Fri, 12 Feb 2021 18:43:12 +0100 Subject: [PATCH] Replace unicode characters with SVG for compatibility --- explorer.html | 6 ++--- painting.html | 2 +- scripts/explorer.js | 2 +- styles/icons/arrow.svg | 9 ++++++++ styles/icons/exclamation-mark.svg | 9 ++++++++ styles/icons/triangle.svg | 9 ++++++++ styles/main.css | 37 ++++++++++++++++++------------- 7 files changed, 53 insertions(+), 21 deletions(-) create mode 100644 styles/icons/arrow.svg create mode 100644 styles/icons/exclamation-mark.svg create mode 100644 styles/icons/triangle.svg diff --git a/explorer.html b/explorer.html index 78e5d75..57a73d6 100644 --- a/explorer.html +++ b/explorer.html @@ -38,8 +38,8 @@

Cette section du site permet de générer une liste (aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.
En mode liste, l'icône œil permet de voir le tableau en grand ; en mode galerie, il faut cliquer sur les tableaux.
Une ☆ étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une ★ étoile qu'elle est de mauvaise qualité ; deux ★★ étoiles qu'elle est acceptable ; et trois ★★★ étoiles qu'elle est tout à fait satisfaisante.
- Le symbole ‼︎ dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que vous pouvez contribuer.
- Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la ▶︎ flèche pour la faire réapparaître.

+ Le symbole dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que vous pouvez contribuer.
+ Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la flèche pour la faire réapparaître.

Configuration 

@@ -178,7 +178,7 @@ - + diff --git a/painting.html b/painting.html index 146d2a1..0d36ddb 100644 --- a/painting.html +++ b/painting.html @@ -53,7 +53,7 @@
  • aide requise : 
  • tags : 
  • commentaire :
    • -
  • photo originale ⭧
    • +
  • photo originale
    • diff --git a/scripts/explorer.js b/scripts/explorer.js index 84c4228..c913ac9 100644 --- a/scripts/explorer.js +++ b/scripts/explorer.js @@ -442,7 +442,7 @@ jQuery(document).ready(function($) result += '☆'; if (i.help == "yes") - result += '‼︎' + result += '' else result += ' ' diff --git a/styles/icons/arrow.svg b/styles/icons/arrow.svg new file mode 100644 index 0000000..97782e5 --- /dev/null +++ b/styles/icons/arrow.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/styles/icons/exclamation-mark.svg b/styles/icons/exclamation-mark.svg new file mode 100644 index 0000000..3e26471 --- /dev/null +++ b/styles/icons/exclamation-mark.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/styles/icons/triangle.svg b/styles/icons/triangle.svg new file mode 100644 index 0000000..57d713f --- /dev/null +++ b/styles/icons/triangle.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 2fad59e..9a6c128 100644 --- a/styles/main.css +++ b/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-bottom: 0.5rem; + margin-top: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; }