😎 Give your xaringan slides some style
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

294 Zeilen
7.0KB

  1. /* -------------------------------------------------------
  2. *
  3. * !! This file was generated by xaringanthemer !!
  4. *
  5. * Changes made to this file directly will be overwritten
  6. * if you used xaringanthemer in your xaringan slides Rmd
  7. *
  8. * Issues or likes?
  9. * - https://github.com/gadenbuie/xaringanthemer
  10. * - https://www.garrickadenbuie.com
  11. *
  12. * Need help? Try:
  13. * - vignette(package = "xaringanthemer")
  14. * - ?xaringanthemer::style_xaringan
  15. * - xaringan wiki: https://github.com/yihui/xaringan/wiki
  16. * - remarkjs wiki: https://github.com/gnab/remark/wiki
  17. *
  18. * Version: a.b.c.d.eeee
  19. *
  20. * ------------------------------------------------------- */
  21. @import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
  22. @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap);
  23. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap);
  24. :root {
  25. /* Fonts */
  26. --text-font-family: 'Noto Serif';
  27. --text-font-is-google: 1;
  28. --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial;
  29. --text-font-base: sans-serif;
  30. --header-font-family: Cabin;
  31. --header-font-is-google: 1;
  32. --header-font-family-fallback: Georgia, serif;
  33. --code-font-family: 'Source Code Pro';
  34. --code-font-is-google: 1;
  35. --base-font-size: 20px;
  36. --text-font-size: 1rem;
  37. --code-font-size: 0.9rem;
  38. --code-inline-font-size: 1em;
  39. --header-h1-font-size: 2.75rem;
  40. --header-h2-font-size: 2.25rem;
  41. --header-h3-font-size: 1.75rem;
  42. /* Colors */
  43. --text-color: #FFFFFF;
  44. --header-color: #3C989E;
  45. --background-color: #050F0F;
  46. --link-color: #3C989E;
  47. --text-bold-color: #3C989E;
  48. --code-highlight-color: rgba(255,255,0,0.5);
  49. --inverse-text-color: #050F0F;
  50. --inverse-background-color: #3C989E;
  51. --inverse-header-color: #050F0F;
  52. --inverse-link-color: #3C989E;
  53. --title-slide-background-color: #3C989E;
  54. --title-slide-text-color: #050F0F;
  55. --header-background-color: #3C989E;
  56. --header-background-text-color: #050F0F;
  57. --base: #3C989E;
  58. --white: #FFFFFF;
  59. --black: #050F0F;
  60. }
  61. html {
  62. font-size: var(--base-font-size);
  63. }
  64. body {
  65. font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  66. font-weight: normal;
  67. color: var(--text-color);
  68. }
  69. h1, h2, h3 {
  70. font-family: var(--header-font-family), var(--header-font-family-fallback);
  71. font-weight: 600;
  72. color: var(--header-color);
  73. }
  74. .remark-slide-content {
  75. background-color: var(--background-color);
  76. font-size: 1rem;
  77. padding: 16px 64px 16px 64px;
  78. width: 100%;
  79. height: 100%;
  80. }
  81. .remark-slide-content h1 {
  82. font-size: var(--header-h1-font-size);
  83. }
  84. .remark-slide-content h2 {
  85. font-size: var(--header-h2-font-size);
  86. }
  87. .remark-slide-content h3 {
  88. font-size: var(--header-h3-font-size);
  89. }
  90. .remark-code, .remark-inline-code {
  91. font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  92. }
  93. .remark-code {
  94. font-size: var(--code-font-size);
  95. }
  96. .remark-inline-code {
  97. font-size: var(--code-inline-font-size);
  98. color: #3C989E;
  99. }
  100. .remark-slide-number {
  101. color: #3C989E;
  102. opacity: 1;
  103. font-size: 0.9rem;
  104. }
  105. strong {
  106. font-weight: bold;
  107. color: var(--text-bold-color);
  108. }
  109. a, a > code {
  110. color: var(--link-color);
  111. text-decoration: none;
  112. }
  113. .footnote {
  114. position: absolute;
  115. bottom: 60px;
  116. padding-right: 4em;
  117. font-size: 0.9em;
  118. }
  119. .remark-code-line-highlighted {
  120. background-color: var(--code-highlight-color);
  121. }
  122. .inverse {
  123. background-color: var(--inverse-background-color);
  124. color: var(--inverse-text-color);
  125. }
  126. .inverse h1, .inverse h2, .inverse h3 {
  127. color: var(--inverse-header-color);
  128. }
  129. .inverse a, .inverse a > code {
  130. color: var(--inverse-link-color);
  131. }
  132. .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
  133. color: var(--title-slide-text-color);
  134. }
  135. .title-slide {
  136. background-color: var(--title-slide-background-color);
  137. }
  138. .title-slide .remark-slide-number {
  139. display: none;
  140. }
  141. /* Two-column layout */
  142. .left-column {
  143. width: 20%;
  144. height: 92%;
  145. float: left;
  146. }
  147. .left-column h2, .left-column h3 {
  148. color: #3C989E99;
  149. }
  150. .left-column h2:last-of-type, .left-column h3:last-child {
  151. color: #3C989E;
  152. }
  153. .right-column {
  154. width: 75%;
  155. float: right;
  156. padding-top: 1em;
  157. }
  158. .pull-left {
  159. float: left;
  160. width: 47%;
  161. }
  162. .pull-right {
  163. float: right;
  164. width: 47%;
  165. }
  166. .pull-right + * {
  167. clear: both;
  168. }
  169. img, video, iframe {
  170. max-width: 100%;
  171. }
  172. blockquote {
  173. border-left: solid 5px #3C989E80;
  174. padding-left: 1em;
  175. }
  176. .remark-slide table {
  177. margin: auto;
  178. border-top: 1px solid #666;
  179. border-bottom: 1px solid #666;
  180. }
  181. .remark-slide table thead th {
  182. border-bottom: 1px solid #ddd;
  183. }
  184. th, td {
  185. padding: 5px;
  186. }
  187. .remark-slide table:not(.table-unshaded) thead,
  188. .remark-slide table:not(.table-unshaded) tfoot,
  189. .remark-slide table:not(.table-unshaded) tr:nth-child(even) {
  190. background: #0B1E1F;
  191. }
  192. table.dataTable tbody {
  193. background-color: var(--background-color);
  194. color: var(--text-color);
  195. }
  196. table.dataTable.display tbody tr.odd {
  197. background-color: var(--background-color);
  198. }
  199. table.dataTable.display tbody tr.even {
  200. background-color: #0B1E1F;
  201. }
  202. table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  203. background-color: rgba(255, 255, 255, 0.5);
  204. }
  205. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  206. color: var(--text-color);
  207. }
  208. .dataTables_wrapper .dataTables_paginate .paginate_button {
  209. color: var(--text-color) !important;
  210. }
  211. /* Horizontal alignment of code blocks */
  212. .remark-slide-content.left pre,
  213. .remark-slide-content.center pre,
  214. .remark-slide-content.right pre {
  215. text-align: start;
  216. width: max-content;
  217. max-width: 100%;
  218. }
  219. .remark-slide-content.left pre,
  220. .remark-slide-content.right pre {
  221. min-width: 50%;
  222. min-width: min(40ch, 100%);
  223. }
  224. .remark-slide-content.center pre {
  225. min-width: 66%;
  226. min-width: min(50ch, 100%);
  227. }
  228. .remark-slide-content.left pre {
  229. margin-left: unset;
  230. margin-right: auto;
  231. }
  232. .remark-slide-content.center pre {
  233. margin-left: auto;
  234. margin-right: auto;
  235. }
  236. .remark-slide-content.right pre {
  237. margin-left: auto;
  238. margin-right: unset;
  239. }
  240. /* Slide Header Background for h1 elements */
  241. .remark-slide-content.header_background > h1 {
  242. display: block;
  243. position: absolute;
  244. top: 0;
  245. left: 0;
  246. width: 100%;
  247. background: var(--header-background-color);
  248. color: var(--header-background-text-color);
  249. padding: 2rem 64px 1.5rem 64px;
  250. margin-top: 0;
  251. box-sizing: border-box;
  252. }
  253. .remark-slide-content.header_background {
  254. padding-top: 7rem;
  255. }
  256. @page { margin: 0; }
  257. @media print {
  258. .remark-slide-scaler {
  259. width: 100% !important;
  260. height: 100% !important;
  261. transform: scale(1) !important;
  262. top: 0 !important;
  263. left: 0 !important;
  264. }
  265. }
  266. .base {
  267. color: var(--base);
  268. }
  269. .bg-base {
  270. background-color: var(--base);
  271. }
  272. .white {
  273. color: var(--white);
  274. }
  275. .bg-white {
  276. background-color: var(--white);
  277. }
  278. .black {
  279. color: var(--black);
  280. }
  281. .bg-black {
  282. background-color: var(--black);
  283. }