Le blog de Victor Héry https://blog.victor-hery.com
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.

456 lines
8.3 KiB

  1. /* Base */
  2. :root {
  3. --borderRadius: 4px;
  4. --mutedTextColor: dimgray;
  5. }
  6. html,
  7. body {
  8. height: 100%;
  9. }
  10. body {
  11. display: flex;
  12. flex-direction: column;
  13. }
  14. div#content {
  15. flex: 1 0 auto;
  16. }
  17. footer {
  18. align-content: center;
  19. align-items: center;
  20. border-top: 1px solid rgba(0, 0, 0, 0.2);
  21. display: flex;
  22. flex-direction: row;
  23. flex-shrink: 0;
  24. flex-wrap: wrap;
  25. justify-content: flex-end;
  26. margin: 15px 0 0 0;
  27. min-height: 40px;
  28. padding: 0 3px;
  29. }
  30. footer div {
  31. margin: 3px 0;
  32. }
  33. footer div:first-child {
  34. margin-right: auto;
  35. }
  36. footer div#fpowered {
  37. margin-left: auto;
  38. margin-right: unset;
  39. }
  40. :lang(zh) {
  41. font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",
  42. Helvetica, Arial, sans-serif;
  43. }
  44. a {
  45. color: #3875d7;
  46. }
  47. hr {
  48. border-width: 3px;
  49. }
  50. /* Top navigation menu */
  51. .top-menu li a {
  52. font-weight: bold;
  53. }
  54. /* comment */
  55. #comment-message,
  56. #post-share-links:not(a) {
  57. color: #6f6f6f;
  58. text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.15);
  59. }
  60. #post-share-links a {
  61. text-shadow: 0 0;
  62. }
  63. .comment-count {
  64. font-family: "Trebuchet MS", Trebuchet, "Lucida Sans Unicode", "Lucida Grande",
  65. "Lucida Sans", Arial, Sans-Serif;
  66. font-size: 0.9em;
  67. }
  68. #comment_thread {
  69. padding-left: 10px;
  70. padding-right: 10px;
  71. }
  72. /* Tags */
  73. ul.list-projects,
  74. .list-of-tags {
  75. list-style: none;
  76. margin: 0;
  77. overflow: hidden;
  78. }
  79. .list-of-tags li {
  80. float: left;
  81. line-height: 28px;
  82. margin: 0;
  83. }
  84. .list-of-tags a {
  85. background: #eee;
  86. border-radius: var(--borderRadius);
  87. color: #222;
  88. margin: 2px;
  89. padding: 3px 6px;
  90. text-decoration: none;
  91. }
  92. .tags-in-article li {
  93. float: none;
  94. line-height: 28px;
  95. }
  96. /* Article */
  97. .article-content,
  98. div.recent-posts p {
  99. text-align: justify;
  100. }
  101. .article-content {
  102. max-width: 50em;
  103. }
  104. .article-content p {
  105. margin: 0 0 20px 0;
  106. }
  107. .article-content ul:not(.related-posts-list):not(.articles-timeline) {
  108. font-size: inherit;
  109. list-style-type: disc;
  110. }
  111. .article-content ul.related-posts-list {
  112. list-style-type: square;
  113. }
  114. .article-content ol {
  115. font-size: inherit;
  116. list-style-type: decimal;
  117. }
  118. .article-content li {
  119. line-height: 1.7em;
  120. list-style-position: outside;
  121. margin: 1px 0 1px 20px;
  122. }
  123. .article-content dl {
  124. font-size: inherit;
  125. list-style-position: outside;
  126. list-style-type: decimal;
  127. margin: 20px 0 20px 20px;
  128. }
  129. .article-content dd {
  130. line-height: 1.7em;
  131. margin: 1px 0 1px 20px;
  132. padding: 3px 0;
  133. }
  134. .article-content dt {
  135. font-size: inherit;
  136. }
  137. h1,
  138. h2,
  139. h3,
  140. h4,
  141. h5,
  142. h6 {
  143. font-weight: normal;
  144. margin: 10px 0px;
  145. }
  146. .page-header {
  147. border-bottom: 2px solid maroon;
  148. color: maroon;
  149. margin: 10px 0 30px 0;
  150. }
  151. .page-header h1 {
  152. border: none;
  153. line-height: 1em;
  154. }
  155. ul.articles-timeline {
  156. list-style: none;
  157. margin: 0;
  158. padding-bottom: 30px;
  159. }
  160. ul.articles-timeline .next-article {
  161. float: right;
  162. margin: 0;
  163. }
  164. ul.articles-timeline .previous-article {
  165. float: left;
  166. margin: 0;
  167. }
  168. ul.multi-parts-list a {
  169. color: black;
  170. }
  171. ul.multi-parts-list a:hover {
  172. text-decoration: none;
  173. }
  174. ul.multi-parts-list li.active-part {
  175. font-style: italic;
  176. }
  177. .table-of-content .toc ul {
  178. margin: 0;
  179. padding: 0 0 0 0.2rem;
  180. list-style-type: none;
  181. list-style: symbols inside none;
  182. }
  183. .table-of-content .toc > ul > li > ul {
  184. padding-left: 1rem;
  185. }
  186. .last-updated a {
  187. color: #333;
  188. }
  189. .last-updated a:hover {
  190. text-decoration: none;
  191. }
  192. .article-content img {
  193. border: 2px solid #eee;
  194. padding: 5px;
  195. }
  196. p#post-share-links {
  197. text-align: right;
  198. }
  199. /* Categories */
  200. a.category-title-inside-accordion {
  201. text-decoration: none;
  202. }
  203. ul.list-articles-under-tag-category {
  204. list-style: none outside none;
  205. margin: 0 0 0 5px;
  206. }
  207. a.category-link {
  208. color: #333;
  209. }
  210. a.category-link:hover {
  211. text-decoration: none;
  212. }
  213. a.category-title-inside-accordion:hover,
  214. a:not(.collapsed).accordion-toggle.category-title-inside-accordion {
  215. background-color: #08c;
  216. border-radius: var(--borderRadius);
  217. color: #fff;
  218. }
  219. div.blog-archives h2 {
  220. float: left;
  221. clear: both;
  222. position: relative;
  223. margin: 0;
  224. }
  225. .proj-desc {
  226. color: var(--mutedTextColor);
  227. }
  228. ul.list-projects li,
  229. div.blog-archives div,
  230. div.recent-posts-article {
  231. border-bottom: 1px dotted var(--mutedTextColor);
  232. overflow: auto;
  233. padding: 0.3rem 0.2rem;
  234. }
  235. ul.list-articles-under-tag-category li {
  236. padding: 0.1rem 0.2rem;
  237. }
  238. div.blog-archives div {
  239. margin-left: rfs(6rem);
  240. }
  241. div.blog-archives div.last-entry-of-year {
  242. margin-bottom: 1em;
  243. }
  244. div.blog-archives time,
  245. div.recent-posts time,
  246. ul.list-articles-under-tag-category li time {
  247. float: right;
  248. text-align: left;
  249. }
  250. div.blog-archives time,
  251. div.recent-posts time,
  252. ul.list-articles-under-tag-category li time,
  253. div.recent-posts-posted {
  254. color: var(--mutedTextColor);
  255. }
  256. @media (max-width: 767px) {
  257. div.blog-archives h2 {
  258. float: none;
  259. }
  260. div.blog-archives div {
  261. margin-left: 0;
  262. }
  263. div.blog-archives article {
  264. margin-left: 0;
  265. padding-left: 0;
  266. }
  267. div.blog-archives time,
  268. div.recent-posts time,
  269. ul.list-articles-under-tag-category li time {
  270. float: none;
  271. display: block;
  272. }
  273. }
  274. /* MailChimp */
  275. #mc-embed-signup {
  276. font-family: inherit;
  277. font-size: inherit;
  278. margin: 10px 0;
  279. }
  280. #mc-embed-signup form {
  281. display: block;
  282. padding: 0;
  283. position: relative;
  284. text-align: left;
  285. }
  286. #mc-embed-signup input {
  287. -moz-appearance: none;
  288. -webkit-appearance: none;
  289. border: 1px solid #999;
  290. }
  291. #mc-embed-signup input:focus {
  292. border-color: #333;
  293. }
  294. #mc-embed-signup input.email {
  295. display: block;
  296. font-size: 0.9em;
  297. margin: 0 4% 10px 0;
  298. min-width: 130px;
  299. padding: 8px 0;
  300. text-indent: 5px;
  301. width: 100%;
  302. }
  303. #mc-embed-signup input.button {
  304. display: block;
  305. margin: 0 0 10px 0;
  306. min-width: 130px;
  307. width: 100%;
  308. }
  309. #mc-embed-signup input[type="email"] {
  310. height: 100%;
  311. }
  312. #mc-embed-signup .button {
  313. background-color: #eee;
  314. border-radius: var(--borderRadius);
  315. border: 1px solid #d3d3d3;
  316. clear: both;
  317. color: #000;
  318. cursor: pointer;
  319. display: inline-block;
  320. font-size: 1em;
  321. font-weight: normal;
  322. height: 32px;
  323. line-height: 32px;
  324. margin: 0 5px 10px 0;
  325. padding: 0;
  326. text-align: center;
  327. text-decoration: none;
  328. vertical-align: top;
  329. white-space: nowrap;
  330. width: auto;
  331. }
  332. #mc-embed-signup.button:hover {
  333. background-color: #dfdfdf;
  334. }
  335. #mc-embed-signup .clear {
  336. clear: none;
  337. display: inline;
  338. }
  339. /* Index page */
  340. #allposts {
  341. color: var(--mutedTextColor);
  342. float: right;
  343. font-size: 75%;
  344. font-weight: normal;
  345. }
  346. a#allposts:hover {
  347. color: #333;
  348. }
  349. /* reST specific rules*/
  350. .literal {
  351. background-color: #f7f7f9;
  352. border-radius: var(--borderRadius);
  353. border: 1px solid #e1e1e8;
  354. color: #d14;
  355. padding: 2px 4px;
  356. white-space: nowrap;
  357. }
  358. div.line-block div.line-block {
  359. margin-left: 1.5em;
  360. }
  361. /* Helper CSS classes */
  362. .amp {
  363. font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua",
  364. Serif;
  365. font-style: italic;
  366. }
  367. /* Use following classes to add floating images to your post */
  368. div.figure,
  369. .article-content img {
  370. text-align: center;
  371. }
  372. div.figure img {
  373. width: 100%;
  374. }
  375. div.figure p.caption {
  376. color: gray;
  377. font-size: 0.6em;
  378. margin: 0;
  379. }
  380. div.figure p.caption a {
  381. border: none;
  382. color: gray;
  383. }
  384. div.figure.align-right,
  385. .article-content img.align-right {
  386. float: right;
  387. margin-left: 1.5em;
  388. }
  389. div.figure.align-left,
  390. .article-content img.align-left {
  391. float: left;
  392. margin-right: 1.5em;
  393. }
  394. /* Author blurb */
  395. .author-blurb {
  396. padding: 5px 0;
  397. }
  398. .author-blurb img {
  399. padding: 0;
  400. width: 32px;
  401. height: 32px;
  402. }
  403. /* Github Gist */
  404. .gist table {
  405. table-layout: initial;
  406. }
  407. /* Table */
  408. table {
  409. max-width: 100%;
  410. background-color: transparent;
  411. border-collapse: collapse;
  412. border-spacing: 0;
  413. border: 1px solid #bfbfbf;
  414. border-collapse: separate;
  415. *border-collapse: collapse;
  416. border-left: 0;
  417. border-radius: var(--borderRadius);
  418. }
  419. table th,
  420. table td {
  421. border-left: 1px solid #bfbfbf;
  422. padding-left: 2px;
  423. padding-right: 2px;
  424. }
  425. table thead:first-child tr:first-child th {
  426. border-top: 0;
  427. }
  428. table thead:first-child tr:first-child > th:first-child {
  429. border-top-left-radius: var(--borderRadius);
  430. }
  431. table thead:first-child tr:first-child > th:last-child {
  432. border-top-right-radius: var(--borderRadius);
  433. }
  434. table tbody:last-child tr:last-child > td:first-child {
  435. border-bottom-left-radius: var(--borderRadius);
  436. }
  437. table tbody:last-child tr:last-child > td:last-child {
  438. border-bottom-right-radius: var(--borderRadius);
  439. }
  440. table tbody > tr:nth-child(odd) > td {
  441. background-color: #ebebeb;
  442. }
  443. .navbar .nav > li > a {
  444. float: none;
  445. padding: 11px 15px 13px;
  446. }
  447. .site-name {
  448. color: var(--mutedTextColor);
  449. }