Heuzef - Les notes excentriques d'un bidouilleur.
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.

main.css 11 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. /*
  2. Name: Smashing HTML5
  3. Date: July 2009
  4. Description: Sample layout for HTML5 and CSS3 goodness.
  5. Version: 1.0
  6. License: MIT <https://opensource.org/licenses/MIT>
  7. Licensed by: Smashing Media GmbH <https://www.smashingmagazine.com/>
  8. Original author: Enrique Ramírez <http://enrique-ramirez.com/>
  9. */
  10. /* Imports */
  11. @import url("reset.css");
  12. @import url("pygment.css");
  13. @import url("typogrify.css");
  14. @import url("fonts.css");
  15. /***** Global *****/
  16. /* Body */
  17. body {
  18. background: #F5F4EF;
  19. color: #000305;
  20. font-size: 87.5%; /* Base font size: 14px */
  21. font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  22. line-height: 1.429;
  23. margin: 0;
  24. padding: 0;
  25. text-align: left;
  26. }
  27. /* Headings */
  28. h1 {font-size: 2em }
  29. h2 {font-size: 1.571em} /* 22px */
  30. h3 {font-size: 1.429em} /* 20px */
  31. h4 {font-size: 1.286em} /* 18px */
  32. h5 {font-size: 1.143em} /* 16px */
  33. h6 {font-size: 1em} /* 14px */
  34. h1, h2, h3, h4, h5, h6 {
  35. font-weight: 400;
  36. line-height: 1.1;
  37. margin-bottom: .8em;
  38. font-family: 'Yanone Kaffeesatz', arial, serif;
  39. }
  40. h3, h4, h5, h6 { margin-top: .8em; }
  41. hr { border: 2px solid #EEEEEE; }
  42. /* Anchors */
  43. a {outline: 0;}
  44. a img {border: 0px; text-decoration: none;}
  45. a:link, a:visited {
  46. color: #C74350;
  47. padding: 0 1px;
  48. text-decoration: underline;
  49. }
  50. a:hover, a:active {
  51. background-color: #C74350;
  52. color: #fff;
  53. text-decoration: none;
  54. text-shadow: 1px 1px 1px #333;
  55. }
  56. h1 a:hover {
  57. background-color: inherit
  58. }
  59. /* Paragraphs */
  60. div.line-block,
  61. p { margin-top: 1em;
  62. margin-bottom: 1em;}
  63. strong, b {font-weight: bold;}
  64. em, i {font-style: italic;}
  65. /* Lists */
  66. ul {
  67. list-style: outside disc;
  68. margin: 0em 0 0 1.5em;
  69. }
  70. ol {
  71. list-style: outside decimal;
  72. margin: 0em 0 0 1.5em;
  73. }
  74. li { margin-top: 0.5em;
  75. margin-bottom: 1em; }
  76. .post-info {
  77. float:right;
  78. margin:10px;
  79. padding:5px;
  80. }
  81. .post-info p{
  82. margin-top: 1px;
  83. margin-bottom: 1px;
  84. }
  85. .readmore { float: right }
  86. dl {margin: 0 0 1.5em 0;}
  87. dt {font-weight: bold;}
  88. dd {margin-left: 1.5em;}
  89. pre{background-color: rgb(238, 238, 238); padding: 10px; margin: 10px; overflow: auto;}
  90. /* Quotes */
  91. blockquote {
  92. margin: 20px;
  93. font-style: italic;
  94. }
  95. cite {}
  96. q {}
  97. div.note {
  98. float: right;
  99. margin: 5px;
  100. font-size: 85%;
  101. max-width: 300px;
  102. }
  103. /* Tables */
  104. table {margin: .5em auto 1.5em auto; width: 98%;}
  105. /* Thead */
  106. thead th {padding: .5em .4em; text-align: left;}
  107. thead td {}
  108. /* Tbody */
  109. tbody td {padding: .5em .4em;}
  110. tbody th {}
  111. tbody .alt td {}
  112. tbody .alt th {}
  113. /* Tfoot */
  114. tfoot th {}
  115. tfoot td {}
  116. /* HTML5 tags */
  117. header, section, footer,
  118. aside, nav, article, figure {
  119. display: block;
  120. }
  121. /***** Layout *****/
  122. .body {clear: both; margin: 0 auto; max-width: 800px;}
  123. img { max-width: 100%; }
  124. img.right, figure.right, div.figure.align-right {
  125. float: right;
  126. margin: 0 0 2em 2em;
  127. }
  128. img.left, figure.left, div.figure.align-left {
  129. float: left;
  130. margin: 0 2em 2em 0;
  131. }
  132. /* .rst support */
  133. div.figure img, figure img { /* to fill figure exactly */
  134. max-width: 100%;
  135. }
  136. div.figure p.caption, figure p.caption { /* margin provided by figure */
  137. margin-top: 0;
  138. margin-bottom: 0;
  139. }
  140. /*
  141. Header
  142. *****************/
  143. #banner {
  144. margin: 0 auto;
  145. padding: 0.8em 0 0 0;
  146. }
  147. /* Banner */
  148. #banner h1 {
  149. font-size: 3.571em;
  150. line-height: 1.0;
  151. margin-bottom: .3em;
  152. }
  153. #banner h1 a:link, #banner h1 a:visited {
  154. color: #000305;
  155. display: block;
  156. font-weight: bold;
  157. margin: 0 0 0 .2em;
  158. text-decoration: none;
  159. }
  160. #banner h1 a:hover, #banner h1 a:active {
  161. background: none;
  162. color: #C74350;
  163. text-shadow: none;
  164. }
  165. #banner h1 strong {font-size: 0.36em; font-weight: normal;}
  166. /* Main Nav */
  167. #banner nav {
  168. background: #000305;
  169. font-size: 1.143em;
  170. overflow: auto;
  171. line-height: 30px;
  172. margin: 0 auto 2em auto;
  173. padding: 0;
  174. text-align: center;
  175. max-width: 800px;
  176. border-radius: 5px;
  177. -moz-border-radius: 5px;
  178. -webkit-border-radius: 5px;
  179. }
  180. #banner nav ul {list-style: none; margin: 0 auto; max-width: 800px;}
  181. #banner nav li {float: left; display: inline; margin: 0;}
  182. #banner nav a:link, #banner nav a:visited {
  183. color: #fff;
  184. display: inline-block;
  185. height: 30px;
  186. padding: 5px 1.5em;
  187. text-decoration: none;
  188. }
  189. #banner nav a:hover, #banner nav a:active,
  190. #banner nav .active a:link, #banner nav .active a:visited {
  191. background: #C74451;
  192. color: #fff;
  193. text-shadow: none !important;
  194. }
  195. #banner nav li:first-child a {
  196. border-top-left-radius: 5px;
  197. -moz-border-radius-topleft: 5px;
  198. -webkit-border-top-left-radius: 5px;
  199. border-bottom-left-radius: 5px;
  200. -moz-border-radius-bottomleft: 5px;
  201. -webkit-border-bottom-left-radius: 5px;
  202. }
  203. /*
  204. Featured
  205. *****************/
  206. #featured {
  207. background: #fff;
  208. margin-bottom: 2em;
  209. overflow: hidden;
  210. padding: 20px;
  211. max-width: 760px;
  212. border-radius: 10px;
  213. -moz-border-radius: 10px;
  214. -webkit-border-radius: 10px;
  215. }
  216. #featured figure {
  217. border: 2px solid #eee;
  218. float: right;
  219. margin: 0.786em 2em 0 5em;
  220. max-width: 248px;
  221. }
  222. #featured figure img {display: block; float: right;}
  223. #featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
  224. #featured h3 {font-size: 1.429em; margin-bottom: .5em;}
  225. #featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
  226. #featured h3 a:hover, #featured h3 a:active {color: #fff;}
  227. /*
  228. Body
  229. *****************/
  230. #content {
  231. background: #fff;
  232. margin-bottom: 2em;
  233. overflow: hidden;
  234. padding: 20px 20px;
  235. max-width: 760px;
  236. border-radius: 10px;
  237. -moz-border-radius: 10px;
  238. -webkit-border-radius: 10px;
  239. }
  240. /*
  241. Extras
  242. *****************/
  243. #extras {margin: 0 auto 3em auto; overflow: hidden;}
  244. #extras ul {list-style: none; margin: 0;}
  245. #extras li {border-bottom: 1px solid #fff;}
  246. #extras h2 {
  247. color: #C74350;
  248. font-size: 1.429em;
  249. margin-bottom: .25em;
  250. padding: 0 3px;
  251. }
  252. #extras a:link, #extras a:visited {
  253. color: #444;
  254. display: block;
  255. border-bottom: 1px solid #F4E3E3;
  256. text-decoration: none;
  257. padding: .3em .25em;
  258. }
  259. #extras a:hover, #extras a:active {color: #fff;}
  260. /* Blogroll */
  261. #extras .blogroll {
  262. float: left;
  263. max-width: 615px;
  264. }
  265. #extras .blogroll li {float: left; margin: 0 20px 0 0; max-width: 185px;}
  266. /* Social */
  267. #extras .social {
  268. float: right;
  269. max-width: 175px;
  270. }
  271. #extras div[class='social'] a {
  272. background-repeat: no-repeat;
  273. background-position: 3px 6px;
  274. padding-left: 25px;
  275. }
  276. /* Icons */
  277. .social a[href*='about.me'] {background-image: url('../images/icons/aboutme.png');}
  278. .social a[href*='bitbucket.org'] {background-image: url('../images/icons/bitbucket.png');}
  279. .social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
  280. .social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
  281. .social a[href*='gitorious.org'] {background-image: url('../images/icons/gitorious.png');}
  282. .social a[href*='github.com'],
  283. .social a[href*='git.io'] {
  284. background-image: url('../images/icons/github.png');
  285. background-size: 16px 16px;
  286. }
  287. .social a[href*='gittip.com'] {background-image: url('../images/icons/gittip.png');}
  288. .social a[href*='plus.google.com'] {background-image: url('../images/icons/google-plus.png');}
  289. .social a[href*='groups.google.com'] {background-image: url('../images/icons/google-groups.png');}
  290. .social a[href*='news.ycombinator.com'],
  291. .social a[href*='hackernewsers.com'] {background-image: url('../images/icons/hackernews.png');}
  292. .social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
  293. .social a[href*='linkedin.com'] {background-image: url('../images/icons/linkedin.png');}
  294. .social a[href*='reddit.com'] {background-image: url('../images/icons/reddit.png');}
  295. .social a[type$='atom+xml'], .social a[type$='rss+xml'] {background-image: url('../images/icons/rss.png');}
  296. .social a[href*='slideshare.net'] {background-image: url('../images/icons/slideshare.png');}
  297. .social a[href*='speakerdeck.com'] {background-image: url('../images/icons/speakerdeck.png');}
  298. .social a[href*='stackoverflow.com'] {background-image: url('../images/icons/stackoverflow.png');}
  299. .social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
  300. .social a[href*='vimeo.com'] {background-image: url('../images/icons/vimeo.png');}
  301. .social a[href*='youtube.com'] {background-image: url('../images/icons/youtube.png');}
  302. /*
  303. About
  304. *****************/
  305. #about {
  306. background: #fff;
  307. font-style: normal;
  308. margin-bottom: 2em;
  309. overflow: hidden;
  310. padding: 20px;
  311. text-align: left;
  312. max-width: 760px;
  313. border-radius: 10px;
  314. -moz-border-radius: 10px;
  315. -webkit-border-radius: 10px;
  316. }
  317. #about .primary {float: left; max-width: 165px;}
  318. #about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
  319. #about .photo {float: left; margin: 5px 20px;}
  320. #about .url:link, #about .url:visited {text-decoration: none;}
  321. #about .bio {float: right; max-width: 500px;}
  322. /*
  323. Footer
  324. *****************/
  325. #contentinfo {padding-bottom: 2em; text-align: right;}
  326. /***** Sections *****/
  327. /* Blog */
  328. .hentry {
  329. display: block;
  330. clear: both;
  331. border-top: 1px solid #eee;
  332. padding: 1.5em 0;
  333. }
  334. li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
  335. #content > .hentry {padding: 1em 0;}
  336. .hentry img{display : none ;}
  337. .entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
  338. .entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
  339. .entry-title a:visited {background-color: #fff;}
  340. .hentry .post-info * {font-style: normal;}
  341. /* Content */
  342. .hentry footer {margin-bottom: 2em;}
  343. .hentry footer address {display: inline;}
  344. #posts-list footer address {display: block;}
  345. /* Blog Index */
  346. #posts-list {list-style: none; margin: 0;}
  347. #posts-list .hentry {padding-left: 10px; position: relative;}
  348. #posts-list footer {
  349. left: 10px;
  350. position: relative;
  351. float: left;
  352. top: 0.5em;
  353. max-width: 190px;
  354. }
  355. /* About the Author */
  356. #about-author {
  357. background: #f9f9f9;
  358. clear: both;
  359. font-style: normal;
  360. margin: 2em 0;
  361. padding: 10px 20px 15px 20px;
  362. border-radius: 5px;
  363. -moz-border-radius: 5px;
  364. -webkit-border-radius: 5px;
  365. }
  366. #about-author strong {
  367. color: #C64350;
  368. clear: both;
  369. display: block;
  370. font-size: 1.429em;
  371. }
  372. #about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}
  373. /* Comments */
  374. #comments-list {list-style: none; margin: 0 1em;}
  375. #comments-list blockquote {
  376. background: #f8f8f8;
  377. clear: both;
  378. font-style: normal;
  379. margin: 0;
  380. padding: 15px 20px;
  381. border-radius: 5px;
  382. -moz-border-radius: 5px;
  383. -webkit-border-radius: 5px;
  384. }
  385. #comments-list footer {color: #888; padding: .5em 1em 0 0; text-align: right;}
  386. #comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
  387. /* Add a Comment */
  388. #add-comment label {clear: left; float: left; text-align: left; max-width: 150px;}
  389. #add-comment input[type='text'],
  390. #add-comment input[type='email'],
  391. #add-comment input[type='url'] {float: left; max-width: 200px;}
  392. #add-comment textarea {float: left; height: 150px; max-width: 495px;}
  393. #add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
  394. #add-comment input[type='submit'] {float: right; margin: 0 .5em;}
  395. #add-comment * {margin-bottom: .5em;}