style: improve typography

7 files changed, 410 insertions, 240 deletions

diff --git a/assets/css/eureka.css b/assets/css/eureka.css
index 9531157..832f013 100644
--- a/assets/css/eureka.css
+++ b/assets/css/eureka.css
@@ -4,7 +4,7 @@
 /* Tailwind component classes registered by plugins*/
 @import "node_modules/tailwindcss/components";
 /* Site Specific */
-@import "assets/css/markdown";
+@import "assets/css/prose";
 @import "assets/css/site";
 /* Tailwind's utility classes - generated based on config file */
-@import "node_modules/tailwindcss/utilities";
\ No newline at end of file
+@import "node_modules/tailwindcss/utilities";
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
deleted file mode 100644
index 0bae72e..0000000
--- a/assets/css/markdown.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.content {
-  @apply text-primary-text leading-normal break-words;
-}
-
-.content > * {
-  @apply mb-4;
-}
-
-.content li + li {
-  @apply mt-1;
-}
-
-.content li > p + p {
-  @apply mt-6;
-}
-
-.content strong {
-  @apply font-semibold;
-}
-
-.content a {
-  @apply text-eureka;
-}
-
-.content a:hover {
-  @apply text-eureka underline;
-}
-
-.content strong a {
-  @apply font-bold;
-}
-
-.content h1 {
-  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
-}
-
-.content h2 {
-  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
-}
-
-.content h3 {
-  @apply leading-snug text-lg font-semibold mb-4 mt-6;
-}
-
-.content h4 {
-  @apply leading-none text-base font-semibold mb-4 mt-6;
-}
-
-.content h5 {
-  @apply leading-tight text-sm font-semibold mb-4 mt-6;
-}
-
-.content h6 {
-  @apply leading-tight text-sm font-semibold text-secondary-text mb-4 mt-6;
-}
-
-.content blockquote {
-  @apply text-base border-s-4 border-tertiary-text ps-4 pe-4 text-secondary-text;
-}
-
-.content code {
-  @apply font-mono text-sm text-tertiary-text inline bg-tertiary-bg rounded p-1;
-}
-
-.content pre {
-  @apply bg-tertiary-bg rounded p-4;
-}
-
-.content pre code {
-  @apply block bg-transparent p-0 overflow-auto rounded-none;
-}
-
-.content ul {
-  @apply text-base ps-8 list-disc;
-}
-
-.content ol {
-  @apply text-base ps-8 list-decimal;
-}
-
-.content kbd {
-  @apply text-xs inline-block rounded border p-1 align-middle font-normal font-mono shadow;
-}
-
-.content table {
-  @apply block text-base border-secondary-text overflow-auto;
-}
-
-.content th {
-  @apply border py-1 px-3;
-}
-
-.content td {
-  @apply border py-1 px-3;
-}
-
-.content .katex {
-  @apply overflow-x-auto overflow-y-hidden;
-}
-
-.content .katex * {
-  @apply border-primary-text;
-}
-
-.content *:target {
-  padding-top: 4rem;
-  margin-top: -4rem;
-}
-
-
diff --git a/assets/css/prose.css b/assets/css/prose.css
new file mode 100644
index 0000000..de351a2
--- /dev/null
+++ b/assets/css/prose.css
@@ -0,0 +1,16 @@
+.prose a:hover * {
+  @apply text-eureka transition duration-300 ease-in-out;
+}
+
+.prose .katex {
+  @apply overflow-x-auto overflow-y-hidden;
+}
+
+.prose .katex * {
+  @apply border-primary-text;
+}
+
+.prose *:target {
+  padding-top: 4rem;
+  margin-top: -4rem;
+}
diff --git a/assets/css/site.css b/assets/css/site.css
index d4732f5..44b3206 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -1,9 +1,9 @@
 .sticky-toc {
-  @apply sticky top-32 z-0 ease-in-out duration-300;
+  @apply sticky top-32 z-0 duration-300 ease-in-out;
 }
 
 .sticky-toc a {
-  @apply text-primary-text ease-in-out duration-200;
+  @apply text-secondary-text duration-200 ease-in-out;
 }
 
 .sticky-toc a:hover {
@@ -11,11 +11,11 @@
 }
 
 .sticky-toc ul {
-  @apply text-base ps-8 list-disc;
+  @apply ps-8 text-tertiary-text list-disc text-base;
 }
 
 .sticky-toc ol {
-  @apply text-base ps-8 list-decimal;
+  @apply ps-8 text-tertiary-text list-decimal text-base;
 }
 
 .sticky-toc li + li {
@@ -27,7 +27,7 @@
 }
 
 .object-contain {
-    object-fit: contain !important;
+  object-fit: contain !important;
 }
 
 .pagination {
@@ -38,8 +38,8 @@
   @apply flex items-center;
 }
 
-.pagination .page-item .page-link{
-  @apply p-2 m-2;
+.pagination .page-item .page-link {
+  @apply m-2 p-2;
 }
 
 .pagination .active {
@@ -54,4 +54,4 @@
   @apply text-eureka;
   border-top-color: var(--color-eureka);
   border-bottom-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/assets/css/syntax.css b/assets/css/syntax.css
index 83a208e..6a07a9d 100644
--- a/assets/css/syntax.css
+++ b/assets/css/syntax.css
@@ -1,82 +1,321 @@
-/* Background */ .chroma { color: #e7e9db; background-color: #2f1e2e }
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #ef6155 }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* Keyword */ .chroma .k { color: #815ba4 }
-/* KeywordConstant */ .chroma .kc { color: #815ba4 }
-/* KeywordDeclaration */ .chroma .kd { color: #815ba4 }
-/* KeywordNamespace */ .chroma .kn { color: #5bc4bf }
-/* KeywordPseudo */ .chroma .kp { color: #815ba4 }
-/* KeywordReserved */ .chroma .kr { color: #815ba4 }
-/* KeywordType */ .chroma .kt { color: #fec418 }
-/* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na { color: #06b6ef }
-/* NameBuiltin */ .chroma .nb {  }
-/* NameBuiltinPseudo */ .chroma .bp {  }
-/* NameClass */ .chroma .nc { color: #fec418 }
-/* NameConstant */ .chroma .no { color: #ef6155 }
-/* NameDecorator */ .chroma .nd { color: #5bc4bf }
-/* NameEntity */ .chroma .ni {  }
-/* NameException */ .chroma .ne { color: #ef6155 }
-/* NameFunction */ .chroma .nf { color: #06b6ef }
-/* NameFunctionMagic */ .chroma .fm {  }
-/* NameLabel */ .chroma .nl {  }
-/* NameNamespace */ .chroma .nn { color: #fec418 }
-/* NameOther */ .chroma .nx { color: #06b6ef }
-/* NameProperty */ .chroma .py {  }
-/* NameTag */ .chroma .nt { color: #5bc4bf }
-/* NameVariable */ .chroma .nv { color: #ef6155 }
-/* NameVariableClass */ .chroma .vc {  }
-/* NameVariableGlobal */ .chroma .vg {  }
-/* NameVariableInstance */ .chroma .vi {  }
-/* NameVariableMagic */ .chroma .vm {  }
-/* Literal */ .chroma .l { color: #f99b15 }
-/* LiteralDate */ .chroma .ld { color: #48b685 }
-/* LiteralString */ .chroma .s { color: #48b685 }
-/* LiteralStringAffix */ .chroma .sa { color: #48b685 }
-/* LiteralStringBacktick */ .chroma .sb { color: #48b685 }
-/* LiteralStringChar */ .chroma .sc {  }
-/* LiteralStringDelimiter */ .chroma .dl { color: #48b685 }
-/* LiteralStringDoc */ .chroma .sd { color: #776e71 }
-/* LiteralStringDouble */ .chroma .s2 { color: #48b685 }
-/* LiteralStringEscape */ .chroma .se { color: #f99b15 }
-/* LiteralStringHeredoc */ .chroma .sh { color: #48b685 }
-/* LiteralStringInterpol */ .chroma .si { color: #f99b15 }
-/* LiteralStringOther */ .chroma .sx { color: #48b685 }
-/* LiteralStringRegex */ .chroma .sr { color: #48b685 }
-/* LiteralStringSingle */ .chroma .s1 { color: #48b685 }
-/* LiteralStringSymbol */ .chroma .ss { color: #48b685 }
-/* LiteralNumber */ .chroma .m { color: #f99b15 }
-/* LiteralNumberBin */ .chroma .mb { color: #f99b15 }
-/* LiteralNumberFloat */ .chroma .mf { color: #f99b15 }
-/* LiteralNumberHex */ .chroma .mh { color: #f99b15 }
-/* LiteralNumberInteger */ .chroma .mi { color: #f99b15 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #f99b15 }
-/* LiteralNumberOct */ .chroma .mo { color: #f99b15 }
-/* Operator */ .chroma .o { color: #5bc4bf }
-/* OperatorWord */ .chroma .ow { color: #5bc4bf }
-/* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #776e71 }
-/* CommentHashbang */ .chroma .ch { color: #776e71 }
-/* CommentMultiline */ .chroma .cm { color: #776e71 }
-/* CommentSingle */ .chroma .c1 { color: #776e71 }
-/* CommentSpecial */ .chroma .cs { color: #776e71 }
-/* CommentPreproc */ .chroma .cp { color: #776e71 }
-/* CommentPreprocFile */ .chroma .cpf { color: #776e71 }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd { color: #ef6155 }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh { font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #48b685 }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp { color: #776e71; font-weight: bold }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #5bc4bf; font-weight: bold }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }
+/* Other */
+.chroma .x {
+}
+/* Error */
+.chroma .err {
+  color: #ef6155;
+}
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: auto;
+  overflow: auto;
+  display: block;
+}
+/* LineHighlight */
+.chroma .hl {
+  display: block;
+  width: 100%;
+  background-color: #ffffcc;
+}
+/* LineNumbersTable */
+.chroma .lnt {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #7f7f7f;
+}
+/* LineNumbers */
+.chroma .ln {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #7f7f7f;
+}
+/* Keyword */
+.chroma .k {
+  color: #815ba4;
+}
+/* KeywordConstant */
+.chroma .kc {
+  color: #815ba4;
+}
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #815ba4;
+}
+/* KeywordNamespace */
+.chroma .kn {
+  color: #5bc4bf;
+}
+/* KeywordPseudo */
+.chroma .kp {
+  color: #815ba4;
+}
+/* KeywordReserved */
+.chroma .kr {
+  color: #815ba4;
+}
+/* KeywordType */
+.chroma .kt {
+  color: #fec418;
+}
+/* Name */
+.chroma .n {
+}
+/* NameAttribute */
+.chroma .na {
+  color: #06b6ef;
+}
+/* NameBuiltin */
+.chroma .nb {
+}
+/* NameBuiltinPseudo */
+.chroma .bp {
+}
+/* NameClass */
+.chroma .nc {
+  color: #fec418;
+}
+/* NameConstant */
+.chroma .no {
+  color: #ef6155;
+}
+/* NameDecorator */
+.chroma .nd {
+  color: #5bc4bf;
+}
+/* NameEntity */
+.chroma .ni {
+}
+/* NameException */
+.chroma .ne {
+  color: #ef6155;
+}
+/* NameFunction */
+.chroma .nf {
+  color: #06b6ef;
+}
+/* NameFunctionMagic */
+.chroma .fm {
+}
+/* NameLabel */
+.chroma .nl {
+}
+/* NameNamespace */
+.chroma .nn {
+  color: #fec418;
+}
+/* NameOther */
+.chroma .nx {
+  color: #06b6ef;
+}
+/* NameProperty */
+.chroma .py {
+}
+/* NameTag */
+.chroma .nt {
+  color: #5bc4bf;
+}
+/* NameVariable */
+.chroma .nv {
+  color: #ef6155;
+}
+/* NameVariableClass */
+.chroma .vc {
+}
+/* NameVariableGlobal */
+.chroma .vg {
+}
+/* NameVariableInstance */
+.chroma .vi {
+}
+/* NameVariableMagic */
+.chroma .vm {
+}
+/* Literal */
+.chroma .l {
+  color: #f99b15;
+}
+/* LiteralDate */
+.chroma .ld {
+  color: #48b685;
+}
+/* LiteralString */
+.chroma .s {
+  color: #48b685;
+}
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #48b685;
+}
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #48b685;
+}
+/* LiteralStringChar */
+.chroma .sc {
+}
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #48b685;
+}
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #776e71;
+}
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #48b685;
+}
+/* LiteralStringEscape */
+.chroma .se {
+  color: #f99b15;
+}
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #48b685;
+}
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #f99b15;
+}
+/* LiteralStringOther */
+.chroma .sx {
+  color: #48b685;
+}
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #48b685;
+}
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #48b685;
+}
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #48b685;
+}
+/* LiteralNumber */
+.chroma .m {
+  color: #f99b15;
+}
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #f99b15;
+}
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #f99b15;
+}
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #f99b15;
+}
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #f99b15;
+}
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #f99b15;
+}
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #f99b15;
+}
+/* Operator */
+.chroma .o {
+  color: #5bc4bf;
+}
+/* OperatorWord */
+.chroma .ow {
+  color: #5bc4bf;
+}
+/* Punctuation */
+.chroma .p {
+}
+/* Comment */
+.chroma .c {
+  color: #776e71;
+}
+/* CommentHashbang */
+.chroma .ch {
+  color: #776e71;
+}
+/* CommentMultiline */
+.chroma .cm {
+  color: #776e71;
+}
+/* CommentSingle */
+.chroma .c1 {
+  color: #776e71;
+}
+/* CommentSpecial */
+.chroma .cs {
+  color: #776e71;
+}
+/* CommentPreproc */
+.chroma .cp {
+  color: #776e71;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #776e71;
+}
+/* Generic */
+.chroma .g {
+}
+/* GenericDeleted */
+.chroma .gd {
+  color: #ef6155;
+}
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+/* GenericError */
+.chroma .gr {
+}
+/* GenericHeading */
+.chroma .gh {
+  font-weight: bold;
+}
+/* GenericInserted */
+.chroma .gi {
+  color: #48b685;
+}
+/* GenericOutput */
+.chroma .go {
+}
+/* GenericPrompt */
+.chroma .gp {
+  color: #776e71;
+  font-weight: bold;
+}
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+/* GenericSubheading */
+.chroma .gu {
+  color: #5bc4bf;
+  font-weight: bold;
+}
+/* GenericTraceback */
+.chroma .gt {
+}
+/* GenericUnderline */
+.chroma .gl {
+}
+/* TextWhitespace */
+.chroma .w {
+}
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index 43fad44..194e310 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -1,55 +1,80 @@
-const themeDir = __dirname + '/../../';
+const themeDir = __dirname + "/../../";
 
 module.exports = {
   important: true,
   content: [
-    themeDir + 'layouts/**/*.html',
-    themeDir + 'exampleSite/content/**/*.html',
-    'layouts/**/*.html',
-    'content/**/*.html',
+    themeDir + "layouts/**/*.html",
+    themeDir + "exampleSite/content/**/*.html",
+    "layouts/**/*.html",
+    "content/**/*.html",
   ],
   theme: {
     fontFamily: {
-      'serif': ['Lora', 'Noto Serif SC', 'serif'],
-      'mono': ['SFMono-Regular', 'Menlo', 'monospace'],
+      serif: ["Lora", "Noto Serif SC", "serif"],
+      mono: ["SFMono-Regular", "Menlo", "monospace"],
     },
     extend: {
       height: {
-          '(screen-16)': 'calc(100vh - 4rem)',
-          '(16-4px)': 'calc(4rem - 4px)',
-          '96': '24rem',
-          '128': '32rem',
-          '160': '40rem',
+        "(screen-16)": "calc(100vh - 4rem)",
+        "(16-4px)": "calc(4rem - 4px)",
+        96: "24rem",
+        128: "32rem",
+        160: "40rem",
       },
       minHeight: {
-        '16': '4rem',
+        16: "4rem",
       },
       maxHeight: {
-        'doc-sidebar': 'calc(100vh - 4rem - var(--height-doc-title, 4rem))',
+        "doc-sidebar": "calc(100vh - 4rem - var(--height-doc-title, 4rem))",
       },
       lineHeight: {
-        '(16-4px)': 'calc(4rem - 4px)',
+        "(16-4px)": "calc(4rem - 4px)",
       },
       inset: {
-        '16': '4rem',
-        '32': '8rem',
-        '48': '12rem',
+        16: "4rem",
+        32: "8rem",
+        48: "12rem",
       },
       padding: {
-        'scrollbar': 'calc(100vw - 100%)',
+        scrollbar: "calc(100vw - 100%)",
       },
       colors: {
-        'eureka': 'var(--color-eureka)',
-        'primary-bg': 'var(--color-primary-bg)',
-        'secondary-bg': 'var(--color-secondary-bg)',
-        'tertiary-bg': 'var(--color-tertiary-bg)',
-        'primary-text': 'var(--color-primary-text)',
-        'secondary-text': 'var(--color-secondary-text)',
-        'tertiary-text': 'var(--color-tertiary-text)',
-      }
-    }
+        eureka: "var(--color-eureka)",
+        "primary-bg": "var(--color-primary-bg)",
+        "secondary-bg": "var(--color-secondary-bg)",
+        "tertiary-bg": "var(--color-tertiary-bg)",
+        "primary-text": "var(--color-primary-text)",
+        "secondary-text": "var(--color-secondary-text)",
+        "tertiary-text": "var(--color-tertiary-text)",
+      },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            "--tw-prose-body": theme("colors.secondary-text"),
+            "--tw-prose-headings": theme("colors.primary-text"),
+            "--tw-prose-lead": theme("colors.secondary-text"),
+            "--tw-prose-links": theme("colors.primary-text"),
+            "--tw-prose-bold": theme("colors.primary-text"),
+            "--tw-prose-counters": theme("colors.tertiary-text"),
+            "--tw-prose-bullets": theme("colors.tertiary-text"),
+            "--tw-prose-hr": theme("colors.tertiary-bg"),
+            "--tw-prose-quotes": theme("colors.tertiary-text"),
+            "--tw-prose-quote-borders": theme("colors.tertiary-bg"),
+            "--tw-prose-captions": theme("colors.tertiary-text"),
+            "--tw-prose-code": theme("colors.primary-text"),
+            "--tw-prose-pre-code": theme("colors.tertiary-text"),
+            "--tw-prose-pre-bg": theme("colors.tertiary-bg"),
+            "--tw-prose-th-borders": theme("colors.tertiary-bg"),
+            "--tw-prose-td-borders": theme("colors.tertiary-bg"),
+            // a: {
+            //   color: "var(--tw-prose-links)",
+            //   textDecoration: "no-underline",
+            //   fontWeight: "500",
+            // },
+          },
+        },
+      }),
+    },
   },
-  plugins: [
-    require('tailwindcss-rtl')
-  ]
-}
+  plugins: [require("@tailwindcss/typography"), require("tailwindcss-rtl")],
+};
diff --git a/assets/js/eureka.js b/assets/js/eureka.js
index f2ea102..3c82f2a 100644
--- a/assets/js/eureka.js
+++ b/assets/js/eureka.js
@@ -53,22 +53,22 @@ function enableStickyToc() {
     }
 
     // Track all sections that have an `id` applied
-    document.querySelectorAll('.content h1[id]').forEach((section) => {
+    document.querySelectorAll('.prose h1[id]').forEach((section) => {
         observer.observe(section);
     });
-    document.querySelectorAll('.content h2[id]').forEach((section) => {
+    document.querySelectorAll('.prose h2[id]').forEach((section) => {
         observer.observe(section);
     });
-    document.querySelectorAll('.content h3[id]').forEach((section) => {
+    document.querySelectorAll('.prose h3[id]').forEach((section) => {
         observer.observe(section);
     });
-    document.querySelectorAll('.content h4[id]').forEach((section) => {
+    document.querySelectorAll('.prose h4[id]').forEach((section) => {
         observer.observe(section);
     });
-    document.querySelectorAll('.content h5[id]').forEach((section) => {
+    document.querySelectorAll('.prose h5[id]').forEach((section) => {
         observer.observe(section);
     });
-    document.querySelectorAll('.content h6[id]').forEach((section) => {
+    document.querySelectorAll('.prose h6[id]').forEach((section) => {
         observer.observe(section);
     });
 }