Ajout du menu et page de présentation
This commit is contained in:
parent
d4971177e8
commit
576622da12
5 changed files with 242 additions and 159 deletions
159
debut.inc.php
Normal file
159
debut.inc.php
Normal 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, là où on aperçoit enfin le bout du tunnel, là où 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 d’un 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 l’appareil-pinceau, puisque peindre avec la lumière est déjà l’objet 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, l’eau 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é d’une 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
11
fin.inc.php
Normal 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
161
index.php
|
@ -1,9 +1,8 @@
|
|||
<?php require "debut.inc.php"; ?>
|
||||
|
||||
|
||||
<?php
|
||||
if (!isset($_GET['chemin'])) {
|
||||
|
||||
header('Location: index.php?chemin=');
|
||||
|
||||
}
|
||||
|
||||
function creerMiniature($cheminComplet, $adresseImage, $nomImage) {
|
||||
if (!file_exists($cheminComplet . "/400/" . $nomImage)) {
|
||||
|
@ -42,148 +41,7 @@ if (!function_exists('array_key_last')) {
|
|||
}
|
||||
} ?>
|
||||
|
||||
|
||||
<!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, là où on aperçoit enfin le bout du tunnel, là où 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 d’un 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 l’appareil-pinceau, puisque peindre avec la lumière est déjà l’objet 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, l’eau 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é d’une 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>
|
||||
<main class="gallerie">
|
||||
|
||||
|
||||
<?php if (preg_match("#\.\.#", $_GET['chemin'])) {
|
||||
|
@ -285,13 +143,4 @@ foreach($listeElements as $listeElements) {
|
|||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
<?php require "fin.inc.php"; ?>
|
||||
|
|
25
presentation.php
Normal file
25
presentation.php
Normal 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 là, 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"; ?>
|
45
style.less
45
style.less
|
@ -1,5 +1,5 @@
|
|||
|
||||
main {
|
||||
.gallerie {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
/* grid-row-gap: 50px; */
|
||||
|
@ -8,6 +8,33 @@ main {
|
|||
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 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
@ -41,7 +68,6 @@ footer {
|
|||
|
||||
.presentation {
|
||||
text-align: justify;
|
||||
margin-bottom: 50px;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
|
||||
|
@ -134,8 +160,22 @@ h4 {
|
|||
|
||||
header {
|
||||
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) {
|
||||
|
||||
main {
|
||||
|
@ -179,7 +219,6 @@ header {
|
|||
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
|
||||
.portrait img {
|
||||
|
|
Loading…
Add table
Reference in a new issue