Ajout du menu et page de présentation

This commit is contained in:
Miraty 2019-12-07 12:08:09 +01:00
parent d4971177e8
commit 576622da12
5 changed files with 242 additions and 159 deletions

159
debut.inc.php Normal file
View File

@ -0,0 +1,159 @@
<?php
if (!isset($_GET['chemin']) AND preg_match("#index.php#", $_SERVER['SCRIPT_NAME'])) {
header('Location: index.php?chemin=');
} ?>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Super·F·lux<?php
$nomDossiers = preg_split("#/#", $_GET['chemin']); // Sépare le chemin en une liste de dossiers qui le composent
foreach ($nomDossiers as $niveauDossier => $nomDossier) {
if (isset($nomDossier)) {
if (!is_null($nomDossier)) {
echo " > " . $nomDossier;
}
}
}
?></title>
<meta name="author" content="Cécile Chevallier">
<meta name="publisher" content="Miraty">
<meta name="distribution" content="global">
<meta name="robots" content="index, follow">
<meta name="keywords" lang="fr" content="superflux">
<meta name="description" content="Super·F·lux, photographies de Cécile Chevallier sous CC BY-SA 4.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<?php
$env = "prod";
require "lessphp/lessc.inc.php";
$less = new lessc;
if ($env == "prod") { // En production : minimise et met en cache style.less dans style.css
$less->setFormatter("compressed");
$less->checkedCompile("style.less", "style.css");
echo file_get_contents("ubuntu/ubuntu.min.css") . file_get_contents("style.css"); // Inclus toutes les CSS dans le document HTML (= moins de requêtes HTTP)
} else if ($env == "dev") { // En développement : compile style.less à chaque chargement de page
echo file_get_contents("ubuntu/ubuntu.min.css") . $less->compileFile("style.less");
} else {
echo "Erreur : $env doit valoir prod ou dev";
} ?>
</style>
<!-- Lightbox https://lokeshdhakar.com/projects/lightbox2/ -->
<link href="lightbox/dist/css/lightbox.min.css" rel="stylesheet">
<script src="lightbox/dist/js/lightbox-plus-jquery.min.js"></script>
<script>
lightbox.option({
'resizeDuration': 0,
'fadeDuration': 200
})
</script>
</head>
<body>
<header>
<h1><a href="index.php" title="Retour à la page d'accueil">Super·F·lux</a></h1>
<nav>
<a href="index.php?chemin="><div>Accueil</div></a>
<a href="presentation.php"><div>Qui suis-je ?</div></a>
<a href="commentaires.php"><div>Commentaires</div></a>
</nav>
<?php
if (preg_match("#index.php#", $_SERVER['SCRIPT_NAME'])) {
$nomDossiers = preg_split("#/#", $_GET['chemin']); // Sépare le chemin en une liste de dossiers qui le composent
foreach ($nomDossiers as $niveauDossier => $nomDossier) { ?>
<h<?php echo $niveauDossier + 2; ?>><a href="index.php?chemin=<?php
if (array_key_last($nomDossiers) == $niveauDossier) {
echo $_GET['chemin'];
} else {
echo rtrim(stristr($_GET['chemin'], $nomDossiers[$niveauDossier + 1], TRUE), "/");
}
?>"><?php echo $nomDossier; ?></a></h<?php echo $niveauDossier + 2; ?>>
<section class="presentation">
<?php
switch ($nomDossier) {
case "Escape games": ?>
De ces instants qui échappent aux lois de la gravité, sortent du cadre ou des sentiers battus, changent de cap, on aperçoit enfin le bout du tunnel, on peut enfin prend l'air…
<br>
Ouverture des possibles.
<?php break;
case "Le chant du Petit": ?>
Les petites choses chantent aussi.
<?php break;
case "Landscape games": ?>
Lieux démergence des Escape games. Composés des mille et un chants du Petit.
<?php break;
case "Créatures fantastiques": ?>
Je vais mieux quand dun arbre émerge une grand-mère prenant soin d'une jeune touffe d'herbe, un oiseau dans une fleur, un visage sur un arbre, un dragon dans les nuages.
<br>
Je me sens vivante quand j'aperçois un coq émergeant d'une crotte de chien sur un trottoir, quand la fée des neiges apparaît à mon balcon, quand les ombres suggèrent peut-être des oiseaux végétaux, quand un visage apparaît dans une feuille de chou.
<?php break;
case "s-Faire-s": ?>
Au contraire du croisement de fer, ce qui croît quand on l's Faire (s) les sphères.
<?php break;
case "Super-Positions et autres Super-Cheries": ?>
Montages et collages sous logiciel dédié (Photoshop, peintures)
<?php break;
case "Traits de lumière": ?>
Light-Painting, peindre avec la lumière, ou plutôt avec lappareil-pinceau, puisque peindre avec la lumière est déjà lobjet de la photographie. Ces traits révèlent parfois des créatures fantastiques.
<?php break;
case "Aqua bon": ?>
Lieu et source de vie par essence, mouvante, calme ou soulevée par la brise, leau est souvent le lieu de naissance de créatures fantastiques.
<?php break;
case "Forts Traits": ?>
Portraits studio, cours municipaux pour adultes, 2015
<?php break;
case "": ?>
<div class="contPremiereImage"><img class="premiereImage" src="index.jpg" alt="Vive la lenteur"/></div>
Super·F·lux est une collection de perceptions lumineuses (lux) du monde tel que je (une ·F· Femme) l'aime (Super).
<br><br>
Des instants, des phénomènes, des êtres, des petites choses qui peuvent sembler superflues, anodines, banales, pas originales, à côté desquelles il est tout à fait possible de passer sans les voir. Et qui sont pourtant essentielles.
<blockquote>
« Je préfère vivre dans un monde animé. Je crois que nos chances de créer une culture plus saine, dynamique, libre et équilibrée sont meilleures si nous nous percevons nous-mêmes comme des cellules vivantes appartenant à un corps vivant, imprégné dune conscience sous-jacente, plutôt que de percevoir le monde comme de la matière inanimée et exploitable. »
<br>
<div class="source"><cite><small>Starhawk, « Quel monde voulons-nous ? », éditions Cambourakis, collection Sorcières, 2019</small></cite></div>
</blockquote>
<?php break;
} ?>
</section>
<?php } ?>
<?php } ?>
</header>

11
fin.inc.php Normal file
View File

@ -0,0 +1,11 @@
<footer>
<br>
Images créées par Cécile Chevallier et diffusées sous CC BY-SA 4.0.
<br>
<a href="https://code.antopie.org/miraty/superflux">Site Web</a> créé par <a href="https://www.antopie.org">Miraty</a> sous <a href="LICENSE.html">AGPLv3+</a>.
</footer>
</body>
</html>

161
index.php
View File

@ -1,9 +1,8 @@
<?php require "debut.inc.php"; ?>
<?php <?php
if (!isset($_GET['chemin'])) {
header('Location: index.php?chemin=');
}
function creerMiniature($cheminComplet, $adresseImage, $nomImage) { function creerMiniature($cheminComplet, $adresseImage, $nomImage) {
if (!file_exists($cheminComplet . "/400/" . $nomImage)) { if (!file_exists($cheminComplet . "/400/" . $nomImage)) {
@ -42,148 +41,7 @@ if (!function_exists('array_key_last')) {
} }
} ?> } ?>
<main class="gallerie">
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Super·F·lux<?php
$nomDossiers = preg_split("#/#", $_GET['chemin']); // Sépare le chemin en une liste de dossiers qui le composent
foreach ($nomDossiers as $niveauDossier => $nomDossier) {
if (isset($nomDossier)) {
if (!is_null($nomDossier)) {
echo " > " . $nomDossier;
}
}
}
?></title>
<meta name="author" content="Cécile Chevallier">
<meta name="publisher" content="Miraty">
<meta name="distribution" content="global">
<meta name="robots" content="index, follow">
<meta name="keywords" lang="fr" content="superflux">
<meta name="description" content="Super·F·lux, photographies de Cécile Chevallier sous CC BY-SA 4.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<?php
$env = "prod";
require "lessphp/lessc.inc.php";
$less = new lessc;
if ($env == "prod") { // En production : minimise et met en cache style.less dans style.css
$less->setFormatter("compressed");
$less->checkedCompile("style.less", "style.css");
echo file_get_contents("ubuntu/ubuntu.min.css") . file_get_contents("style.css"); // Inclus toutes les CSS dans le document HTML (= moins de requêtes HTTP)
} else if ($env == "dev") { // En développement : compile style.less à chaque chargement de page
echo file_get_contents("ubuntu/ubuntu.min.css") . $less->compileFile("style.less");
} else {
echo "Erreur : $env doit valoir prod ou dev";
} ?>
</style>
<!-- Lightbox https://lokeshdhakar.com/projects/lightbox2/ -->
<link href="lightbox/dist/css/lightbox.min.css" rel="stylesheet">
<script src="lightbox/dist/js/lightbox-plus-jquery.min.js"></script>
<script>
lightbox.option({
'resizeDuration': 0,
'fadeDuration': 200
})
</script>
</head>
<body>
<header>
<h1><a href="index.php" title="Retour à la page d'accueil">Super·F·lux</a></h1>
<?php
$nomDossiers = preg_split("#/#", $_GET['chemin']); // Sépare le chemin en une liste de dossiers qui le composent
foreach ($nomDossiers as $niveauDossier => $nomDossier) { ?>
<h<?php echo $niveauDossier + 2; ?>><a href="index.php?chemin=<?php
if (array_key_last($nomDossiers) == $niveauDossier) {
echo $_GET['chemin'];
} else {
echo rtrim(stristr($_GET['chemin'], $nomDossiers[$niveauDossier + 1], TRUE), "/");
}
?>"><?php echo $nomDossier; ?></a></h<?php echo $niveauDossier + 2; ?>>
<section class="presentation">
<?php
switch ($nomDossier) {
case "Escape games": ?>
De ces instants qui échappent aux lois de la gravité, sortent du cadre ou des sentiers battus, changent de cap, on aperçoit enfin le bout du tunnel, on peut enfin prend l'air…
<br>
Ouverture des possibles.
<?php break;
case "Le chant du Petit": ?>
Les petites choses chantent aussi.
<?php break;
case "Landscape games": ?>
Lieux démergence des Escape games. Composés des mille et un chants du Petit.
<?php break;
case "Créatures fantastiques": ?>
Je vais mieux quand dun arbre émerge une grand-mère prenant soin d'une jeune touffe d'herbe, un oiseau dans une fleur, un visage sur un arbre, un dragon dans les nuages.
<br>
Je me sens vivante quand j'aperçois un coq émergeant d'une crotte de chien sur un trottoir, quand la fée des neiges apparaît à mon balcon, quand les ombres suggèrent peut-être des oiseaux végétaux, quand un visage apparaît dans une feuille de chou.
<?php break;
case "s-Faire-s": ?>
Au contraire du croisement de fer, ce qui croît quand on l's Faire (s) les sphères.
<?php break;
case "Super-Positions et autres Super-Cheries": ?>
Montages et collages sous logiciel dédié (Photoshop, peintures)
<?php break;
case "Traits de lumière": ?>
Light-Painting, peindre avec la lumière, ou plutôt avec lappareil-pinceau, puisque peindre avec la lumière est déjà lobjet de la photographie. Ces traits révèlent parfois des créatures fantastiques.
<?php break;
case "Aqua bon": ?>
Lieu et source de vie par essence, mouvante, calme ou soulevée par la brise, leau est souvent le lieu de naissance de créatures fantastiques.
<?php break;
case "Forts Traits": ?>
Portraits studio, cours municipaux pour adultes, 2015
<?php break;
case "": ?>
<div class="contPremiereImage"><img class="premiereImage" src="index.jpg" alt="Vive la lenteur"/></div>
Super·F·lux est une collection de perceptions lumineuses (lux) du monde tel que je (une ·F· Femme) l'aime (Super).
<br><br>
Des instants, des phénomènes, des êtres, des petites choses qui peuvent sembler superflues, anodines, banales, pas originales, à côté desquelles il est tout à fait possible de passer sans les voir. Et qui sont pourtant essentielles.
<blockquote>
« Je préfère vivre dans un monde animé. Je crois que nos chances de créer une culture plus saine, dynamique, libre et équilibrée sont meilleures si nous nous percevons nous-mêmes comme des cellules vivantes appartenant à un corps vivant, imprégné dune conscience sous-jacente, plutôt que de percevoir le monde comme de la matière inanimée et exploitable. »
<br>
<div class="source"><cite><small>Starhawk, « Quel monde voulons-nous ? », éditions Cambourakis, collection Sorcières, 2019</small></cite></div>
</blockquote>
<?php break;
} ?>
</section>
<?php } ?>
</header>
<main>
<?php if (preg_match("#\.\.#", $_GET['chemin'])) { <?php if (preg_match("#\.\.#", $_GET['chemin'])) {
@ -285,13 +143,4 @@ foreach($listeElements as $listeElements) {
</main> </main>
<footer> <?php require "fin.inc.php"; ?>
<br>
Images créées par Cécile Chevallier et diffusées sous CC BY-SA 4.0.
<br>
<a href="https://code.antopie.org/miraty/superflux">Site Web</a> créé par <a href="https://www.antopie.org">Miraty</a> sous <a href="LICENSE.html">AGPLv3+</a>.
</footer>
</body>
</html>

25
presentation.php Normal file
View File

@ -0,0 +1,25 @@
<?php require "debut.inc.php"; ?>
<main class="pageAux">
<h2>Qui suis-je ?</h2>
<p>
Au départ intéressée par la confection de montages et bidouillages photo (Superpositions et autres Super Chéries) , je me suis trouvée frustrée de photographies libres de droit qui me conviennent.
</p>
<p>
Me voici donc autour de 2009, photographe amatrice (à matrice) autodidacte, débutant la pratique de la photographie par intermittence entre mon rôle d'épouse, de mère de famille, de salariée de la fonction publique, principalement pendant les vacances scolaires, à courir pour rattraper la famille souvent agacée par mes clics et retards lors de nos promenades et randonnées.
</p>
<p>
Les photos ont donc été glanées ça et , sans projet spécifique, avec pour seul principe celui du plaisir de découvrir ce que la nature avait à m'offrir, sans jamais m'en satisfaire tout à fait.
</p>
<p>
J'ai donc tissé ici quelques photographies, qui, tout langage étant polysémique, auraient tout à fait pu et peuvent encore être assemblées autrement et faire sens aussi.
</p>
Cécile Chevallier
</main>
<?php require "fin.inc.php"; ?>

View File

@ -1,5 +1,5 @@
main { .gallerie {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-row-gap: 50px; */ /* grid-row-gap: 50px; */
@ -8,6 +8,33 @@ main {
grid-row-gap: 80px; grid-row-gap: 80px;
} }
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
& a {
text-decoration: none;
& div {
border: 2px solid white;
border-radius: 30px;
padding: 14px;
&:hover {
background-color: white;
color: black;
}
}
}
}
.nomElementDossier { .nomElementDossier {
margin-top: 20px; margin-top: 20px;
} }
@ -41,7 +68,6 @@ footer {
.presentation { .presentation {
text-align: justify; text-align: justify;
margin-bottom: 50px;
margin-left: 15%; margin-left: 15%;
margin-right: 15%; margin-right: 15%;
@ -134,8 +160,22 @@ h4 {
header { header {
text-align: center; text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
} }
main {
margin-top: 32px;
}
.pageAux {
margin-left: 10%;
margin-right: 10%;
}
@media (max-width: 1700px) { @media (max-width: 1700px) {
main { main {
@ -179,7 +219,6 @@ header {
main { main {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.portrait img { .portrait img {