fuck this. we sticking to latex

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "deprived-main-website",
 			"version": "0.0.1",
 			"dependencies": {
+				"svelte-katex": "^0.1.2",
 				"svelte-media-queries": "^1.6.2",
 				"svelte-parallax": "^0.6.0",
 				"theme-change": "^2.5.0"
@@ -2586,6 +2587,31 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/katex": {
+			"version": "0.15.6",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.15.6.tgz",
+			"integrity": "sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==",
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^8.0.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
+		"node_modules/katex/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -3734,6 +3760,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-katex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/svelte-katex/-/svelte-katex-0.1.2.tgz",
+			"integrity": "sha512-jgqMgP0hwgsaYKLNa9GGpuEKiwE7Gr6QlDKp3C3QQkIb30G+WEHCljfl+nVCNra1aTr7uIemQmlyMA3avHx6HQ==",
+			"license": "MIT",
+			"dependencies": {
+				"katex": "^0.15.2"
+			}
+		},
 		"node_modules/svelte-media-queries": {
 			"version": "1.6.2",
 			"resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz",

package.json

@@ -29,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"svelte-katex": "^0.1.2",
 		"svelte-media-queries": "^1.6.2",
 		"svelte-parallax": "^0.6.0",
 		"theme-change": "^2.5.0"

src/routes/+layout.svelte

@@ -58,7 +58,8 @@
                     <div class="nav-spacer" />
 
                     <!-- <a href="/">Home</a> -->
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen's CV</a>
+                    <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
                     <a href="https://botalex.itch.io/" target="_blank">Games</a>
                     <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->

src/routes/zhen/cv/rev2/+page.svelte

@@ -120,12 +120,6 @@
         }
     }
 
-    @media print {
-    .hide-on-print {
-        display: none;
-    }
-}
-
     .cv-container-container{
         width: 100%;
         height: 100%;
@@ -149,11 +143,6 @@
         padding: auto;
     }
 
-    .include-in-print { &, & * {
-        -webkit-print-color-adjust:exact !important;
-        print-color-adjust:exact !important;
-    }}
-
     .sections {
         // Shared between sections
         > div {

src/routes/zhen/notes/physics/1/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import A4 from "../sharedComps/A4.svelte";
+</script>
+
+<svelte:head>
+    <script>
+        MathJax = {
+            tex: {
+                inlineMath: [
+                    ["$", "$"],
+                    ["\\(", "\\)"],
+                ],
+            },
+        };
+    </script>
+    <script
+        id="MathJax-script"
+        async
+        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
+    ></script>
+</svelte:head>
+
+<div class="flex justify-center m-auto text-slate-900">
+    <div class="flex flex-col">
+        <A4>
+            <!-- <div>$$v_f = v_i + at$$</div>
+            <div>$$\Delta x = v_i t + \frac{1}{2} a t^2$$</div>
+            <div>$$v_f^2 = v_i^2 + 2a\Delta x$$</div>
+            <div>$$v_{\text{avg} = \frac{v_i + v_f}{2}$$</div>
+            <div>$$\Delta x = v_{\text{avg}} t$$</div> -->
+
+            <div class="overflow-x-auto">
+                <table class="table">
+                    <!-- head -->
+                    <thead>
+                        <tr>
+                            <th>Symbol</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>$v_i$</td>
+                            <td>Initial velo</td>
+                        </tr>
+                        <tr>
+                            <td>$v_f$</td>
+                            <td>Final velo</td>
+                        </tr>
+                        <tr>
+                            <td>$a$</td>
+                            <td>Accel</td>
+                        </tr>
+                        <tr>
+                            <td>$\Delta x$</td>
+                            <td>The amount of change.</td>
+                        </tr>
+                        <tr>
+                            <td>$t$</td>
+                            <td>You're on your own on this one</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </A4>
+        <A4>
+            {#each { length: 3 } as _, i}
+                <div>test {i}</div>
+            {/each}
+        </A4>
+    </div>
+</div>

src/routes/zhen/notes/physics/sharedComps/A4.svelte

@@ -0,0 +1,9 @@
+<div style="width: 210mm; height: 297mm;" class="bg-white overflow-y-auto overflow-x-hidden">
+    <div class="flex flex-col h-full">
+        <div {...$$restProps}>
+            <slot></slot>
+        </div>
+
+        <div class="border-b-2 mt-auto mb-0 border-dashed border-slate-600 hide-on-print"></div>
+    </div>
+</div>

static/stylesheets/global.css

@@ -17,6 +17,17 @@
     font-family: "CozetteVector";
 }
 
+@media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+
+.include-in-print { &, & * {
+    -webkit-print-color-adjust:exact !important;
+    print-color-adjust:exact !important;
+}}
+
 html {
     background: var(--background1);
 }