infologie · December 3, 2020 15:25
diff --git a/fiche.css b/fiche.css
 @charset: "utf-8";

 :root {
 	--serif: "EB Garamond", serif;
 	--sans: "Montserrat", sans-serif;
 	--mono: "Inconsolata", monospace;
 }

 /* ORGANISATION DE LA PAGE */

 html, body, header {
 	margin: 0;
 	padding: 0;
 }
 html {
 	background-color: lightgray;
 	font-family: var(--mono);
 	font-size: 16px;
 	font-family: var(--serif);
 }
 #fiche {
 	background-color: #fffff8;
 	box-sizing: border-box;
 	display: flex;
 	font-size: 1.1rem;
 	height: 68vh;
 	margin: 15vh auto 0 auto;
 	max-width: 900px;
 	padding: 1em 1em 0 1em;
 }
 #métadonnées {
 	border-right: 1px solid lightgray;
 	flex-basis: 25%;
 	padding: 0 1em 0 0;
 	text-align: right;
 }
 #contenu {
 	line-height: 1.5;
 	overflow: auto;
 	padding: 0 1em;
 /* 	font-family: var(--serif); */
 }

 /* TYPOGRAPHIE */
 h1,h2,h3 {
 	font-style: italic;
 	font-weight: normal;
 }

 #titre {
 	color: #aa0000;
 	font-size: 1.5rem;
 	margin: 0.5em 0 0 0;
 }
 h1 { font-size: 1.5rem; }
 h2 { font-size: 1.2rem; }
 h3 { font-size: 1.3rem; }

 .citation,
 .link,
 #identifiant {
 	font-family: var(--mono);
 }

 /* COULEURS */

 a, a:visited { color: royalblue; }
 .citation { color: #aa0000 }
 .link { color: seagreen }

 [contenteditable='true'] { caret-color: #aa0000; }

 /* EFFET PAPIER */

 .paper {
  position: relative;
 }

 .paper,
 .paper::before,
 .paper::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
 }

 .paper::before,
 .paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
 }

 .paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
 }

 .paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="fr">
 <head>
 	<meta charset="utf-8" />
 	<title>cosma</title>
 	<link rel="stylesheet" href="fiche.css">
 </head>


 <body>
 <div id="fiche" class="paper" contenteditable="true">

 <div id="métadonnées">
 	<h1 id="titre">Cosmographe</h1>
 	<p id="identifiant">202005131558</p>
 	<select contenteditable="false" id="type" name="type" selected="note">
 		<option value="lexique">Lexique</option>
 		<option value="lecture">Lecture</option>
 		<option value="note">Note</option>
 	</select> 
 </div>

 <div id="contenu">

 <!-- pbpaste | pandoc -o html | pbcopy -->

 <p>Le cosmographe capture le monde. Précède le <span class="link" data-links-to="202004111457">[[202004111457]]</span> Cosmoscope, par définition.</p>
 <p>Un travail palimpseste cf. « Le cycle du travail intellectuel » (schéma) et <span class="link" data-links-to="202005181031">[[202005181031]]</span> Ducheyne sur Otlet :</p>
 <blockquote>
 <p>« By thought human beings analyze, order, classify, and synthesize the multiplicity of reality as given (“le monde donné”) so that a transformed world (“le monde transformé”) emerges. The “transformed world” then serves as a point of departure for a new cycle of knowledge cf. “Il est l’aboutissement de ce cercle. À son tour il devient le point de repart d’un cycle nouveau” (AP, Encyclopedia Universalis Mundaneum, II 1 A2) ». <span class="citation" data-cites="ducheyne2009">[@ducheyne2009, 232]</span></p>
 </blockquote>
 <h2 id="étymologie">Étymologie</h2>
 <blockquote>
 <p>Via le latin cosmographia au grec ancien κοσμογραφία, <em>kosmografia</em> (« description du monde ») – <a href="https://fr.wiktionary.org/wiki/cosmographie"><em>Wiktionnaire</em></a></p>
 </blockquote>
 <blockquote>
 <p>description du monde (Bailly, p. <a href="https://archive.org/stream/BaillyDictionnaireGrecFrancais#page/n1124/mode/1up">1125</a>)</p>
 </blockquote>
 <blockquote>
 <p>Étymol. et Hist. 1512 « géographie » (J. Lemaire de Belges, <em>Illustrations de Gaule et singularitez de Troye</em>, 1. I, chap. 4, éd. J. Stecher, t. 1, p. 25) − 1601 (Charron, <em>Sagesse</em> II, 2 ds Hug.); 1544 « description de l’univers » (P. Apian, <em>Cosmographie</em>, Anvers, fo29 vods Fr. mod. t. 25, p. 305, <em>s.v. alidade</em>). Empr. au b. lat. <em>cosmographia</em> « cosmographie », lui-même empr. au gr. κοσμογραφία « <em>id</em>. ». – <a href="https://cnrtl.fr/etymologie/cosmographie"><em>Trésor de la langue française</em></a></p>
 </blockquote>
 <p>Cosmos : ordre, bon ordre, ordre de l’univers, parure. Graphie : écriture. D’où cosmographie :</p>
 <ul>
 <li>Écriture ordonnée. Convoque la notion de normes, ex : schéma de description. Également au sens orthotypographique <span class="citation" data-cites="lacroux2008">[@lacroux2008]</span> : il y a de la beauté dans l’ordre typographique (beauté = régularité ?).</li>
 <li>Écriture qui ordonne. <span class="link" data-links-to="202002111200">[[202002111200]]</span> Architexte : écriture de l’ordre, l’ordre par l’écriture.</li>
 </ul>
 <p>Cette double dimension fait de la documentation une mise en écriture ordonnée du monde, qui peut l’ordonner en retour (dialectique savoir-pouvoir).</p>

 </div>

 </div>


 </body>
 </html>
	@charset: "utf-8";

	:root {
	--serif: "EB Garamond", serif;
	--sans: "Montserrat", sans-serif;
	--mono: "Inconsolata", monospace;
	}

	/* ORGANISATION DE LA PAGE */

	html, body, header {
	margin: 0;
	padding: 0;
	}
	html {
	background-color: lightgray;
	font-family: var(--mono);
	font-size: 16px;
	font-family: var(--serif);
	}
	#fiche {
	background-color: #fffff8;
	box-sizing: border-box;
	display: flex;
	font-size: 1.1rem;
	height: 68vh;
	margin: 15vh auto 0 auto;
	max-width: 900px;
	padding: 1em 1em 0 1em;
	}
	#métadonnées {
	border-right: 1px solid lightgray;
	flex-basis: 25%;
	padding: 0 1em 0 0;
	text-align: right;
	}
	#contenu {
	line-height: 1.5;
	overflow: auto;
	padding: 0 1em;
	/* font-family: var(--serif); */
	}

	/* TYPOGRAPHIE */
	h1,h2,h3 {
	font-style: italic;
	font-weight: normal;
	}

	#titre {
	color: #aa0000;
	font-size: 1.5rem;
	margin: 0.5em 0 0 0;
	}
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.2rem; }
	h3 { font-size: 1.3rem; }

	.citation,
	.link,
	#identifiant {
	font-family: var(--mono);
	}

	/* COULEURS */

	a, a:visited { color: royalblue; }
	.citation { color: #aa0000 }
	.link { color: seagreen }

	[contenteditable='true'] { caret-color: #aa0000; }

	/* EFFET PAPIER */

	.paper {
	position: relative;
	}

	.paper,
	.paper::before,
	.paper::after {
	/* Styles to distinguish sheets from one another */
	box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	border: 1px solid #bbb;
	}

	.paper::before,
	.paper::after {
	content: "";
	position: absolute;
	height: 95%;
	width: 99%;
	background-color: #eee;
	}

	.paper::before {
	right: 15px;
	top: 0;
	transform: rotate(-1deg);
	z-index: -1;
	}

	.paper::after {
	top: 5px;
	right: -5px;
	transform: rotate(1deg);
	z-index: -2;
	}
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8" />
	<title>cosma</title>
	<link rel="stylesheet" href="fiche.css">
	</head>


	<body>
	<div id="fiche" class="paper" contenteditable="true">

	<div id="métadonnées">
	<h1 id="titre">Cosmographe</h1>
	<p id="identifiant">202005131558</p>
	<select contenteditable="false" id="type" name="type" selected="note">
	<option value="lexique">Lexique</option>
	<option value="lecture">Lecture</option>
	<option value="note">Note</option>
	</select>
	</div>

	<div id="contenu">

	<!-- pbpaste \| pandoc -o html \| pbcopy -->

	<p>Le cosmographe capture le monde. Précède le <span class="link" data-links-to="202004111457">[[202004111457]]</span> Cosmoscope, par définition.</p>
	<p>Un travail palimpseste cf. « Le cycle du travail intellectuel » (schéma) et <span class="link" data-links-to="202005181031">[[202005181031]]</span> Ducheyne sur Otlet :</p>
	<blockquote>
	<p>« By thought human beings analyze, order, classify, and synthesize the multiplicity of reality as given (“le monde donné”) so that a transformed world (“le monde transformé”) emerges. The “transformed world” then serves as a point of departure for a new cycle of knowledge cf. “Il est l’aboutissement de ce cercle. À son tour il devient le point de repart d’un cycle nouveau” (AP, Encyclopedia Universalis Mundaneum, II 1 A2) ». <span class="citation" data-cites="ducheyne2009">[@ducheyne2009, 232]</span></p>
	</blockquote>
	<h2 id="étymologie">Étymologie</h2>
	<blockquote>
	<p>Via le latin cosmographia au grec ancien κοσμογραφία, <em>kosmografia</em> (« description du monde ») – <a href="https://fr.wiktionary.org/wiki/cosmographie"><em>Wiktionnaire</em></a></p>
	</blockquote>
	<blockquote>
	<p>description du monde (Bailly, p. <a href="https://archive.org/stream/BaillyDictionnaireGrecFrancais#page/n1124/mode/1up">1125</a>)</p>
	</blockquote>
	<blockquote>
	<p>Étymol. et Hist. 1512 « géographie » (J. Lemaire de Belges, <em>Illustrations de Gaule et singularitez de Troye</em>, 1. I, chap. 4, éd. J. Stecher, t. 1, p. 25) − 1601 (Charron, <em>Sagesse</em> II, 2 ds Hug.); 1544 « description de l’univers » (P. Apian, <em>Cosmographie</em>, Anvers, fo29 vods Fr. mod. t. 25, p. 305, <em>s.v. alidade</em>). Empr. au b. lat. <em>cosmographia</em> « cosmographie », lui-même empr. au gr. κοσμογραφία « <em>id</em>. ». – <a href="https://cnrtl.fr/etymologie/cosmographie"><em>Trésor de la langue française</em></a></p>
	</blockquote>
	<p>Cosmos : ordre, bon ordre, ordre de l’univers, parure. Graphie : écriture. D’où cosmographie :</p>
	<ul>
	<li>Écriture ordonnée. Convoque la notion de normes, ex : schéma de description. Également au sens orthotypographique <span class="citation" data-cites="lacroux2008">[@lacroux2008]</span> : il y a de la beauté dans l’ordre typographique (beauté = régularité ?).</li>
	<li>Écriture qui ordonne. <span class="link" data-links-to="202002111200">[[202002111200]]</span> Architexte : écriture de l’ordre, l’ordre par l’écriture.</li>
	</ul>
	<p>Cette double dimension fait de la documentation une mise en écriture ordonnée du monde, qui peut l’ordonner en retour (dialectique savoir-pouvoir).</p>

	</div>

	</div>


	</body>
	</html>