mise en place des couleurs de police

docs/Documents sites/.~lock.Textes trois onglets principaux.odt#

@@ -0,0 +1 @@
+,simplonco,simplonco-Latitude-E6320,03.03.2021 11:41,file:///home/simplonco/.config/libreoffice/4;

pages/litterall.html

@@ -22,6 +22,7 @@
 			</div>
 		</nav>
 		<div class="container_main">
+
 			<aside class="page_content sticky">
 				<div class="table_box"> <!-- container use to adjust padding -->
 					<h2>sommaire</h2>
@@ -34,9 +35,14 @@
 			<main>
 				<div class="page_title">
 					<h1 id="anchor_litterall">LITTER<i>all</i></h1>
-					<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
 				</div>
-				<p class="right"><i>“Il est difficile à des étrangers comme nous de pénétrer l’ultime secret des vers d’une autre langue. Ce n’est pas à nous d’en juger, nous n’aurons pas le dernier mot.”</i><br><small>Ossip Mandelstam, Entretiens sur Dante</small><br><small>traduction Louis Martinez</small></p>
+				<div class="quote">
+					<p>“Il est difficile à des étrangers comme nous de pénétrer l’ultime secret des vers d’une autre langue. Ce n’est pas à nous d’en juger, nous n’aurons pas le dernier mot.”</p>
+					<div class="quote_credit">
+						<p>Ossip Mandelstam, <i>Entretien sur Dante</i></p>
+						<p>traduction Louis Martinez</p>
+					</div>
+				</div>
 				<br><br>
 				<p>Cette revue publie une fois par an un choix de textes germanophones, inédits en traduction française.</p>
 				<p>Poésie, essai, récit, nouvelle, discours, extrait de roman – nous mettons en avant des voix singulières de la littérature et des formes créatives.</p>
@@ -162,7 +168,9 @@
 						<p>litterall numero 01</p>
 					</div>
 				</div>
+				<p class="date right"><i><small>mis à jour le 01/03/2020</small></i></p>
 			</main>
+
 			<aside class="relative_content">
 				<div class="relative_box">
 					<p class="box_name">autres publications</p>
@@ -172,6 +180,7 @@
 					</a>
 				</div>
 			</aside>
+
 		</div>
 		<footer class="page_footer">
 		</footer>

styles/global.css

@@ -52,7 +52,6 @@ body > *, body > .container_main > * {
 		summary		->	aside.page_content
 		main		->	main
 			paths	->	.page.path
-			title	->	.page_title
 		asides		->	aside.relative_content
 	footer			->
 */

styles/style.css

@@ -1,5 +1,5 @@
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*IMPORT CSS*/
 @import url(./reset.css);
 @import url(./global.css);
@@ -12,24 +12,44 @@
 
 
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*GLOBAL VARIABLE*/
 :root {
 	/* color range */
-	--color-purple:			#ee1998;
+	--color-purple:			hsl(324, 86%,  52%); /* #ee1998 - rgb(238, 25,  152) */
-	--color-pink:			#ff7bca;
+	--color-pink:			hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
-	--color-green:			#8fce3c;
+	--color-green:			hsl(86,  60%,  52%); /* #8fce3c - rgb(143, 206, 60 ) */
-	--color-yellow:			#e3e00a;
+	--color-yellow:			hsl(59,  92%,  46%); /* #e3e00a - rgb(227, 224, 10 ) */
-	--color-blue:			#51cee4;
+	--color-blue:			hsl(189, 73%,  61%); /* #51cee4 - rgb(81,  206, 228) */
-	--color-water:			#0c9cb5;
+	--color-water:			hsl(189, 88%,  38%); /* #0c9cb5 - rgb(12,  156, 181) */
 
 	/* colors buttons */
 	--primary-hue:			12;
 	--color-button:			hsl(var(primary-hue), 1%, 1%);
+
+	/*TEXTE*/
+	/* fonts */
+	--font-titles:			'paradroid';
+	--font-texts:			'louisgeorge';
+	--font-fallback:		'cabrion';
+
+	/* colors texts */
+	/*text*/
+	--color-text:			hsl(0, 0%, 10%);
+	--color-text-light:		hsl(0, 0%, 25%);
+	--color-text-strong:	rgb(0, 0%, 5%);
+	/*links*/
+	--color-link:			rgb(120, 1, 1);
+	--color-link-hover:		rgb(120, 1, 1);
+	--color-link-visited:	rgb(120, 1, 1);
+	--color-link-active:	rgb(120, 1, 1);
+	/*titles*/
+	--color-title-1:		hsl(0, 0%, 10%);
+	--color-title-2:		hsl(0, 0%, 10%);
 }
 
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*INITIAL SETTINGS*/
 html {
 	scroll-behavior: smooth;

styles/text.css

@@ -1,21 +1,5 @@
 
-:root {
+/*---------------------------------------------*/
-	/* colors texts */
-	--color-texts:			rgb(1, 1, 1);
-	--color-texts-special:	rgb(1, 1, 1);
-	--color-links:			rgb(120, 1, 1);
-	--color-links-hover:	rgb(120, 1, 1);
-	--color-links-visited:	rgb(120, 1, 1);
-	--color-links-active:	rgb(120, 1, 1);
-	--color-title-1:		rgb(120, 1, 1);
-
-	/* fonts */
-	--font-titles:			'paradroid';
-	--font-texts:			'louisgeorge';
-	--font-fallback:		'cabrion';
-}
-
-/*/////////////////////////////////////////////*/
 /*TEXTS*/
 /*fonts*/
 h1, h2, h3, h4, h5, h6 {
@@ -26,19 +10,19 @@ a, p, li {
 }
 /*colors*/
 a, a:link {
-	color: var(--color-links);
+	color: var(--color-link);
 }
 a:visited {
-	color: var(--color-links-visited);
+	color: var(--color-link-visited);
 }
 a:hover {
-	color: var(--color-links-hover);
+	color: var(--color-link-hover);
 }
 a:active {
-	color: var(--color-links-active);
+	color: var(--color-link-active);
 }
-p, var {
+p, span {
-	color: var(--color-texts);
+	color: var(--color-text);
 }
 /*sizes*/
 aside {
@@ -65,7 +49,7 @@ h3 {
 }
 small {
 	font-size: 0.8em;
-	line-height: 1.5em;
+	line-height: 1.2em;
 }
 /*specials settings*/
 body p, body p *, body h1, body h1 *, body h2, body h2 * {
@@ -83,9 +67,27 @@ i {
 b, em {
 	font-weight: 600;
 }
-p br, h1 br, h2 br {
+
-	margin: 0px;
+/*class*/
+/*quote*/
+.quote {
+	max-width: 450px;
+	margin-right: 0px;
+	margin-left: auto;
+	text-align: right;
 }
+.quote p {
+	color: var(--color-text-light);
+}
+.quote_credit {
+	font-size: 1.8em;
+	margin-top: var(--gap-unit);
+}
+.quote_credit p {
+	font-size: 0.8em;
+	line-height: 1em;
+}
+
 /*
 	<b>			- Bold text
 	<strong>	- Important text