First front-end prototype
This commit is contained in:
parent
c748f35786
commit
6b3f0df78a
44
biographie.html
Normal file
44
biographie.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • biographie</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<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>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>
|
||||
|
||||
<p>Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient : “J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin”. Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son œuvre.</p>
|
||||
|
||||
<p>Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse, “Depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don.” C'est ainsi que Geneviève réalise ses premieres aquarelles.</p>
|
||||
|
||||
<p>“Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quitté.” Ainsi est née Ginou !</p>
|
||||
|
||||
<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>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
107
divers.html
Normal file
107
divers.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • divers</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<link href="plugins/chart.min.css" rel="stylesheet">
|
||||
<script src="plugins/chart.bundle.min.js"></script>
|
||||
<script src="scripts/divers.js"></script>
|
||||
<script src="scripts/stats.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li class="selected"><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="divers">
|
||||
<h1>Divers</h1>
|
||||
|
||||
<h2>Atelier</h2>
|
||||
|
||||
<div id="gallery">
|
||||
<a data-fancybox="divers" href="images/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
|
||||
<img src="images/divers/mini/atelier.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/atelier2.jpg" data-caption="L'atelier dans lequel Ginou peignait (2015).">
|
||||
<img src="images/divers/mini/atelier2.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/palette.jpg" data-caption="La palette utilisée (vers 2012).">
|
||||
<img src="images/divers/mini/palette.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette utilisée (vers 2012).">
|
||||
<img src="images/divers/mini/palettezoom.jpg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Expositions</h2>
|
||||
|
||||
<div id="gallery">
|
||||
<a data-fancybox="divers" href="images/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002).">
|
||||
<img src="images/divers/mini/foirethierville.jpg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Presse</h2>
|
||||
|
||||
<p>En construction...</p>
|
||||
|
||||
<h2>Divers</h2>
|
||||
|
||||
<div id="gallery">
|
||||
<a data-fancybox="divers" href="images/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
|
||||
<img src="images/divers/mini/ginouchloe.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
|
||||
<img src="images/divers/mini/ginou.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
<img src="images/divers/mini/carnet.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="images/divers/normal/carnetouvert.jpg" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
<img src="images/divers/mini/carnetouvert.jpg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Statistiques</h2>
|
||||
<p>
|
||||
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint un total de 383 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 œuvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
|
||||
</p>
|
||||
|
||||
<div id="stats">
|
||||
<div id="stat">
|
||||
<canvas id="month" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div id="stat">
|
||||
<canvas id="month2" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div id="stat">
|
||||
<canvas id="month3" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
30
explorer.html
Normal file
30
explorer.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • explorer</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<h1>Explorer</h1>
|
||||
<p>En construction...</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
92
exposition.html
Normal file
92
exposition.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • exposition</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<script src="scripts/exposition.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<h1>Exposition</h1>
|
||||
|
||||
<div id="gallery">
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/15.jpg" data-fancybox-index="15">
|
||||
<img src="images/paintings/mini/15.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/19.jpg" data-fancybox-index="19">
|
||||
<img src="images/paintings/mini/19.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/22.jpg" data-fancybox-index="22">
|
||||
<img src="images/paintings/mini/22.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/26.jpg">
|
||||
<img src="images/paintings/mini/26.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/34.jpg">
|
||||
<img src="images/paintings/mini/34.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/42.jpg">
|
||||
<img src="images/paintings/mini/42.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/43.jpg">
|
||||
<img src="images/paintings/mini/43.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/44.jpg">
|
||||
<img src="images/paintings/mini/44.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/51.jpg">
|
||||
<img src="images/paintings/mini/51.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/55.jpg">
|
||||
<img src="images/paintings/mini/55.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/57.jpg">
|
||||
<img src="images/paintings/mini/57.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/58.jpg">
|
||||
<img src="images/paintings/mini/58.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/59.jpg">
|
||||
<img src="images/paintings/mini/59.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="exposition" href="images/paintings/normal/64.jpg">
|
||||
<img src="images/paintings/mini/64.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/favicon.png
Normal file
BIN
images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
BIN
images/ginoupainting.jpg
Normal file
BIN
images/ginoupainting.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
38
index.html
Normal file
38
index.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • accueil</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title selected"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="main">
|
||||
<h1>L'art de Ginou</h1>
|
||||
<p>Ginou, de son vrai nom Geneviève Collignon (née à Mouilly, 1936-2017), était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.</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, de 1958 à 2017, sont recensés 383 tableaux. 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 en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site 261<!-- rendre cette valeur dynamique en fonction de la valeur des tableaux possédant une photo --> des 383 tableaux numérotés.</p>
|
||||
|
||||
<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 œuvre.</p>
|
||||
|
||||
<p class="signature">Ses enfants et ses petits-enfants</p>
|
||||
|
||||
<img src="images/ginoupainting.jpg">
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
46
informations.html
Normal file
46
informations.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • informations</title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="scripts/mail.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li class="selected"><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="main">
|
||||
<h1>Informations</h1>
|
||||
<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>
|
||||
|
||||
<h3>Notice d'utilisation</h3>
|
||||
|
||||
<p>En construction...</p>
|
||||
|
||||
<h3>Informations technique</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<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>Dernière mise à jour en janvier 2021.</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
59
painting.html
Normal file
59
painting.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • tableau <!-- insérer le nom et/ou le numéro --></title>
|
||||
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
|
||||
<meta name="author" content="Famille Marchal">
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="styles/main.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="title"><a href="index.html">Ginou</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>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="painting">
|
||||
|
||||
<div class="container">
|
||||
<div></div> <!-- fake div to center with a flex box -->
|
||||
|
||||
<div>
|
||||
<img src="images/paintings/normal/26.jpg">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="metadata">
|
||||
<li><span class="title">numéro :</span><span class="content"> 42</span></li>
|
||||
<li><span class="title">date :</span><span class="content"> février 1974</span></li>
|
||||
<li><span class="title">format :</span><span class="content"> 30x39</span></li>
|
||||
<li><span class="title">support :</span><span class="content"> toile</span></li>
|
||||
<li><span class="title">thème :</span><span class="content"> Reproduction</span></li>
|
||||
<li><span class="title">lieu :</span><span class="content"> -</span></li>
|
||||
<li><span class="title">catégorie :</span><span class="content"> -</span></li>
|
||||
<li><span class="title">état photo :</span><span class="content"> mauvais</span></li>
|
||||
<li><span class="title">aide requise :</span><span class="content"> <a href="informations.html"><strong>oui (!)</strong></a></span></li>
|
||||
<li><span class="title">commentaire :</span><span class="content"> Reproduction de Courbet</span></li>
|
||||
<li><span class="content"><a href="images/paintings/original/42.jpg">photo originale ⭧</a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="info">
|
||||
<span class="title">La Truite</span><span class="year">1960</span>
|
||||
<span class="format">Huile sur toile (55x35)</span>
|
||||
<span class="comment">Reproduction de Courbet</span>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
7
plugins/chart.bundle.min.js
vendored
Normal file
7
plugins/chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
plugins/chart.min.css
vendored
Normal file
1
plugins/chart.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
|
||||
2
plugins/jquery-3.5.1.min.js
vendored
Normal file
2
plugins/jquery-3.5.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
plugins/jquery.fancybox.min.css
vendored
Normal file
1
plugins/jquery.fancybox.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
13
plugins/jquery.fancybox.min.js
vendored
Normal file
13
plugins/jquery.fancybox.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11
scripts/divers.js
Normal file
11
scripts/divers.js
Normal file
@ -0,0 +1,11 @@
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
$('[data-fancybox="divers"]').fancybox({
|
||||
infobar: false,
|
||||
toolbar: true,
|
||||
smallBtn: false,
|
||||
buttons : [ "close" ],
|
||||
arrows: true,
|
||||
transitionEffect: "fade",
|
||||
});
|
||||
});
|
||||
27
scripts/exposition.js
Normal file
27
scripts/exposition.js
Normal file
@ -0,0 +1,27 @@
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
$('[data-fancybox="exposition"]').fancybox({
|
||||
infobar: false,
|
||||
toolbar: true,
|
||||
smallBtn: false,
|
||||
buttons : [ "arrowLeft", "arrowRight", "close" ],
|
||||
arrows: false,
|
||||
transitionEffect: "fade",
|
||||
baseClass: 'fancybox-custom-layout',
|
||||
|
||||
caption : function( instance, item ) {
|
||||
// index put inside, we can get the number: `item.opts.fancyboxIndex`
|
||||
// and thus what we what inside the caption!
|
||||
|
||||
// TODO read json to input good captions info
|
||||
return '\
|
||||
<div id="info">\
|
||||
<span class="info"><a href="painting.html?number=26">ℹ︎</span></a></span>\
|
||||
<span class="title">La Truite</span><span class="year">1960</span>\
|
||||
<span class="format">Huile sur toile (55x35)</span>\
|
||||
<span class="comment">Reproduction de Courbet</span>\
|
||||
</div>\
|
||||
';
|
||||
}
|
||||
});
|
||||
});
|
||||
11
scripts/mail.js
Normal file
11
scripts/mail.js
Normal file
@ -0,0 +1,11 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
116
scripts/stats.js
Normal file
116
scripts/stats.js
Normal file
@ -0,0 +1,116 @@
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
var canvasMonth = document.getElementById("month").getContext('2d');
|
||||
var chartMonth = new Chart(canvasMonth, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var canvasMonth2 = document.getElementById("month2").getContext('2d');
|
||||
var chartMonth2 = new Chart(canvasMonth2, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var canvasMonth3 = document.getElementById("month3").getContext('2d');
|
||||
var chartMonth3 = new Chart(canvasMonth3, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
81
styles/fancybox.css
Normal file
81
styles/fancybox.css
Normal file
@ -0,0 +1,81 @@
|
||||
.fancybox-custom-layout .fancybox-bg {
|
||||
background:#f6f6f6;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout.fancybox-is-open .fancybox-bg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-slide--image {
|
||||
padding:1.1rem;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-caption {
|
||||
background:#f6f6f6;
|
||||
color:black;
|
||||
padding:0;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-toolbar {
|
||||
bottom:0;
|
||||
top:initial;
|
||||
}
|
||||
|
||||
|
||||
.fancybox-custom-layout.fancybox-can-zoomIn .fancybox-show-caption,
|
||||
.fancybox-custom-layout.fancybox-can-zoomIn .fancybox-caption,
|
||||
.fancybox-custom-layout.fancybox-can-zoomIn .fancybox-toolbar {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
.fancybox-custom-layout.fancybox-can-pan .fancybox-show-caption,
|
||||
.fancybox-custom-layout.fancybox-can-pan .fancybox-caption,
|
||||
.fancybox-custom-layout.fancybox-can-pan .fancybox-toolbar {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
|
||||
.fancybox-custom-layout .fancybox-button {
|
||||
color:#38686A;
|
||||
background:#f6f6f6;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-button:hover {
|
||||
color:#2589BD;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-close-small {
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:auto;
|
||||
margin:0;
|
||||
margin-right:-3rem;
|
||||
padding:0rem;
|
||||
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-close-small:hover {
|
||||
color:#2589BD;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-caption .fancybox-caption__body {
|
||||
padding:25px;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-caption #info {
|
||||
display:block;
|
||||
margin:auto;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-caption #info a {
|
||||
color:#38686A;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.fancybox-custom-layout .fancybox-caption #info a:hover {
|
||||
color:#2589BD;
|
||||
}
|
||||
BIN
styles/fonts/Commissioner-VariableFont_wght.ttf
Normal file
BIN
styles/fonts/Commissioner-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
styles/fonts/Rubik-VariableFont_wght.ttf
Normal file
BIN
styles/fonts/Rubik-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
styles/fonts/hot-august-night.medium.ttf
Normal file
BIN
styles/fonts/hot-august-night.medium.ttf
Normal file
Binary file not shown.
BIN
styles/fonts/newsgothicstd.otf
Normal file
BIN
styles/fonts/newsgothicstd.otf
Normal file
Binary file not shown.
213
styles/main.css
Normal file
213
styles/main.css
Normal file
@ -0,0 +1,213 @@
|
||||
@font-face {
|
||||
font-family:Rubik;
|
||||
src:url('fonts/Rubik-VariableFont_wght.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:HotAugust;
|
||||
src:url('fonts/hot-august-night.medium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:Commissioner;
|
||||
src:url('fonts/Commissioner-VariableFont_wght.ttf');
|
||||
}
|
||||
|
||||
body {
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
display:block;
|
||||
font-family:'Rubik', Helvetica;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#38686A;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
header nav {
|
||||
border-top:.2rem solid #187795;
|
||||
box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
|
||||
border-bottom:.1rem solid #eff0f3;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
padding:0;
|
||||
margin:0.6rem;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
display:inline;
|
||||
list-style-type:none;
|
||||
margin:0 2.8rem;
|
||||
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.selected a {
|
||||
color:#2589BD;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
article {
|
||||
width:85vw;
|
||||
margin:auto;
|
||||
display:block;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article p {
|
||||
font-family: 'Commissioner', Helvetica;
|
||||
}
|
||||
|
||||
article.main {
|
||||
width:55vw;
|
||||
text-align:justify;
|
||||
}
|
||||
|
||||
article.main img {
|
||||
margin:auto;
|
||||
max-width:30vw;
|
||||
text-align:center;
|
||||
display:block;
|
||||
}
|
||||
|
||||
article.main p.signature {
|
||||
margin-top:2rem;
|
||||
margin-bottom:2rem;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
|
||||
/* Exposition */
|
||||
|
||||
article #gallery {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
|
||||
margin:auto;
|
||||
margin-top:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article #gallery img {
|
||||
max-height:30vh;
|
||||
max-width:40vw;
|
||||
margin:0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Cartel (expo & painting) */
|
||||
|
||||
#info {
|
||||
width:300px;
|
||||
box-shadow:.2rem .2rem .2rem .2rem rgba(0,0,0,.1);
|
||||
padding:0.65rem 0 0.65rem 1.15rem;
|
||||
position:relative;
|
||||
display:block;
|
||||
|
||||
margin:auto;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
#info .info {
|
||||
font-size:1.2rem;
|
||||
position:absolute;
|
||||
top:0.4rem;
|
||||
right:1rem;
|
||||
font-family:monospace;
|
||||
}
|
||||
|
||||
#info .title {
|
||||
font-weight:bold;
|
||||
font-style:italic;
|
||||
margin-right:0.65rem;
|
||||
}
|
||||
|
||||
#info .format {
|
||||
display:block;
|
||||
margin-top:0.3rem;
|
||||
margin-bottom:1.15rem;
|
||||
}
|
||||
|
||||
#info .comment {
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
/* Painting */
|
||||
|
||||
article.painting .container {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:center;
|
||||
align-self: flex-end;
|
||||
position:relative;
|
||||
margin-bottom:1.8rem;
|
||||
}
|
||||
|
||||
article.painting .container img {
|
||||
max-height:75vh;
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
article.painting .container ul.metadata {
|
||||
width:15vw;
|
||||
display:block;
|
||||
margin:auto;
|
||||
margin-left:0;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
article.painting .container .metadata span.title {
|
||||
font-variant:small-caps;
|
||||
}
|
||||
|
||||
article.painting .container .metadata span.content {
|
||||
font-size:0.9em;
|
||||
}
|
||||
|
||||
|
||||
/* Divers */
|
||||
|
||||
article #stats {
|
||||
margin-top:2.5rem;
|
||||
margin-bottom:1.5rem;
|
||||
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
article #stats #stat {
|
||||
width:28vw;
|
||||
margin-right:4vw;
|
||||
margin-left:4vw;
|
||||
}
|
||||
|
||||
|
||||
/* Informations */
|
||||
|
||||
.mail {
|
||||
font-weight:bold;
|
||||
font-size:1.2rem;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user