Abîme & Temps

Atelier code & écriture

Le Sel de la vie

Les petits riens, les grands moments, les souvenirs, les habitudes, les instants d'un jour et ceux du quotidien, tous entremêlés par série ou non, avec ruptures, dans ces lettres de François Héritier. L'enfance aussi, les émotions, les sensations, ce qui touche, ce qui émeut, ce qui est important (heureux ou triste), tout ce qui permet, d'une certaine manière de "racheter la vie".

Extraits

dans la préface :

j’ai oublié les fous rires, les coups de fil à bâtons rompus, les lettres manuscrites, les repas de famille (certains) ou entre amis, les bières au comptoir, les coups de rouge et les petits blancs, le café au soleil, la sieste à l’ombre, manger des huîtres en bord de mer ou des cerises sur l’arbre, les coups de gueule pour rire, l’entretien d’une collection (de pierres, de papillons, de boîtes, que sais-je ?), la béatitude des fraîches soirées d’automne, les couchers de soleil, être éveillé la nuit quand tout le monde dort, chercher à se remémorer les paroles des chansons d’autrefois, la recherche d’odeurs ou de saveurs, lire en paix son journal, feuilleter des albums de photos, jouer avec son chat, construire une maison de fantaisie, mettre un beau couvert, tirer négligemment sur une cigarette, tenir son journal, danser (ah ! danser !), sortir et faire la fête

...puis dans le texte de ses lettres :

… redouter sur son pantalon blanc une tache intempestive écarlate, l’éviter, et rentrer à temps chez soi, boire à la bouteille ou à la régalade, poser à l’envers une miche de pain et se souvenir des reproches ancestraux : « Ce n’est pas ainsi (i.e, sur le dos) qu’on le gagne », disposer des fruits dans une corbeille, être dans une voiture aux vitres teintées et ne pouvoir être vu de l’extérieur, déboucher une bouteille avec un cep de vigne et faire vibrer fortement le « clop » que fait le bouchon, ramasser des vers luisants, sentir à la sauvette dans la rue l’odeur d’eau de Cologne de sa grand-mère

Consignes d'écriture

à la manière de Françoise Héritier, écrire quelques paragraphes du sel de la vie - verbe d'action à l'infinitif, fait marquant, unique de la vie (un moment de sa première rencontre avec Lévis-Strauss); fait infime, répété du quotidien ("manger des huîtres", redouter une tache) ; souvenir qui ne peut être que plutôt personnel ("écouter dans la nuit du fond du lit le carillon Westminster "); souvenir universel qui peut-être largement partagé ("trouver que le fond de l'air est frais et qu'on mettrait bien une petite laine") ; et choisir quelques photographies du quotidien dans le Désordre à éparpiller dans la page.

Consignes de code

Pour le code nous utiliserons le positionnement "absolu" d'éléments div HTML comme pour la baleine et dans la même page.

atelier_05.html
<!DOCTYPE html>
<html lang="fr">    
<head>
<meta charset="utf-8"/>
    <title>Abîme & Temps. Atelier Baleine Paysage</title>
    <meta name="description" content="D'après Maryse Hache"/>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/open-baskerville" type="text/css"/>
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
</head>
<body>
<div class="page baleine">
    <div class="texte entree entree01">
        <p>
            le front clair du soleil se hisse ∩ passage de MONA 7:28 ∩
            reflet cape du jour sur saule épuisé ∩ broudronnement déjà des bourdons
            sur trèfles déjà sec déjà ∩ clachoutis cafetière italienne en bas
            lundi 16 avril 2018 semaine 16 ∩ tremblement claquant de MONA 7:38 ∩
            réveille l'ours au bord du lavabo zut
        </p>
    </div>
    <div class="texte entree entree02">
        <p>
             NEMO passe avant MONA 7:02 après réveil trulidingdingue ∩
            cape du jour grise paranuage à prévoir front clair pas clair ce matin 17 avril ∩
        </p>
    </div>
    <div class="image image01">
    <img src="images/p6230173.jpg" width="400"
        class="transparence" >
    </div>
    <div class="texte entree entree03">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum dolor sed erat facilisis, vitae gravida nunc pellentesque. Morbi pulvinar ante quis enim faucibus porta. Ut pellentesque, eros ut elementum posuere, justo eros gravida eros, sed suscipit quam metus in purus. Donec mollis urna libero, ut ultricies tortor volutpat sed. Integer sit amet ultricies nibh. Fusce eget placerat lorem, et tristique mauris. Aliquam mollis libero id enim ullamcorper finibus. Fusce dapibus pellentesque vulputate. Donec sit amet volutpat massa. In volutpat, elit non blandit sagittis, dui nisl vehicula purus, a pulvinar enim metus vel orci.
    </div>
</div>
</body>
</html>

styles.css


h1 {
    color: black;
}
.photo {
    width: auto;
    height: 500px;
    float: left;
    margin-right: 15px;
}
.photo_a_droite {
    margin-left: 15px;
    float:right;
}
.grande_photo{
    width: 600px;
    margin: auto;
}

body {
    color: #990000;
    font-family: Arial;
    background-color: #FCFBFA;
    background-image: url(../images/fond.jpg);
    background-size: cover;
}
.page {
    width: 85%;
    margin: auto;
overflow: auto;
    background-color: #509;
}
.baleine {
    width: 3000px;
    height: 700px;
    background-color: #09BFF0;
}
.texte {
    width: 400px;
    height: 250px;
    float: left;
}
.entree {
    border : 1px solid black;
    padding: 10px;
    font-family: Courier New, Courier;
    background-color: #CCF0F6;
}
.entree01 {
    position: absolute;
    left: 150px;
    top: 20px;
    width: 500px;
    height: 180px;
}
.entree02 {
    position: absolute;
    left: 650px;
    top: 250px;
    z-index: 2;
    width: 250px;
    height: 380px;
    transform: rotate(4deg);
}
.image {}
.image01{
    position: absolute;
    left: 550px;
    top: 150px;
    z-index: 1;
    transform: rotate(-4.5deg);
}
.entree03 {
    position: absolute;
left: 250px;
top: 187px;
    width: 250px;
    height: 300px;
    z-index:4;
    overflow: scroll;
    transform: rotate(-2deg);
}
.transparence {opacity: 0.5;}





.entete {
    height: 120px;
    padding: 20px;
    background-color: #FFFFFF85;
    color: #234912;
}
.contenu {
    padding: 10px;
    background-color: #FEFEFA;
    color: #222;
    overflow:auto;
    padding-bottom: 100px;
    box-shadow: 2px 2px 5px #ACACAA;
}
.citation {
    font-style: italic;
    padding-left: 50px;
}