logo

blog

My website can't be that messy, right? git clone https://anongit.hacktivis.me/git/blog.git/

index.in.css (5703B)


  1. /* BEGIN css/colorscheme.css */
  2. :root {
  3. /* gruvbox dark */
  4. --ansi00: #282828;
  5. --ansi00-hard: #1d2021;
  6. --ansi00-soft: #32302f;
  7. --ansi01: #cc241d;
  8. --ansi02: #98971a;
  9. --ansi03: #d79921;
  10. --ansi04: #458588;
  11. --ansi05: #b16286;
  12. --ansi06: #689d6a;
  13. --ansi07: #a89984;
  14. --ansi08: #928374;
  15. --ansi09: #fb4934;
  16. --ansi10: #b8bb26;
  17. --ansi11: #fabd2f;
  18. --ansi12: #83a598;
  19. --ansi13: #d3869b;
  20. --ansi14: #8ec07c;
  21. --ansi15: #ebdbb2;
  22. }
  23. @media (prefers-color-scheme: light) {
  24. :root {
  25. /* gruvbox light */
  26. --ansi00: #fbf1c7;
  27. --ansi00-hard: #f9f5d7;
  28. --ansi00-soft: #f2e5bc;
  29. --ansi01: #cc241d;
  30. --ansi02: #98971a;
  31. --ansi03: #d79921;
  32. --ansi04: #458588;
  33. --ansi05: #b16286;
  34. --ansi06: #689d6a;
  35. --ansi07: #7c6f64;
  36. --ansi08: #928374;
  37. --ansi09: #9d0006;
  38. --ansi10: #79740e;
  39. --ansi11: #b57614;
  40. --ansi12: #076678;
  41. --ansi13: #8f3f71;
  42. --ansi14: #427b58;
  43. --ansi15: #3c3836;
  44. }
  45. }
  46. /* END css/colorscheme.css */
  47. /* Because sometimes non-semantic colors happens
  48. * Like in /notes/vocabulary-jp: Tetris-CC-Sakura-EH.xhtml
  49. */
  50. font[color=green] {
  51. color: @ansi10@;
  52. color: var(--ansi10);
  53. }
  54. /* elements */
  55. a {
  56. color: @ansi13@;
  57. color: var(--ansi13);
  58. outline-color: invert;
  59. outline-color: var(--ansi11);
  60. }
  61. summary { cursor: pointer; } /* for some reason this isn't in webkit */
  62. abbr {
  63. text-decoration: underline;
  64. text-decoration: dotted underline;
  65. text-decoration-color: var(--ansi02);
  66. cursor: help;
  67. }
  68. body, html {
  69. background-color: @ansi00-hard@;
  70. background-color: var(--ansi00-hard);
  71. color: @ansi15@;
  72. color: var(--ansi15);
  73. margin: 0;
  74. padding: 0;
  75. }
  76. blockquote {
  77. border-left: 0.1em solid;
  78. padding-left: 0.5em;
  79. }
  80. code, pre {
  81. background-color: @ansi00@;
  82. background-color: var(--ansi00);
  83. color: @ansi15@;
  84. color: var(--ansi15);
  85. font-family: monospace;
  86. }
  87. code { padding: 0 0.25em; }
  88. pre {
  89. display: table;
  90. /* pre-wrap is there for legacy reasons as break-spaces is recent */
  91. white-space: pre-wrap;
  92. white-space: break-spaces;
  93. word-break: break-all;
  94. }
  95. .inline-sections article,
  96. .inline-sections section {
  97. display: inline-table;
  98. }
  99. .box-center h1,
  100. .box-center h2 {
  101. text-align: center;
  102. }
  103. article, main, .box-center {
  104. margin: 1.5rem auto;
  105. }
  106. article, body > section, main {
  107. padding: 0.5rem;
  108. background-color: @ansi00-soft@;
  109. background-color: var(--ansi00-soft);
  110. display: table;
  111. vertical-align: top;
  112. }
  113. article, main { max-width: 100ch; }
  114. article p, figcaption, ul, ol, dl { max-width: 90ch; }
  115. article .timestamps { font-size: small; }
  116. section h1, section h2, section h3, section h4, section h5, section h6 {
  117. margin-block: 0.25em;
  118. }
  119. table {
  120. border-collapse: collapse;
  121. }
  122. thead {
  123. position: sticky;
  124. top: 0;
  125. color: @ansi15@;
  126. color: var(--ansi15);
  127. background-color: @ansi00-hard@;
  128. background-color: var(--ansi00-hard);
  129. }
  130. td, th {
  131. border: 2pt solid @ansi00-hard@;
  132. border: 2pt solid var(--ansi00-hard);
  133. padding: 0.25em;
  134. }
  135. tbody tr:nth-child(odd) {
  136. background-color: @ansi00-soft@;
  137. background-color: var(--ansi00-soft);
  138. }
  139. tbody tr:nth-child(even) {
  140. background-color: @ansi00@;
  141. background-color: var(--ansi00);
  142. }
  143. thead td, thead th {
  144. border: none;
  145. }
  146. td.date, th.date {
  147. /* YYYY-MM-DD -> 10 characters, of roughly the width of '0' */
  148. min-width: 10ch;
  149. }
  150. rt,rp { font-size: 75%; }
  151. kbd, samp {
  152. user-select: all;
  153. user-select: contain;
  154. }
  155. kbd { font-weight: bold; }
  156. /* selectors */
  157. h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
  158. color: @ansi03@;
  159. color: var(--ansi03);
  160. }
  161. section { border: 1px dashed transparent; }
  162. section:target {
  163. border: 1px dashed @ansi03@;
  164. border: 1px dashed var(--ansi03);
  165. }
  166. /* classes */
  167. .select-all {
  168. user-select: all;
  169. }
  170. .warn {
  171. border-bottom: 1pt solid @ansi01@;
  172. border-bottom: 1pt solid var(--ansi01);
  173. }
  174. dl.list dt {
  175. display: list-item;
  176. list-style-type: disc;
  177. list-style-position: inside;
  178. }
  179. dl[compact] dt,
  180. dl[compact] dd {
  181. display: inline;
  182. }
  183. dl[compact] dt { font-weight: bold; }
  184. dl[compact] dd { margin-inline-start: 2em; }
  185. /* break between items */
  186. dl[compact] dt:before {
  187. content: ' ';
  188. display: block;
  189. }
  190. img.thumb_inline {
  191. max-width: 45%;
  192. object-fit: contain;
  193. margin: 0.5em;
  194. }
  195. .math {
  196. font-family: math, "CMU Typewriter Text", "STIX Two Math", "Lucida Math", monospace;
  197. }
  198. .right { float: right; }
  199. /* footnote */
  200. .fn {
  201. font-size: small;
  202. vertical-align: super;
  203. }
  204. /* ids */
  205. #bio { clear: both; }
  206. #avatar {
  207. float: left;
  208. margin: 1em;
  209. margin-right: 2em;
  210. }
  211. /* Images/Figures */
  212. figure {
  213. text-align: center;
  214. margin: auto;
  215. }
  216. figcaption {
  217. display: table;
  218. margin: auto;
  219. }
  220. #art {
  221. border: none;
  222. text-align: center;
  223. }
  224. #art img, figure img {
  225. max-width: 100%;
  226. max-height: 100%;
  227. object-fit: scale-down;
  228. }
  229. nav, footer {
  230. background-color: @ansi00@;
  231. background-color: var(--ansi00);
  232. color: @ansi15@;
  233. color: var(--ansi15);
  234. }
  235. header {
  236. text-align: center;
  237. background-color: @ansi00@;
  238. background-color: var(--ansi00);
  239. color: @ansi06@;
  240. color: var(--ansi06);
  241. }
  242. /* navbar */
  243. nav {
  244. font-size: larger;
  245. font-weight: bold;
  246. margin: 0 0 1rem 1rem;
  247. float: right;
  248. }
  249. nav, .indexlist {
  250. line-height: 1.5;
  251. }
  252. .indexlist a { font-size: larger; }
  253. /* footer */
  254. footer {
  255. margin-top: 1rem;
  256. padding: 0.5em 0;
  257. text-align: center;
  258. clear: both;
  259. }
  260. /* class to be applied on elements like <main> or <article> */
  261. .section-count {
  262. counter-reset: section subsection subsubsection;
  263. }
  264. .section-count h2:before {
  265. content: counter(section) ". ";
  266. counter-increment: section;
  267. font-weight: normal;
  268. }
  269. .section-count h3:before {
  270. content: counter(section) "." counter(subsection) ". ";
  271. counter-increment: subsection;
  272. font-weight: normal;
  273. }
  274. .section-count h4:before {
  275. content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
  276. counter-increment: subsubsection;
  277. font-weight: normal;
  278. }