Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

base_2017.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang={% block lang %}fr{% endblock lang %}>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>{% block title %}{% endblock %} — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. {% block extra_head %}{% endblock extra_head %}
  28. <style>
  29. /* http://meyerweb.com/eric/tools/css/reset/ */
  30. html, body, div, span,
  31. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  32. a, abbr, address, big, cite, code,
  33. del, dfn, em, img, ins,
  34. small, strike, strong, tt, var,
  35. dl, dt, dd, ol, ul, li,
  36. fieldset, form, label, legend,
  37. table, caption, tbody, tfoot, thead, tr, th, td,
  38. article, aside, canvas, details, embed,
  39. figure, figcaption, footer, header, hgroup,
  40. menu, nav, output, ruby, section, summary,
  41. time, mark, audio, video {
  42. margin: 0;
  43. padding: 0;
  44. border: 0;
  45. font-size: 100%;
  46. font: inherit;
  47. vertical-align: baseline;
  48. }
  49. /* HTML5 display-role reset for older browsers */
  50. article, aside, details, figcaption, figure,
  51. footer, header, hgroup, menu, nav, section { display: block; }
  52. body { line-height: 1; }
  53. blockquote, q { quotes: none; }
  54. blockquote:before, blockquote:after,
  55. q:before, q:after {
  56. content: '';
  57. content: none;
  58. }
  59. table {
  60. border-collapse: collapse;
  61. border-spacing: 0;
  62. }
  63. /* http://practicaltypography.com/equity.html */
  64. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  65. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  66. @font-face {
  67. font-family: 'EquityTextB';
  68. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  69. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  70. font-weight: 300;
  71. font-style: normal;
  72. font-display: swap;
  73. }
  74. @font-face {
  75. font-family: 'EquityTextB';
  76. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  77. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  78. font-weight: 300;
  79. font-style: italic;
  80. font-display: swap;
  81. }
  82. @font-face {
  83. font-family: 'EquityTextB';
  84. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  85. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  86. font-weight: 700;
  87. font-style: normal;
  88. font-display: swap;
  89. }
  90. @font-face {
  91. font-family: 'TriplicateT4c';
  92. src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'),
  93. url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff');
  94. font-weight: 300;
  95. font-style: normal;
  96. font-display: swap;
  97. }
  98. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  99. body {
  100. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  101. font-family: "EquityTextB", Palatino, serif;
  102. background-color: #f0f0ea;
  103. color: #07486c;
  104. font-kerning: normal;
  105. -moz-osx-font-smoothing: grayscale;
  106. -webkit-font-smoothing: subpixel-antialiased;
  107. text-rendering: optimizeLegibility;
  108. font-variant-ligatures: common-ligatures contextual;
  109. font-feature-settings: "kern", "liga", "clig", "calt";
  110. }
  111. pre, code, kbd, samp, var, tt {
  112. font-family: 'TriplicateT4c', monospace;
  113. }
  114. em {
  115. font-style: italic;
  116. color: #323a45;
  117. }
  118. strong {
  119. font-weight: bold;
  120. color: black;
  121. }
  122. nav {
  123. background-color: #323a45;
  124. color: #f0f0ea;
  125. display: flex;
  126. justify-content: space-around;
  127. padding: 1rem .5rem;
  128. }
  129. nav:first-child {
  130. border-top: 1vh solid #2d7474;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-bottom: .2vh solid #2d7474;
  143. background-color: #e3e1e1;
  144. color: #323a45;
  145. text-align: center;
  146. padding: 2rem 0 1rem;
  147. width: 100%;
  148. }
  149. h2 {
  150. margin: 4rem 0 1rem;
  151. border-top: .2vh solid #2d7474;
  152. }
  153. h3 {
  154. text-align: center;
  155. margin: 3rem 0 .75em;
  156. }
  157. hr {
  158. height: .4rem;
  159. width: .4rem;
  160. border-radius: .4rem;
  161. background: #07486c;
  162. margin: 2.5rem auto;
  163. }
  164. time {
  165. display: bloc;
  166. background-color: #2d7474;
  167. color: #e3e1e1;
  168. padding: .29rem 1rem;
  169. float: right;
  170. }
  171. ul, ol {
  172. margin: 2rem;
  173. }
  174. ul {
  175. list-style-type: square;
  176. }
  177. a {
  178. text-decoration-skip-ink: auto;
  179. }
  180. article {
  181. max-width: 50rem;
  182. display: flex;
  183. flex-direction: column;
  184. margin: 3rem auto 1rem auto;
  185. }
  186. article p:last-child {
  187. margin-bottom: 1rem;
  188. }
  189. p {
  190. padding: 0 .5rem;
  191. }
  192. p + p {
  193. margin-top: 2rem;
  194. }
  195. blockquote {
  196. background-color: #e3e1e1;
  197. border-left: .5vw solid #2d7474;
  198. display: flex;
  199. flex-direction: column;
  200. align-items: center;
  201. padding: 1rem;
  202. margin: 1.5rem;
  203. }
  204. blockquote cite {
  205. font-style: italic;
  206. }
  207. figure {
  208. border-top: .2vh solid #2d7474;
  209. background-color: #e3e1e1;
  210. text-align: center;
  211. padding: 1.5rem 0;
  212. margin: 1rem 0 0;
  213. font-size: 1.5rem;
  214. width: 100%;
  215. }
  216. figure img {
  217. width: 250px;
  218. height: 250px;
  219. border: .5vw solid #323a45;
  220. padding: 1px;
  221. }
  222. figcaption {
  223. padding: 1rem;
  224. line-height: 1.4;
  225. }
  226. aside {
  227. display: flex;
  228. flex-direction: column;
  229. background-color: #e3e1e1;
  230. padding: 1rem 0;
  231. border-bottom: .2vh solid #07486c;
  232. }
  233. aside p {
  234. max-width: 50rem;
  235. margin: 0 auto;
  236. }
  237. /* https://fvsch.com/code/css-locks/ */
  238. p, li, pre, code, kbd, samp, var, tt, time {
  239. font-size: .95rem;
  240. line-height: calc( 1.5em + 0.2 * 1rem );
  241. }
  242. h1 {
  243. font-size: 1.7rem;
  244. line-height: calc( 1.2em + 0.2 * 1rem );
  245. }
  246. h2 {
  247. font-size: 1.6rem;
  248. line-height: calc( 1.3em + 0.2 * 1rem );
  249. }
  250. h3 {
  251. font-size: 1.35rem;
  252. line-height: calc( 1.4em + 0.2 * 1rem );
  253. }
  254. @media (min-width: 20em) {
  255. /* The (100vw - 20rem) / (50 - 20) part
  256. resolves to 0-1rem, depending on the
  257. viewport width (between 20em and 50em). */
  258. p, li, pre, code, kbd, samp, var, tt, time {
  259. font-size: calc( .95rem + .6 * (100vw - 20rem) / (50 - 20) );
  260. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  261. }
  262. h1 {
  263. font-size: calc( 1.7rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  264. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  265. }
  266. h2 {
  267. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  268. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  269. }
  270. h3 {
  271. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  272. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  273. }
  274. }
  275. @media (min-width: 50em) {
  276. /* The right part of the addition *must* be a
  277. rem value. In this example we *could* change
  278. the whole declaration to font-size:2.5rem,
  279. but if our baseline value was not expressed
  280. in rem we would have to use calc. */
  281. p, li, pre, code, kbd, samp, var, tt, time {
  282. font-size: calc( .95rem + .6 * 1rem );
  283. line-height: 1.5em;
  284. }
  285. h1 {
  286. font-size: calc( 1.7rem + 1.5 * 1rem );
  287. line-height: 1.2em;
  288. }
  289. h2 {
  290. font-size: calc( 1.5rem + 1.5 * 1rem );
  291. line-height: 1.3em;
  292. }
  293. h3 {
  294. font-size: calc( 1.35rem + 1.5 * 1rem );
  295. line-height: 1.4em;
  296. }
  297. figure img {
  298. width: 500px;
  299. height: 500px;
  300. }
  301. blockquote {
  302. margin-left: -1.5rem;
  303. }
  304. }
  305. figure.unsquared {
  306. margin-bottom: 1.5rem;
  307. }
  308. figure.unsquared img {
  309. height: inherit;
  310. }
  311. /* https://github.com/richleland/pygments-css */
  312. .codehilite{
  313. background-color: #fdf6e3;
  314. margin: 1rem auto;
  315. padding: 1rem;
  316. overflow-x:auto;
  317. box-shadow:inset 0 0 2px rgba(0,0,0,0.2)
  318. }
  319. .codehilite .t{color:#586e75}
  320. .codehilite .w{color:#073642}
  321. .codehilite .err{color:#cb4b16}
  322. .codehilite .k{color:#859900}
  323. .codehilite .kc{color:#2aa198}
  324. .codehilite .kd{color:#268bd2}
  325. .codehilite .kn{color:#b58900}
  326. .codehilite .kp{color:#859900}
  327. .codehilite .kr{color:#073642}
  328. .codehilite .kt{color:#b58900}
  329. .codehilite .n{color:#586e75}
  330. .codehilite .na{color:#2aa198}
  331. .codehilite .nb{color:#268bd2}
  332. .codehilite .nc{color:#268bd2}
  333. .codehilite .ne{color:#cb4b16}
  334. .codehilite .no{color:#2aa198}
  335. .codehilite .nd{color:#2aa198}
  336. .codehilite .ni{color:#2aa198;font-weight:bold}
  337. .codehilite .nf{color:#268bd2}
  338. .codehilite .nn{color:#586e75}
  339. .codehilite .nt{color:#2aa198;font-weight:bold}
  340. .codehilite .nv{color:#cb4b16}
  341. .codehilite .b{color:#859900}
  342. .codehilite .bp{color:#586e75}
  343. .codehilite .v{color:#586e75}
  344. .codehilite .vc{color:#586e75}
  345. .codehilite .vg{color:#268bd2}
  346. .codehilite .vi{color:#268bd2}
  347. .codehilite .m{color:#268bd2}
  348. .codehilite .mf{color:#268bd2}
  349. .codehilite .mh{color:#268bd2}
  350. .codehilite .mi{color:#268bd2}
  351. .codehilite .mo{color:#268bd2}
  352. .codehilite .s{color:#2aa198}
  353. .codehilite .sb{color:#2aa198}
  354. .codehilite .sc{color:#2aa198}
  355. .codehilite .sd{color:#2aa198}
  356. .codehilite .s2{color:#2aa198}
  357. .codehilite .se{color:#cb4b16}
  358. .codehilite .sh{color:#2aa198}
  359. .codehilite .si{color:#cb4b16}
  360. .codehilite .sx{color:#2aa198}
  361. .codehilite .sr{color:#cb4b16}
  362. .codehilite .s1{color:#2aa198}
  363. .codehilite .ss{color:#cb4b16}
  364. .codehilite .il{color:#268bd2}
  365. .codehilite .o{color:#586e75}
  366. .codehilite .ow{color:#859900}
  367. .codehilite .p{color:#586e75}
  368. .codehilite .c{color:#93a1a1;font-style:italic}
  369. .codehilite .cm{color:#93a1a1}
  370. .codehilite .cp{color:#93a1a1}
  371. .codehilite .c1{color:#93a1a1}
  372. .codehilite .cs{color:#93a1a1}
  373. .codehilite .hll{background-color:#dc322f}
  374. .codehilite .g{color:#586e75}
  375. .codehilite .gd{color:#586e75}
  376. .codehilite .ge{font-style:italic}
  377. .codehilite .gr{color:#586e75}
  378. .codehilite .gh{color:#586e75;font-weight:bold}
  379. .codehilite .gi{color:#586e75}
  380. .codehilite .go{color:#586e75}
  381. .codehilite .gp{color:#586e75}
  382. .codehilite .gs{font-weight:bold}
  383. .codehilite .gu{color:#586e75;font-weight:bold}
  384. .codehilite .gt{color:#586e75}
  385. @media print {
  386. body { font-size: 100%; }
  387. a:after { content: " (" attr(href) ")"; }
  388. a, a:link, a:visited, a:after {
  389. text-decoration: underline;
  390. text-shadow: none !important;
  391. background-image: none !important;
  392. background: white;
  393. color: black;
  394. }
  395. abbr[title] { border-bottom: 0; }
  396. abbr[title]:after { content: " (" attr(title) ")"; }
  397. img { page-break-inside: avoid; }
  398. @page { margin: 2cm .5cm; }
  399. h1, h2, h3 { page-break-after: avoid; }
  400. p3 { orphans: 3; widows: 3; }
  401. img {
  402. max-width: 250px !important;
  403. max-height: 250px !important;
  404. }
  405. nav, aside { display: none; }
  406. }
  407. /* Dark theme */
  408. [lang=en] body {
  409. background: #323a45;
  410. }
  411. [lang=en] article,
  412. [lang=en] article em,
  413. [lang=en] article strong {
  414. color: #f0f0ea;
  415. }
  416. [lang=en] article a {
  417. color: #ffbd2b;
  418. }
  419. [lang=en] article a:visited {
  420. color: #ff6b03;
  421. }
  422. [lang=en] blockquote,
  423. [lang=en] figure {
  424. background: #111930;
  425. color: #ccc;
  426. }
  427. </style>
  428. <nav>
  429. <p>
  430. <a href="/david/" title="Profil public">David&nbsp;Larlet</a> partage ses <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et sa <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a>.
  431. </p>
  432. </nav>
  433. {% block content %}{% endblock content %}
  434. {% block nav %}{% endblock nav %}
  435. {% block aside %}
  436. <aside>
  437. <p>
  438. Articles choisis :
  439. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  440. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  441. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  442. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  443. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  444. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  445. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  446. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  447. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  448. <a href="/david/blog/2015/travail-transition/" title="Accéder à l’article complet">Travail en transition</a>,
  449. <a href="/david/blog/2015/pairmutation-travail/" title="Accéder à l’article complet">La pairmutation du travail</a>,
  450. <a href="/david/blog/2015/principes-web/" title="Accéder à l’article complet">Principes Web</a>,
  451. <a href="/david/blog/2015/travail-transition/" title="Accéder à l’article complet">Travail en transition</a>,
  452. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  453. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  454. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  455. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  456. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  457. </p>
  458. </aside>
  459. {% endblock aside %}
  460. <nav>
  461. <p>
  462. <abbr title="Lieu de vie et de potentielles rencontres actuel">Montréal</abbr> ·
  463. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Contact</a> ·
  464. <a href="http://larlet.com" title="Identité professionnelle">[Travailler ensemble ?]</a> ·
  465. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">Hébergeur</abbr> ·
  466. <a href="/david/log/" title="S’abonner aux publications via RSS">Flux</a>
  467. </p>
  468. </nav>
  469. {% block extrajs %}{% endblock %}