feat: add handwritten post

content/hand-written-notes.md

@@ -0,0 +1,29 @@
+---
+title: Handwritten Notes
+---
+
+<img class="handwritten-notes-img" src="https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Faravindballa%2F9Lz8paVrtN.jpg?alt=media&token=cb0dceb0-2bd2-467a-8716-dc79ab7f67e4" alt=""/>
+
+<div class="handwritten-notes-content">
+
+The problems with these handwritten notes is that
+these aren't searchable. And we cannot share parts ­of the note(ike copying text) easily. But it is quick
+and (sometimes) beautiful.
+
+The [[technology]] is improving though. In apps like
+Notability they can be searched. It will index all
+your handwriting, which is great. Again, this is
+limited to [[iPad]]. This tech is not available across
+platforms.
+
+And with these notes, you cannot add hyperlinks
+and reference external stuff easily.
+
+I mainly use handwritten notes for noting down
+things while coding - to draw flowcharts or
+make a quick list of things to do. It is really
+handy for that. I had a lot of notebooks for
+this in the past. But now, iPad is the replacement
+for all of them. (And its searchable too!)
+
+</div>

content/ipad.md

@@ -0,0 +1,12 @@
+---
+title: iPad
+---
+
+This has a strange place in my life. I never know I would use it until I bought one.
+
+_What do you use it for?_
+
+- Netflix and YouTube
+- Drawing
+- Taking a lot of notes, mostly [[hand written notes]]
+- Editing videos and images.

src/style.css

@@ -76,3 +76,32 @@ pre > code {
 .highlight {
   @apply bg-yellow-200 px-1 -mx-1 rounded;
 }
+
+.handwritten-notes-img {
+  position: relative;
+  z-index: 0;
+}
+
+.handwritten-notes-content {
+  position: absolute;
+  top: 140px;
+  width: 400px;
+  color: transparent;
+  z-index: 0;
+}
+
+/* purgecss start ignore */
+
+.handwritten-notes-content a {
+  color: transparent;
+}
+
+.handwritten-notes-content a[href='/ipad'] {
+  position: absolute;
+  z-index: 2;
+  display: block;
+  top: 430px;
+  left: calc(50% - 28px);
+}
+
+/* purgecss end ignore */