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

Misc. updates on all front-end pages

Browse Source
This commit is contained in:
Théo Marchal 2021-01-28 18:46:11 +01:00
parent 2760c2093a
commit 6c5fd9ca2a
11 changed files with 90 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
biographie.html
View File

@ -17,7 +17,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
@ -29,9 +30,7 @@
<article class="main">
<h1>Biographie</h1>
<p><strong>En construction...</strong></p>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de Mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des Côtes de Meuse.</p>
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des Côtes de Meuse.</p>
<p>Comme l'écrit Ginou dans un texte sur sa jeunesse, “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.”. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
@ -44,6 +43,8 @@
<p>Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde !</p>
<p>Curiosité de la vie, Ginou était en train de completer la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
<p><img src="images/genevievedugny.jpg"></p>
</article>
</body>
</html>

31
divers.html
View File

@ -24,7 +24,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
@ -39,6 +40,8 @@
<h2>Atelier</h2>
<p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
<div id="gallery">
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
<img src="photos/divers/mini/atelier.jpg">
@ -59,15 +62,39 @@
<h2>Expositions</h2>
<p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles.<br>
Voici une sélection de quelques photos issues de ces événements.</p>
<div id="gallery">
<a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
<img src="photos/divers/mini/expodugny.jpg">
</a>
<a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="À la fête du collège Saint-Jean de Verdun (2005).">
<img src="photos/divers/mini/exposaintjean.jpg">
</a>
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="À la foire aux puces de Dugny-sur-Meuse (2004).">
<img src="photos/divers/mini/foiredugny.jpg">
</a>
<a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002).">
<img src="photos/divers/mini/foirethierville.jpg">
</a>
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
<img src="photos/divers/mini/derniereexpo.jpg">
</a>
</div>
<h2>Presse</h2>
<p>En construction...</p>
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
<div id="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo">
<img src="photos/divers/mini/ainesdugny.jpg">
</a>
</div>
<h2>Divers</h2>

3
explorer.html
View File

@ -17,7 +17,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li class="selected"><a href="explorer.html">Explorer</a></li>

7
exposition.html
View File

@ -22,7 +22,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li class="selected"><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
@ -35,7 +36,9 @@
<article>
<h1>Exposition</h1>
<div id="gallery">
<p style="text-align:center;">Cliquez sur une image pour la voir en grand avec ses détails.</p>
<div id="gallery" class="exposition">
<a data-fancybox="exposition" href="photos/paintings/normal/15.jpg" data-fancybox-index="15">
<img src="photos/paintings/mini/15.jpg">
</a>

BIN
images/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 718 B

After

Width:  |  Height:  |  Size: 289 B

BIN
images/genevievedugny.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

5
index.html
View File

@ -17,7 +17,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title selected"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li class="selected"><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
@ -37,7 +38,7 @@
<p class="signature">Ses enfants et ses petits-enfants</p>
<img src="images/ginoupainting.jpg" alt="Ginou peignant">
<p><img src="images/ginoupainting.jpg" alt="Ginou peignant"></p>
</article>
</body>
</html>

25
informations.html
View File

@ -19,7 +19,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
@ -29,19 +30,29 @@
</nav>
</header>
<article class="main">
<article class="main infos">
<h1>Informations</h1>
<h2>Contact</h2>
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession d'une de ses œuvres qui n'est pas réportorié ou dont la photo est manquante, vous pouvez nous contacter pour que nous puissions l'intégrer. Nous vous en serions extrêmement reconnaissants !</p>
<p>Vous pouvez nous joindre en cliquant ici : <a href="mailto:badmail" class="mail">nous contacter</a>.</p>
<p>Vous pouvez nous joindre en cliquant ici&#8239;: <a href="mailto:badmail" class="mail">nous contacter</a> (cela va devrait ouvrir votre client mail par défaut).</p>
<h3>Notice d'utilisation</h3>
<h2>Notice d'utilisation</h2>
<p>Le site est constitué autour de deux rubriques majeures&#8239;: <em>Exposition</em> et <em>Explorer</em>.<br></p>
<p>En construction...</p>
<h4>Exposition</h4>
<p>Cette rubrique présente sous la forme d'une galerie qualitative. Seuls les tableaux dont nous possédons une photo de qualité un minimum correct sont affichés. Ceci la rend incomplet, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur une photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur (avec les flèches de son clavier ou en glissant sur l'écran de son téléphone) pour voir la photo du tableau en grand. En bas, se trouve un cartel avec les informations essentiels du tableau. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple.</p>
<h4>Explorer</h4>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'entièreté des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Évidemment, il est possible qu'il n'en existe pas, ce qui sera alors indiqué.<br>
Le résultat affiché sera sous la forme d'un tableau, mais il est également possible de l'afficher de la même manière que dans la rubrique Exposition en cliquant sur le bouton en haut à gauche (seulement, il risque d'y avoir un certain nombre de tableaux dont la photo est indisponible, en fonction des critères de sélection).</p>
<h3>Informations technique</h3>
<h4>Divers</h4>
<p>Cette page regroupe diverses photos et informations&#8239;: une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'exposition, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez du contenu intéressant, notamment pour les coupures de presse.</p>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que du plugin <a href="https://fancyapps.com/fancybox/3/">FancyBox 3</a> et <a href="https://www.chartjs.org/">Chart.js</a>. Les polices de caractères utilisées sont <em>Rubik</em>, <em>Commissioner</em> et <em>Hot August Night</em>.</p>
<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 du plugin <a href="https://fancyapps.com/fancybox/3/">FancyBox 3</a> et <a href="https://www.chartjs.org/">Chart.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>.</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>

3
painting.html
View File

@ -17,7 +17,8 @@
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title"><a href="index.html">Ginou</a></li>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>

16
scripts/mail.js
View File

@ -3,9 +3,17 @@ jQuery(document).ready(function($) {
// a n t i s p a m (hopefully)
$('a.mail').on('click', function() {
var href = $(this).attr('href');
var a1 = "adres" ; var a2 = "se em"; var a3 = "ail";
var goodMail = a1 + a2 + a3;
$(this).attr('href', href.replace('badmail', goodMail));
$(this).html(goodMail);
var a1 = "hoo";
var a2 = "den" ;
var a3 = "@";
var a4 = "marc";
var a5 = "ya";
var a6 = ".c";
var a7 = "hal";
var a8 = "om";
var a9 = "is_";
var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8;
console.log(goodMail + '?subject=[Ginou] Contact');
$(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact'));
});
});

17
styles/main.css
View File

@ -67,7 +67,7 @@ header nav ul li a {
}
header nav ul li {
margin:0 1rem;
margin:0 0.7rem;
}
}
@ -173,7 +173,6 @@ article.main img {
}
@media only screen and (max-width: 1200px) {
/*@media only screen and (max-width: 1000px) {*/
article.main {
width:85vw;
}
@ -198,6 +197,9 @@ article #gallery {
margin:auto;
margin-top:0;
}
article #gallery.exposition {
text-align:center;
}
@ -212,6 +214,11 @@ article #gallery img {
max-height:85vh;
max-width:85vw;
}
article #gallery {
display:grid;
text-align:center;
}
}
@ -365,7 +372,11 @@ article #stats #stat {
/* Informations */
.mail {
article.infos .mail {
font-weight:bold;
font-size:1.2rem;
}
article.infos h4 + p {
margin-left:1rem;
}