keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Compare commits

base: keb:5b79f924cbb97a78126d49c00718b9b0a277d4e2
Branches Tags
keb:dev keb:other-works
keb:v1
...
compare: keb:v1
Branches Tags
keb:dev keb:other-works
keb:v1

20 Commits
5b79f924cb ... v1

Author SHA1 Message Date
Théo Marchal
3e2866b9b9 Update accueil 2021-04-03 19:00:27 +02:00
Théo Marchal
f50a9fbb59 Update logo and misc renames 2021-04-03 18:37:16 +02:00
Théo Marchal
c9c587d489 Update photos and divers section 2021-04-03 17:49:18 +02:00
Théo Marchal
88950d7529 Add functionally to reset button 2021-03-30 21:37:13 +02:00
Théo Marchal
60422a6400 Update data 2021-03-07 01:58:22 +01:00
Théo Marchal
47a0dcd200 Update divers 2021-03-07 01:55:34 +01:00
Théo Marchal
e923c9404e Update photos submodule 2021-03-07 01:46:13 +01:00
Théo Marchal
e31639d340 New photo in bio 2021-03-07 01:23:32 +01:00
Théo Marchal
61511ecc95 Update misc pages 2021-03-07 01:06:12 +01:00
Théo Marchal
e0ebd28dcb Fix exist photos tag 2021-03-07 00:44:29 +01:00
Théo Marchal
e41ccc5549 Fix visual appearance of "disponible" photos in explorer 2021-03-07 00:36:07 +01:00
Théo Marchal
862a7348e6 Simplification in explorer 2021-03-07 00:27:45 +01:00
Théo Marchal
3283d11c02 Simplification 2021-03-06 14:13:35 +01:00
Théo Marchal
25a09015d1 Working "tous" filter for tags 2021-03-06 14:05:04 +01:00
Théo Marchal
34e8fe9b12 Working "tous" filter for places 2021-03-06 12:30:44 +01:00
Théo Marchal
4effbe657e Fix iOS Safari dropdown visibility 2021-03-06 12:09:24 +01:00
Théo Marchal
35b1e06dfc Fix painting not working with filter 2021-03-06 11:43:53 +01:00
Théo Marchal
3a964098e7 Fix regression on tags 2021-03-06 01:32:09 +01:00
Théo Marchal
3fe24e502e Fix "Tous" not filtering visually in explorer 2021-03-06 01:22:59 +01:00
Théo Marchal
44a5f52e94 Fix issue with "exist" in photos that was not filtering 2021-03-05 01:18:52 +01:00
19 changed files with 336 additions and 192 deletions
Expand all files Collapse all files

1
README.md
View File

@ -23,7 +23,6 @@ Tools used:
Fonts used: Fonts used:
* [Rubik](https://github.com/googlefonts/Rubik) * [Rubik](https://github.com/googlefonts/Rubik)
* [Commissioner](https://github.com/kosbarts/Commissioner) * [Commissioner](https://github.com/kosbarts/Commissioner)
* [Hot August Night](https://www.1001fonts.com/hot-august-night-font.html)
### Export Excel spreadsheet to JSON ### Export Excel spreadsheet to JSON

3
biographie.html
View File

@ -14,11 +14,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li> <li class="selected"><a href="biographie.html">Biographie</a></li>
@ -34,6 +34,7 @@
<article class="main"> <article class="main">
<h1>Biographie</h1> <h1>Biographie</h1>
<img src="images/ginou50.jpg" class="bio-img" alt="Ginou, peignant dans les années 50">
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p> <p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p>
<p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse : Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p> <p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse : Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>

2
data.json
View File

File diff suppressed because one or more lines are too long

20
divers.html
View File

@ -20,11 +20,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>
@ -102,6 +102,10 @@
<img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005)."> <img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/expojeannot.jpg" data-caption="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
<img src="photos/divers/mini/expojeannot.jpg" alt="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004)."> <a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
<img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004)."> <img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
</a> </a>
@ -110,6 +114,10 @@
<img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002)."> <img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/expobarleduc.jpg" data-caption="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
<img src="photos/divers/mini/expobarleduc.jpg" alt="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017)."> <a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
<img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017)."> <img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
</a> </a>
@ -134,13 +142,21 @@
<a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012)."> <a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
<img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012)."> <img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/nature2.jpg" data-caption="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
<img src="photos/divers/mini/nature2.jpg" alt="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/nature1.jpg" data-caption="Ginou dans son jardin, au milieu des fleurs (2002).">
<img src="photos/divers/mini/nature1.jpg" alt="Ginou dans son jardin, au milieu des fleurs (2002).">
</a>
</div> </div>
<h2>Statistiques</h2> <h2>Statistiques</h2>
<p> <p>
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br> De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br> Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles. Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le genre de tableau qu’elle préféra peindre était des paysages, plus particulièrement à la campagne.
</p> </p>
<div id="stats"> <div id="stats">

7
explorer.html
View File

@ -22,11 +22,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>
@ -109,8 +109,7 @@
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="tags" name="tags" value="all"> <span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span> <label for="tags">Tous</label></span>
<span><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span> <span class="first"><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
<div class="generated"></div>
</div> </div>
</div> </div>
<div class="box dimensions"> <div class="box dimensions">
@ -132,7 +131,7 @@
</div> </div>
<div class="button-cont"> <div class="button-cont">
<input type="submit" value="Générer"> <input type="submit" value="Générer">
<input type="button" value="Réinitialiser"> <input type="button" value="Réinitialiser" class="reinit">
</div> </div>
</form> </form>
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p> <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>

2
exposition.html
View File

@ -21,11 +21,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

BIN
images/ginou50.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

10
index.html
View File

@ -14,11 +14,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li class="selected"><a href="index.html">Accueil</a></li> <li class="selected"><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>
@ -33,11 +33,13 @@
<article class="main"> <article class="main">
<h1>L'art de Ginou</h1> <h1>L'art de Ginou</h1>
<p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses &oelig;uvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p> <p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage et dans un cercle plus élargi grâce aux expositions de peinture annuelles dans sa région. Elle a réalisé de nombreuses &oelig;uvres, principalement des <strong>peintures à l’huile</strong>, plus rarement des <strong>aquarelles</strong>. Elle a également réalisé de nombreuses <strong>peintures sur soie</strong> et plus occasionnellement <strong>sur bois</strong>. Elle illustrait aussi ses <strong>cahiers de poèmes</strong>.</p>
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>249 des 385 tableaux recensés.</strong></p> <p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux. Elle leur attribuait un numéro et un titre. Elle notait leurs dimensions ainsi que le nom de leur destinataires ou acheteurs. De <strong>de 1958 à 2017</strong> sont référencés 383 tableaux. Deux d'entre eux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons pour l'instant retrouvé quatre tableaux inédits, non listés dans ce carnet. Ginou a commencé à prendre en photos certains tableaux dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter et améliorer cette base iconographique, nous avons photographié en haute résolution les tableaux en notre possession.
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre.</p> <p>Ce site comprend actuellement <strong>249 tableaux</strong> sur les <strong>385 peints à l'huile</strong>. Il est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre.</p>
<p>Vous pouvez commencer votre visite par la section <a href="exposition.html">Exposition</a>.</p>
<p class="signature center">Ses enfants, Denis et Laurence, et ses petits-enfants, Théo, Chloé et Maxime</p> <p class="signature center">Ses enfants, Denis et Laurence, et ses petits-enfants, Théo, Chloé et Maxime</p>

10
informations.html
View File

@ -12,16 +12,16 @@
<link href="plugins/chart.min.css" rel="stylesheet"> <link href="plugins/chart.min.css" rel="stylesheet">
<script src="plugins/chart.bundle.min.js"></script> <script src="plugins/chart.bundle.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
<script src="scripts/mail.js"></script> <script src="scripts/informations.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>
@ -44,7 +44,7 @@
<div class="stat"> <div class="stat">
<canvas id="photo"></canvas> <canvas id="photo"></canvas>
<span class="legend-cont"><span class="legend none"></span><span>Pas de photo</span></span> <span class="legend-cont"><span class="legend none"></span><span>Photo manquante</span></span>
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span> <span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span> <span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span> <span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
@ -66,11 +66,11 @@
<p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p> <p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p>
<h2>Informations technique</h2> <h2>Informations technique</h2>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p> <p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a> et <a href="https://github.com/kosbarts/Commissioner">Commissioner</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p> <p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
<p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en février 2021.</p> <p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en avril 2021.</p>
</article> </article>
</body> </body>
</html> </html>

2
painting.html
View File

@ -15,11 +15,11 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="styles/icons/ginou.svg" class="ginou-icon">
<div id="hamburger"> <div id="hamburger">
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div> <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div> </div>
<ul> <ul>
<li class="title">Ginou</li>
<div class="hidden"> <div class="hidden">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

2
photos

Submodule photos updated: 06d11b6b2f...64e7a332b3

242
scripts/explorer.js
View File

@ -32,6 +32,7 @@ jQuery(document).ready(function($)
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags')); paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos')); paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps')); paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }
$.getJSON("data.json", function(data) $.getJSON("data.json", function(data)
{ {
@ -183,14 +184,20 @@ jQuery(document).ready(function($)
{ {
selectedYears = []; selectedYears = [];
selectedDimensions = []; selectedDimensions = [];
selectedPhotos = paramPhoto; selectedPhotos = params.photo;
selectedMonths = paramMonth; if (selectedPhotos.includes("exist"))
selectedGenres = paramGenre; {
selectedThemes = paramTheme; if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
selectedPlaces = paramPlace; if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
selectedTags = paramTag; if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
selectedHelps = paramHelp; }
for (p of paramYear) selectedMonths = params.month;
selectedGenres = params.genre;
selectedThemes = params.theme;
selectedPlaces = params.place;
selectedTags = params.tag;
selectedHelps = params.help;
for (p of params.year)
{ {
if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i); if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i); if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
@ -200,7 +207,7 @@ jQuery(document).ready(function($)
if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i); if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i); if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
} }
for (p of paramDimension) for (p of params.dimension)
{ {
if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i); if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i); if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
@ -213,13 +220,6 @@ jQuery(document).ready(function($)
if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i); if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i); if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
} }
// special case of a multi selector
if (selectedPhotos.includes("exist"))
{
selectedPhotos.push("bad");
selectedPhotos.push("ok");
selectedPhotos.push("good");
}
return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes, return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
"places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps}; "places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
} }
@ -230,6 +230,17 @@ jQuery(document).ready(function($)
selectedOptions = gatherURLdata(); selectedOptions = gatherURLdata();
filterData(selectedOptions); filterData(selectedOptions);
$("input.reinit").click(function()
{
$('input').prop("disabled", false);
$('input').prop("checked", false);
$('select').val("");
data = originalData;
availableOptions = originalAvailableOptions;
params = {};
updateMenu(availableOptions);
});
// menu initial generation // menu initial generation
$.getScript("scripts/explorer_menu.js", function() $.getScript("scripts/explorer_menu.js", function()
{ {
@ -240,97 +251,146 @@ jQuery(document).ready(function($)
URLGeneration(originalAvailableOptions); URLGeneration(originalAvailableOptions);
updateMenu(availableOptions); updateMenu(availableOptions);
// handle tags function handleVisualFilterChanges()
function handleTags()
{ {
$('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function() function makeFilterChanges()
{ {
paramTag = []; // collect all tags from all dropdowns selectedOptions = gatherURLdata();
$('.box.tags .item-cont select[name="tag"]').each(function() data = originalData;
filterData(selectedOptions);
availableOptions = [];
availableOptions = gatherData();
updateMenu(availableOptions);
}
// handle tags
function handleTags()
{
$('input[name="tags"]').change(function()
{ {
if (paramTag.indexOf(this.value) === -1 && this.value != "") params["tag"] = []; // remove filter
paramTag.push(this.value); if (this.checked)
{
$('select[name="tag"] option[value=""]').prop('selected', true);
$('select[name="tag"]').attr('disabled', 'disabled');
$(".box.tags span:not(.first) select").parent().remove();
}
else
$('select[name="tag"]').removeAttr('disabled');
makeFilterChanges();
}); });
if (this.value != "") $('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
{ {
createNewElem = true; // if we modify an existing element to a value, we don't delete it params.tag = []; // collect all tags from all dropdowns
$('.box.tags select').each(function() $('.box.tags .item-cont select[name="tag"]').each(function()
{ {
if ($(this).val() == "") if (params.tag.indexOf(this.value) === -1 && this.value != "")
createNewElem = false; params.tag.push(this.value);
}); });
if (createNewElem)
if (this.value != "")
{ {
html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="tag">'; createNewElem = true; // if we modify an existing element to a value, we don't delete it
html += '<option value="">Aucun</option>'; $('.box.tags select').each(function()
for (a of originalAvailableOptions.tags) {
html += '<option value="' + a + '">' + a + '</option>'; if ($(this).val() == "")
html += '</select></span>'; createNewElem = false;
$(".box.tags .item-cont").append(html); });
if (createNewElem)
{
html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="tag">';
html += '<option value="">Aucun filtre</option>';
for (a of originalAvailableOptions.tags)
html += '<option value="' + a + '">' + a + '</option>';
html += '</select></span>';
$(".box.tags .item-cont").append(html);
}
} }
} else
else {
// if the element has no value, we delete it
$(this).parent().remove();
}
makeFilterChanges();
});
}
handleTags();
function visualFilterCheckboxItem(name)
{
$('input[name="' + name + 's"]').change(function()
{ {
// if the element has no value, we delete it params[name] = []; // remove filter
$(this).parent().remove(); makeFilterChanges();
} });
selectedOptions = gatherURLdata(); $('input[name="' + name + '"]').change(function()
data = originalData; {
filterData(selectedOptions); if (this.checked)
availableOptions = []; {
availableOptions = gatherData(); if (this.id == "exist") // photos special case
updateMenu(availableOptions); {
}); params[name].push("bad");
} params[name].push("ok");
handleTags(); params[name].push("good");
}
params[name].push(this.id);
}
else
{
if (this.id == "exist") // photos special case
{
removeFromArray(params[name], "bad");
removeFromArray(params[name], "ok");
removeFromArray(params[name], "good");
}
removeFromArray(params[name], this.id);
}
function visualFilterCheckboxItem(name, param) makeFilterChanges();
{ });
$('input[name="' + name + '"]').change(function() }
function visualFilterListItem(name)
{ {
if (this.checked) $('input[name="' + name + 's"]').change(function()
param.push(this.id); {
else params[name] = []; // remove filter
removeFromArray(param, this.id); if (this.checked)
{
$('select[name="' + name + '"] option[value=""]').prop('selected', true);
$('select[name="' + name + '"]').attr('disabled', 'disabled');
}
else
$('select[name="' + name + '"]').removeAttr('disabled');
selectedOptions = gatherURLdata(); makeFilterChanges();
data = originalData; });
filterData(selectedOptions);
availableOptions = []; $('select[name="' + name + '"]').change(function()
availableOptions = gatherData(); {
updateMenu(availableOptions); if (this.value == "" && name == "place")
}); params[name].pop();
else
params[name].push(this.value);
makeFilterChanges();
});
}
visualFilterCheckboxItem("photo");
visualFilterCheckboxItem("year");
visualFilterCheckboxItem("month");
visualFilterCheckboxItem("genre");
visualFilterCheckboxItem("theme");
visualFilterCheckboxItem("dimension");
visualFilterCheckboxItem("help");
visualFilterListItem("place");
} }
handleVisualFilterChanges();
function visualFilterListItem(name, param)
{
$('select[name="' + name + '"]').change(function()
{
if (this.value == "" && name == "place")
param.pop();
else
param.push(this.value);
selectedOptions = gatherURLdata();
data = originalData;
filterData(selectedOptions);
availableOptions = [];
availableOptions = gatherData();
updateMenu(availableOptions);
});
}
visualFilterCheckboxItem("photo", paramPhoto);
visualFilterCheckboxItem("year", paramYear);
visualFilterCheckboxItem("month", paramMonth);
visualFilterCheckboxItem("genre", paramGenre);
visualFilterCheckboxItem("theme", paramTheme);
visualFilterCheckboxItem("dimension", paramDimension);
visualFilterCheckboxItem("help", paramHelp);
visualFilterListItem("place", paramPlace);
}); });
/*********************/ /*********************/

22
scripts/explorer_menu.js
View File

@ -96,11 +96,11 @@ function generateMenu(availableOptions)
$(".box.help .item-cont .generated").append(html); $(".box.help .item-cont .generated").append(html);
} }
$(".box.places select").append('<option value="">Aucun</option'); $(".box.places select").append('<option value="">Aucun filtre</option');
for (place of availableOptions.places) for (place of availableOptions.places)
$(".box.places select").append('<option value="' + place + '">' + place + '</option'); $(".box.places select").append('<option value="' + place + '">' + place + '</option');
$(".box.tags select").append('<option value="">Aucun</option'); $(".box.tags select").append('<option value="">Aucun filtre</option');
for (tag of availableOptions.tags) for (tag of availableOptions.tags)
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option'); $(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
} }
@ -116,16 +116,12 @@ function updateMenu(availableOptions)
{ {
if ($(this).prop("value") != "all" && $(this).prop("value") != "exist") if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
$(this).parent().addClass("filter"); $(this).parent().addClass("filter");
if ($(this).prop("value") == "exist") // special case for "exist" in photos
// special case for "exist" in photos
if ($(this).prop("value") == "exist")
{ {
if (array.includes("none") && ! (array.includes("bad") || array.includes("ok") || array.includes("good"))) if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
$(this).parent().addClass("filter"); $(this).parent().addClass("filter");
else else
$(this).parent().removeClass("filter"); $(this).parent().removeClass("filter");
if (array.length == 0)
$(this).parent().addClass("filter");
} }
} }
else else
@ -140,10 +136,16 @@ function updateMenu(availableOptions)
if (!array.includes($(this).prop("value"))) if (!array.includes($(this).prop("value")))
{ {
if ($(this).prop("value") != "") if ($(this).prop("value") != "")
{
$(this).hide(); $(this).hide();
$(this).attr('disabled', 'disabled'); // for iOS
}
} }
else else
{
$(this).show(); $(this).show();
$(this).removeAttr('disabled'); // for iOS
}
}); });
} }
@ -188,7 +190,7 @@ function URLGeneration(availableOptions)
for (a of param) for (a of param)
{ {
html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">'; html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
html += '<option value="">Aucun</option>'; html += '<option value="">Aucun filtre</option>';
for (i of names) for (i of names)
{ {
if (i == a) if (i == a)
@ -202,7 +204,7 @@ function URLGeneration(availableOptions)
if (!param.includes("all") && param.length >= 1 && name != "place") if (!param.includes("all") && param.length >= 1 && name != "place")
{ {
html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">'; html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
html += '<option value="">Aucun</option>'; html += '<option value="">Aucun filtre</option>';
for (i of names) for (i of names)
html += '<option value="' + i + '">' + i + '</option>'; html += '<option value="' + i + '">' + i + '</option>';
html += '</select></span>'; html += '</select></span>';

0
scripts/mail.js → scripts/informations.js
View File

79
scripts/painting.js
View File

@ -2,14 +2,17 @@ jQuery(document).ready(function($)
{ {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const pageId = urlParams.get('number'); const pageId = urlParams.get('number');
if (pageId > 1000)
i = pageId - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
else
i = pageId - 1; // index is 0
$.getJSON("data.json", function(data) $.getJSON("data.json", function(data)
{ {
if (!data[i]) // the number specified in URL does not exist var idx = 0; // search the index of the painting of filtered data
for (i = 0; i < data.length; i++)
{
if (data[i].number == pageId)
idx = i;
}
if (!data[idx]) // the number specified in URL does not exist
{ {
$(".container").css("display", "none"); $(".container").css("display", "none");
$("#info").css("display", "none"); $("#info").css("display", "none");
@ -18,75 +21,75 @@ jQuery(document).ready(function($)
function GetNumber() function GetNumber()
{ {
if (data[i].number > 1000) if (data[idx].number > 1000)
return "Inédit"; return "Inédit";
return data[i].number; return data[idx].number;
} }
// page title // page title
$("head title").append(GetNumber()); $("head title").append(GetNumber());
// photo // photo
if (data[i].photo != "none") if (data[idx].photo != "none")
$(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg"); $(".photo img").attr("src", "photos/paintings/normal/" + data[idx].number + ".jpg");
else else
$(".photo img").attr("src", "images/unknown.jpg"); $(".photo img").attr("src", "images/unknown.jpg");
$(".photo img").attr("alt", "Tableau " + data[i].number); $(".photo img").attr("alt", "Tableau " + data[idx].number);
// metadata // metadata
$(".metadata .content.number").append(GetNumber()); $(".metadata .content.number").append(GetNumber());
if (data[i].month != "—") if (data[idx].month != "—")
$(".metadata .content.date").append(data[i].month + " " + data[i].year); $(".metadata .content.date").append(data[idx].month + " " + data[idx].year);
else else
$(".metadata .content.date").append(data[i].year); $(".metadata .content.date").append(data[idx].year);
$(".metadata .content.dimension").append(data[i].dimension); $(".metadata .content.dimension").append(data[idx].dimension);
$(".metadata .content.support").append(data[i].support); $(".metadata .content.support").append(data[idx].support);
$(".metadata .content.genre").append(data[i].genre); $(".metadata .content.genre").append(data[idx].genre);
$(".metadata .content.theme").append(data[i].theme); $(".metadata .content.theme").append(data[idx].theme);
$(".metadata .content.place").append(data[i].place); $(".metadata .content.place").append(data[idx].place);
if (data[i].photo == "none") photoState = "aucune"; if (data[idx].photo == "none") photoState = "aucune";
if (data[i].photo == "bad") photoState = "mauvais"; if (data[idx].photo == "bad") photoState = "mauvais";
if (data[i].photo == "ok") photoState = "acceptable"; if (data[idx].photo == "ok") photoState = "acceptable";
if (data[i].photo == "good") photoState = "bon"; if (data[idx].photo == "good") photoState = "bon";
$(".metadata .content.photo").append(photoState); $(".metadata .content.photo").append(photoState);
if (data[i].help == "yes") if (data[idx].help == "yes")
$(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>'); $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else else
$(".metadata .content.help").append("non"); $(".metadata .content.help").append("non");
if (data[i].tags != "—") if (data[idx].tags != "—")
$(".metadata .content.tag").append(data[i].tags); $(".metadata .content.tag").append(data[idx].tags);
else else
$(".metadata .content.tag").parent().css("display", "none"); $(".metadata .content.tag").parent().css("display", "none");
if (data[i].comment != "—") if (data[idx].comment != "—")
$(".metadata .content.comment").append(data[i].comment); $(".metadata .content.comment").append(data[idx].comment);
else else
$(".metadata .content.comment").parent().css("display", "none"); $(".metadata .content.comment").parent().css("display", "none");
if (data[i].photo != "none") if (data[idx].photo != "none")
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg"); $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[idx].number + ".jpg");
else else
$(".metadata .content.original").parent().css("display", "none"); $(".metadata .content.original").parent().css("display", "none");
// cartel // cartel
$("#info .title").append(data[i].title); $("#info .title").append(data[idx].title);
if (data[i].month != "—") if (data[idx].month != "—")
$("#info .year").append(data[i].month + " " + data[i].year); $("#info .year").append(data[idx].month + " " + data[idx].year);
else else
$("#info .year").append(data[i].year); $("#info .year").append(data[idx].year);
format = data[i].paint + " sur " + data[i].support.toLowerCase(); format = data[idx].paint + " sur " + data[idx].support.toLowerCase();
if (data[i].dimension != "—") if (data[idx].dimension != "—")
format += " (" + data[i].dimension + ")"; format += " (" + data[idx].dimension + ")";
$("#info .format").append(format); $("#info .format").append(format);
if (data[i].comment != "—") if (data[idx].comment != "—")
$("#info .comment").prepend(data[i].comment); $("#info .comment").prepend(data[idx].comment);
else else
$("#info .comment").css("display", "none"); $("#info .comment").css("display", "none");
}); });

4
scripts/stats.js
View File

@ -80,10 +80,10 @@ jQuery(document).ready(function($)
var chartDimension = new Chart(canvasDimension, { var chartDimension = new Chart(canvasDimension, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["Allégorique", "Animal domestique", "Animalier", "Campagne", "Forêt", "Marine", "Montagne", "Métier", "Personne", "Urbain", "Végétal"], labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
datasets: [{ datasets: [{
label: 'nombre de tableaux', label: 'nombre de tableaux',
data: [2, 11, 67, 126, 3, 10, 5, 10, 46, 39, 39], data: [2, 42, 173, 59, 107],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795', borderColor: '#187795',
borderWidth: 1 borderWidth: 1

BIN
styles/fonts/hot-august-night.medium.ttf
View File

Binary file not shown.

22
styles/icons/ginou.svg Normal file
View File

@ -0,0 +1,22 @@
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg52" sodipodi:docname="ginou.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" viewBox="1.82 1.52 289.15 146.13">
<metadata id="metadata58">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs56"/>
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview54" showgrid="false" inkscape:zoom="2.8284271" inkscape:cx="105.70332" inkscape:cy="30.086436" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg52"/>
<g id="cvpage1_top" width="2115px" height="1531px" transform="matrix(0.21874614,0,0,0.21874614,-81.303809,-83.352205)">
<path d="m 617.834,445.367 c -3.87,-7.793 -10.141,-14.66 -19.11,-20.929 -8.969,-6.269 -20.055,-11.096 -33.785,-14.709 -13.73,-3.613 -26.663,-2.011 -39.415,4.884 -12.752,6.894 -28.229,19.654 -47.169,38.888 -18.94,19.233 -34.745,39.475 -48.166,61.688 -13.422,22.214 -24.569,45.435 -33.974,70.769 -9.404,25.333 -13.637,49.503 -12.902,73.659 0.735,24.157 5.068,43.206 13.206,58.055 8.138,14.849 18.882,27.613 32.744,38.9 13.863,11.288 29.771,19.647 48.482,25.475 18.712,5.828 31.831,9.896 39.984,12.398 8.153,2.502 13.306,7.141 15.704,14.139 2.399,6.997 10.031,8.334 23.261,4.074 13.23,-4.26 24.341,-8.935 33.863,-14.247 9.521,-5.312 18.39,-8.413 27.028,-9.451 8.639,-1.037 16.261,-2.259 23.229,-3.723 6.968,-1.464 12.768,-5.758 17.676,-13.086 4.908,-7.329 2.908,-13.947 -6.096,-20.169 -9.004,-6.222 -13.945,-14.692 -15.058,-25.813 -1.113,-11.121 0.223,-26.909 4.071,-48.114 3.849,-21.206 5.286,-36.532 4.379,-46.708 -0.907,-10.177 -2.377,-18.628 -4.479,-25.759 -2.102,-7.13 -6.046,-10.795 -12.021,-11.171 -5.975,-0.375 -16.626,1.299 -32.461,5.103 -15.834,3.804 -30.427,5.902 -44.474,6.395 -14.047,0.493 -23.925,3.744 -30.106,9.91 -6.181,6.166 -10.766,12.509 -13.974,19.329 -3.209,6.821 -5.444,13.969 -6.813,21.783 -1.369,7.814 0.142,13.414 4.605,17.066 4.462,3.651 10.057,5.861 17.051,6.733 6.994,0.871 13.443,0.73 19.653,-0.43 6.21,-1.161 14.083,-1.666 23.995,-1.541 9.911,0.125 18.349,-0.888 25.714,-3.088 7.366,-2.2 10.528,1.828 9.637,12.277 -0.891,10.448 -3.377,19.781 -7.579,28.441 -4.202,8.66 -9.423,14.891 -15.913,18.99 -6.49,4.098 -14.791,6.577 -25.298,7.556 -10.508,0.978 -23.009,0.492 -38.101,-1.48 -15.091,-1.972 -29.882,-8.103 -45.076,-18.684 -15.194,-10.581 -25.126,-20.122 -30.269,-29.077 -5.143,-8.955 -8.133,-18.46 -9.111,-28.967 -0.979,-10.507 -0.091,-24.184 2.706,-41.682 2.796,-17.497 7.019,-32.622 12.869,-46.094 5.85,-13.473 13.72,-25.468 23.984,-36.556 10.265,-11.088 18.865,-20.137 26.208,-27.575 7.344,-7.439 16.92,-12.711 29.186,-16.066 12.266,-3.355 24.344,-6.811 36.809,-10.534 12.464,-3.723 19.421,-4.144 21.202,-1.281 1.78,2.862 7.102,5.04 16.219,6.637 9.117,1.597 15.121,-0.498 18.3,-6.385 3.179,-5.886 4.832,-11.955 5.038,-18.497 0.207,-6.541 -1.583,-13.541 -5.453,-21.333" fill="#187795" fill-rule="evenodd" stroke="none" id="path37"/>
<path d="m 800.121,526.53 c 1.747,-8.066 1.543,-13.141 -0.621,-15.468 -2.165,-2.326 -8.674,-2.261 -19.837,0.198 -11.163,2.459 -23.869,8.973 -38.725,19.854 -14.856,10.881 -23.504,21.095 -26.356,31.128 -2.853,10.033 -2.451,17.409 1.225,22.48 3.675,5.072 5.628,14.604 5.95,29.052 0.322,14.448 -1.593,30.37 -5.838,48.524 -4.245,18.154 -5.978,36.059 -5.283,54.566 0.696,18.508 1.512,34.398 2.488,48.427 0.976,14.03 3.878,22.191 8.844,24.873 4.966,2.681 11.864,1.508 21.024,-3.576 9.159,-5.084 14.943,-12.699 17.625,-23.21 2.683,-10.511 5.892,-25.734 9.781,-46.395 3.888,-20.662 6.886,-40.521 9.136,-60.524 2.25,-20.003 4.933,-39.279 8.176,-58.745 3.243,-19.467 5.644,-33.929 7.319,-44.076 1.674,-10.146 3.345,-19.041 5.092,-27.108" fill="#187795" fill-rule="evenodd" stroke="none" id="path39"/>
<path d="m 986.156,456.14 c -5.209,-0.912 -15.415,-1.782 -31.102,-2.651 -15.688,-0.868 -25.343,1.111 -29.427,6.034 -4.084,4.922 -7.426,12.4 -10.186,22.79 -2.759,10.389 -5.464,19.372 -8.241,27.376 -2.778,8.003 -7.82,25.935 -15.367,54.648 -7.546,28.712 -12.633,46.62 -15.503,54.573 -2.869,7.955 -5.493,15.821 -7.995,23.973 -2.502,8.153 -7.023,18.243 -13.778,30.752 -6.755,12.509 -11.426,21.589 -14.237,27.674 -2.811,6.085 -3.149,11.008 -1.03,15.004 2.119,3.995 4.358,8.337 6.822,13.232 2.465,4.895 5.448,8.826 9.09,11.981 3.642,3.155 9.081,5.976 16.575,8.598 7.494,2.621 14.753,4.22 22.122,4.873 7.369,0.654 13.846,-0.49 19.74,-3.484 5.894,-2.995 10.221,-12.726 13.187,-29.657 2.965,-16.931 5.283,-35.405 7.064,-56.302 1.782,-20.896 5.44,-38.415 11.15,-53.388 5.711,-14.974 9.376,-26.918 11.172,-36.403 1.795,-9.484 6.363,-12.355 13.919,-8.75 7.557,3.606 14.672,9.769 21.684,18.783 7.012,9.013 12.151,14.109 15.66,15.529 13.6,15.075 5.642,43.191 3.087,61.077 -3.51,22.339 -5.178,40.468 -5.082,55.251 0.095,14.782 3.056,25.199 9.023,31.748 5.967,6.549 16.061,8.055 30.763,4.59 14.701,-3.466 24.398,-8.208 29.553,-14.453 5.154,-6.245 9.988,-11.757 14.73,-16.799 4.742,-5.042 11.376,-18.401 20.218,-40.712 8.841,-22.312 15.504,-41.392 20.306,-58.151 4.803,-16.759 7.985,-32.213 9.699,-47.1 1.714,-14.886 3.593,-26.235 5.727,-34.586 2.134,-8.351 4.538,-17.96 7.327,-29.284 2.789,-11.324 4.644,-23.783 5.652,-37.969 1.008,-14.187 1.275,-28.431 0.811,-43.412 -0.463,-14.981 -0.976,-24.773 -1.565,-29.843 -0.588,-5.07 -2.202,-8.958 -4.917,-11.85 -2.715,-2.892 -9.125,-2.247 -19.536,1.964 -10.41,4.212 -17.967,9.181 -23.031,15.146 -5.064,5.964 -8.18,11.895 -9.497,18.074 -1.318,6.179 -2.956,11.792 -4.995,17.106 -2.038,5.314 -2.789,11.755 -2.289,19.628 0.5,7.873 0.518,16.005 0.054,24.783 -0.463,8.778 -1.818,19.882 -4.129,33.84 -2.311,13.959 -5.402,30.855 -9.42,51.494 -6.865,39.492 -12.7,52.661 -16.296,22.319 -0.868,-8.072 -3.211,-14.907 -7.14,-20.83 -3.929,-5.923 -10.394,-12.431 -19.701,-19.834 -9.308,-7.402 -16.229,-13.924 -21.093,-19.877 -4.863,-5.953 -8.809,-14.117 -12.024,-24.882 -3.215,-10.765 -3.991,-20.931 -2.365,-30.982 1.627,-10.051 0.804,-15.833 -2.507,-17.621 -3.311,-1.788 -7.473,-3.107 -12.682,-4.02" fill="#187795" fill-rule="evenodd" stroke="none" id="path41"/>
<path d="m 746.58,499.577 c 4.168,1.486 8.476,0.078 13.129,-4.291 4.653,-4.369 9.502,-11.273 14.777,-21.041 5.275,-9.768 11.237,-17.005 18.17,-22.055 6.932,-5.05 11.689,-9.016 14.495,-12.089 2.806,-3.072 4.437,-8.166 4.97,-15.525 0.533,-7.359 0.784,-13.011 0.767,-17.227 -0.018,-4.215 -4.086,-8.092 -12.397,-11.816 -8.312,-3.724 -15.899,-5.58 -23.121,-5.657 -7.223,-0.077 -13.859,2.874 -20.223,8.996 -6.364,6.121 -11.12,10.088 -14.495,12.089 -3.374,2.001 -5.181,5.693 -5.507,11.252 -0.326,5.559 -0.132,11.078 0.59,16.821 0.722,5.742 0.667,14.488 -0.168,26.654 -0.835,12.166 -0.578,20.334 0.783,24.892 1.362,4.559 4.062,7.511 8.23,8.997" fill="#187795" fill-rule="evenodd" stroke="none" id="path43"/>
<path d="m 1543.368,587.308 c 0.691,-10.08 1.691,-24.393 3.045,-43.62 1.354,-19.226 2.902,-34.709 4.717,-47.184 1.814,-12.476 1.908,-21.244 0.285,-26.722 -1.623,-5.478 -5.901,-7.715 -13.039,-6.818 -7.137,0.898 -13.321,2.896 -18.847,6.089 -5.526,3.193 -10.32,10.351 -14.61,21.815 -4.29,11.464 -8.844,25.482 -13.877,42.722 -5.033,17.24 -8.037,31.398 -9.156,43.149 -1.119,11.75 -3.196,25.481 -6.331,41.845 -3.135,16.365 -4.716,31.755 -4.82,46.906 -0.103,15.15 1.002,27.637 3.369,38.056 2.366,10.419 4.679,19.381 7.048,27.313 2.369,7.932 11.545,14.225 27.963,19.177 16.418,4.953 29.539,7.806 39.987,8.697 10.449,0.89 21.168,-0.051 32.669,-2.869 11.501,-2.818 22.914,-5.473 34.782,-8.092 11.869,-2.619 20.572,-6.274 26.525,-11.137 5.953,-4.864 10.941,-12.381 15.201,-22.911 4.261,-10.529 7.082,-21.769 8.598,-34.256 1.516,-12.487 4.039,-28.761 7.689,-49.599 3.65,-20.838 6.231,-36.978 7.867,-49.188 1.635,-12.211 3.116,-24.627 4.514,-37.841 1.398,-13.214 1.976,-24.841 1.762,-35.434 -0.214,-10.594 -1.735,-23.03 -4.633,-37.9 -2.899,-14.871 -6.568,-23.118 -11.181,-25.134 -4.614,-2.017 -10.92,-1.941 -19.22,0.229 -8.3,2.171 -13.798,8.484 -16.757,19.242 -2.958,10.757 -5.269,23.201 -7.042,37.925 -1.774,14.723 -2.497,28.953 -2.203,43.368 0.294,14.414 -0.762,30.552 -3.22,49.183 -2.458,18.63 -4.442,35.196 -6.047,50.486 -1.604,15.291 -4.037,25.812 -7.415,32.066 -3.377,6.255 -6.356,10.912 -9.079,14.193 -2.722,3.282 -7.911,5.585 -15.814,7.02 -7.903,1.435 -15.209,1.668 -22.266,0.712 -7.057,-0.956 -12.158,-5.701 -15.547,-14.459 -3.388,-8.758 -5.378,-18.421 -6.065,-29.449 -0.687,-11.028 -0.835,-22.347 -0.452,-34.495 0.383,-12.148 0.908,-23.004 1.6,-33.085" fill="#187795" fill-rule="evenodd" stroke="none" id="path45"/>
<path d="m 1195.972,614.631 c 0.244,-13.649 0.919,-23.495 2.06,-30.007 1.141,-6.512 1.944,-13.156 2.448,-20.249 0.335,-4.717 9.962,-34.82 13.645,-41.639 12.22,-22.199 11.035,-19.897 20.619,-42.764 3.973,-7.358 8.007,-15.042 12.293,-23.419 0.085,-0.165 0.171,-0.329 0.259,-0.492 4.388,-8.125 13.41,-14.075 27.477,-18.126 14.348,-4.131 25.075,-5.3 32.69,-3.564 10.819,2.923 20.143,8.675 30.5,12.935 8.76,4.018 13.862,7.635 20.517,7.19 6.656,-0.445 15.983,0.763 28.425,3.68 6.857,1.608 12.217,3.457 16.139,5.575 11.95,10.104 11.405,16.81 18.729,29.682 4.043,5.272 5.426,18.17 7.924,24.983 2.498,6.814 3.042,14.186 1.658,22.467 -1.858,12.147 -2.993,24.363 -5.186,36.453 -0.966,4.596 -2.794,9.369 -5.547,14.467 -4.733,10.302 -6.056,15.1 -9.233,25.998 -3.087,11.876 -10.75,28.624 -15.875,39.874 -1.717,3.77 -3.471,7.314 -5.272,10.648 -3.573,6.617 -7.331,12.41 -11.348,17.508 -6.041,7.667 -12.815,16.773 -20.644,27.751 -7.829,10.978 -17.05,19.459 -28.102,25.845 -11.052,6.387 -22.785,10.494 -35.757,12.517 -12.633,1.97 -20.714,1.907 -24.605,-0.193 -0.104,-0.057 -0.206,-0.115 -0.304,-0.174 -3.764,-2.27 -8.427,-6.529 -14.21,-12.978 -5.783,-6.45 -11.82,-12.031 -18.398,-17.008 -6.578,-4.978 -12.669,-11.749 -18.562,-20.634 -5.894,-8.885 -9.881,-17.187 -12.151,-25.303 -2.269,-8.116 -4.555,-16.777 -6.964,-26.394 -2.41,-9.617 -3.468,-20.979 -3.225,-34.629 m 152.179,-90.914 c -2.284,-1.233 -15.975,-2.646 -19.198,-2.384 -9.929,1.543 -8.101,6.117 -18.064,7.539 -5.438,0.39 -10.564,2.147 -15.623,5.355 -5.058,3.208 -9.579,7.497 -13.777,13.071 -5.113,7.352 -10.033,14.686 -14.341,22.552 -3.703,6.858 -6.435,13.453 -8.302,20.032 -2.105,7.417 -2.349,15.176 -0.745,23.645 1.603,8.469 4.056,16.175 7.473,23.485 3.418,7.311 6.061,11.871 8.055,13.898 1.994,2.027 4.423,6.124 7.403,12.485 2.377,5.075 5.882,8.842 10.63,11.406 7.806,3.838 15.926,4.656 24.48,5.433 7.108,0.037 13.312,-1.138 18.908,-3.581 5.596,-2.443 10.561,-7.768 15.13,-16.23 4.57,-8.461 7.989,-16.942 10.421,-25.845 2.021,-7.4 4.849,-14.441 8.581,-21.352 5.236,-9.206 8.661,-17.825 10.804,-28.297 0.718,-7.928 0.271,-15.48 -1.363,-23.014 -1.633,-7.535 -2.39,-17.363 -6.308,-20.667 -9.587,-14.051 -6.409,-8.319 -24.164,-17.531" fill="#187795" fill-rule="evenodd" stroke="none" id="path47"/>
<path d="m 516.693,948.759 c -18.555,11.586 -31.766,20.77 -40.263,27.99 -8.496,7.22 -16.074,11.919 -23.093,14.321 -4.327,1.48 -8.904,2.132 -13.815,1.956 -3.057,-0.109 -6.243,-0.539 -9.58,-1.288 -3.959,-0.889 -8.458,-1.424 -13.549,-1.606 -6.096,-0.218 -13.041,0.07 -20.921,0.862 -2.719,0.273 -5.078,0.374 -7.078,0.303 -5.703,-0.204 -8.485,-1.815 -8.376,-4.858 0.056,-1.563 0.874,-3.504 2.452,-5.827 5.725,-8.428 22.768,-18.773 51.939,-31.526 29.172,-12.754 58.458,-27.287 89.254,-44.293 30.795,-17.006 61.275,-28.488 92.892,-34.992 31.616,-6.505 70.636,-14.89 118.916,-25.555 48.28,-10.665 95.595,-18.428 144.198,-23.658 48.602,-5.23 88.959,-10.011 122.993,-14.569 34.034,-4.559 68.888,-6.404 106.222,-5.622 27.918,0.584 55.931,1.381 84.784,2.413 9.732,0.348 19.559,0.723 29.51,1.125 1.329,0.054 2.655,0.105 3.979,0.152 37.971,1.358 73.716,0.076 108.827,-3.899 15.973,-1.808 30.446,-2.876 43.558,-3.845 16.714,-1.233 31.216,-2.304 43.794,-4.535 14.329,-2.543 22.78,-2.894 37,-3.485 8.053,-0.335 17.956,-0.747 31.823,-1.677 8.34,-0.559 17.127,-0.526 26.437,-0.492 17.314,0.065 36.434,0.136 57.839,-3.581 32.913,-5.716 59.92,-12.098 82.307,-19.449 11.967,-3.93 21.344,-5.771 28.228,-5.525 5.993,0.214 10.095,2.011 12.372,5.39 1.724,2.558 2.547,4.975 2.465,7.264 -0.15,4.208 -3.359,7.982 -9.657,11.402 -9.725,5.282 -30.218,12.947 -62.455,23.36 -14.43,4.662 -27.988,7.731 -42.349,9.834 -7.729,3.274 -18.96,6.954 -34.246,10.977 -36.502,9.607 -79.239,16.55 -127.179,24.339 -10.45,1.698 -21.147,3.436 -32.081,5.25 -61.094,10.139 -122.109,24.449 -185.951,43.611 -63.842,19.163 -123.194,35.253 -180.881,49.035 -57.687,13.783 -109.933,26.731 -159.224,39.461 -49.292,12.73 -97.724,27.51 -147.604,45.044 -11.941,4.198 -21.78,7.739 -29.993,10.695 -26.095,9.391 -35.773,12.875 -44.283,12.731 -0.985,-0.016 -2.039,-0.043 -3.138,-0.082 -10.307,-0.368 -24.656,-1.885 -24.461,-7.34 0.02,-0.573 0.201,-1.19 0.564,-1.853 4.187,-7.65 21.708,-17.63 53.399,-30.415 31.691,-12.784 62.516,-23.389 93.945,-32.319 31.43,-8.93 60.195,-17.804 87.665,-27.045 27.47,-9.241 56.273,-17.834 87.78,-26.188 31.507,-8.354 53.11,-13.615 65.838,-16.035 12.727,-2.42 25.659,-4.855 39.411,-7.423 13.752,-2.567 42.017,-11.369 86.14,-26.825 28.567,-10.007 61.227,-15.125 101.848,-21.49 22.119,-3.466 46.6,-7.303 74.065,-12.5 35.081,-6.637 64.001,-12.829 90.466,-18.733 -19.782,3.103 -32.889,3.337 -48.628,3.619 -8.272,0.147 -17.271,0.308 -28.349,0.905 -15.59,0.841 -29.733,2.203 -42.516,3.434 -16.136,1.554 -30.105,2.899 -42.083,2.723 -9.003,-0.132 -30.21,0.257 -55.011,0.712 -34.334,0.63 -75.556,1.386 -100.83,1.06 -43.53,-0.561 -71.703,2.888 -115.522,8.724 -11.852,1.578 -23.56,3.181 -35.059,4.756 -31.012,4.246 -60.504,8.284 -87.208,11.072 -31.861,3.326 -61.703,7.621 -94.419,12.329 -4.87,0.701 -9.804,1.411 -14.817,2.129 -20.951,2.997 -35.399,7.466 -48.752,11.596 -11.308,3.498 -21.832,6.753 -34.855,8.666 -28.401,4.171 -52.902,10.448 -74.67,19.128 -21.768,8.68 -41.46,18.577 -60.014,30.162" fill="#187795" fill-rule="evenodd" stroke="none" id="path49"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

92
styles/main.css
View File

@ -50,6 +50,23 @@ header {
margin-bottom:1.5rem; margin-bottom:1.5rem;
} }
nav {
display:flex;
flex-direction:row;
justify-content:center;
align-items:flex-end;
text-align:center;
height:3rem;
}
.ginou-icon {
padding:0;
margin:0;
margin-bottom:0.4rem;
margin-right:2rem;
width:4rem;
}
header nav ul { header nav ul {
padding:0; padding:0;
margin:0.6rem; margin:0.6rem;
@ -62,13 +79,6 @@ header nav ul li {
padding:0; padding:0;
} }
header nav ul li.title {
font-weight:bold;
font-size:1.8rem;
font-family:'HotAugust', 'Comic Sans MS';
color:#187795;
}
header nav ul li a:hover, header nav ul li a:hover,
header nav ul li.selected a { header nav ul li.selected a {
color:#2589BD; color:#2589BD;
@ -78,10 +88,18 @@ header nav ul li a {
padding:0; padding:0;
} }
@media only screen and (min-width:500px) and (max-width:1200px) { @media only screen and (min-width:600px) and (max-width:1200px) {
header nav ul li.title { header nav {
display:block; display:block;
height:auto;
}
header nav .ginou-icon {
display:block;
text-align:center;
margin:auto;
margin-bottom:0.5rem; margin-bottom:0.5rem;
margin-top:0.5rem;
} }
header nav ul li { header nav ul li {
@ -91,15 +109,32 @@ header nav ul li a {
@media only screen and (max-width:600px) { @media only screen and (max-width:600px) {
header nav { header nav {
margin:0;
display:block;
height:auto;
}
header nav .ginou-icon {
margin:0;
margin-top:0.5rem; margin-top:0.5rem;
margin-bottom:0.5rem; margin-bottom:0.2rem;
display:inline-block;
}
header nav ul {
margin:0;
}
header nav ul .hidden {
margin:0.6rem;
} }
header nav #hamburger { header nav #hamburger {
display:block; display: inline-block;
right:1rem; right: 1rem;
font-size:1.5rem; font-size: 1.5rem;
position:absolute; position: absolute;
margin-top: 0.35rem;
} }
header nav #hamburger .container { header nav #hamburger .container {
@ -138,18 +173,6 @@ header nav ul li a {
font-size:1.2rem; font-size:1.2rem;
padding:0.2rem; padding:0.2rem;
} }
header nav.active ul li:nth-child(1) {
padding-top:1rem;
}
header nav ul li.title {
font-size:1.8rem;
}
header nav ul li.title {
display:inline;
}
} }
article { article {
@ -208,6 +231,23 @@ article.main p.signature {
} }
article.main .bio-img {
float:right;
padding:1rem;
padding-top:0.25rem;
padding-right:0;
max-width:25vw;
}
@media only screen and (max-width:1200px) {
article.main .bio-img {
float:none;
padding:0;
max-width:90vw;
}
}
/* Exposition */ /* Exposition */
article #pagination { article #pagination {