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.

index.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Adieu les dunes... — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20060213-adieu-les-dunes">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Adieu les dunes...</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <img src="/static/david/biologeek/images/logos/redesign_biologeek.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
  45. <p>Il n'est pas de désert si vaste<br />
  46. Que ne puisse traverser<br />
  47. Celui que porte la musique des étoiles</p>
  48. <p>Vers trouvés dans le métro parisien et qui participent à un concours de poésie.</p>
  49. <p>Une petite capture de l'ancien design pour la postérité&nbsp;:</p>
  50. <p><img src="/static/david/biologeek/images/ancien_design_desert.jpg" alt="Design désert" style="display:block; margin:0 auto;" /></p>
  51. <p>et vos commentaires pour ce nouveau thèmes et les erreurs qui ne doivent pas manquer ;)</p>
  52. <p><strong>[edit]</strong>&nbsp;: Passage sur <a href="http://www.withstyle.biz/galeries/index.php?2006/02/15/120-biologeek">WithStyle</a>&nbsp;! Je ne sais pas si c'est mérité mais ça fait plaisir de se retrouver aux côtés de telles pointures du design, je suis tout ému :).</p>
  53. <p><strong>[edit2]</strong>&nbsp;: Passage sur <a href="http://cssmania.com/galleries/2006/02/15/biologeek.php">CSSMania</a> !!!</p>
  54. </div>
  55. </article>
  56. <footer>
  57. <h6 property="schema:datePublished">— 13/02/2006</h6>
  58. </footer>
  59. </section>
  60. <section>
  61. <div>
  62. <h3>Articles peut-être en rapport</h3>
  63. <ul>
  64. <li><a href="/david/biologeek/archives/20060125-le-printemps-en-avance-sur-biologeek/" title="Accès à Le printemps en avance sur biologeek ?">Le printemps en avance sur biologeek ?</a></li>
  65. <li><a href="/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/" title="Accès à ★ L&#39;importance du rythme vertical en design CSS">★ L&#39;importance du rythme vertical en design CSS</a></li>
  66. <li><a href="/david/biologeek/archives/20070522-des-css-de-qualite/" title="Accès à ★ Des CSS de qualité">★ Des CSS de qualité</a></li>
  67. </ul>
  68. </div>
  69. </section>
  70. <section>
  71. <div id="comments">
  72. <h3>Commentaires</h3>
  73. <div class="comment" typeof="schema:UserComments">
  74. <p class="comment-meta">
  75. <span class="comment-author" property="schema:creator">Argggg</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  76. </p>
  77. <div class="comment-content" property="schema:commentText">
  78. <p>J'avais mis votre site dans mes marque-pages car j'aimais vos dunes. C'était original.<br />
  79. Le nouveau est plus commun. Mais je comprends qu'on ait besoin de changer d'air.<br />
  80. Tant pis pour moi, bonne chance à vous :)</p>
  81. </div>
  82. </div>
  83. <div class="comment" typeof="schema:UserComments">
  84. <p class="comment-meta">
  85. <span class="comment-author" property="schema:creator">Ju.</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  86. </p>
  87. <div class="comment-content" property="schema:commentText">
  88. <p>J'aime beaucoup l'extrait de la poésie cité ici, trouvé sur une affiche d'un concours de poésie dans le métro.<br />
  89. Et puis ça nous change de Coelho ;-)<br />
  90. </p>
  91. </div>
  92. </div>
  93. <div class="comment" typeof="schema:UserComments">
  94. <p class="comment-meta">
  95. <span class="comment-author" property="schema:creator">farf</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  96. </p>
  97. <div class="comment-content" property="schema:commentText">
  98. <p>Joli. Pour le coup, ça fait &quot;bio&quot;</p>
  99. </div>
  100. </div>
  101. <div class="comment" typeof="schema:UserComments">
  102. <p class="comment-meta">
  103. <span class="comment-author" property="schema:creator">Kagou</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  104. </p>
  105. <div class="comment-content" property="schema:commentText">
  106. <p>L'adaptation du thème est réussie. Bravo. J'aime beaucoup les thèmes &quot;nature&quot;.<br />
  107. Par contre, je me trompe peut être, mais le code (listing) n'avait pas une syntaxe colorée avant ?!</p>
  108. </div>
  109. </div>
  110. <div class="comment" typeof="schema:UserComments">
  111. <p class="comment-meta">
  112. <span class="comment-author" property="schema:creator">NiKo</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  113. </p>
  114. <div class="comment-content" property="schema:commentText">
  115. <p>Superbe :)</p>
  116. </div>
  117. </div>
  118. <div class="comment" typeof="schema:UserComments">
  119. <p class="comment-meta">
  120. <span class="comment-author" property="schema:creator">Enro</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  121. </p>
  122. <div class="comment-content" property="schema:commentText">
  123. <p>Ouah, quelle fraîcheur printanière...<br />
  124. <br />
  125. Trois bugs/problèmes d'affichage, sous IE 6.0:<br />
  126. - seuls les deux derniers éléments de la liste des &quot;Billets suivants&quot; (en bas) ont leur puce en forme de feuille...<br />
  127. - sur la même page, le passage de la souris sur le logo Biologeek.com décale le texte de la citation de la poésie vers la droite, et un passage sur le titre du billet &quot;Adieu les dunes&quot; le remet à sa place !!<br />
  128. - sur la présente page, le haut du cadre de citation vert s'efface quand on passe la souris sur le logo Biologeek.com...<br />
  129. <br />
  130. Bref, il y a manifestement un problème avec les :hover... Bon courage avec tout ça !!</p>
  131. </div>
  132. </div>
  133. <div class="comment" typeof="schema:UserComments">
  134. <p class="comment-meta">
  135. <span class="comment-author" property="schema:creator">Julot</span> le <span class="comment-date" property="schema:commentTime">13/02/2006</span> :
  136. </p>
  137. <div class="comment-content" property="schema:commentText">
  138. <p>Je confirme mon sentiment exprimé lors du premier post, ça fait site pour une tisane contre la constipation ... <br />
  139. Mais bon on dirait que tu portes la musique des étoiles et que tu as fini de travers ton désert ;)<br />
  140. Et puis c'est quand même agréable à parcourir toutes ces fleurs :)<br />
  141. </p>
  142. </div>
  143. </div>
  144. <div class="comment" typeof="schema:UserComments">
  145. <p class="comment-meta">
  146. <span class="comment-author" property="schema:creator">Xethorn</span> le <span class="comment-date" property="schema:commentTime">14/02/2006</span> :
  147. </p>
  148. <div class="comment-content" property="schema:commentText">
  149. <p>Je n'ai pas beaucoup de temps, donc ça va faire court. Surveille WithStyle :)</p>
  150. </div>
  151. </div>
  152. <div class="comment" typeof="schema:UserComments">
  153. <p class="comment-meta">
  154. <span class="comment-author" property="schema:creator">Chichelinux</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  155. </p>
  156. <div class="comment-content" property="schema:commentText">
  157. <p>Très beau, très sobre... Un seul mot: B-r-a-v-o l'artiste...</p>
  158. </div>
  159. </div>
  160. <div class="comment" typeof="schema:UserComments">
  161. <p class="comment-meta">
  162. <span class="comment-author" property="schema:creator">la lène</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  163. </p>
  164. <div class="comment-content" property="schema:commentText">
  165. <p>C'est super choli, ça pète. Wow :)</p>
  166. </div>
  167. </div>
  168. <div class="comment" typeof="schema:UserComments">
  169. <p class="comment-meta">
  170. <span class="comment-author" property="schema:creator">giz404</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  171. </p>
  172. <div class="comment-content" property="schema:commentText">
  173. <p>Une vague impression de déja vu à cause des petites feuilles vertes<br />
  174. <a href="http://cheeaun.phoenity.com/weblog/" title="http://cheeaun.phoenity.com/weblog/" rel="nofollow">cheeaun.phoenity.com/webl...</a><br />
  175. <a href="http://hicksdesign.co.uk/" title="http://hicksdesign.co.uk/" rel="nofollow">hicksdesign.co.uk/</a><br />
  176. <a href="http://sage.mozdev.org/" title="http://sage.mozdev.org/" rel="nofollow">sage.mozdev.org/</a><br />
  177. <br />
  178. mais c'est beau et très propre, et bien plus pro que l'ancien. J'accroche !<br />
  179. </p>
  180. </div>
  181. </div>
  182. <div class="comment" typeof="schema:UserComments">
  183. <p class="comment-meta">
  184. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  185. </p>
  186. <div class="comment-content" property="schema:commentText">
  187. <p>@Argggg : les goûts ont l'air très partagés pour ce design... le prochain sera peut-être davantage en accord avec tes attentes :)<br />
  188. <br />
  189. @Kagou : non, c'est vrai qu'il faudrait que j'adapte ce plugin aussi mais j'avais rencontré quelques soucis lors de mes derniers tests<br />
  190. <br />
  191. @Enro : oui j'ai les mêmes, je suis en train de voir ce que je peux faire... merci pour le retour !<br />
  192. <br />
  193. @Julot : si ce site arrive à te libérer momentanément, n'hésite pas ;p<br />
  194. <br />
  195. @Xethorn : \o/<br />
  196. <br />
  197. @giz404 : oui nud m'a fait la même remarque, personnellement je ne connaissais qu'un seul des trois sites avant.<br />
  198. <br />
  199. @Tous : merci pour les retours ça fait plaisir.</p>
  200. </div>
  201. </div>
  202. <div class="comment" typeof="schema:UserComments">
  203. <p class="comment-meta">
  204. <span class="comment-author" property="schema:creator">Omnisilver</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  205. </p>
  206. <div class="comment-content" property="schema:commentText">
  207. <p>Salut David ! Le nouveau style est très frais, je l'aime bien, même si l'ancien était plus original (comprendre moins courant, ne te vexes pas ! :p)<br />
  208. <br />
  209. Par contre je suis admin d'un petit site pour une communauté de joueurs, dans un contexte de désert (la ville est dans la désert en fait), et ça fait des mois que je dois faire un style &quot;désert&quot; mais comme je n'en ai pas les compétences et pas le temps d'apprendre pour le moment, c'est toujours au point mort ...<br />
  210. <br />
  211. Est-ce que ça serait possibles que tu m'envoies ton ancien style si tu l'as encore ? Je m'en inspirerai pour créer la CSS &quot;Désert&quot; (c'est pour un forum punBB et un portail qui utilise la même CSS, donc une seule à faire, avec un exemple ça ne devrait pas être trop difficile ...)<br />
  212. <br />
  213. Merci de ta réponse ;) Si besoin mon adresse mail est omnisilver chez gmail !</p>
  214. </div>
  215. </div>
  216. <div class="comment" typeof="schema:UserComments">
  217. <p class="comment-meta">
  218. <span class="comment-author" property="schema:creator">Silvyn</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  219. </p>
  220. <div class="comment-content" property="schema:commentText">
  221. <p>Moi j'adore vraiment beaucoup !! Toutes les petites touches par-ci par-là sont chouettes. Bravo !</p>
  222. </div>
  223. </div>
  224. <div class="comment" typeof="schema:UserComments">
  225. <p class="comment-meta">
  226. <span class="comment-author" property="schema:creator">Xethorn</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  227. </p>
  228. <div class="comment-content" property="schema:commentText">
  229. <p>Withstylé ... vive les fautes ... Avec ça, tu viens de perdre ta place, hop supprimé ! &gt;:)<br />
  230. <br />
  231. Ps : c'est WithStyle !</p>
  232. </div>
  233. </div>
  234. <div class="comment" typeof="schema:UserComments">
  235. <p class="comment-meta">
  236. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  237. </p>
  238. <div class="comment-content" property="schema:commentText">
  239. <p>@Omnisilver : ok je te contacte dès que j'ai le temps.<br />
  240. <br />
  241. @Xethorn : hey c'était pas une faute (c'était plus pour faire une référence à slashdoté, standblogué toussa) mais bon j'ai corrigé quand même ;)</p>
  242. </div>
  243. </div>
  244. <div class="comment" typeof="schema:UserComments">
  245. <p class="comment-meta">
  246. <span class="comment-author" property="schema:creator">rezki</span> le <span class="comment-date" property="schema:commentTime">15/02/2006</span> :
  247. </p>
  248. <div class="comment-content" property="schema:commentText">
  249. <p>Logique, c'est plus bio que l'ancien et esthétiquement à couper le souffle.</p>
  250. </div>
  251. </div>
  252. <div class="comment" typeof="schema:UserComments">
  253. <p class="comment-meta">
  254. <span class="comment-author" property="schema:creator">Xethorn</span> le <span class="comment-date" property="schema:commentTime">16/02/2006</span> :
  255. </p>
  256. <div class="comment-content" property="schema:commentText">
  257. <p>Tient, je me disais bien que l'on avait une petite influence sur CSSMania ... Maintenant, c'est prouvé ^^ ! Et comme CSSMania a une influence sur d'autres sites ...<br />
  258. <br />
  259. Rha la la, je pense que tu vas faire le tour du web :) </p>
  260. </div>
  261. </div>
  262. <div class="comment" typeof="schema:UserComments">
  263. <p class="comment-meta">
  264. <span class="comment-author" property="schema:creator">Deeder</span> le <span class="comment-date" property="schema:commentTime">16/02/2006</span> :
  265. </p>
  266. <div class="comment-content" property="schema:commentText">
  267. <p>Franchement, j'aime ! :p<br />
  268. <br />
  269. Manque plus que les petits smileys verts et un overflow: hidden; sur le contenu pour éviter de cacher le menu par les images un peu trop grandes postées dans les billets telles que des screens d'un ancien design par exemple... :-°<br />
  270. <br />
  271. Totalement différent de l'ancien mais tout aussi attrayant, je n'ai qu'un mot à dire : Félicitations ! ;)</p>
  272. </div>
  273. </div>
  274. <div class="comment" typeof="schema:UserComments">
  275. <p class="comment-meta">
  276. <span class="comment-author" property="schema:creator">vdemeester</span> le <span class="comment-date" property="schema:commentTime">16/02/2006</span> :
  277. </p>
  278. <div class="comment-content" property="schema:commentText">
  279. <p>I love it too !! Beau boulot, vraiment beau boulot !</p>
  280. </div>
  281. </div>
  282. <div class="comment" typeof="schema:UserComments">
  283. <p class="comment-meta">
  284. <span class="comment-author" property="schema:creator">Thanh</span> le <span class="comment-date" property="schema:commentTime">19/02/2006</span> :
  285. </p>
  286. <div class="comment-content" property="schema:commentText">
  287. <p>Hey, j'aime beaucoup les nouvelles couleurs. Très frais, très agréable à l'oeil. Bravo :)</p>
  288. </div>
  289. </div>
  290. </div>
  291. </section>
  292. <footer>
  293. <nav>
  294. <p>
  295. <small>
  296. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  297. </small>
  298. </p>
  299. </nav>
  300. </footer>
  301. </div>
  302. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  303. <script data-no-instant>InstantClick.init()</script>
  304. </body>
  305. </html>