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.

102 lines
2.6 KiB

  1. /* For highlighting lines in code snippets */
  2. .highlight span.hll span {
  3. background-color: black;
  4. display: inline-block;
  5. width: 100%;
  6. }
  7. div.highlight {
  8. margin-bottom: 20px;
  9. border-radius: var(--borderRadius);
  10. }
  11. td.code div.highlight {
  12. border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
  13. }
  14. pre {
  15. overflow: auto;
  16. white-space: pre;
  17. word-break: normal;
  18. word-wrap: normal;
  19. color: #ebdbb2; /* This is needed due to bug in Pygments. It does not wraps some part of the code of some lagauges, like reST. This is for fallback. */
  20. }
  21. /* liquid_tags.include_code */
  22. figure.code {
  23. margin: 0;
  24. padding: 0;
  25. & figcaption {
  26. display: flex;
  27. flex-direction: row;
  28. flex-wrap: wrap;
  29. justify-content: space-between;
  30. align-items: center;
  31. border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  32. background-color: #544c50;
  33. color: #ebdbb2;
  34. padding: 1px 9.5px;
  35. font-family: var(--sansFontFamily);
  36. font-size: rfs(1.1rem);
  37. & span.liquid-tags-code-title {
  38. flex-grow: 1;
  39. }
  40. & span.liquid-tags-code-filename {
  41. font-family: var(--monoFontFamily);
  42. color: #fe8019;
  43. }
  44. /* Download Link */
  45. & a {
  46. color: #b8bb26;
  47. text-transform: capitalize;
  48. position: relative;
  49. margin-left: 30px;
  50. &:before {
  51. height: rfs(0.9rem);
  52. width: rfs(0.9rem);
  53. top: rfs(0.35rem);
  54. content: url("data:image/svg+xml,%3Csvg%20image-rendering%3D%22optimizeQuality%22%20shape-rendering%3D%22geometricPrecision%22%20text-rendering%3D%22geometricPrecision%22%20viewBox%3D%220%200%20294%20452.5%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23b8bb26%22%3E%3Cpath%20d%3D%22m126%200h42v185h62l-83%20111-83-111h62z%22%2F%3E%3Cpath%20d%3D%22m294%20257v105c-98%200-196%200-294%200v-105h34v71h226v-71z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  55. margin: 0;
  56. padding: 0 4px 0 0;
  57. right: 100%;
  58. position: absolute;
  59. }
  60. }
  61. }
  62. & div.highlight:not(:first-child) {
  63. border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  64. }
  65. }
  66. table {
  67. table-layout: fixed;
  68. width: 100%;
  69. }
  70. td {
  71. vertical-align: top;
  72. }
  73. @media (max-width: 979px) {
  74. .linenos {
  75. display: none !important;
  76. }
  77. }
  78. .linenos {
  79. width: 30px;
  80. }
  81. .linenos div pre {
  82. text-align: right;
  83. overflow: hidden;
  84. }
  85. td.code {
  86. width: 100%;
  87. }
  88. .linenodiv pre {
  89. border-radius: var(--borderRadius) 0 0 var(--borderRadius);
  90. color: #ebdbb2;
  91. background-color: #282828;
  92. }
  93. table.highlighttable {
  94. border: none;
  95. }
  96. table.highlighttable td {
  97. border: none;
  98. }
  99. table.highlighttable tbody > tr:nth-child(odd) > td {
  100. background-color: transparent;
  101. }