made edits

Automated Lecture Note link generation in the homepage.
Updated UI
2023-12-30 08:50:30 -07:00 · 2023-12-29 21:47:03 -07:00 · 2023-12-29 20:05:27 -07:00 · 2023-12-29 16:17:03 -07:00
22 changed files with 973 additions and 461 deletions
--- a/README.md
+++ b/README.md
@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;)
 Here's a quick rundown of how to build from source:
 1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201```
 2) make sure you have hugo installed
-3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
-4) visit your site by opening http://localhost:1313 on your browser.
+3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to true.
+4) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
+5) visit your site by opening http://localhost:1313 on your browser.

 Now if you want to host it on a live website, you can run:
 ```hugo```
--- a/content/Bernoulli
+++ b/content/Bernoulli
@ -1,42 +1,37 @@
 # Bernoulli's equation:
 ### $$\frac{ dy }{ dx } +P(x)y=Q(x)y^n \quad\quad n\in\mathbb{R},\quad n\ne0,1$$
->For now, I'll tag and refer to these as #de_bernoulli. This is in standard form btw.
+>I'm calling this #de_b_type1. This is in standard form btw.

 It looks almost like a linear equation! In fact if $n=0$ it is by definition. We will see further that if $n=1$ you get a separable equation. So we ignore the cases when $n=0,1$ as these can be solved with prior tools.

 Bernoulli's equations are important as you will see it in biology and in engineering.
-Our goal is to find the general solution to $y$ which is some function of $x$. We should expect one arbitrary constant in our final answer for $y$ since this is a first order differential equation.
-Notice there's an easy solution! $y(x)=0$ is a trivial solution to any Bernoulli equation.
-You can verify that by plugging in $y(x)=0$ to the original expression:
-$\frac{dy}{dx}+0=0\quad \implies \quad0=0$
-Now let's find the general solution.
+If $y$ is $+$ then $y(x)=0$ is a solution to the equation:
+$\frac{dy}{dx}+0=0\quad\Rightarrow \quad0=0$
 Let's move the y to the LHS:
 $y^{-n}\frac{ dy }{ dx }+P(x)y^{1-n}=Q(x)$
 notice that $y(x)=0$ is no longer a solution! It was lost due to dividing by zero. So from here on out we will have to remember to add it back in our final answers.
 let $y^{1-n}=u$
-Differentiating this with respect to $x$ gives us:
+Differentiating this with respect to x gives us:
 $(1-n)y^{-n}\frac{ dy }{ dx }=\frac{du}{dx}$
 $y^{-n}\frac{ dy }{ dx }=\frac{ du }{ dx }{\frac{1}{1-n}}$
 substituting in we get:
 $y^{-n}\frac{ dy }{ dx }+P(x)u=Q(x)=\frac{ du }{ dx }{\frac{1}{1-n}+P(x)u}$

-And that is a linear equation again, which can be solved with prior tools.
-Here's a handy formula if you wanna solve Bernoulli equations quick:
+and we get a linear equation again: (Handy formula if you wanna solve Bernoulli equations quick. Just remember that once you find $u(x)$, substitute it back for $y(x)^{1-n}=u(x)$ to get your solution for y.)
 $$\frac{1}{1-n}\frac{ du }{ dx }+P(x)u=Q(x)\quad \Box$$
-Just remember that once you find $u(x)$, substitute it back for $y(x)^{1-n}=u(x)$ to get your solution for y, and don't forget to add $y(x)=0$ with your final answer!
 >Remember when I said that when n=1 the equation becomes a separable equation?:
 >$y^{-n}\frac{ dy }{ dx }+P(x)y^{1-n}=Q(x)$
 >let $n=1$
 >$y^{-1}\frac{ dy }{ dx }+P(x)=Q(x)$
->$y^{-1}dy=dx(Q(x)-P(x))$ <-This is indeed a separable equation #de_separable
+>$y^{-1}dy=dx(Q(x)-P(x))$ <-This is indeed a separable equation #de_s_type1
 ---
 # Examples of Bernoulli's equation:
-#ex #de_bernoulli Find the general solution to:
+#ex #de_b_type1 Find the general solution to:
 $y'+y=(xy)^2$
 Looks like a Bernoulli equation because when we distribute the $^2$ we get $x^2y^2$ on the RHS. This also tells us that n=2
 $y'+y=x^2y^2$
 $y'y^{-2}+y^{-1}=x^2$
->Note that we lost the $y(x)=0$ solution here, we will have to add it back in the end.
+>Note that we lost the y(x)=0 solution here, we will have to add it back in the end.

 let $u=y^{1-n}=y^{-1}$
 Differentiating wrt. $x$ we get: $\frac{du}{dx}=-y^{-2}{\frac{dy}{dx}}$
--- a/content/Exact
+++ b/content/Exact
@ -6,7 +6,7 @@ $dF=\frac{ \partial F }{ \partial x }dx+\frac{ \partial F }{ \partial y }dy=0$ s
 so $F(x,y)=C$
 the solution to these exact equations is given by $F()$ but how do we recover $F$ from it's partial derivatives?
 Equation of the form: $$M(x,y)dx+N(x,y)dy=0$$
->I'm calling this #de_exact
+>I'm calling this #de_e_type1

 is called exact if $M(x,y)=\frac{ \partial F }{ \partial x }$ and $N(x,y)=\frac{ \partial F }{ \partial y }$ for some function $F(x,y)$
 then differentiating we get:
@ -31,7 +31,7 @@ $F(x,y)=\int M(x,y) \, dx+g(y)$ where g is any function of y. The constant of in
 now 2nd condition: $N=\frac{ \partial F }{ \partial y }=\frac{ \partial  }{ \partial y }\int M(x,y) \, dx+g'(y)=N(x,y)$
 to reiterate, first test if equation is exact, then take m or n and integrate with x or y respectively then differentiate with respect to y or x respectively.

-#ex #de_exact
+#ex #de_e_type1
 $$\underbrace{( 2xy+3 )}_{ M }dx+\underbrace{ (x^2-1) }_{N}dy=0$$
 $\frac{ \partial M }{ \partial y }=2x=\frac{ \partial N }{ \partial x }=2x$ so its exact!
 $\frac{ \partial F }{ \partial y }=N(x,y)=x^2-1$
--- a/content/Free
+++ b/content/Free
@ -83,7 +83,7 @@ $\phi \approx 0.9273\dots$
 $$y(t)=\frac{5}{4}e^{-3t}\sin(4t+\phi)$$
 Important take away: We computed $\phi$ and $A$ in this example. We found a way to know the envelope of the amplitude of the oscillating system and it's phase shift.

-<i>"I know engineers love calculators, I know mathematicians hate calculators, and that's probably the only difference between mathematicians and engineers."</i> -Prof (referring to a student question on calculating arctan(4/3) on an exam. Btw the answer is no, you wouldn't need to evaluate that on an exam.)
+"I know engineers love calculators, I know mathematicians hate calculators, and that's probably the only difference between mathematicians and engineers." -Prof (referring to calculating arctan(4/3) on an exam)
 3.) b=10
 $r_{1,2}=-\frac{10}{2}\pm \frac{\sqrt{ 10^2-4*25 }}{2}=-5$ (repeated root, critically damped)
 $y(t)=(c_{1}+c_{2}t)e^{-5t}$
--- a/content/Linear
+++ b/content/Linear
@ -2,7 +2,7 @@
 #start of lecture 4
 ## Linear coefficients equations
 $$(a_{1}x+b_{1}y+c_{1})dx+(a_{2}x+b_{2}y+c_{2})dy=0 \qquad a_{1},b_{1},c_{1},a_{2},b_{2},c_{2}\in \mathbb{R}$$
-> I'm calling this #de_LC
+> I'm calling this #de_LC_type1 

 imagine $c_{1},c_{2}=0$ It becomes a homogenous equation! #de_h_type2

@ -19,7 +19,7 @@ if $\det\begin{pmatrix}a_{1} & b_{1} \\a_{2} & b_{2}\end{pmatrix}\ne0$ the syste
 if $\det\begin{pmatrix}a_{1} & b_{1} \\a_{2} & b_{2}\end{pmatrix}=0 \Rightarrow$ the system is unsolvable but we get an equation of type $\frac{ dy }{ dx }=G(ax+by)$ (also homogenous)

 ### Example
-#ex #de_LC
+#ex #de_LC_type1
 $$(-3x+y+6)dx+(x+y+2)dy=0$$
 let $x=u+k$
 $y=v+l$
--- a/content/Linear
+++ b/content/Linear
@ -3,7 +3,7 @@

 # Linear equation: 
 $$a(x)\frac{ dy }{ dx }+b(x)y=f(x)$$
->I'm calling this #de_linear_intro
+>I'm calling this #de_L_type1

 if we assume $b(x)=a'(x)$ it kinda starts to look like a product rule
 $a(x)y'+a'(x)y=f(x)=(ay)'$
@ -11,7 +11,7 @@ $ay=\int f(x) \, dx$ <-yay! We can find the solutions to y.

 we can rewrite the linear equation in what's called standard form:
 $$\frac{ dy }{ dx }+P(x)y=Q(x)$$
->I'm calling this #de_linear )
+>I'm calling this #de_L_type2 )

 we will define a function $\mu(x)$ called the integration factor, also expressed as $I(x)$
 Multiply both sides by $\mu(x)$
@ -29,10 +29,10 @@ finally we get that $\mu(x)=I(x)=e^{\int P(x) \, dx}\quad \Box$ #remember
 ---
 #end of lecture 2 #start of lecture 3
 # Examples of linear equations:
-#ex #de_linear Find the general solution to the equation:
+#ex #de_L_type2 Find the general solution to the equation:
 ## $$(1+\sin(x))y'+2\cos(x)y=\tan(x)$$
 let $a(x)=1+sin(x)\qquad b(x)=2\cos(x)$
-we can see that $b(x)\ne a'(x)$ :( so we cant use #de_linear_intro
+we can see that $b(x)\ne a'(x)$ :( so we cant use #de_L_type1 
 let's rearrange it into standard form:
 $y'+\frac{{2\cos(x)}}{1+\sin(x)}=\frac{\tan(x)}{1+\sin(x)}$
 $P(x):=\frac{2\cos(x)}{1+\sin(x)} \qquad Q(x)=\frac{\tan(x)}{1+\sin(x)}$
@ -58,7 +58,7 @@ Albeit a bit ugly, we have found the general solution to the DE:
 $$y=\frac{1}{(1+\sin(x))^2}(\ln\mid sec(x)\mid+\ln\mid sec(x)+\tan(x)\mid-\sin(x)+C)$$

 ---
-#ex #IVP #de_linear 
+#ex #IVP #de_L_type2 
 ## $$y'+\tan(x)y=\cos^2(x) \qquad y\left( \frac{\pi}{4} \right)=\frac{1}{2}$$
 Looks like a linear equation with an initial value.
 $P(x)=\tan(x) \qquad Q(x)=\cos^2(x) \qquad I(x)=e^{\int \tan(x) \, dx}$
--- a/content/Reduction
+++ b/content/Reduction
@ -13,14 +13,14 @@ $v\cancelto{ 0 }{ (y_{1}''+p(x)y_{1}'+q(x)y_{1}) }+v''y_{1}+(2y_{1}'+p(x)y_{1})v
 $y_{1}v''+(2y_{1}'+p(x)y_{1})=f(x)$
 $v''+\left( \frac{2y_{1}'}{y_{1}}+p(x) \right)v'=\frac{f(x)}{y_{1}}$
 substitute $v'=u$
-$u'+\left( \frac{2y_{1}'}{y_{1}}+p(x) \right)u=\frac{f(x)}{y_{1}}$<- This is now a linear first order equation #de_linear
+$u'+\left( \frac{2y_{1}'}{y_{1}}+p(x) \right)u=\frac{f(x)}{y_{1}}$<- This is now a linear first order equation #de_L_type2 
 This can be solved with prior tools now, We compute the integrating factor $\mu$
 $\mu=e^{\int(2y_{1}'/y_{1}+p)dx}=e^{\ln(y_{1}^2)}e^{\int p(x) \, dx}=y_{1}^2\cdot e^{\int p(x) \, dx}$
 From there, continue on as you would with any linear first order equation.
 Isn't this nice? some kind of magic. We made some guesses and we arrived somewhere.
 ## What you need to remember:
 #remember
-I know memorizing formulas robs the richness of mathematics, but that is just the nature of test taking imo. If you want to minimize the amount of work to the lowest possible level, this would be the fastest algorithm (that I know of), it's a little heavy on memorization:
+I know memorizing formulas robs the richness of mathematics, but that is just the nature of test taking imo. If you want to minimize the amount of work to the lowest possible level, this would be the fastest algorithm, it's a little heavy on memorization:
 1) $y''+p(x)y'+q(x)y=f(x)$
 2) $u'+\left( \frac{2y_{1}'}{y_{1}}+p(x) \right)u=\frac{f(x)}{y_{1}}$ <- Notice, if the coefficient for the $u$ term is $0$, you can treat the equation as a separable equation to minimize computation (integrate both sides to get u, then move on to step 5). Otherwise, move on to step 3.
 3) $\mu(x)=y_{1}^2\cdot e^{\int p(x) \, dx}$ <- where $y_{1}$ is one of your homogenous solutions.
@ -43,7 +43,6 @@ $u'+\left( \frac{2y_{1}'}{y_{1}}+4x \right)u=\frac{8{e^{-x^2}e^{-2x}}}{e^{-x^2}}
 $u'+\underbrace{ \left( \frac{2{e^{-x^2}(-2x)}}{e^{-x^2}}+4x \right) }_{ =0 }u=8e^{-2x}$
 $u'=8e^{-2x}$
 > Lucky us! This is just a separable equation. No need to treat it like a linear equation.
-
 integrating both sides:
 $u=-4e^{-2x}+c_{1}$
 $v'=u=-4e^{-2x}+c_{1}$
--- a/content/Second
+++ b/content/Second
@ -4,15 +4,14 @@ most of these "models" in EE are based on these DE. You'll see how important DE
 Second order equations arise from very simple problems many engineers face, for instance a pendulum can be described by a second order equation.
 #second_order
 ### $$a_{2}(t)y''+a_{1}(t)y'+a_{0}(t)y=f(t)$$
-To motivate our interest:
+To motivate our interest: #fix
 ![draw](drawings/Drawing-2023-09-15-13.32.48.excalidraw.png)
-$F=ma=my''$
-$my''=-by'-ky$ 
+$ma=my''=-by'-ky$ 
 Look how a second order equation describes the motion of a mass-spring system!
 > Circuits that contains resistors, capacitors and inductors also behaves with this equation as well if you ignore the external magnetic fields around the circuit.

-The equation $my''+by'+ky=0$ is a homogenous second order equation, because the RHS is 0. (in this case, it's full name is homogenous second order linear equation with constant coefficients.) 
->Similar pattern with the electrical circuit analogy. This DE ignores external forces on the mass-spring system, it only considers the friction and the spring. If we push the mass then there would be an external force and the RHS would be non zero, and the equation would be non homogenous.
+The equation $my''+by'+ky=0$ is a homogenous second order equation. (in this case, it's full name is homogenous second order linear equation with constant coefficients.) 
+>Similar pattern with the electrical circuit analogy. This DE ignores external forces on the mass-spring system, it only considers the friction and the spring. If we push the mass then there would be an external force.

 It's called second order because we have second derivative in the equation.

--- a/content/Separable
+++ b/content/Separable
@ -19,9 +19,9 @@ so, the general solution is $$v(t)=\frac{1}{k}(mg-Ae^{\frac{-kt}{m}})$$

 ## Separable DE:
 $$\frac{dy}{dx}=f(y)g(x) \rightarrow \frac{dy}{f(y)}=g(x)dx\quad where\quad f(y)\ne0$$ 
->Since these are so similar, I'm calling these two #de_separable Note that $\frac{1}{f(y)}$ is still an arbitrary function of y. So you could also say: $k(y)dy=g(x)dx$ is a separable equation.
+>Since these are so similar, I'm calling these two #de_s_type1 Note that $\frac{1}{f(y)}$ is still an arbitrary function of y. So you could also say: $k(y)dy=g(x)dx$ is a separable equation.

-#ex #de_separable
+#ex #de_s_type1
 $$\frac{dy}{dt}=\frac{1-t^2}{y^2}$$
 $y^2dy=dt(1-t^2)$
 integrating both sides yields:
@ -32,7 +32,7 @@ $$y=(3t-t^3+C)^\frac{1}{3}$$
 ## Initial value problem (IVP):
 A Differential equation with provided initial conditions.

-#ex #IVP #de_separable
+#ex #IVP #de_s_type1
 $$\frac{dy}{dx}=2x\cos^2(y), \quad y(0)=\frac{\pi}{4}$$
 $\frac{dy}{\cos^2(y)}=2xdx$
 integrate both sides yields:
--- a/content/Separation
+++ b/content/Separation
@ -122,7 +122,7 @@ this is a separable equation.
 We can treat the function $T$ as a variable:
 $\frac{dT}{dt} \frac{1}{T}=-\left( \frac{n\pi}{L} \right)^2D$
 $\int{dT} \frac{1}{T}=\int-\left( \frac{n\pi}{L} \right)^2Ddt$
-$\ln\mid T \mid=-\left( \frac{n\pi}{L} \right)^2Dt+c_{n}$
+$\ln(T)=-\left( \frac{n\pi}{L} \right)Dt+c_{n}$
 $T_{n}(t)=c_{n}e^{-(\frac{n\pi}{L})^2Dt}$
 >Yes this looks illegal, but it works, you could also integrate more rigorously if you did a u-sub: $u=T(t) \quad \frac{du}{dt}=T'(t)$)
 </br>
--- a/content/Wave
+++ b/content/Wave
@ -95,7 +95,7 @@ $$u(0,t)=u(\pi,t)=0 \qquad t>0$$
 $$u(x,0)=\sin(x) \qquad 0\leq x\leq \pi$$
 $$\frac{ \partial u }{ \partial t }(x,0)=5\sin(2x)-3\sin(5x)\qquad 0\leq x\leq \pi$$
 when $tx$ wasn't there in last problem we had the solution:
-$u(t,x)=\sum_{n=1}^\infty \underbrace{ (a_{n}\cos(nt)+b_{n}\sin(nt)) }_{ u_{n}(t) }\sin(nx)$ notice $L=\pi$
+$u(t,x)=\sum_{n=1}^\infty \underbrace{ (a_{n}\cos(nt)+b_{n}\sin(nt)) }_{ u_{n}(t) }\sin(nt)$ notice $L=\pi$
 since $u(0,t)=u(\pi,t)=0$ we can expect a solution of the form:
 $u(x,t)=\sum_{n=1}^\infty u_{n}(t)\sin\left( \frac{n\pi x}{\pi} \right)$
 If any of the boundary conditions are non zero, then we have to split(?) into X and T. (needs verification)
@ -142,10 +142,9 @@ Here's a plot showing the behavior of the string (graphed up to 40 harmonics):
 Finished the solution. Man I got teary eyed from this lecture.
 #end of  lec 35
 #start of lec 36
-# Last lecture
 What do you guys wanna do? Questions or summary of the course?
 Okay we do summary.
-## Summary of second half of Math 201
+# Summary of second half of Math 201
 (available on eclass)
 Laplace transforms:
 Definition of laplace,
--- a/content/_index.md
+++ b/content/_index.md
@ -2,44 +2,11 @@
 These are notes for the [University of Alberta MATH 201 - Differential Equations](https://apps.ualberta.ca/catalogue/course/math/201) course.
 I have written these notes for myself, I thought it would be cool to share them. These notes may be inaccurate, incomplete, or incoherent. No warranty is expressed or implied. Reader assumes all risk and liabilities. 
 </br>
-[Separable equations (lec 1)](separable-equations-lec-1.html)
-[Homogenous equations (lec 2)](homogenous-equations-lec-2.html)
-[Linear equations (lec 2-3)](linear-equations-lec-2-3.html)
-[Bernoulli equations (lec 3)](bernoulli-equations-lec-3.html)
-[Linear coefficient equations (lec 4)](linear-coefficient-equations-lec-4.html)
-[Exact equations (lec 4-5)](exact-equations-lec-4-5.html)
-[Second order homogenous linear equations (lec 5-7)](second-order-homogenous-linear-equations-lec-5-7.html) 
-[Method of undetermined coefficients (lec 8-9)](method-of-undetermined-coefficients-lec-8-9.html)
-[Variation of parameters (lec 9-10)](variation-of-parameters-lec-9-10.html) 
-[Cauchy-Euler equations (lec 10-11)](cauchy-euler-equations-lec-10-11.html)
-[Reduction of order (lec 11)](reduction-of-order-lec-11.html)
-[Free vibrations (lec 11-12)](free-vibrations-lec-11-12.html) 
-[Resonance & AM (lec 13-14)](resonance-am-lec-13-14.html)
-[Laplace transform (lec 14-16)](laplace-transform-lec-14-16.html)
-[Solving IVP's using Laplace transform (lec 17-18)](solving-ivps-using-laplace-transform-lec-17-18.html)
-[(Heaviside) Unit step function (lec 18)](heaviside-unit-step-function-lec-18.html)
-[Periodic functions (lec 19)](periodic-functions-lec-19.html)
-[Convolution (lec 19-20)](convolution-lec-19-20.html)
-[Dirak δ-function (lec 21)](dirak-δ-function-lec-21.html)
-[Systems of linear equations (lec 21-22)](systems-of-linear-equations-lec-21-22.html)
-[Power series (lec 22-25)](power-series-lec-22-25.html)
-[Separation of variables & Eigen value problems (lec 26-28)](separation-of-variables-eigen-value-problems-lec-26-28.html)
-[Fourier series (lec 28-29)](fourier-series-lec-28-29.html)
-[Heat equation (lec 30-33)](heat-equation-lec-30-33.html)
-[Wave equation (lec 33-36)](wave-equation-lec-33-36.html)
+Good luck on the final! <3
+If we do bad on the exam, Petar will come after us with the Dirac delta 🤜💥
 </br>
-[How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st 2023. Needs revision, but it gives a nice overview.)
+</br>
+[How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st, needs revision. But it gives a nice overview.)
 [Big LT table (.png)](drawings/bigLTtable.png)
 [Small LT table (.png)](drawings/smallLTtable.png)
-</br>
-# Additional recommended study material
-For the midterm exam, I highly recommend watching this video by The Math Sorcerer: [youtube.com/watch?v=kIZpbeE_yTc](https://youtube.com/watch?v=kIZpbeE_yTc)
-From my experience, studying off this video was by far the best use of my time. Try each question yourself and follow his solution to check.
-</br>
-For the final exam, I unfortunately couldn't find good study videos. I recommend studying PDE's hard, solidify your understanding of heat eq, driven heat eq, heat eq with non-zero end points, wave eq, and driven wave eq. Afterwards, I recommend studying power series since it's the next biggest scary monster. Finally, go over the rest of the past topics to fill your understanding and memory if you have the time. I'm thinking I should record a final exam review guide, hmmm. I'll update this text if I ever make one.
-</br>
-The recommended course textbook when I took the class was: <i>Fundamentals of Differential Equations, R. Kent Nagle, Edward B. Saff and Arthur D. Snider, 9th Edition</i> Which is a good textbook imo, although I didn't use it often.
-</br>
-Personally, I studied the material by attending the lectures and then reviewing/revising these typed notes at home, often relying on my prof's notes on eclass in case I copied off the whiteboard wrong/couldn't keep up. (eclass is the name of my university's online class management system.)
-Of course there may still be mistakes riddled throughout so as of Jan 5th 2024, <b>I'm offering 1$ CAD in bounties for every mistake reported to my email/git repo, at least until supplies last.</b> General editing and formatting changes are also gladly welcomed through the git repository below or by email.
 </br>
--- a/content/drawings/Drawing-2023-09-15-13.32.48.excalidraw.md
+++ b/content/drawings/Drawing-2023-09-15-13.32.48.excalidraw.md
@ -554,7 +554,7 @@ HOgDwZkHZB1IC8GNBbwcGAfBIwRUE/BNQf8GNBgISzTAhpomCG9BkIc6DQhwwXCF

 jBiIVMEzBCAH8ELBiIJiGtA2IRsGmh2wQSF7B/bCSFm2CAMcDI+WII8icuYQC+CV

-ACoH/4QKS7lSKrudIgyFgBaAKmCQBVzrmwqgswKtA/egog87s+51ocBGArLPcDKg
+AYoH/4QKS7lSKrudIgyFgBaAKmCQBVzrmwqgswKtA/egog87s+51ocBGArLPcDKg

 wLrywfAzAEKxSibwKyCssIoIMDYAKoqyxsASYIg7cKpAegC4BCLvgFIuwHjaIYu5

@ -2670,26 +2670,198 @@ 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

-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
+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

-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
+PKUA7iYEpFOpz7YhvcswNyBgjcAFAAvAOhiGEFSVMqAlCjtlDWA+VHS0YVRstHyP

-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
+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

-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
+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

-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
+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

-BMxjzGXMTMxcbDkhEMxNXaFgLgA/qoXMYcx3NEPIQCxOHQhAMQocbCIgPlkarAiz
+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

-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
+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

-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
+BTSoLpgsRJ6IX6wSA9RTWEBfuziOEImUezuAWFJPthIDeEg5scg04F8IeF+9WbiF

-bJcPoDAuAgAygAU0MIEzYaSsasAQrG85BcxSzEogHA4KwTwerCUZgDCAMwAJJQss
+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

-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
+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

-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
+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
+
+CAAULBAAA===
 ```
 %%
--- a/content/drawings/Drawing-2023-09-15-13.32.48.excalidraw.png
+++ b/content/drawings/Drawing-2023-09-15-13.32.48.excalidraw.png
--- a/content/drawings/Drawing-2023-10-25-13.16.20.excalidraw.png
+++ b/content/drawings/Drawing-2023-10-25-13.16.20.excalidraw.png
--- a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
+++ b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
@ -26,7 +26,87 @@ input[type="submit"] {
 	Bear base styles
 	(Retrieved from official app, all credits belong to Bear Team)
 */
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
  margin: 0;
  padding: 0;
  border: 0;
@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 html {
  line-height: 1; }

-ol, ul {
+ol,
+ul {
  list-style: none; }

 table {
  border-collapse: collapse;
  border-spacing: 0; }

-caption, th, td {
+caption,
+th,
+td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

-q, blockquote {
+q,
+blockquote {
  quotes: none; }

-q:before, q:after, blockquote:before, blockquote:after {
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
  content: "";
  content: none; }

 a img {
  border: none; }

-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
  display: block; }

 * {
@ -80,7 +179,8 @@ body {
  background: var(--background);
  color: var(--text-base-color);
  text-rendering: optimizeLegibility;
-  font-family: "AvenirNext-Regular"; }
+  font-family: "AvenirNext-Regular";
+  position: relative; }

 a {
  color: var(--link-text-color);
@ -117,10 +217,14 @@ hr {
  background-color: #dedede;
  margin: -1px auto 1.57143em auto; }

-ul, ol {
+ul,
+ol {
  margin-bottom: .31429em; }

-ul ul, ul ol, ol ul, ol ol {
+ul ul,
+ul ol,
+ol ul,
+ol ol {
  margin-bottom: 0px; }

 ol {
@ -135,11 +239,13 @@ ol li:before {
  min-width: 1em;
  margin-right: 0.5em; }

-b, strong {
+b,
+strong {
  font-family: "Menlo-Regular";
  font-weight: bold; }

-i, em {
+i,
+em {
  font-family: "Menlo-Regular";
  font-style: italic; }

@ -151,22 +257,48 @@ code {
  text-overflow: ellipsis;
  white-space: nowrap; }

-.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted {
+.sf_code_string,
+.sf_code_selector,
+.sf_code_attr-name,
+.sf_code_char,
+.sf_code_builtin,
+.sf_code_inserted {
  color: #D33905; }

-.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata {
+.sf_code_comment,
+.sf_code_prolog,
+.sf_code_doctype,
+.sf_code_cdata {
  color: #838383; }

-.sf_code_number, .sf_code_boolean {
+.sf_code_number,
+.sf_code_boolean {
  color: #0E73A2; }

-.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation {
+.sf_code_keyword,
+.sf_code_atrule,
+.sf_code_rule,
+.sf_code_attr-value,
+.sf_code_function,
+.sf_code_class-name,
+.sf_code_class,
+.sf_code_regex,
+.sf_code_important,
+.sf_code_variable,
+.sf_code_interpolation {
  color: #0E73A2; }

-.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted {
+.sf_code_property,
+.sf_code_tag,
+.sf_code_constant,
+.sf_code_symbol,
+.sf_code_deleted {
  color: #1B00CE; }

-.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url {
+.sf_code_macro,
+.sf_code_entity,
+.sf_code_operator,
+.sf_code_url {
  color: #920448; }

 .note-wrapper {
@ -367,7 +499,12 @@ svg + ol {
 * + h4 {
  margin-top: 2.8em; }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  position: relative; }

 h1:before,
@ -458,3 +595,7 @@ li img {

 .turbolinks-progress-bar {
  visibility: hidden; }
+
+@media only screen and (max-width: 460px) {
+  main .note-wrapper {
+    padding: 1.57143em 1.1em; } }
--- a/themes/zettels/assets/css/style.scss
+++ b/themes/zettels/assets/css/style.scss
@ -1,4 +1,3 @@
-
 input {
 	margin: 0;
 	padding: 0;
@ -6,32 +5,113 @@ input {
 	font: inherit;
 	color: inherit;
 	font-size: 100%;
-	vertical-align: baseline	
+	vertical-align: baseline
 }

 *:focus {
 	outline: none;
 }
-	
+
 textarea,
 input[type="search"],
 input[type="text"],
 input[type="button"],
 input[type="submit"] {
-	 -webkit-appearance: none;
-	 border-radius: 0;
+	-webkit-appearance: none;
+	border-radius: 0;
 }
+
 // @todo: class

 ::selection {
-	  background: var(--selected-text-background-color);
-	}
+	background: var(--selected-text-background-color);
+}

 /** 
 	Bear base styles
 	(Retrieved from official app, all credits belong to Bear Team)
 */
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
 	margin: 0;
 	padding: 0;
 	border: 0;
@ -44,7 +124,8 @@ html {
 	line-height: 1
 }

-ol, ul {
+ol,
+ul {
 	list-style: none
 }

@ -53,17 +134,23 @@ table {
 	border-spacing: 0
 }

-caption, th, td {
+caption,
+th,
+td {
 	text-align: left;
 	font-weight: normal;
 	vertical-align: middle
 }

-q, blockquote {
+q,
+blockquote {
 	quotes: none
 }

-q:before, q:after, blockquote:before, blockquote:after {
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
 	content: "";
 	content: none
 }
@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after {
 a img {
 	border: none
 }
-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
 	display: block
 }

@ -97,7 +197,8 @@ body {
 	// @todo: not working
 	color: var(--text-base-color);
 	text-rendering: optimizeLegibility;
-	font-family: "AvenirNext-Regular"
+	font-family: "AvenirNext-Regular";
+	position: relative;
 }

 a {
@ -141,11 +242,15 @@ hr {
 	margin: -1px auto 1.57143em auto
 }

-ul, ol {
+ul,
+ol {
 	margin-bottom: .31429em;
 }

-ul ul, ul ol, ol ul, ol ol {
+ul ul,
+ul ol,
+ol ul,
+ol ol {
 	margin-bottom: 0px
 }

@ -163,13 +268,15 @@ ol li:before {
 	margin-right: 0.5em
 }

-b, strong {
+b,
+strong {
 	//font-family: "AvenirNext-Bold";
 	font-family: "Menlo-Regular";
 	font-weight: bold;
 }

-i, em {
+i,
+em {
 	//font-family: "AvenirNext-Italic";
 	font-family: "Menlo-Regular";
 	font-style: italic;
@ -185,27 +292,53 @@ code {
 	white-space: nowrap
 }

-.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted {
+.sf_code_string,
+.sf_code_selector,
+.sf_code_attr-name,
+.sf_code_char,
+.sf_code_builtin,
+.sf_code_inserted {
 	color: #D33905
 }

-.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata {
+.sf_code_comment,
+.sf_code_prolog,
+.sf_code_doctype,
+.sf_code_cdata {
 	color: #838383
 }

-.sf_code_number, .sf_code_boolean {
+.sf_code_number,
+.sf_code_boolean {
 	color: #0E73A2
 }

-.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation {
+.sf_code_keyword,
+.sf_code_atrule,
+.sf_code_rule,
+.sf_code_attr-value,
+.sf_code_function,
+.sf_code_class-name,
+.sf_code_class,
+.sf_code_regex,
+.sf_code_important,
+.sf_code_variable,
+.sf_code_interpolation {
 	color: #0E73A2
 }

-.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted {
+.sf_code_property,
+.sf_code_tag,
+.sf_code_constant,
+.sf_code_symbol,
+.sf_code_deleted {
 	color: #1B00CE
 }

-.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url {
+.sf_code_macro,
+.sf_code_entity,
+.sf_code_operator,
+.sf_code_url {
 	color: #920448
 }

@ -221,7 +354,7 @@ code {

 u {
 	text-decoration: underline;
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,var(--accent-text-color) 50%);
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--accent-text-color) 50%);
 	background-repeat: repeat-x;
 	background-size: 2px 2px;
 	background-position: 0 1.05em
@ -339,7 +472,7 @@ blockquote {

 .address a {
 	color: #545454;
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,#0da35e 50%);
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #0da35e 50%);
 	background-repeat: repeat-x;
 	background-size: 2px 2px;
 	background-position: 0 1.05em
@ -356,7 +489,7 @@ blockquote {
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	border: solid 1px rgba(0,0,0,0.3);
+	border: solid 1px rgba(0, 0, 0, 0.3);
 	border-radius: 50%;
 	margin-right: 0.1em;
 	position: relative;
@ -415,7 +548,7 @@ img {

 // Hugo renders footnotes with <p> tags nested inside <li>
 // This is need to prevent <p> breaking lines
-li > p {
+li>p {
 	display: inline-block;
 	margin-left: 16px;
 }
@ -434,25 +567,30 @@ h4 {
 	margin-bottom: .47143em
 }

-* + p,
-* + ul,
-* + ol,
-* + blockquote {
+*+p,
+*+ul,
+*+ol,
+*+blockquote {
 	/*margin-top: 1.6em;*/
 }

-svg + ul,
-svg + ol {
+svg+ul,
+svg+ol {
 	margin-top: 0;
 }

-* + h2,
-* + h3,
-* + h4 {
+*+h2,
+*+h3,
+*+h4 {
 	margin-top: 2.8em;
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	position: relative;
 }

@ -511,9 +649,10 @@ h6:before {
 	content: "#"
 }

-* + table {
+*+table {
 	margin-top: 12px;
 }
+
 table {
 	border-radius: 4px;
 	border: 1px solid var(--separator-color);
@ -569,3 +708,11 @@ li img {
 .turbolinks-progress-bar {
 	visibility: hidden;
 }
+
+@media only screen and (max-width: 460px) {
+
+	// decrease padding of notes when screen width is < 460px
+	main .note-wrapper {
+		padding: 1.57143em 1.1em;
+	}
+}
--- a/themes/zettels/assets/js/search.js
+++ b/themes/zettels/assets/js/search.js
@ -1,9 +1,14 @@
+// On localhost the root url is /MATH201 
+// On sasserisop the root url is /sasserisop
+const localhost = false;
+const root = localhost ? "" : "/MATH201";
+
 loadIndex()

 // Highlight with jQuery
 // from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js
 // @todo: This is the only use of jQuery. Find a vanila JS way
-jQuery.fn.highlight = function(pat) {
+jQuery.fn.highlight = function (pat) {

 	function innerHighlight(node, pat) {

@ -15,16 +20,16 @@ jQuery.fn.highlight = function(pat) {

 			if (pos >= 0) {

-				var spannode       = document.createElement('span');
+				var spannode = document.createElement('span');
 				spannode.className = 'highlighted';
-				var middlebit      = node.splitText(pos);
-				var endbit         = middlebit.splitText(pat.length);
-				var middleclone    = middlebit.cloneNode(true);
+				var middlebit = node.splitText(pos);
+				var endbit = middlebit.splitText(pat.length);
+				var middleclone = middlebit.cloneNode(true);

 				spannode.appendChild(middleclone);
 				middlebit.parentNode.replaceChild(spannode, middlebit);

-				skip               = 1;
+				skip = 1;

 			}

@ -41,15 +46,15 @@ jQuery.fn.highlight = function(pat) {

 	}

-	return this.each(function() {
+	return this.each(function () {

 		innerHighlight(this, pat.toUpperCase());

 	});

- };
+};

-jQuery.fn.removeHighlight = function() {
+jQuery.fn.removeHighlight = function () {

 	function newNormalize(node) {

@ -71,7 +76,7 @@ jQuery.fn.removeHighlight = function() {
 			if (next == null || next.nodeType != 3) { continue; }

 			var combined_text = child.nodeValue + next.nodeValue;
-			new_node          = node.ownerDocument.createTextNode(combined_text);
+			new_node = node.ownerDocument.createTextNode(combined_text);

 			node.insertBefore(new_node, child);
 			node.removeChild(child);
@ -83,7 +88,7 @@ jQuery.fn.removeHighlight = function() {

 	}

-	return this.find("span.highlighted").each(function() {
+	return this.find("span.highlighted").each(function () {

 		var thisParent = this.parentNode;
 		thisParent.replaceChild(this.firstChild, this);
@ -93,9 +98,9 @@ jQuery.fn.removeHighlight = function() {

 };

-$(function() {
+$(function () {

-	$('#search-input').bind('keyup change', function(ev) {
+	$('#search-input').bind('keyup change', function (ev) {

 		// pull in the new value
 		var searchTerm = $(this).val();
@ -104,64 +109,109 @@ $(function() {
 		$('body').removeHighlight();

 		// disable highlighting if empty
-		if ( searchTerm ) {
+		if (searchTerm) {

 			// highlight the new term
-			$('body').highlight( searchTerm );
+			$('body').highlight(searchTerm);

 		}
-
 	});
-
 });

 ///

 var scrollTop = 0
-document.addEventListener("turbolinks:before-render", function() {
-  var search_index = document.getElementById("search-results");
-  var y = search_index.scrollTop;
-  scrollTop = y
+document.addEventListener("turbolinks:before-render", function () {
+	var search_index = document.getElementById("search-results");
+	var y = search_index.scrollTop;
+	scrollTop = y
+

- 
 })

-document.addEventListener("turbolinks:render", function() {
+document.addEventListener("turbolinks:render", function () {
 	var search_index = document.getElementById("search-results");
 	search_index.scrollTop = scrollTop
 })
-	
-document.addEventListener("turbolinks:load", function() {
+
+document.addEventListener("turbolinks:load", function () {
 	setNoteWrapperState()
-	
-	
+
+
 	const current = window.location.href
-	  
-	 var els = document.getElementsByTagName("a");
-	 for (var i = 0, l = els.length; i < l; i++) {
-		 var el = els[i];
-		
-		 if (el.href === current) {
-			 el.classList.add("selected")
-		 } else {
-			 el.classList.remove("selected")
-		 }
-	 }
+	var els = document.getElementsByTagName("a");
+	for (var i = 0, l = els.length; i < l; i++) {
+		var el = els[i];
+
+		if (el.href === current) {
+			el.classList.add("selected")
+		} else {
+			el.classList.remove("selected")
+		}
+	}
 })

+// load the lecture note links in homepage
+function load_lecture_links() {
+	// check if links have already been generated first
+	if ($("p.lecture-link").length == 0) {
+		fetchJSON(function (response) {
+			const notes = response;
+			// for homepage lecture links
+			const lecture_links = new Map();
+
+			notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
+				// Add lecture notes to a dictionary, and then sort them by lecture number.
+				// second last character of the title may be first digit of lecture number
+				const d1 = note.title[note.title.length - 2];
+				// find the lecture number, if there is one
+				if (/\d/.test(d1)) {
+					// it has a lecture number
+					// if the third last character is a digit, then the lecture number is 2 digits
+					const d2 = note.title[note.title.length - 3];
+					var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
+					// some lecture titles have the same last lecture number
+					if (lecture_links.has(lecture_number)) {
+						// prevents two lectures from having the same key
+						lecture_number += 0.5;
+					}
+					lecture_links.set(lecture_number, [note.title, note.permalink])
+				}
+			});
+			const sorted_links = new Map([...lecture_links.entries()].sort((a, b) => (a[0] - b[0])));
+			sorted_links.forEach(val => {
+				a_tag = document.createElement('a');
+				a_tag.innerText = val[0];	//title
+				a_tag.href = val[1];	//permalink
+				p_tag = document.createElement('p');
+				p_tag.append(a_tag);
+				p_tag.className = "lecture-link"
+				// Add lecture notes before third </br> tag in _index.md
+				$("#note-wrapper br:nth-of-type(3)").before(p_tag);
+			});
+		});
+	}
+}
 function loadIndex() {
-	  fetchJSON(function(response) {
-	
+
+	fetchJSON(function (response) {
 		const notes = response;
 		const search_results = document.getElementById('search-results');
 		const tags = document.getElementById('tags');
 		const current_note = window.location.href;
-		notes.index.forEach(note => {
-			const title = '<h4>'+ note.title + '</h4>';
+
+		// sorted notes by lecture number
+		const lecture_notes = new Map();
+		const non_lecture_notes = [];
+
+		// Fixed a bug where the search results had unwanted notes. 
+		// The notes are now filtered first.
+		notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
+			const title = '<h4>' + note.title + '</h4>';
 			const summary = '<div>' + note.summary + '</div>';
-			
+
 			const permalink = note.permalink
-			
+
 			var thumbnail = ""
 			if (note.thumbnail === "") {
 				thumbnail = ""
@ -175,20 +225,47 @@ function loadIndex() {
 				// use lazy loading.
 				thumbnail = '<img loading="lazy" src="' + note.thumbnail + '?nf_resize=fit&w=122&h=76"/><span style="display:none";>@attachments</span>'
 			}
-			
+
 			const tags = '<span style="display:none">' + note.tags + '</span>'
 			var list_content;
 			if (current_note === permalink) {
-				list_content = '<a href="/MATH201' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
+				list_content = '<a href="' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
 			} else {
-				list_content = '<a href="/MATH201' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
+				list_content = '<a href="' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
 			}
-			
+
 			const child = document.createElement("li");
 			child.innerHTML = list_content;
-			search_results.append(child)
+
+			// Add lecture notes to a dictionary, and then sort them by lecture number.
+			// second last character of the title may be first digit of lecture number
+			const d1 = note.title[note.title.length - 2];
+			// find the lecture number, if there is one
+			if (/\d/.test(d1)) {
+				// it has a lecture number
+				// if the third last character is a digit, then the lecture number is 2 digits
+				const d2 = note.title[note.title.length - 3];
+				var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
+				if (lecture_notes.has(lecture_number)) {
+					// prevent lectures from having the same key
+					lecture_number += 0.5;
+				}
+				lecture_notes.set(lecture_number, child);
+			} else {
+				non_lecture_notes.push(child);
+			}
 		});
-		
+		// sort notes by lecture number
+		const sorted_notes = new Map([...lecture_notes.entries()].sort((a, b) => (a[0] - b[0])));
+
+		// Add sorted notes first
+		sorted_notes.forEach(val => {
+			search_results.append(val);
+		});
+		non_lecture_notes.forEach(child => {
+			search_results.append(child);
+		});
+
 		// @todo: wip
 		// notes.tags.forEach(tag => {
 		// 	const child = document.createElement("li");
@ -196,20 +273,19 @@ function loadIndex() {
 		// 	tags.append(child)
 		// });
 		// 
-	  });
-	}
-	
-	
+	});
+}
+
+
 function fetchJSON(callback) {
-	  
-	const requestURL = '/MATH201/index.json';
+	const requestURL = root + '/index.json';
 	const request = new XMLHttpRequest();
 	request.open('GET', requestURL, true);
 	request.responseType = 'json';
-	request.onreadystatechange = function() {
-	  if (request.readyState === 4 && request.status === 200) {
-		  callback(request.response);
-	  }
+	request.onreadystatechange = function () {
+		if (request.readyState === 4 && request.status === 200) {
+			callback(request.response);
+		}
 	};
 	request.send(null);
 }
@ -217,96 +293,91 @@ function fetchJSON(callback) {
 function focusTag(a) {
 	showNav()
 	performSearchWith(a.innerText)
-	
+
 }

 function performSearchWith(query) {
-	
-	// document.getElementById('search-input').value = query
-	
-	var filter, ul, li, a, i, txtValue;
-	  
-	  filter = query.toLowerCase();
-	  filter  = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
-	  
-	  var re = new RegExp(filter, 'g');
-	  
-	  ul = document.getElementById("search-results");
-	  li = ul.getElementsByTagName('li');

-	  for (i = 0; i < li.length; i++) {
+	// document.getElementById('search-input').value = query
+
+	var filter, ul, li, a, i, txtValue;
+
+	filter = query.toLowerCase();
+	filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
+
+	var re = new RegExp(filter, 'g');
+
+	ul = document.getElementById("search-results");
+	li = ul.getElementsByTagName('li');
+
+	for (i = 0; i < li.length; i++) {
 		a = li[i].getElementsByTagName("a")[0];
-		
+
 		txtValue = a.textContent || a.innerText;
 		if (txtValue.toLowerCase().indexOf(filter) > -1) {

-		  li[i].style.display = "block";
-		  
+			li[i].style.display = "block";
+
 		} else {
-		  li[i].style.display = "none";
+			li[i].style.display = "none";
 		}
-	  }
+	}
 }

 function performSearch() {
-	  
-	  var input, filter, ul, li, a, i, txtValue;
-	  input = document.getElementById('search-input');
-	  
-	  filter = input.value.toLowerCase();
-	  filter  = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
-	  
-	  var re = new RegExp(filter, 'g');
-	  
-	  ul = document.getElementById("search-results");
-	  li = ul.getElementsByTagName('li');

-	  for (i = 0; i < li.length; i++) {
+	var input, filter, ul, li, a, i, txtValue;
+	input = document.getElementById('search-input');
+
+	filter = input.value.toLowerCase();
+	filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
+
+	var re = new RegExp(filter, 'g');
+
+	ul = document.getElementById("search-results");
+	li = ul.getElementsByTagName('li');
+
+	for (i = 0; i < li.length; i++) {
 		a = li[i].getElementsByTagName("a")[0];
-		
+
 		txtValue = a.textContent || a.innerText;
 		if (txtValue.toLowerCase().indexOf(filter) > -1) {

-		  li[i].style.display = "block";
-		  
+			li[i].style.display = "block";
+
 		} else {
-		  li[i].style.display = "none";
+			li[i].style.display = "none";
 		}
-	  }
+	}
 }

 // Keyboard shortcuts
-document.addEventListener('keydown', function(evt) {
-	
+document.addEventListener('keydown', function (evt) {
+
 	if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
 		document.getElementById("search-input").focus();
 		handleNavVisibility()
 	}
-	
+
 	if (evt.key === "Escape" || evt.key === "Esc" | evt.keyCode === 27) {
 		hideNav()
 	}
-	
+
 });

 var nav_is_visible = false;
 function handleNavVisibility() {
-	if (!nav_is_visible) {
-		showNav();
-
-	} else {
-		hideNav()
-	}
+	$("#search").toggle("slide");
 }

 function showNav() {
-	
+
 	document.getElementById("search").style.width = "300px";
 	document.getElementById("search").style.opacity = 1;
 	document.getElementById("search-header").style.opacity = 1;
 	document.getElementById("search-header").style.width = "299px";
 	pushNoteWrapper()
-	
+
 	nav_is_visible = true;
 }

@ -315,9 +386,9 @@ function hideNav() {
 	document.getElementById("search-header").style.width = "0";
 	document.getElementById("search").style.opacity = 0;
 	document.getElementById("search-header").style.opacity = 0;
-	document.getElementById("main").style.marginLeft= "0";
+	document.getElementById("main").style.marginLeft = "0";
 	pullNoteWrapper()
-	
+
 	nav_is_visible = false;
 }

@ -344,54 +415,54 @@ const hoverTime = 300
 const fetchers = {}
 const doc = document.implementation.createHTMLDocument('prefetch')

-function fetchPage (url, success) {
-  const xhr = new XMLHttpRequest()
-  xhr.open('GET', url)
-  xhr.setRequestHeader('VND.PREFETCH', 'true')
-  xhr.setRequestHeader('Accept', 'text/html')
-  xhr.onreadystatechange = () => {
-	if (xhr.readyState !== XMLHttpRequest.DONE) return
-	if (xhr.status !== 200) return
-	success(xhr.responseText)
-  }
-  xhr.send()
+function fetchPage(url, success) {
+	const xhr = new XMLHttpRequest()
+	xhr.open('GET', url)
+	xhr.setRequestHeader('VND.PREFETCH', 'true')
+	xhr.setRequestHeader('Accept', 'text/html')
+	xhr.onreadystatechange = () => {
+		if (xhr.readyState !== XMLHttpRequest.DONE) return
+		if (xhr.status !== 200) return
+		success(xhr.responseText)
+	}
+	xhr.send()
 }

-function prefetchTurbolink (url) {
-  fetchPage(url, responseText => {
-	doc.open()
-	doc.write(responseText)
-	doc.close()
-	const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
-	Turbolinks.controller.cache.put(url, snapshot)
-  })
+function prefetchTurbolink(url) {
+	fetchPage(url, responseText => {
+		doc.open()
+		doc.write(responseText)
+		doc.close()
+		const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
+		Turbolinks.controller.cache.put(url, snapshot)
+	})
 }

-function prefetch (url) {
-  if (prefetched(url)) return
-  prefetchTurbolink(url)
+function prefetch(url) {
+	if (prefetched(url)) return
+	prefetchTurbolink(url)
 }

-function prefetched (url) {
-  return location.href === url || Turbolinks.controller.cache.has(url)
+function prefetched(url) {
+	return location.href === url || Turbolinks.controller.cache.has(url)
 }

-function prefetching (url) {
-  return !!fetchers[url]
+function prefetching(url) {
+	return !!fetchers[url]
 }

-function cleanup (event) {
-  const element = event.target
-  clearTimeout(fetchers[element.href])
-  element.removeEventListener('mouseleave', cleanup)
+function cleanup(event) {
+	const element = event.target
+	clearTimeout(fetchers[element.href])
+	element.removeEventListener('mouseleave', cleanup)
 }

 document.addEventListener('mouseover', event => {
-  if (!event.target.dataset.prefetch) return
-  const url = event.target.href
-  if (prefetched(url)) return
-  if (prefetching(url)) return
-  cleanup(event)
-  event.target.addEventListener('mouseleave', cleanup)
-  fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
+	if (!event.target.dataset.prefetch) return
+	const url = event.target.href
+	if (prefetched(url)) return
+	if (prefetching(url)) return
+	cleanup(event)
+	event.target.addEventListener('mouseleave', cleanup)
+	fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
 })
--- a/themes/zettels/assets/js/thumbnails.js
+++ b/themes/zettels/assets/js/thumbnails.js
@ -1,19 +1,14 @@
-var thumbnail_mode = false
-function imageMode() {
-	const note_wrapper = document.getElementById('note-wrapper')
-	const images = note_wrapper.getElementsByTagName('img')
-	
-	if (thumbnail_mode) {
-		var els = note_wrapper.getElementsByTagName('img')
-		for(var i = 0, all = els.length; i < all; i++){   
-			 els[i].classList.remove('thumbnail');
-		 }
-		 thumbnail_mode = false
-	} else {
-		var els = note_wrapper.getElementsByTagName('img')
-		for(var i = 0, all = els.length; i < all; i++){   
-			 els[i].classList.add('thumbnail');
-		 }
-		 thumbnail_mode = true
-	}
+// Resize images using an input range.
+function resizeImage() {
+	// make p tags wrapping img tags inline, to resize images correctly
+	$("#main p").has("img").css("display", "inline-block");
+
+	// toggle vectical input range
+	$("#toolbar input[type=range][orient=vertical]").slideToggle();
+
+	// resize image
+	$("#toolbar input[type=range][orient=vertical]").mouseup(function () {
+		$("#main p img").css("width", this.value + "%");
+		this.title = this.value + "%";
+	});
 }
--- a/themes/zettels/layouts/index.html
+++ b/themes/zettels/layouts/index.html
@ -1,8 +1,14 @@
 {{ define "main" }}
-	<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
-	{{ partial "content.html" . }}
-	<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br>
-<p style="text-align: left;">Seeing people use these notes and benefitting from it makes me happy, so thanks for sticking around :) and remember to use what you learn for good! And to lead life with honor and integrity and be ethical engineers. Dr. Minev used to always stress the importance of this in his lectures, and I wholeheartedly agree.</p></br>
-	<p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository <img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br>
-	<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p>
-{{ end }}
+<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
+{{ partial "content.html" . }}
+<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br>
+<p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository
+		<img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br>
+<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community
+		discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p>
+<script>
+	$(function () {
+		load_lecture_links();
+	});
+</script>
+{{ end }}
--- a/themes/zettels/layouts/partials/search.html
+++ b/themes/zettels/layouts/partials/search.html
@ -6,130 +6,134 @@
 	- Focused current note
 -->
 <style>
-search-menu {
-	display: block;
-}
+	search-menu {
+		display: none;
+	}

-#search { 
-	height: 100%;
-	width: 0;
-	position: fixed;
-	background: var(--background-search);
-	z-index: 1;
-	top: 0;
-	left: 0;
-	border-right: 1px solid var(--separator-color);
-	overflow-x: hidden;
-	overflow-y: auto;
-	opacity: 0;
-	
-	-ms-overflow-style: none;  /* IE and Edge */
-	scrollbar-width: none;  /* Firefox */
-}      
-	
-#search::-webkit-scrollbar { display: none; }
+	#search {
+		height: 100%;
+		width: 300px;
+		position: fixed;
+		background: var(--background-search);
+		z-index: 1;
+		top: 0;
+		left: 0;
+		border-right: 1px solid var(--separator-color);
+		overflow-x: hidden;
+		overflow-y: auto;

-#search-header {
-	padding: 12px;
-	position: fixed;
-	padding-left: 12px;
-	padding-right: 12px;
-	background: var(--background-search);
-	width: 250px;
-	opacity: 1;
-	height: 50px;
-	z-index: 2;
-	border-bottom: 1px solid var(--separator-color);
-}
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
+	}

-#search .input-container {
-	position: relative
-}
+	#search::-webkit-scrollbar {
+		display: none;
+	}

-#search-input { 
-  width: 100%;
-  height: 24px;
-  border: 1px solid var(--separator-color);
-  border-radius: 4px;
-  padding-left: 16px;
-  background-color: white;
-  display: inline-block;
-}
+	#search-header {
+		padding: 12px 0;
+		margin: 0 auto;
+		background: var(--background-search);
+		width: 250px;
+		opacity: 1;
+		height: 50px;
+		z-index: 2;
+		border-bottom: 1px solid var(--separator-color);
+	}

-#search-input:focus {
-	border: 1px solid var(--search-field-focused-color);
-}
+	#search .input-container {
+		position: relative
+	}

-#search-header .input-container .search-icon {
-	position: absolute;
-	top: 6px;
-	left: 8px;
-	fill: darkGray;
-}
+	#search-input {
+		width: 100%;
+		height: 24px;
+		border: 1px solid var(--separator-color);
+		border-radius: 4px;
+		padding-left: 24px;
+		background-color: white;
+		display: inline-block;
+	}

-#search-results img {
-	width: 122px;
-	height: 76px;
-	border: 1px solid var(--separator-color);
-	object-fit: cover;
-}
+	#search-input:focus {
+		border: 1px solid var(--search-field-focused-color);
+	}

-#search-results { 
-	margin-top: 50px; 
-	overflow: auto;
-	height: 100%;
-}
+	#search-header .input-container .search-icon {
+		position: absolute;
+		top: 6px;
+		left: 8px;
+		fill: darkGray;
+	}

-#search-results a {
-	width: 100%;
-	padding-left: 25px;
-	padding-right: 25px;
-	padding-top: 12px;
-	padding-bottom: 12px;
-	display: inline-block;
-	
-	color: var(--text-base-color);
-	border-bottom: 1px solid var(--separator-color);
-	border-left: 6px solid var(--background-search);
+	#search-results img {
+		width: 122px;
+		height: 76px;
+		border: 1px solid var(--separator-color);
+		object-fit: cover;
+	}

-}
+	#search-results {
+		overflow: auto;
+		height: 100%;
+	}

-#search-results a:first-child:hover, a:first-child:focus, .selected { 
-	outline: 0; 
-	background-color: var(--note-table-cell-selected-color);
-	border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
-}
+	#search-results a {
+		width: 100%;
+		padding-left: 25px;
+		padding-right: 25px;
+		padding-top: 12px;
+		padding-bottom: 12px;
+		display: inline-block;

-// Reseting default styles inside search component scope
-#search-results li { text-indent: 0; }
-#search-results li:before,
-#search-results h1:before,
-#search-results h2:before,
-#search-results h3:before,
-#search-results h4:before,
-#search-results h5:before,
-#search-results h6:before {
-	content: "";
-	visibility: hidden;
-	display: none;
-}
-</style>	
+		color: var(--text-base-color);
+		border-bottom: 1px solid var(--separator-color);
+		border-left: 6px solid var(--background-search);
+
+	}
+
+	#search-results a:first-child:hover,
+	a:first-child:focus,
+	.selected {
+		outline: 0;
+		background-color: var(--note-table-cell-selected-color);
+		border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
+	}
+
+	/* // Reseting default styles inside search component scope */
+	#search-results li {
+		text-indent: 0;
+	}
+
+	#search-results li:before,
+	#search-results h1:before,
+	#search-results h2:before,
+	#search-results h3:before,
+	#search-results h4:before,
+	#search-results h5:before,
+	#search-results h6:before {
+		content: "";
+		visibility: hidden;
+		display: none;
+	}
+</style>


 <search-menu id="search" data-turbolinks-permanent>
-	   <header id="search-header">
-		 <div class="input-container">
-			 <svg aria-hidden="true" style="" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
-			<path d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
-			</path>
-			 </svg>
-			 
-			 <input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0" placeholder="Search note">
-			 
-			
-			 
-		 </div>
-	   </header>
-	   
-	   <ul id="search-results"></ul>
+	<header id="search-header">
+		<div class="input-container">
+			<svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
+				<path
+					d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
+				</path>
+			</svg>
+
+			<input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0"
+				placeholder="Search Notes">
+		</div>
+	</header>
+
+	<ul id="search-results"></ul>
 </search-menu>
--- a/themes/zettels/layouts/partials/toolbar.html
+++ b/themes/zettels/layouts/partials/toolbar.html
@ -1,42 +1,58 @@
-<script>
-</script>
-
 <style>
-#toolbar {
-	position: fixed;
-	top: 0;
-	right: 0;
-	
-	width: 60px;
-	height: 100%;
+	#toolbar {
+		position: fixed;
+		top: 0;
+		right: 0;

-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: center;
-	
-	transition: 1s;
-	opacity: 0.5;
-	
-	padding: 18px 0px 18px 0px;
-}
+		width: 60px;
+		height: 100%;

-#toolbar:hover {
-	opacity: 1;
-}
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;

-#close-nav-icon {
-	display: none;
-}
+		transition: 1s;
+		opacity: 0.5;
+		z-index: 1;

+		padding: 18px 0px 18px 0px;
+	}
+
+	#toolbar:hover {
+		opacity: 1;
+	}
+
+	#close-nav-icon {
+		display: none;
+	}
+
+	#toolbar input[type=range][orient=vertical] {
+		appearance: slider-vertical;
+		display: none;
+	}
 </style>

 <aside id="toolbar">
-	<span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
-	<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
+	<span title="Toggle Search Menu" style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
+		<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle>
+			<path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path>
+		</svg>
 	</span>
-	
-	<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;">
-		<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+
+	<span title="Adjusts Diagram Size" style="cursor:pointer;margin-top:16px;" onclick="resizeImage()">
+		<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<circle cx="16.1" cy="6.1" r="1.1"></circle>
+			<rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect>
+			<polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline>
+			<polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14">
+			</polyline>
+		</svg>
 	</span>
-</aside>
+	<input title="100%" type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
+</aside>
+
+<script>
+
+</script>
Author	SHA1	Message	Date
DashCampbell	fa560a5b29	made edits	2023-12-30 08:50:30 -07:00
DashCampbell	d69c9e8e88	Automated Lecture Note link generation in the homepage.	2023-12-29 21:47:03 -07:00
DashCampbell	6a0094f858	Updated UI	2023-12-29 20:05:27 -07:00
DashCampbell	4ddd503616	Updated search menu and toolbar	2023-12-29 16:17:03 -07:00