ajout mise en page page 27

fr/litterall/litterall_27.html

@@ -26,11 +26,11 @@
 			<aside class="aside_left sticky">
 				<div class="table_box"> <!-- container use to adjust padding -->
 					<h2>sommaire</h2>
-					<a href="./fr/litterall/litterall_27.html#anchor_litterall_27"><p>LITTE<i>rall revue 27</i></p></a>
+					<a href="./fr/litterall/litterall_27.html#anchor_litterall_27"><p>LITTER<i>all</i> 27</p></a>
 					<a href="./fr/litterall/litterall_27.html#anchor_editorial"><p>Éditorial</p></a>
-					<a href="./fr/litterall/litterall_27.html#anchor_sommaire"><p>Sommaire :</p></a>
+					<a href="./fr/litterall/litterall_27.html#anchor_sommaire"><p>Sommaire</p></a>
-					<a href="./fr/litterall/litterall_27.html#anchor_responsable"><p>Responsable éditorial :</p></a>
+					<a href="./fr/litterall/litterall_27.html#anchor_responsable"><p>Responsable éditorial</p></a>
-					<a href="./fr/litterall/litterall_27.html#anchor_conseil"><p>Conseil éditorial :</p></a>
+					<a href="./fr/litterall/litterall_27.html#anchor_conseil"><p>Conseil éditorial</p></a>
 				</div>
 			</aside>
 
@@ -38,7 +38,7 @@
 				<h1 id="anchor_litterall_27">LITTER<i>all</i> 27</h1>
 				<h2 id="anchor_editorial">Éditorial</h2>
 				<p>Voici un atlas d’un genre particulier. Composé de sept voix de la littérature contemporaine, d’une carte de l’Océan Pacifi que et de fac-similés du bureau d’immigration de la police suisse, cet atlas a de quoi surprendre. À quoi correspond ce mélange des genres ? Quelle est cette cartographie ? Si le sens moderne du mot atlas ne renvoie plus au Titan de la mythologie grecque, sa vocation d’initier les humains aux réalités de la terre et du ciel a certainement du sens au XXI e siècle. Dans ces pages, vous trouverez ce qui se passe aujourd’hui et hier, sur la terre, en mer et dans le ciel. Une littérature en mouvement ou comment proposer un atlas-miniature.</p>
-				<p>Les textes traduits ici peuvent se lire comme une série d’énigmes ou d’indices. C’est une enquête au présent et une exploration de la mémoire. Que la forme soit celle du poème, du récit, de l’article, du roman ou de l’autobiographie, plusieurs réalités sont radiographiées : la crise, le corps, les confrontations et les points aveugles, la stigmatisation, la révolte face au conformisme. Loin de relayer une vision apocalyptique du monde, ce numéro 27 de LITTERall tente de déplacer notre regard en écoutant d’autres voix dont la portée est puissante et discrète. Il s’agit de sonder les zones sensibles.</p>
+				<p>Les textes traduits ici peuvent se lire comme une série d’énigmes ou d’indices. C’est une enquête au présent et une exploration de la mémoire. Que la forme soit celle du poème, du récit, de l’article, du roman ou de l’autobiographie, plusieurs réalités sont radiographiées : la crise, le corps, les confrontations et les points aveugles, la stigmatisation, la révolte face au conformisme. Loin de relayer une vision apocalyptique du monde, ce numéro 27 de LITTER<i>all</i> tente de déplacer notre regard en écoutant d’autres voix dont la portée est puissante et discrète. Il s’agit de sonder les zones sensibles.</p>
 				<p>À quoi ressemble cet atlas portatif ?</p>
 				<p>Est-ce un continent à découvrir ?</p>
 				<p>Un livre de combats et d’espoirs ?</p>
@@ -49,24 +49,24 @@
 				<p>C’est possible.</p>
 				<p>Ou encore autre chose.</p>
 				<p>En tout cas, cet atlas maintient son désir et son embarcation au milieu des mers, même par avis de tempête. Tenir la barre, sans courber l’échine.</p>
-				<p>Ce numéro de LITTERall est aussi le dernier porté par Les Amis du Roi des Aulnes. L’aventure se poursuivra avec KOSMOPOLIT. Transmission de témoin et nouveau cap en vue !</p>
+				<p>Ce numéro de LITTER<i>all</i> est aussi le dernier porté par Les Amis du Roi des Aulnes. L’aventure se poursuivra avec KOSMOPOLIT. Transmission de témoin et nouveau cap en vue !</p>
 				<p>Bonne lecture,</p>
 				<p>Jean-Philippe Rossignol & Nicole Bary</p>
 				<div class="image full">
 					<img src="./docs/litterall/revue_27/litterall_27_page_mid.jpg" alt="litterall 27">
 					<p class="right"><small>Adolf Stieler, Handatlas über alle Theile der Erde und über das Weltgebäude : vollständige Ausgabe in 84 Karten, Perthes, 1872</small></p>
 				</div>
-				<h3 id="anchor_sommaire">Sommaire :</h3>
+				<h2 id="anchor_sommaire">Sommaire</h2>
-				<p>p.7 May Ayim, poèmes, traduction de Lucie Lamy, avec Jean-Philippe Rossignol</p>
+				<p><span class="sommaire_name_width">May Ayim</span> 			<i>poèmes</i>													<br><small>traduction de Lucie Lamy, avec Jean-Philippe Rossignol</small></p>
-				<p>p.15 Melinda Nadj Abonji, “L’aliénation par l’étranger”, traduction de Françoise Toraille</p>
+				<p><span class="sommaire_name_width">Melinda Nadj Abonji</span> <i>L’aliénation par l’étranger</i>								<br><small>traduction de Françoise Toraille</small></p>
-				<p>p.35 Judith Schalansky, Îles Cook Méridionales : Tuanaki, dite aussi Tuanahe”, traduction de Lucie Lamy</p>
+				<p><span class="sommaire_name_width">Judith Schalansky</span> 	<i>Îles Cook Méridionales : Tuanaki, dite aussi Tuanahe</i>		<br><small>traduction de Lucie Lamy</small></p>
-				<p>p.63 Thomas Brasch, poèmes, traduction de Aurélie Maurin et Bernard Banoun</P>
+				<p><span class="sommaire_name_width">Thomas Brasch</span> 		<i>poèmes</i>													<br><small>traduction de Aurélie Maurin et Bernard Banoun</small></P>
-				<p>p.67 Ulrike Draesner, Devenir invisibles, traduction de Françoise Toraille</p>
+				<p><span class="sommaire_name_width">Ulrike Draesner</span> 	<i>Devenir invisibles</i>										<br><small>traduction de Françoise Toraille</small></p>
-				<p>p.91 Gisela Elsner, Rüsenberg, traduction de Bernard Banoun</p>
+				<p><span class="sommaire_name_width">Gisela Elsner</span> 		<i>Rüsenberg</i>												<br><small>traduction de Bernard Banoun</small></p>
-				<p>p.97 Ulrich Peltzer, Extrait d’un roman en devenir, traduction de Dominique Petit</P>
+				<p><span class="sommaire_name_width">Ulrich Peltzer</span> 		<i>Extrait d’un roman en devenir</i>							<br><small>traduction de Dominique Petit</small></P>
-				<h3 id="anchor_responsable">Responsable éditorial :</h3>
+				<h2 id="anchor_responsable">Responsable éditorial</h2>
 				<p>Jean-Philippe Rossignol</p>
-				<h3 id="anchor_conseil">Conseil éditorial :</h3>
+				<h2 id="anchor_conseil">Conseil éditorial</h2>
 				<p>
 					Bernard Banoun
 					<br>

styles/global.css

@@ -20,10 +20,10 @@
 	--color-text:			hsl(0, 0%, 10%);
 	--color-text-light:		hsl(0, 0%, 25%);
 	--color-text-strong:	hsl(0, 0%,  5%);
-	--color-text-1:		hsl(var(--hue-1), 80%, 50%);
+	--color-text-1:			hsl(var(--hue-1), 80%, 50%);
-	--color-text-2:		hsl(var(--hue-2), 90%, 30%);
+	--color-text-2:			hsl(var(--hue-2), 90%, 30%);
-	--color-text-3:		hsl(var(--hue-3), 90%, 30%);
+	--color-text-3:			hsl(var(--hue-3), 90%, 30%);
-	--color-text-4:		hsl(var(--hue-4), 70%, 40%);
+	--color-text-4:			hsl(var(--hue-4), 70%, 40%);
 	/*links*/
 	--hue-link: 			var(--hue-3);
 	--color-link:			hsl(var(--hue-link), 70%, 40%);

styles/litterall_27.css

@@ -0,0 +1,4 @@
+.sommaire_name_width {
+	padding: 0px 5px;
+	background-color: hsl(var(--hue-4) 50% 90%);
+}

styles/text.css

@@ -14,7 +14,9 @@ nav p {
 .table_box p {
 	font-family: var(--font-titles), var(--font-fallback), sans-serif;
 }
-/*colors*/
+
+/*---------------------------------------------*/
+/*COLORS*/
 /*links when they are part of a text*/
 p a, p a:link {
 	color: var(--color-link);
@@ -32,7 +34,9 @@ p a:active {
 p, span {
 	color: var(--color-text);
 }
-/*sizes*/
+
+/*---------------------------------------------*/
+/*SIZES*/
 aside {
 	font-size: .8rem;
 }
@@ -59,12 +63,11 @@ small {
 	font-size: 0.8em;
 	line-height: 1.2em;
 }
-/*specials settings*/
+
-p, p *, h1, h1 *, h2, h2 *, h3, h3 * {
+/*---------------------------------------------*/
-	display: inline;
+/*OTHER SETTINGS*/
-}
+p, p *, h1, h1 *, h2, h2 *, h3, h3 *, li * {
-li *, li p, p b, p em, p i, p a, p span {
+	display: inline-block;
-	display: inline;
 }
 a, a * {
 	cursor: pointer;
@@ -76,7 +79,8 @@ b, em {
 	font-weight: 600;
 }
 
-/*class*/
+/*---------------------------------------------*/
+/*CLASS SETTINGS*/
 /*quote*/
 .quote {
 	max-width: 450px;