add new post

11 files changed, 279 insertions, 21 deletions

diff --git a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
new file mode 100644
index 0000000..1c253fe
--- /dev/null
+++ b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
@@ -0,0 +1,35 @@
+---
+date: 2024-02-26 11:57
+description: With CSS you can disable any interactions with an element and directly control the underlying element
+tags: HTML, CSS
+draft: false
+---
+
+# Interacting with underlying element in HTML
+
+I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.
+
+```html
+<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
+    <div class="content flex flex-wrap content-center justify-center">
+        <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
+        <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
+        <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
+    </div>
+</div>
+```
+
+![Video Under a Transparent Image](/assets/underlying/video-under-element.jpg)
+
+Turns out, you can disable pointer events!
+
+In Tailwind, it is as simple as adding `pointer-events-none` to the bezel screen.
+
+In CSS, this can be done by:
+
+```css
+.className {
+    pointer-events: none
+}
+```
+
diff --git a/Resources/assets/underlying/video-under-element.jpg b/Resources/assets/underlying/video-under-element.jpg
new file mode 100644
index 0000000..96afed2
--- /dev/null
+++ b/Resources/assets/underlying/video-under-element.jpg
diff --git a/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
new file mode 100644
index 0000000..2817224
--- /dev/null
+++ b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
diff --git a/docs/assets/underlying/video-under-element.jpg b/docs/assets/underlying/video-under-element.jpg
new file mode 100644
index 0000000..96afed2
--- /dev/null
+++ b/docs/assets/underlying/video-under-element.jpg
diff --git a/docs/feed.rss b/docs/feed.rss
index 5cafe59..244ab87 100644
--- a/docs/feed.rss
+++ b/docs/feed.rss
@@ -4,8 +4,8 @@
 		<title>Navan's Archive</title>
 		<description>Rare Tips, Tricks and Posts</description>
 		<link>https://web.navan.dev/</link><language>en</language>
-		<lastBuildDate>Sat, 17 Feb 2024 19:51:03 -0000</lastBuildDate>
-		<pubDate>Sat, 17 Feb 2024 19:51:03 -0000</pubDate>
+		<lastBuildDate>Mon, 26 Feb 2024 12:07:42 -0000</lastBuildDate>
+		<pubDate>Mon, 26 Feb 2024 12:07:42 -0000</pubDate>
 		<ttl>250</ttl>
 		<atom:link href="https://web.navan.dev/feed.rss" rel="self" type="application/rss+xml"/>
 		
@@ -3549,6 +3549,50 @@ Otherwise, it calls the custom action.</p>
 		
 		<item>
 			<guid isPermaLink="true">
+				https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html
+			</guid>
+			<title>
+				Interacting with underlying element in HTML
+			</title>
+			<description>
+				With CSS you can disable any interactions with an element and directly control the underlying element
+			</description>
+			<link>https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html</link>
+			<pubDate>Mon, 26 Feb 2024 11:57:00 -0000</pubDate>
+			<content:encoded><![CDATA[<h1>Interacting with underlying element in HTML</h1>
+
+<p>I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900&quot;</span><span class="p">&gt;</span>
+    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;content flex flex-wrap content-center justify-center&quot;</span><span class="p">&gt;</span>
+        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;iphone-12-white.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[60vh] z-10 absolute&quot;</span><span class="p">&gt;</span>
+        <span class="cm">&lt;!--&lt;img src=&quot;screenshot2.jpeg&quot; class=&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;&gt;--&gt;</span>
+        <span class="p">&lt;</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;screenrec.mp4&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span>
+    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<p><img src="/assets/underlying/video-under-element.jpg" alt="Video Under a Transparent Image" /></p>
+
+<p>Turns out, you can disable pointer events!</p>
+
+<p>In Tailwind, it is as simple as adding <code>pointer-events-none</code> to the bezel screen.</p>
+
+<p>In CSS, this can be done by:</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">.</span><span class="nc">className</span><span class="w"> </span><span class="p">{</span>
+<span class="w">    </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span>
+<span class="p">}</span>
+</code></pre>
+</div>
+]]></content:encoded>
+		</item>
+		
+		<item>
+			<guid isPermaLink="true">
 				https://web.navan.dev/posts/2019-12-10-TensorFlow-Model-Prediction.html
 			</guid>
 			<title>
diff --git a/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
new file mode 100644
index 0000000..2817224
--- /dev/null
+++ b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
diff --git a/docs/index.html b/docs/index.html
index 2f442d9..3bee970 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -50,6 +50,19 @@
 <h2>Recent Posts</h2>
 <ul>
 
+	<li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+	<ul>
+		<li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+		<li>Published On: 2024-02-26 11:57</li>
+		<li>Tags: 
+			
+            <a href='/tags/HTML.html'>HTML</a>, 
+			
+            <a href='/tags/CSS.html'>CSS</a>
+			
+	</ul>
+
+
 	<li><a href="/3D-Designs/2024-02-17-Can-Holder-Mountain-Bike.html">Bike Soda Can Holder</a></li>
 	<ul>
 		<li>Carry your favourite soda (or beer) can with you while you ride</li>
@@ -108,25 +121,6 @@
 	</ul>
 
 
-	<li><a href="/posts/2023-10-04-bomb-lab.html">Bomb Lab</a></li>
-	<ul>
-		<li>Walkthrough of Phases 1-6 of Bomb Lab for CSCI 2400 Computer Systems Lab 2</li>
-		<li>Published On: 2023-10-04 13:12</li>
-		<li>Tags: 
-			
-            <a href='/tags/gdb.html'>gdb</a>, 
-			
-            <a href='/tags/Reverse-Engineering.html'>Reverse-Engineering</a>, 
-			
-            <a href='/tags/C++.html'>C++</a>, 
-			
-            <a href='/tags/CSCI2400.html'>CSCI2400</a>, 
-			
-            <a href='/tags/Assembly.html'>Assembly</a>
-			
-	</ul>
-
-
 </ul>
 
 <b>For all posts go to <a href="/posts">Posts</a></b>
diff --git a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
new file mode 100644
index 0000000..8b72ac5
--- /dev/null
+++ b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    
+    <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+    <link rel="stylesheet" href="/assets/main.css" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interacting with underlying element in HTML</title>
+    <meta name="og:site_name" content="Navan Chauhan" />
+    <link rel="canonical" href="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
+    <meta name="twitter:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html />
+    <meta name="og:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
+    <meta name="twitter:title" content="Interacting with underlying element in HTML" />
+    <meta name="og:title" content="Interacting with underlying element in HTML" />
+    <meta name="description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
+    <meta name="twitter:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
+    <meta name="og:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
+    <link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
+    <meta name="twitter:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
+    <meta name="og:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
+    <meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
+    <script data-goatcounter="https://navanchauhan.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+    <script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
+    <link rel="manifest" href="/manifest.json" />
+    
+</head>
+<body>
+    <center><nav style="display: block;">
+|
+<a href="/">home</a> |
+<a href="/about/">about/links</a> |
+<a href="/posts/">posts</a> |
+<a href="/3D-Designs/">3D designs</a> |
+<!--<a href="/publications/">publications</a> |-->
+<!--<a href="/repo/">iOS repo</a> |-->
+<a href="/feed.rss">RSS Feed</a> |
+</nav>
+</center>
+    
+<main>
+
+	<h1>Interacting with underlying element in HTML</h1>
+
+<p>I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900&quot;</span><span class="p">&gt;</span>
+    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;content flex flex-wrap content-center justify-center&quot;</span><span class="p">&gt;</span>
+        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;iphone-12-white.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[60vh] z-10 absolute&quot;</span><span class="p">&gt;</span>
+        <span class="cm">&lt;!--&lt;img src=&quot;screenshot2.jpeg&quot; class=&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;&gt;--&gt;</span>
+        <span class="p">&lt;</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;screenrec.mp4&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span>
+    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+</code></pre>
+</div>
+
+<p><img src="/assets/underlying/video-under-element.jpg" alt="Video Under a Transparent Image" /></p>
+
+<p>Turns out, you can disable pointer events!</p>
+
+<p>In Tailwind, it is as simple as adding <code>pointer-events-none</code> to the bezel screen.</p>
+
+<p>In CSS, this can be done by:</p>
+
+<div class="codehilite">
+<pre><span></span><code><span class="p">.</span><span class="nc">className</span><span class="w"> </span><span class="p">{</span>
+<span class="w">    </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span>
+<span class="p">}</span>
+</code></pre>
+</div>
+
+	<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
+	<script data-isso="https://comments.navan.dev/"
+        src="https://comments.navan.dev/js/embed.min.js"></script>
+	<section id="isso-thread">
+	    <noscript>Javascript needs to be activated to view comments.</noscript>
+	</section>
+</main>
+
+    <script src="assets/manup.min.js"></script>
+    <script src="/pwabuilder-sw-register.js"></script>    
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/posts/index.html b/docs/posts/index.html
index 566d3de..4194100 100644
--- a/docs/posts/index.html
+++ b/docs/posts/index.html
@@ -52,6 +52,19 @@
 
 <ul>
 
+	<li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+	<ul>
+		<li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+		<li>Published On: 2024-02-26 11:57</li>
+		<li>Tags: 
+			
+            <a href='/tags/HTML.html'>HTML</a>, 
+			
+            <a href='/tags/CSS.html'>CSS</a>
+			
+	</ul>
+
+
 	<li><a href="/posts/2024-01-05-hello-20224.html">Hello 2024</a></li>
 	<ul>
 		<li>Recap of 2023, and my goals for 2024</li>
diff --git a/docs/tags/CSS.html b/docs/tags/CSS.html
new file mode 100644
index 0000000..b11c63d
--- /dev/null
+++ b/docs/tags/CSS.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    
+    <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+    <link rel="stylesheet" href="/assets/main.css" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>"CSS"</title>
+    <meta name="og:site_name" content="Navan Chauhan" />
+    <link rel="canonical" href="https://web.navan.dev" />
+    <meta name="twitter:url" content="https://web.navan.dev />
+    <meta name="og:url" content="https://web.navan.dev" />
+    <meta name="twitter:title" content="Hey - Home" />
+    <meta name="og:title" content="Hey - Home" />
+    <meta name="description" content="code snippets, long-form rants, and tutorials" />
+    <meta name="twitter:description" content="code snippets, long-form rants, and tutorials" />
+    <meta name="og:description" content="code snippets, long-form rants, and tutorials" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
+    <link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
+    <meta name="twitter:image" content="https://web.navan.dev/images/logo.png" />
+    <meta name="og:image" content="https://web.navan.dev/images/logo.png" />
+    <meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
+    <script data-goatcounter="https://navanchauhan.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
+    <script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
+    <link rel="manifest" href="/manifest.json" />
+    
+</head>
+<body>
+    <center><nav style="display: block;">
+|
+<a href="/">home</a> |
+<a href="/about/">about/links</a> |
+<a href="/posts/">posts</a> |
+<a href="/3D-Designs/">3D designs</a> |
+<!--<a href="/publications/">publications</a> |-->
+<!--<a href="/repo/">iOS repo</a> |-->
+<a href="/feed.rss">RSS Feed</a> |
+</nav>
+</center>
+    
+
+<main>
+	<h1>CSS</h1><p>Posts tagged 'CSS'</p>
+</main>
+
+<ul>
+
+	<li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+	<ul>
+		<li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+		<li>Published On: 2024-02-26 11:57</li>
+		<li>Tags: 
+			
+            <a href='/tags/HTML.html'>HTML</a>, 
+			
+            <a href='/tags/CSS.html'>CSS</a>
+			
+	</ul>
+
+
+</ul>
+
+
+    <script src="assets/manup.min.js"></script>
+    <script src="/pwabuilder-sw-register.js"></script>    
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/tags/HTML.html b/docs/tags/HTML.html
index dce5e7b..411407f 100644
--- a/docs/tags/HTML.html
+++ b/docs/tags/HTML.html
@@ -49,6 +49,19 @@
 
 <ul>
 
+	<li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+	<ul>
+		<li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+		<li>Published On: 2024-02-26 11:57</li>
+		<li>Tags: 
+			
+            <a href='/tags/HTML.html'>HTML</a>, 
+			
+            <a href='/tags/CSS.html'>CSS</a>
+			
+	</ul>
+
+
 	<li><a href="/posts/2020-12-1-HTML-JS-RSS-Feed.html">RSS Feed written in HTML + JavaScript</a></li>
 	<ul>
 		<li>Short code-snippet for an RSS feed, written in HTML and JavaScript</li>