A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 12KB

il y a 2 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>2021.58 fiction until (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="http://futurefire.net/2021.58/fiction/until.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>2021.58 fiction until</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="http://futurefire.net/2021.58/fiction/until.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="nav">
  71. <a href="http://futurefire.net/2021.58/index.html">[Issue 2021.58]</a>
  72. </p>
  73. <h2 id="d118e2203">
  74. <span id="d118e2205">‘Until a Hundred Generations of People Have Departed’, E. Saxey</span>
  75. </h2>
  76. <p class="quote">Illustrations © 2021 <a href="http://futurefire.net/artists/index.html#cmatthey">Cécile Matthey</a>
  77. </p>
  78. <hr class="divide">
  79. <p id="d118e2224">
  80. <img border="0" src="http://futurefire.net/images/cm-until1.jpg" class="wrapleft" alt=" [ Sandia tablet #1 in situ, ©2021 Cécile Matthey ] " title=" [ Sandia tablet #1 in situ, ©2021 Cécile Matthey ] ">
  81. <strong>Old English</strong>
  82. </p>
  83. <p id="d118e2233">Hwaet! Þēos moldstōw is ǣrende
  84. <br>innan mynegunga webbgeweorce.
  85. <br>Wē besendon þis wærword,
  86. <br>bealospell nīedmicel.
  87. <br>Wē beþōhton ūre þēode
  88. <br>þrȳþswīþe, unlȳtle eormenstrȳnde.</p>
  89. <p id="d118e2246">Hēr nis nān ellendǣd gemyndgod,
  90. <br>ne ealdgestrēon bedolfen
  91. <br>ne foresetl, ne frēolsstōw.
  92. <br>Wē forhtedon ond hatodon hwæt is hēr.</p>
  93. <p id="d118e2255">Þis bealospell warnaþ
  94. <br>þaet wælfȳr wiext
  95. <br>tō middewearde;
  96. <br>hēr rihtlīce is sēo ælemidde.
  97. <br>Wē hit hrusan heolstre bewrigon.
  98. <br>Hit hæfþ hēanesse ond langnesse.</p>
  99. <p id="d118e2268">Hēr wunað giet se wælcræft
  100. <br>nū swā swā on ūrum dagum.
  101. <br>Sēo frecennes frēcnaþ bānhūs
  102. <br>ond fordōn mǣg.
  103. <br>Sē bealo glēwþ,
  104. <br>brǣdeþ tō ūtwearde.
  105. <br>Gif gē delfen ond drefen
  106. <br>dryhtenbealu gē onbinden.</p>
  107. <p id="d118e2286">Forbūgaþ þās moldstōwe
  108. <br>ond manlēase þā gerȳmaþ</p>
  109. <hr class="divide">
  110. <p class="title">
  111. <img border="0" src="http://futurefire.net/images/cm-until2.jpg" class="" alt=" [ Sandia tablet #2 secondary deposit, ©2021 Cécile Matthey ] " title=" [ Sandia tablet #2 secondary deposit, ©2021 Cécile Matthey ] ">
  112. </p>
  113. <hr class="divide">
  114. <p id="d118e2302">
  115. <img border="0" src="http://futurefire.net/images/cm-until3.jpg" class="wrapright" alt=" [ Sandia tablet #3 draftsperson’s sketch, ©2021 Cécile Matthey ] " title=" [ Sandia tablet #3 draftsperson’s sketch, ©2021 Cécile Matthey ] ">
  116. <strong>Translation</strong>
  117. </p>
  118. <p id="d118e2310">Listen! This sepulchre is a message
  119. <br>Within a web of warnings.
  120. <br>We sent this warning,
  121. <br>A baleful, urgent message.
  122. <br>We thought our people
  123. <br>Exceedingly powerful, a great generation.</p>
  124. <p id="d118e2323">Here is no honourable deed commemorated,
  125. <br>Nor ancient treasure buried
  126. <br>Nor high seat of honor nor festival ground.
  127. <br>We feared and hated what is here. </p>
  128. <p id="d118e2333">This dire message warns
  129. <br>That deathly fire grows greater
  130. <br>Towards the middle;
  131. <br>Right here is the center.
  132. <br>We hid it in the darkness of the earth.
  133. <br>It has height and length.</p>
  134. <p id="d118e2346">The deadly power still dwells here
  135. <br>Now, just as in our time.
  136. <br>The danger threatens the body
  137. <br>And may kill
  138. <br>The malice glows,
  139. <br>Broadening outwards.
  140. <br>If you dig and disturb
  141. <br>You will unbind great misery.</p>
  142. <p id="d118e2364">Shun this tomb
  143. <br>And leave it uninhabited.</p>
  144. <hr class="divide">
  145. <p class="title">
  146. <img border="0" src="http://futurefire.net/images/cm-until4.jpg" class="" alt=" [ Sandia tablet #4 display, ©2021 Cécile Matthey ] " title=" [ Sandia tablet #4 display, ©2021 Cécile Matthey ] ">
  147. </p>
  148. <p class="quote">© 2021 E. Saxey</p>
  149. <p class="nav">
  150. <a href="http://futurefire.net/2021.58/index.html">[Issue 2021.58]</a>
  151. </p>
  152. <p>
  153. <a href="http://press.futurefire.net/2021/07/new-issue-202158.html">Comment on the stories in this issue on the TFF Press blog.</a>
  154. </p>
  155. </article>
  156. <hr>
  157. <footer>
  158. <p>
  159. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  160. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  161. </svg> Accueil</a> •
  162. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  163. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  164. </svg> Suivre</a> •
  165. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  166. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  167. </svg> Pro</a> •
  168. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  169. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  170. </svg> Email</a> •
  171. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  172. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  173. </svg> Légal</abbr>
  174. </p>
  175. <template id="theme-selector">
  176. <form>
  177. <fieldset>
  178. <legend><svg class="icon icon-brightness-contrast">
  179. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  180. </svg> Thème</legend>
  181. <label>
  182. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  183. </label>
  184. <label>
  185. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  186. </label>
  187. <label>
  188. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  189. </label>
  190. </fieldset>
  191. </form>
  192. </template>
  193. </footer>
  194. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  195. <script>
  196. function loadThemeForm(templateName) {
  197. const themeSelectorTemplate = document.querySelector(templateName)
  198. const form = themeSelectorTemplate.content.firstElementChild
  199. themeSelectorTemplate.replaceWith(form)
  200. form.addEventListener('change', (e) => {
  201. const chosenColorScheme = e.target.value
  202. localStorage.setItem('theme', chosenColorScheme)
  203. toggleTheme(chosenColorScheme)
  204. })
  205. const selectedTheme = localStorage.getItem('theme')
  206. if (selectedTheme && selectedTheme !== 'undefined') {
  207. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  208. }
  209. }
  210. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  211. window.addEventListener('load', () => {
  212. let hasDarkRules = false
  213. for (const styleSheet of Array.from(document.styleSheets)) {
  214. let mediaRules = []
  215. for (const cssRule of styleSheet.cssRules) {
  216. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  217. continue
  218. }
  219. // WARNING: Safari does not have/supports `conditionText`.
  220. if (cssRule.conditionText) {
  221. if (cssRule.conditionText !== prefersColorSchemeDark) {
  222. continue
  223. }
  224. } else {
  225. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  226. continue
  227. }
  228. }
  229. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  230. }
  231. // WARNING: do not try to insert a Rule to a styleSheet you are
  232. // currently iterating on, otherwise the browser will be stuck
  233. // in a infinite loop…
  234. for (const mediaRule of mediaRules) {
  235. styleSheet.insertRule(mediaRule.cssText)
  236. hasDarkRules = true
  237. }
  238. }
  239. if (hasDarkRules) {
  240. loadThemeForm('#theme-selector')
  241. }
  242. })
  243. </script>
  244. </body>
  245. </html>