1 files changed, 302 insertions, 0 deletions
diff --git a/.config/joplin-desktop/userstyle.css b/.config/joplin-desktop/userstyle.css
new file mode 100644
index 0000000..5f02386
--- /dev/null
+++ b/.config/joplin-desktop/userstyle.css
@@ -0,0 +1,302 @@
+/* For styling the rendered Markdown */
+
+:root {
+  --fg-color: #ffeede;
+  --bg-color: #262626;
+  --fg-selection-color: #001121;
+  --bg-selection-color: #81949f;
+  --border-color: #777;
+  --blockquote-color: #919191;
+  --blockquote-border-color: #919191;
+  --header-color: #d49408;
+  --accent-line-color: #d47408;
+  --strong-color: #c35b5b;
+  --a-color: #cd81a7;
+  --a-hover-color: #eeaacd;
+  --code-bg-color: #414141;
+  --pre-bg-color: #414141;
+  --em-color: #e17b08;
+  --table-border-color: #777;
+  --tr-bg-color: #262626;
+  --alternating-row-color: #353535;
+}
+
+/* Custom mouse text selection colors */
+
+::-moz-selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
+::selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
+/* Global */
+
+body {
+  min-height: calc(100vh - 16px);
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+}
+
+body, td, th {
+  font: 18px 'Open Sans', sans-serif;
+  line-height: 1.5em;
+}
+
+img {
+  max-width: 100%;
+  box-sizing: border-box;
+  image-rendering: crisp-edges;
+}
+
+img, hr {
+  border: 1px solid var(--border-color);
+}
+
+strong {
+  color: var(--strong-color);
+}
+
+a, a strong {
+  text-decoration: none;
+  color: var(--a-color);
+  border-bottom: 1px dashed;
+}
+
+a:hover, a strong:hover {
+  color: var(--a-hover-color);
+}
+
+a * {
+  color: var(--fg-color);
+}
+
+sup a {
+  border: none;
+}
+
+i, em {
+  color: var(--em-color);
+}
+
+article {
+  flex: 1;
+  max-width: 52.7em; /* Equivalent to 50em on 19px font-size */
+  min-height: calc(100vh - 228px);
+  overflow: auto;
+  padding: 0 0.4em;
+  box-sizing: border-box;
+}
+
+ul, ol {
+  padding-inline-start: 30px;
+}
+
+h1, h2, h3, h4, h5, h6, b {
+  color: var(--header-color);
+  border-color: var(--border-color);
+}
+
+h1 {
+  font-size: 1.7em;
+  line-height: 1.2em;
+  margin-block-end: 0.5em;
+}
+
+h1:not(:first-child), hr ~ h1 {
+  margin-top: 4em;
+}
+
+h2 {
+  margin-top: 3em;
+}
+
+h1::before, h2::before, h3::before, h4::before, h5::before {
+  content: "\2550  ";
+  color: var(--border-color);
+}
+
+h1::after, h2::after, h3::after, h4::after, h5::after {
+   color: var(--border-color);
+}
+
+h1::after {
+   content: " \2550 \2550 \2550 \2550 \2550";
+}
+
+h2::after {
+   content: " \2550 \2550 \2550";
+}
+
+h3::after {
+   content: " \2550";
+}
+
+h4 {
+   border-bottom: 2px solid var(--border-color);
+}
+
+/* Show link icon next to headings */
+
+h3, h4, h5, h6 {
+  margin-block-start: 1.25em;
+  margin-block-end: 0.16em;
+  line-height: 1.25em;
+}
+
+h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
+  display: inline;
+  border: none !important;
+}
+
+h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img {
+  height: 1.3em;
+  border: none;
+  vertical-align: text-top;
+}
+
+h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
+  /* Since link images are made for dark mode, and have white-ish foreground,
+   * this filter makes them black (when in light mode)
+   */
+  filter: none;
+}
+
+  /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
+
+code, pre {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+code {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: var(--code-bg-color);
+  border-radius: 3px;
+}
+
+pre code {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: var(--code-bg-color);
+  border: 0;
+}
+
+pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background-color: inherit;
+  border: 0;
+}
+
+pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--pre-bg-color);
+  border-radius: 3px;
+  margin: 0;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  overflow: auto;
+}
+
+table td, table th {
+  word-break: normal !important;
+}
+
+table td:not(:empty) {
+  padding: 0.5em;
+}
+
+table th:not(:empty) {
+  font-size: 1.1em;
+  padding: 0.2em;
+  font-weight: 600;
+}
+
+table code {
+  white-space: normal;
+  font-size: 0.7em;
+}
+
+table td:not(:first-of-type), table th:not(:first-of-type) {
+  border-left: 2px dashed var(--table-border-color);
+}
+
+table tr:not(:first-of-type) {
+  background-color: var(--tr-bg-color);
+}
+
+thead tr {
+  border-bottom: 2px dashed var(--table-border-color);
+}
+
+table tr:nth-child(2n), thead tr {
+  background-color: var(--alternating-row-color);
+}
+
+blockquote {
+  margin: 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+  padding: 0 1em;
+  color: var(--blockquote-color);
+  border-left: .25em solid var(--blockquote-border-color);
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+dt {
+  font-size: 1.2em;
+}
+
+dt * {
+  vertical-align: middle;
+}
+
+dt a {
+  border: none;
+}
+
+dt img, .svg {
+  max-height: 1em;
+  box-sizing: border-box;
+}
+
+dd {
+  margin-bottom: 1em;
+  line-height: 1.5em;
+}
+
+dd code {
+  font-size: 0.8em;
+}