logo

blog

My little blog can’t be this cute!

index.css (4592B)


  1. /* BEGIN css/colorscheme.css */
  2. :root {
  3. /* gruvbox dark */
  4. --dark-ansi00: #282828;
  5. --dark-ansi00-hard: #1d2021;
  6. --dark-ansi00-soft: #32302f;
  7. --dark-ansi01: #cc241d;
  8. --dark-ansi02: #98971a;
  9. --dark-ansi03: #d79921;
  10. --dark-ansi04: #458588;
  11. --dark-ansi05: #b16286;
  12. --dark-ansi06: #689d6a;
  13. --dark-ansi07: #a89984;
  14. --dark-ansi08: #928374;
  15. --dark-ansi09: #fb4934;
  16. --dark-ansi10: #b8bb26;
  17. --dark-ansi11: #fabd2f;
  18. --dark-ansi12: #83a598;
  19. --dark-ansi13: #d3869b;
  20. --dark-ansi14: #8ec07c;
  21. --dark-ansi15: #ebdbb2;
  22. /* gruvbox light */
  23. --light-ansi-00: #fbf1c7;
  24. --light-ansi-00-hard: #f9f5d7;
  25. --light-ansi-00-soft: #f2e5bc;
  26. --light-ansi-01: #cc241d;
  27. --light-ansi-02: #98971a;
  28. --light-ansi-03: #d79921;
  29. --light-ansi-04: #458588;
  30. --light-ansi-05: #b16286;
  31. --light-ansi-06: #689d6a;
  32. --light-ansi-07: #7c6f64;
  33. --light-ansi-08: #928374;
  34. --light-ansi-09: #9d0006;
  35. --light-ansi-10: #79740e;
  36. --light-ansi-11: #b57614;
  37. --light-ansi-12: #076678;
  38. --light-ansi-13: #8f3f71;
  39. --light-ansi-14: #427b58;
  40. --light-ansi-15: #3c3836;
  41. }
  42. /* END css/colorscheme.css */
  43. /* elements */
  44. a {
  45. color: var(--dark-ansi13);
  46. outline-color: invert;
  47. outline-color: var(--dark-ansi11);
  48. }
  49. abbr {
  50. text-decoration: underline;
  51. text-decoration: dotted underline;
  52. text-decoration-color: var(--dark-ansi02);
  53. cursor: help;
  54. }
  55. body, html {
  56. background-color: var(--dark-ansi00-hard);
  57. color: var(--dark-ansi15);
  58. margin: 0;
  59. padding: 0;
  60. }
  61. blockquote {
  62. border-left: 0.1em solid;
  63. padding-left: 0.5em;
  64. }
  65. code, pre {
  66. background-color: var(--dark-ansi00);
  67. color: var(--dark-ansi15);
  68. font-family: monospace;
  69. }
  70. code { padding: 0 0.25em; }
  71. pre {
  72. display: table;
  73. /* pre-wrap is there for legacy reasons as break-spaces is recent */
  74. white-space: pre-wrap;
  75. white-space: break-spaces;
  76. word-break: break-all;
  77. }
  78. section h1, section h2 { text-align: center; }
  79. .inline-sections article,
  80. .inline-sections section {
  81. display: inline-table;
  82. }
  83. article, section, main {
  84. margin: 1.5rem auto;
  85. padding: 0.5rem;
  86. background-color: var(--dark-ansi00-soft);
  87. display: table;
  88. vertical-align: top;
  89. }
  90. article, main { max-width: 80em; }
  91. table {
  92. border: 0.1em solid;
  93. border-collapse: collapse;
  94. }
  95. td, th {
  96. border: 0.1em solid;
  97. padding: 0.25em;
  98. }
  99. quote[lang=fr]::before, *[lang=fr] > quote::before { content: "« "; }
  100. quote[lang=fr]::after, *[lang=fr] > quote::after { content: " »"; }
  101. quote + cite::before { content: " — "; }
  102. rt,rp { font-size: 75%; }
  103. kbd, samp {
  104. -webkit-user-select: all;
  105. -webkit-user-select: contain;
  106. -moz-user-select: all;
  107. -moz-user-select: contain;
  108. -ms-user-select: all;
  109. -ms-user-select: contain;
  110. user-select: all;
  111. user-select: contain;
  112. }
  113. kbd { font-weight: bold; }
  114. /* classes */
  115. .select-all {
  116. -webkit-user-select: all;
  117. -moz-user-select: all;
  118. -ms-user-select: all;
  119. user-select: all;
  120. }
  121. .warn { border-bottom: 1pt solid var(--dark-ansi01); }
  122. dl.list dt {
  123. display: list-item;
  124. list-style-type: disc;
  125. list-style-position: inside;
  126. }
  127. .left { float: left; }
  128. .right { float: right; }
  129. img.thumb_inline {
  130. max-width: 45%;
  131. object-fit: contain;
  132. margin: 0.5em;
  133. }
  134. /* ids */
  135. #bio { clear: both; }
  136. #avatar {
  137. float: left;
  138. margin: 1em;
  139. margin-right: 2em;
  140. }
  141. /* Images/Figures */
  142. figure {
  143. text-align: center;
  144. margin: auto;
  145. }
  146. #art {
  147. border: none;
  148. text-align: center;
  149. }
  150. #art img, figure img {
  151. max-width: 100%;
  152. max-height: 100%;
  153. object-fit: scale-down;
  154. }
  155. nav, footer {
  156. background-color: var(--dark-ansi00);
  157. color: var(--dark-ansi07);
  158. }
  159. header {
  160. text-align: center;
  161. background-color: var(--dark-ansi00);
  162. color: var(--dark-ansi06);
  163. }
  164. /* navbar */
  165. nav {
  166. font-size: larger;
  167. font-weight: bold;
  168. margin-bottom: 1rem;
  169. }
  170. nav * {
  171. margin: 0;
  172. padding: 0;
  173. }
  174. nav a, nav .menu span {
  175. color: inherit;
  176. display: inline-block;
  177. padding: 0.5em;
  178. }
  179. nav .menu span::after { content: "↓︎"; }
  180. nav ul {
  181. display: inline-block;
  182. list-style: none;
  183. }
  184. nav ul li {
  185. display: inline-table;
  186. transition: 0.5s;
  187. }
  188. nav li:focus-within,
  189. nav li:hover {
  190. background-color: var(--dark-ansi05);
  191. color: var(--dark-ansi00-soft);
  192. }
  193. nav ul li:focus-within > ul,
  194. nav ul li:hover > ul {
  195. display: block;
  196. }
  197. nav ul ul {
  198. background: var(--dark-ansi05);
  199. color: var(--dark-ansi00-soft);
  200. display: none;
  201. position: absolute;
  202. }
  203. nav ul ul li,
  204. nav ul ul a { display: block; }
  205. nav ul ul li:focus-within,
  206. nav ul ul li:hover {
  207. background: var(--dark-ansi13);
  208. }
  209. nav ul ul li:hover:active,
  210. nav ul ul li:focus-within:active {
  211. font-weight: normal;
  212. }
  213. nav ul ul ul {
  214. left: 100%;
  215. position: absolute;
  216. top: 0;
  217. }
  218. /* footer */
  219. footer {
  220. margin-top: 1rem;
  221. padding: 0.5em 0;
  222. text-align: center;
  223. }
  224. footer a { color: inherit; }