revamp

author: subh <subh@subh.space> 2026-04-15 18:32:58 +0530
committer: subh <subh@subh.space> 2026-04-15 18:32:58 +0530
commit: afecebc9521775a3bf2cdd055035d3d0a3377554 (patch)
tree: c02d89e5083ca7978dd88c936bb5cdf5f6c02dca /stuff
parent: 103f55f0f5b08d5e938f92b3e01bcd82d9247f7b (diff)
5 files changed, 500 insertions, 513 deletions
diff --git a/stuff/dnsforge-dot-mac.html b/stuff/dnsforge-dot-mac.html
index 1fd9777..035e155 100644
--- a/stuff/dnsforge-dot-mac.html
+++ b/stuff/dnsforge-dot-mac.html
@@ -3,156 +3,171 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>subh.space</title>
+    <title>DNS over TLS on mac - subh.space</title>
     <style>
+        /* Gruvbox Dark Hard Palette */
         :root {
-            --bg0: #282828;
-            --bg1: #3c3836;
+            --bg-outer: #1d2021;
+            --bg-inner: #282828;
             --fg: #ebdbb2;
             --gray: #928374;
             --yellow: #fabd2f;
-            --green: #b8bb26;
-            --orange: #fe8019;
             --aqua: #8ec07c;
+            --blue: #83a598;
+            --orange: #fe8019;
+            --line: #3c3836;
         }
 
         body {
-            font-family: 'Iosevka Nerd Font Propo', Iosevka;
-            line-height: 1.7;
+            background-color: var(--bg-outer);
             color: var(--fg);
-            background-color: var(--bg0);
-            max-width: 780px;
-            margin: 40px auto;
-            padding: 0 20px;
-            -webkit-font-smoothing: antialiased;
+            font-family: 'Iosevka Nerd Font Propo';
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2.5rem 1rem;
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        header a {
+            color: var(--aqua);
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        header a:hover {
+            text-decoration: underline;
+        }
+
+        .container {
+            background-color: var(--bg-inner);
+            width: 90%;
+            max-width: 750px;
+            padding: 3rem;
+            border-radius: 4px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
         }
 
         h1 {
-            font-size: 2.2em;
             color: var(--yellow);
-            border-bottom: 2px solid var(--bg1);
-            padding-bottom: 15px;
-            margin-bottom: 30px;
+            font-size: 1.8rem;
+            margin-top: 0;
+            margin-bottom: 1rem;
+            line-height: 1.2;
         }
 
         h2 {
-            font-size: 1.5em;
-            color: var(--aqua);
-            margin-top: 35px;
-            margin-bottom: 15px;
-            font-weight: 600;
+            color: var(--orange);
+            font-size: 1.3rem;
+            margin-top: 2rem;
+            margin-bottom: 0.8rem;
         }
 
-        p { margin-bottom: 1.2em; }
+        p {
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
 
-        code {
-            font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
-            background-color: var(--bg1);
-            color: var(--orange);
-            padding: 3px 6px;
-            border-radius: 4px;
-            font-size: 0.9em;
+        strong {
+            color: var(--yellow);
         }
 
+        /* Code Block Styling */
         pre {
-            background-color: #1d2021;
-            padding: 20px;
-            border-radius: 8px;
+            background-color: var(--bg-outer);
+            padding: 1.2rem;
+            border-radius: 4px;
+            border: 1px solid var(--line);
             overflow-x: auto;
-            border: 1px solid var(--bg1);
-            margin-bottom: 1.5em;
+            margin: 1.5rem 0;
         }
 
-        pre code {
-            background-color: transparent;
-            padding: 0;
-            color: var(--fg);
-            color-scheme: dark;
+        code {
+            color: var(--blue);
+            font-size: 0.9rem;
+            font-family: 'JetBrains Mono', Courier, monospace;
         }
 
-        .language-toml { color: var(--fg); }
-        .toml-key { color: var(--green); }
-        
-        ol, ul { margin-bottom: 1.5em; padding-left: 25px; }
-        li { margin-bottom: 0.8em; }
-        li pre { margin-top: 10px; margin-bottom: 10px; }
+        .comment {
+            color: var(--gray);
+        }
+
+        footer {
+            margin: 3rem 0;
+            color: var(--gray);
+            font-size: 0.85rem;
+            text-align: center;
+        }
+
+        ol {
+            padding-left: 1.2rem;
+        }
 
+        li {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+        }
     </style>
 </head>
 <body>
 
-<h1>DNS over TLS (DoT) on mac with stubby and dnsforge</h1>
+    <header>
+        <a href="../index.html">home</a>
+        <a href="https://git.subh.space">git</a>
+        <a href="https://github.com/5epi0l">github</a>
+        <a href="https://notes.subh.space">notes</a>
+        <a href="https://www.hackthebox.com">hackthebox</a>
+    </header>
 
-<p>This is a step-by-step guide on how to setup DNS over TLS (DoT) on mac with stubby</p>
+    <main class="container">
+        <h1>DNS over TLS (DoT) on mac with stubby and dnsforge</h1>
+        
+        <p>This is a step-by-step guide on how to setup DNS over TLS (DoT) on mac with stubby.</p>
+
+        <h2>1. Install Stubby</h2>
+        <p>Install stubby on your mac with homebrew:</p>
+        <pre><code>brew install stubby</code></pre>
 
-<h2>1. Install Stubby</h2>
-<p>Install stubby on your mac with homebrew</p> 
-<pre><code class="language-shell">brew install stubby
-</code></pre>
+        <h2>2. Configure stubby</h2>
+        <p>Write the following config to <code>/opt/homebrew/etc/stubby/stubby.yml</code>. This config uses dnsforge as the encrypted DNS resolver, though you may use any encrypted DNS resolver of your choice.</p>
 
-<h2>2. Configure stubby</h2> 
-<p>write the following config to <code>/opt/homebrew/etc/stubby/stubby.yml</code></p>
-<p>This config uses dnsforge as the encrypted DNS resolver, though you may use any encrypted DNS resolver of your choice.</p>
-<pre><code class="language-yml">
-################################################################################
+        <pre><code><span class="comment">################################################################################
 ######################## STUBBY YAML CONFIG FILE ###############################
-################################################################################
+################################################################################</span>
 
-################################### LOGGING ####################################
 log_level: GETDNS_LOG_NOTICE
 
-########################## BASIC & PRIVACY SETTINGS ############################
 resolution_type: GETDNS_RESOLUTION_STUB
 
 dns_transport_list:
   - GETDNS_TRANSPORT_TLS
 
-# Strict mode - TLS auth REQUIRED, no plaintext fallback
 tls_authentication: GETDNS_AUTHENTICATION_REQUIRED
-
-# Pad queries to 128 bytes to prevent size-based traffic analysis
 tls_query_padding_blocksize: 128
-
-# Hide client subnet from upstream resolvers
 edns_client_subnet_private: 1
 
-############################# CONNECTION SETTINGS ##############################
-# Distribute queries across all upstreams
 round_robin_upstreams: 1
-
-# Keep TLS connections alive for 10s to reduce handshake overhead
 idle_timeout: 10000
-
-# Retry/backoff settings
 tls_connection_retries: 3
 tls_backoff_time: 300
-
-# Per-query timeout (ms)
 timeout: 5000
-
-# Force TLS 1.3 minimum
 tls_min_version: GETDNS_TLS1_3
 
-################################ LISTEN ADDRESS ################################
-# Stubby listens locally on port 53
-# Point your system DNS to 127.0.0.1
 listen_addresses:
   - 127.0.0.1
   - 0::1
 
-############################### DNSSEC SETTINGS ################################
-# dnsforge.de performs DNSSEC validation upstream (ad flag confirmed)
-# Uncomment below to enforce DNSSEC locally as well
-# dnssec: GETDNS_EXTENSION_TRUE
-
-##################################  UPSTREAMS  #################################
-# dnsforge.de - no-log, DNSSEC-validating, ad-free resolver (DE)
-# PIN verified via: kdig -d @<ip> +tls-ca +tls-host=dnsforge.de example.com
-###############################################################################
-
 upstream_recursive_servers:
-
-  ## dnsforge.de - IPv4 primary
+  <span class="comment">## dnsforge.de - IPv4</span>
   - address_data: 49.12.67.122
     tls_port: 853
     tls_auth_name: "dnsforge.de"
@@ -160,38 +175,29 @@ upstream_recursive_servers:
       - digest: "sha256"
         value: m51QwAhzNDSa3G7c1Y6eOEsskzp6ySzeOqy0LKcptDw=
 
-  ## dnsforge.de - IPv4 secondary
   - address_data: 91.99.154.175
     tls_port: 853
     tls_auth_name: "dnsforge.de"
     tls_pubkey_pinset:
       - digest: "sha256"
-        value: m51QwAhzNDSa3G7c1Y6eOEsskzp6ySzeOqy0LKcptDw=
+        value: m51QwAhzNDSa3G7c1Y6eOEsskzp6ySzeOqy0LKcptDw=</code></pre>
 
-  ## dnsforge.de - IPv6 primary
-  - address_data: 2a01:4f8:c013:29d::122
-    tls_port: 853
-    tls_auth_name: "dnsforge.de"
-    tls_pubkey_pinset:
-      - digest: "sha256"
-        value: m51QwAhzNDSa3G7c1Y6eOEsskzp6ySzeOqy0LKcptDw=
+        <h2>3. Run stubby as a service</h2>
+        <p>To make sure stubby runs on startup, run it as a service:</p>
+        <pre><code>sudo brew services start stubby</code></pre>
 
-  ## dnsforge.de - IPv6 secondary
-  - address_data: 2a01:4f8:c013:29d::175
-    tls_port: 853
-    tls_auth_name: "dnsforge.de"
-    tls_pubkey_pinset:
-      - digest: "sha256"
-        value: m51QwAhzNDSa3G7c1Y6eOEsskzp6ySzeOqy0LKcptDw=
-</code></pre>
+        <h2>4. Change default DNS Server</h2>
+        <p>
+            Navigate to <strong>Settings -> Network -> Wi-Fi</strong>. Click on details for your wifi and navigate to <strong>DNS</strong>. 
+            Remove any present IPs or hostnames, and add two IPs: <code>127.0.0.1</code> and <code>::1</code>.
+        </p>
+        
+        <p>And you're all set!</p>
+    </main>
 
-<h2>3. Run stubby as a service</h2>
-<p>To make sure stubby runs on startup, run it as a service</p>
-<pre><code class="language-shell">sudo brew services start stubby
-</code></pre>
+    <footer>
+        © 2026 subh.space
+    </footer>
 
-<h2>4. Change default DNS Server</h2>
-<p>Navigate to <code>Settings</code> -> <code>Network</code> -> <code>Wi-Fi.</code> Click on <code>details</code> for your wifi and navigate to <code>DNS.</code> Remove any present IPs or hostnames, and add two IPs <code>127.0.0.1</code> and <code>::1</code></p>
-<p>And you're all set!</p>
 </body>
 </html>
diff --git a/stuff/index.html b/stuff/index.html
deleted file mode 100644
index bb258f9..0000000
--- a/stuff/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>subh.space</title>
-    <style>
-        :root {
-            --bg0: #282828;
-            --bg1: #3c3836;
-            --fg: #ebdbb2;
-            --gray: #928374;
-            --yellow: #fabd2f;
-            --aqua: #8ec07c;
-            --orange: #fe8019;
-        }
-
-        body {
-            font-family: 'Iosevka Nerd Font Propo';
-            line-height: 1.6;
-            color: var(--fg);
-            background-color: var(--bg0);
-            max-width: 650px;
-            margin: 60px auto;
-            padding: 0 20px;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        header {
-            margin-bottom: 40px;
-        }
-
-        h1 {
-            font-size: 1.8em;
-            color: var(--yellow);
-            margin-bottom: 10px;
-        }
-
-        .subtitle {
-            color: var(--gray);
-            font-size: 0.95em;
-        }
-
-        nav ul {
-            list-style: none;
-            padding: 0;
-        }
-
-        nav li {
-            margin-bottom: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-            border-bottom: 1px dotted var(--bg1);
-            padding-bottom: 8px;
-        }
-
-        nav a {
-            color: var(--aqua);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.2s;
-        }
-
-        nav a:hover {
-            color: var(--orange);
-            text-decoration: underline;
-        }
-
-        .date {
-            font-family: 'Fira Code', monospace;
-            font-size: 0.85em;
-            color: var(--gray);
-        }
-
-        footer {
-            margin-top: 60px;
-            font-size: 0.8em;
-            color: var(--gray);
-            text-align: center;
-        }
-    </style>
-</head>
-<body>
-
-    <header>
-        <h1>Random Stuff</h1>
-    </header>
-
-    <main>
-        <nav>
-            <ul>
-                <li>
-                    <a href="mullvad-dot.html">DNS over TLS (DoT) on linux with mullvad</a>
-                    <span class="date">2026-04-14</span>
-                </li>
-                <li>
-                    <a href="usb-notif-linux.html">USB notifications with udev</a>
-                    <span class="date">2026-04-14</span>
-                </li>
-                <li>
-                    <a href="luks-encryption.html">Drive encryption with LUKS and cryptsetup</a>
-                    <span class="date">2026-04-14</span>
-                </li>
-                <li>
-                    <a href="dnsforge-dot-mac.html">DNS over TLS (DoT) on mac with dnsforge</a>
-                    <span class="date">2026-04-14</span>
-                </li>
-            </ul>
-        </nav>
-    </main>
-
-    <footer>
-        <p>&copy; 2026 subh.space</p>
-    </footer>
-
-</body>
-</html>
diff --git a/stuff/luks-encryption.html b/stuff/luks-encryption.html
index f292c63..4b1cf3a 100644
--- a/stuff/luks-encryption.html
+++ b/stuff/luks-encryption.html
@@ -3,138 +3,155 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>subh.space</title>
+    <title>LUKS Encryption - subh.space</title>
     <style>
+        /* Gruvbox Dark Hard Palette */
         :root {
-            --bg0: #282828;
-            --bg1: #3c3836;
+            --bg-outer: #1d2021;
+            --bg-inner: #282828;
             --fg: #ebdbb2;
             --gray: #928374;
             --yellow: #fabd2f;
-            --green: #b8bb26;
-            --orange: #fe8019;
             --aqua: #8ec07c;
+            --blue: #83a598;
+            --orange: #fe8019;
+            --line: #3c3836;
         }
 
         body {
-            font-family: 'Iosevka Nerd Font Propo';
-            line-height: 1.7;
+            background-color: var(--bg-outer);
             color: var(--fg);
-            background-color: var(--bg0);
-            max-width: 780px;
-            margin: 40px auto;
-            padding: 0 20px;
-            -webkit-font-smoothing: antialiased;
+            font-family: 'Iosevka Nerd Font Propo';
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2.5rem 1rem;
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        header a {
+            color: var(--aqua);
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        header a:hover {
+            text-decoration: underline;
+        }
+
+        .container {
+            background-color: var(--bg-inner);
+            width: 90%;
+            max-width: 750px;
+            padding: 3rem;
+            border-radius: 4px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
         }
 
         h1 {
-            font-size: 2.2em;
             color: var(--yellow);
-            border-bottom: 2px solid var(--bg1);
-            padding-bottom: 15px;
-            margin-bottom: 30px;
+            font-size: 1.8rem;
+            margin-top: 0;
+            margin-bottom: 2rem;
+            line-height: 1.2;
         }
 
         h2 {
-            font-size: 1.5em;
-            color: var(--aqua);
-            margin-top: 35px;
-            margin-bottom: 15px;
-            font-weight: 600;
+            color: var(--orange);
+            font-size: 1.3rem;
+            margin-top: 2rem;
+            margin-bottom: 0.8rem;
         }
 
-        p { margin-bottom: 1.2em; }
+        p {
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
 
         code {
-            font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
-            background-color: var(--bg1);
-            color: var(--orange);
-            padding: 3px 6px;
-            border-radius: 4px;
-            font-size: 0.9em;
+            color: var(--blue);
+            font-family: 'JetBrains Mono', Courier, monospace;
+            font-size: 0.95rem;
         }
 
         pre {
-            background-color: #1d2021;
-            padding: 20px;
-            border-radius: 8px;
+            background-color: var(--bg-outer);
+            padding: 1.2rem;
+            border-radius: 4px;
+            border: 1px solid var(--line);
             overflow-x: auto;
-            border: 1px solid var(--bg1);
-            margin-bottom: 1.5em;
+            margin: 1.5rem 0;
         }
 
         pre code {
-            background-color: transparent;
-            padding: 0;
-            color: var(--fg);
-            color-scheme: dark;
+            color: var(--blue);
+            font-size: 0.9rem;
+            white-space: pre;
         }
 
-        ol, ul { margin-bottom: 1.5em; padding-left: 25px; }
-        li { margin-bottom: 0.8em; }
-        li pre { margin-top: 10px; margin-bottom: 10px; }
-
+        footer {
+            margin: 3rem 0;
+            color: var(--gray);
+            font-size: 0.85rem;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
 
-<h1>Encrypting a Drive with LUKS and cryptsetup</h1>
-
-<h2>1. Get the drive name</h2>
-<pre><code class="language-shell">lsblk
-</code></pre>
-
-<h2>2. Install cryptsetup</h2>
-<pre><code class="language-shell">sudo pacman -S cryptsetup
-</code></pre>
-
-<h2>3. Format the drive</h2>
-<ul>
-    <li>To format the drive, you can use <code>cfdisk</code> or any other utility of your choice.</li>
-</ul>
-<pre><code class="language-shell">cfdisk /dev/sdaX
-</code></pre>
-<ul>
-    <li>Now, delete all the signatures and partitions on the drive</li>
-    <li>Then, create a filesystem on the drive as follows:</li>
-</ul>
-<pre><code class="language-shell">mkfs.ext4 /dev/sdaX
-</code></pre>
-<ul>
-    <li>After the FS has been created, create a partition on the drive with <code>cfdisk</code></li>
-    <li>After the partition has been created, you can finally start encrypting the drive</li>
-</ul>
-
-<h2>4. Encrypt the created partition</h2>
-<ul>
-    <li>List the partition</li>
-</ul>
-<pre><code class="language-shell">lsblk /dev/sdaX
-</code></pre>
-<ul>
-    <li>Encrypt the partition</li>
-</ul>
-<pre><code class="language-shell">cryptsetup luksFormat /dev/sda[0-9]
-</code></pre>
-<ul>
-    <li>It will ask for a passphrase, make sure to provide a strong passphrase</li>
-</ul>
-
-<h2>5. Decrypt and create filesystem</h2>
-<ul>
-    <li>Decrypt the drive</li>
-</ul>
-<pre><code class="language-shell">cryptsetup open /dev/sda[0-9] &lt;name&gt;
-</code></pre>
-<ul>
-    <li>Make the FS</li>
-</ul>
-<pre><code class="language-shell">mkfs.ext4 /dev/mapper/&lt;name&gt;
-</code></pre>
-
-<h2>6. Re-encrypt after usage</h2>
-<pre><code class="language-shell">cryptsetup close &lt;name&gt;
-</code></pre>
+    <header>
+        <a href="../index.html">home</a>
+        <a href="https://git.subh.space">git</a>
+        <a href="https://github.com/5epi0l">github</a>
+        <a href="https://notes.subh.space">notes</a>
+        <a href="https://www.hackthebox.com">hackthebox</a>
+    </header>
+
+    <main class="container">
+        <h1>Encrypting a Drive with LUKS and cryptsetup</h1>
+        
+        <h2>1. Get the drive name</h2>
+        <pre><code>lsblk</code></pre>
+
+        <h2>2. Install cryptsetup</h2>
+        <pre><code>sudo pacman -S cryptsetup</code></pre>
+
+        <h2>3. Format the drive</h2>
+        <p>To format the drive, you can use cfdisk or any other utility of your choice.</p>
+        <pre><code>cfdisk /dev/sdaX</code></pre>
+        <p>Now, delete all the signatures and partitions on the drive. Then, create a filesystem on the drive as follows:</p>
+        <pre><code>mkfs.ext4 /dev/sdaX</code></pre>
+        <p>After the FS has been created, create a partition on the drive with cfdisk. After the partition has been created, you can finally start encrypting the drive.</p>
+
+        <h2>4. Encrypt the created partition</h2>
+        <p>List the partition:</p>
+        <pre><code>lsblk /dev/sdaX</code></pre>
+        <p>Encrypt the partition:</p>
+        <pre><code>cryptsetup luksFormat /dev/sda[0-9]</code></pre>
+        <p>It will ask for a passphrase, make sure to provide a strong passphrase.</p>
+
+        <h2>5. Decrypt and create filesystem</h2>
+        <p>Decrypt the drive:</p>
+        <pre><code>cryptsetup open /dev/sda[0-9] &lt;name&gt;</code></pre>
+        <p>Make the FS:</p>
+        <pre><code>mkfs.ext4 /dev/mapper/&lt;name&gt;</code></pre>
+
+        <h2>6. Re-encrypt after usage</h2>
+        <pre><code>cryptsetup close &lt;name&gt;</code></pre>
+    </main>
+
+    <footer>
+        © 2026 subh.space
+    </footer>
 
 </body>
 </html>
diff --git a/stuff/mullvad-dot.html b/stuff/mullvad-dot.html
index faea8f7..ab54d3e 100644
--- a/stuff/mullvad-dot.html
+++ b/stuff/mullvad-dot.html
@@ -3,156 +3,199 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>subh.space</title>
+    <title>DoT with Mullvad - subh.space</title>
     <style>
+        /* Gruvbox Dark Hard Palette */
         :root {
-            --bg0: #282828;
-            --bg1: #3c3836;
+            --bg-outer: #1d2021;
+            --bg-inner: #282828;
             --fg: #ebdbb2;
             --gray: #928374;
             --yellow: #fabd2f;
-            --green: #b8bb26;
-            --orange: #fe8019;
             --aqua: #8ec07c;
+            --blue: #83a598;
+            --orange: #fe8019;
+            --line: #3c3836;
         }
 
         body {
-            font-family: 'Iosevka Nerd Font Propo', Iosevka;
-            line-height: 1.7;
+            background-color: var(--bg-outer);
             color: var(--fg);
-            background-color: var(--bg0);
-            max-width: 780px;
-            margin: 40px auto;
-            padding: 0 20px;
-            -webkit-font-smoothing: antialiased;
+            font-family: 'Iosevka Nerd Font Propo';
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2.5rem 1rem;
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        header a {
+            color: var(--aqua);
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        header a:hover {
+            text-decoration: underline;
+        }
+
+        .container {
+            background-color: var(--bg-inner);
+            width: 90%;
+            max-width: 750px;
+            padding: 3rem;
+            border-radius: 4px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
         }
 
         h1 {
-            font-size: 2.2em;
             color: var(--yellow);
-            border-bottom: 2px solid var(--bg1);
-            padding-bottom: 15px;
-            margin-bottom: 30px;
+            font-size: 1.8rem;
+            margin-top: 0;
+            margin-bottom: 1rem;
+            line-height: 1.2;
         }
 
         h2 {
-            font-size: 1.5em;
-            color: var(--aqua);
-            margin-top: 35px;
-            margin-bottom: 15px;
-            font-weight: 600;
+            color: var(--orange);
+            font-size: 1.3rem;
+            margin-top: 2rem;
+            margin-bottom: 0.8rem;
         }
 
-        p { margin-bottom: 1.2em; }
+        p {
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
 
         code {
-            font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
-            background-color: var(--bg1);
-            color: var(--orange);
-            padding: 3px 6px;
-            border-radius: 4px;
-            font-size: 0.9em;
+            color: var(--blue);
+            font-family: 'JetBrains Mono', Courier, monospace;
+            font-size: 0.95rem;
         }
 
         pre {
-            background-color: #1d2021;
-            padding: 20px;
-            border-radius: 8px;
+            background-color: var(--bg-outer);
+            padding: 1.2rem;
+            border-radius: 4px;
+            border: 1px solid var(--line);
             overflow-x: auto;
-            border: 1px solid var(--bg1);
-            margin-bottom: 1.5em;
+            margin: 1.5rem 0;
         }
 
         pre code {
-            background-color: transparent;
-            padding: 0;
-            color: var(--fg);
-            color-scheme: dark;
+            color: var(--blue);
+            font-size: 0.9rem;
+            white-space: pre;
         }
 
-        .language-toml { color: var(--fg); }
-        .toml-key { color: var(--green); }
-        
-        ol, ul { margin-bottom: 1.5em; padding-left: 25px; }
-        li { margin-bottom: 0.8em; }
-        li pre { margin-top: 10px; margin-bottom: 10px; }
+        .comment {
+            color: var(--gray);
+        }
+
+        .browser-box {
+            border-left: 3px solid var(--line);
+            padding-left: 1.5rem;
+            margin: 1.5rem 0;
+        }
+
+        .browser-title {
+            color: var(--aqua);
+            font-weight: bold;
+            display: block;
+            margin-bottom: 0.5rem;
+        }
 
+        footer {
+            margin: 3rem 0;
+            color: var(--gray);
+            font-size: 0.85rem;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
 
-<h1>DNS over TLS (DoT) with mullvad</h1>
+    <header>
+        <a href="../index.html">home</a>
+        <a href="https://git.subh.space">git</a>
+        <a href="https://github.com/5epi0l">github</a>
+        <a href="https://notes.subh.space">notes</a>
+        <a href="https://www.hackthebox.com">hackthebox</a>
+    </header>
+
+    <main class="container">
+        <h1>DNS over TLS (DoT) with Mullvad</h1>
+        
+        <p>This guide assumes that you're running a <strong>systemd-based</strong> operating system.</p>
 
-<p>This guide assumes that you're running a systemd-based operating system</p>
+        <h2>1. Configure systemd-resolved</h2>
+        <p>Add the following block to your <code>/etc/systemd/resolved.conf</code>:</p>
 
-<h2>1. Configure systemd-resolved to use mullvad's DNS server</h2>
-<p>Add the following block to your <code>/etc/systemd/resolved.conf</code></p>
-<pre><code class="language-toml"><span class="toml-key">[Resolve]</span>
+        <pre><code>[Resolve]
 DNS=194.242.2.4#base.dns.mullvad.net
 FallbackDNS=194.242.2.2#dns.mullvad.net
 DNSOverTLS=yes
 DNSSEC=yes
-Domains=~.
-</code></pre>
-<p>Once the changes are saved, restart <code>systemd-resolved</code></p>
-<pre><code class="language-shell">sudo systemctl restart systemd-resolved
-</code></pre>
-
-<h2>2. Make systemd-resolve take precedence over resolve.conf</h2>
-<p>To make sure your system uses <code>systemd-resolved</code> over <code>resolv.conf</code>, you need to create a symlink as follows:</p>
-<pre><code class="language-shell">sudo ln -sf /run/systemd/resolve/stub-resolv.conf /etc/resolv.conf
-</code></pre>
-
-<h2>3. Make sure DNS is working as intended</h2>
-<p>Make sure you're able to resolve domain names as follows:</p>
-<pre><code class="language-shell">resolvectl query google.com
-</code></pre>
-<p>If you see output, you're golden!</p>
-
-<h2>4. An Edge Cases:</h2>
-<p>If you're using a service such as tailscale which overrides your <code>resolv.conf</code> upon start with its own magicDNS server, it may break your DoT setup. To make sure, tailscale never overrides your <code>resolv.conf</code>, do the following</p>
-<ol>
-    <li>Re-create the symlink as it was likely broken when tailscale started</li>
-</ol>
-<pre><code class="language-shell">sudo ln -sf /run/systemd/resolve/stub-resolv.conf /etc/resolv.conf
-</code></pre>
-<ol start="2">
-    <li>Restart <code>tailscaled</code> and <code>systemd-resolved</code></li>
-</ol>
-<pre><code class="language-shell">sudo systemctl restart tailscaled
+Domains=~.</code></pre>
+
+        <p>Once the changes are saved, restart systemd-resolved:</p>
+        <pre><code>sudo systemctl restart systemd-resolved</code></pre>
+
+        <h2>2. Symlink resolv.conf</h2>
+        <p>To make sure your system uses systemd-resolved over the traditional resolv.conf, create a symlink:</p>
+        <pre><code>sudo ln -sf /run/systemd/resolve/stub-resolv.conf /etc/resolv.conf</code></pre>
+
+        <h2>3. Verify DNS resolution</h2>
+        <p>Check if you are able to resolve domain names correctly:</p>
+        <pre><code>resolvectl query google.com</code></pre>
+        <p>If you see output, you're golden!</p>
+
+        <h2>4. Edge Cases: Tailscale</h2>
+        <p>If you're using a service such as <strong>Tailscale</strong> which overrides your <code>resolv.conf</code> with MagicDNS, it may break your DoT setup. To fix this:</p>
+        
+        <ol>
+            <li>Re-create the symlink: <code>sudo ln -sf /run/systemd/resolve/stub-resolv.conf /etc/resolv.conf</code></li>
+            <li>Restart the services:</li>
+        </ol>
+        
+        <pre><code>sudo systemctl restart tailscaled
 sudo systemctl restart systemd-resolved
-sudo tailscale up --accept-dns=true
-</code></pre>
-<ol start="3">
-    <li>Check your <code>resolve.conf</code></li>
-</ol>
-<p>If your <code>resolve.conf</code> looks as follows, you're all good!</p>
-<pre><code class="language-shell">nameserver 127.0.0.53
+sudo tailscale up --accept-dns=true</code></pre>
+
+        <p>If your <code>resolve.conf</code> looks like this, you're all good:</p>
+        <pre><code>nameserver 127.0.0.53
 options edns0 trust-ad
-search tailxxxxx.ts.net
-</code></pre>
-
-<h2>5. Configure Browsers with DoT</h2>
-<p>If previously, you've been using DoH (DNS Over HTTPS) in your browser, and want to shift to your new DoT configuration, do the following</p>
-<ol>
-    <li>
-        <p>For firefox based browsers:</p>
-        <ul>
-            <li>Navigate to <code>settings</code> -&gt; <code>Privacy and Security</code></li>
-            <li>Scroll down to <code>DNS over HTTPS</code></li>
-            <li>Select <code>Off</code></li>
-        </ul>
-    </li>
-    <li>
-        <p>For chromium based browsers:</p>
-        <ul>
-            <li>Navigate to <code>settings</code> -&gt; <code>Privacy and Security</code></li>
-            <li>Find <code>Use Secure DNS</code></li>
-            <li>Toggle it Off</li>
-        </ul>
-    </li>
-</ol>
-<p>And just like that, you've configured DoT for your system!</p>
+search tailxxxxx.ts.net</code></pre>
+
+        <h2>5. Configure Browsers</h2>
+        <p>If you were previously using DoH (DNS Over HTTPS) and want to shift to system-wide DoT:</p>
+
+        <div class="browser-box">
+            <span class="browser-title">Firefox-based browsers:</span>
+            <p>Settings -> Privacy and Security -> DNS over HTTPS -> <strong>Off</strong></p>
+        </div>
+
+        <div class="browser-box">
+            <span class="browser-title">Chromium-based browsers:</span>
+            <p>Settings -> Privacy and Security -> Use Secure DNS -> <strong>Off</strong></p>
+        </div>
+
+        <p>And just like that, you've configured DoT for your system!</p>
+    </main>
+
+    <footer>
+        © 2026 subh.space
+    </footer>
 
 </body>
 </html>
diff --git a/stuff/usb-notif-linux.html b/stuff/usb-notif-linux.html
index 4acc27b..2a03886 100644
--- a/stuff/usb-notif-linux.html
+++ b/stuff/usb-notif-linux.html
@@ -3,138 +3,177 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>subh.space</title>
+    <title>USB Notifications - subh.space</title>
     <style>
+        /* Gruvbox Dark Hard Palette */
         :root {
-            --bg0: #282828;
-            --bg1: #3c3836;
+            --bg-outer: #1d2021;
+            --bg-inner: #282828;
             --fg: #ebdbb2;
             --gray: #928374;
             --yellow: #fabd2f;
-            --green: #b8bb26;
-            --orange: #fe8019;
             --aqua: #8ec07c;
+            --blue: #83a598;
+            --orange: #fe8019;
+            --line: #3c3836;
         }
 
         body {
-            font-family: 'Iosevka Nerd Font Propo';
-            line-height: 1.7;
+            background-color: var(--bg-outer);
             color: var(--fg);
-            background-color: var(--bg0);
-            max-width: 780px;
-            margin: 40px auto;
-            padding: 0 20px;
-            -webkit-font-smoothing: antialiased;
+            font-family: 'Iosevka Nerd Font Propo';
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2.5rem 1rem;
+            display: flex;
+            gap: 1.5rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        header a {
+            color: var(--aqua);
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        header a:hover {
+            text-decoration: underline;
+        }
+
+        .container {
+            background-color: var(--bg-inner);
+            width: 90%;
+            max-width: 750px;
+            padding: 3rem;
+            border-radius: 4px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
         }
 
         h1 {
-            font-size: 2.2em;
             color: var(--yellow);
-            border-bottom: 2px solid var(--bg1);
-            padding-bottom: 15px;
-            margin-bottom: 30px;
+            font-size: 1.8rem;
+            margin-top: 0;
+            margin-bottom: 1rem;
+            line-height: 1.2;
         }
 
         h2 {
-            font-size: 1.5em;
-            color: var(--aqua);
-            margin-top: 35px;
-            margin-bottom: 15px;
-            font-weight: 600;
+            color: var(--orange);
+            font-size: 1.3rem;
+            margin-top: 2rem;
+            margin-bottom: 0.8rem;
         }
 
-        p { margin-bottom: 1.2em; }
+        p {
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
 
         code {
-            font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
-            background-color: var(--bg1);
-            color: var(--orange);
-            padding: 3px 6px;
-            border-radius: 4px;
-            font-size: 0.9em;
+            color: var(--blue);
+            font-family: 'JetBrains Mono', Courier, monospace;
+            font-size: 0.95rem;
         }
 
         pre {
-            background-color: #1d2021;
-            padding: 20px;
-            border-radius: 8px;
+            background-color: var(--bg-outer);
+            padding: 1.2rem;
+            border-radius: 4px;
+            border: 1px solid var(--line);
             overflow-x: auto;
-            border: 1px solid var(--bg1);
-            margin-bottom: 1.5em;
+            margin: 1.5rem 0;
         }
 
         pre code {
-            background-color: transparent;
-            padding: 0;
-            color: var(--fg);
-            color-scheme: dark;
+            color: var(--blue);
+            font-size: 0.9rem;
+            white-space: pre;
         }
 
-        ol, ul { margin-bottom: 1.5em; padding-left: 25px; }
-        li { margin-bottom: 0.8em; }
-        li pre { margin-top: 10px; margin-bottom: 10px; }
+        .comment {
+            color: var(--gray);
+        }
+
+        .script-label {
+            color: var(--aqua);
+            font-weight: bold;
+            display: block;
+            margin-top: 1.5rem;
+            font-size: 0.9rem;
+        }
 
+        footer {
+            margin: 3rem 0;
+            color: var(--gray);
+            font-size: 0.85rem;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
 
-<h1>Configuring USB notifications on Linux</h1>
-
-<p>If you want to receive a small notification as soon as a USB storage device is plugged in or plugged out. You're in the right place</p>
-
-<p>Your system detects a USB device upon connection or disconnection using an utility named <code>udev</code>. udev allows for defining rules which can allow a user to perform a specific task when a USB device is connected or disconnected. This can be combined with <code>notify-send</code> to send notifications to a user as soon as a USB device is connected or disconnected</p>
-
-<h2>1. Creating a udev rule</h2>
-
-<p>Below is a rule file, which will trigger two scripts depending upon the connection or disconnection of a USB device</p>
+    <header>
+        <a href="../index.html">home</a>
+        <a href="https://git.subh.space">git</a>
+        <a href="https://github.com/5epi0l">github</a>
+        <a href="https://notes.subh.space">notes</a>
+        <a href="https://www.hackthebox.com">hackthebox</a>
+    </header>
 
-<pre><code class="language-shell">ACTION=="add", SUBSYSTEM=="block", ENV{DEVTYPE}=="disk",  RUN+="/usr/local/bin/usb-notify-add.sh '$env{ID_MODEL}'"
-ACTION=="remove", SUBSYSTEM=="block", ENV{DEVTYPE}=="disk",  RUN+="/usr/local/bin/usb-notify-rem.sh '$env{ID_MODEL}'"
-</code></pre>
+    <main class="container">
+        <h1>Configuring USB notifications on Linux</h1>
+        
+        <p>If you want to receive a small notification as soon as a USB storage device is plugged in or plugged out, you're in the right place.</p>
 
-<p>save this as <code>99-usb-notify.rules</code> file under <code>/etc/udev/rules.d/</code>.</p>
+        <p>Your system detects a USB device upon connection or disconnection using a utility named <code>udev</code>. It allows for defining rules to perform specific tasks. Combined with <code>notify-send</code>, you can trigger desktop notifications instantly.</p>
 
-<h2>2. Configuring the scripts</h2>
+        <h2>1. Creating a udev rule</h2>
+        <p>Save the following as <code>99-usb-notify.rules</code> under <code>/etc/udev/rules.d/</code></p>
 
-<p>Below are the scripts:</p>
+        <pre><code>ACTION=="add", SUBSYSTEM=="block", ENV{DEVTYPE}=="disk", RUN+="/usr/local/bin/usb-notify-add.sh '$env{ID_MODEL}'"
+ACTION=="remove", SUBSYSTEM=="block", ENV{DEVTYPE}=="disk", RUN+="/usr/local/bin/usb-notify-rem.sh '$env{ID_MODEL}'"</code></pre>
 
-<ul>
-    <li>usb-notify-add.sh</li>
-</ul>
+        <h2>2. Configuring the scripts</h2>
+        <p>Save both scripts under <code>/usr/local/bin/</code> and make them executable</p>
 
-<pre><code class="language-shell">#!/bin/bash
+        <span class="script-label">usb-notify-add.sh</span>
+        <pre><code>#!/bin/bash
 DEVICE_NAME=${1:-"Unknown USB Device"}
 
 USER_ID=$(id -u &lt;your-username&gt;)
 export DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/$USER_ID/bus
 
-sudo -u &lt;your-username&gt; DBUS_SESSION_BUS_ADDRESS=$DBUS_SESSION_BUS_ADDRESS /usr/bin/notify-send "USB Connected" "Device: $DEVICE_NAME"
-</code></pre>
+sudo -u &lt;your-username&gt; DBUS_SESSION_BUS_ADDRESS=$DBUS_SESSION_BUS_ADDRESS /usr/bin/notify-send "USB Connected" "Device: $DEVICE_NAME"</code></pre>
 
-<ul>
-    <li>usb-notify-rem.sh</li>
-</ul>
-
-<pre><code class="language-shell">#!/bin/bash
+        <span class="script-label">usb-notify-rem.sh</span>
+        <pre><code>#!/bin/bash
 DEVICE_NAME=${1:-"Unknown USB Device"}
 
 USER_ID=$(id -u &lt;your-username&gt;)
 export DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/$USER_ID/bus
 
-sudo -u &lt;your-username&gt; DBUS_SESSION_BUS_ADDRESS=$DBUS_SESSION_BUS_ADDRESS /usr/bin/notify-send "USB Disconnected" "Device: $DEVICE_NAME"
-</code></pre>
-
-<p>Save both the scripts under <code>/usr/local/bin</code> and make them executable with <code>chmod</code></p>
+sudo -u &lt;your-username&gt; DBUS_SESSION_BUS_ADDRESS=$DBUS_SESSION_BUS_ADDRESS /usr/bin/notify-send "USB Disconnected" "Device: $DEVICE_NAME"</code></pre>
 
-<h2>3. Reloading the udev rules</h2>
+        <h2>3. Reloading the udev rules</h2>
+        <p>Once the files are saved, reload the udev configuration to apply the changes:</p>
+        <pre><code>sudo udevadm control --reload-rules
+sudo udevadm trigger</code></pre>
 
-<p>Once all the files have been saved. Reload udev rules as follows:</p>
+        <p>And just like that, you've setup USB notifications. Give it a try! Plug in a device and check if your system sends a notification with the device name.</p>
+    </main>
 
-<pre><code class="language-shell">sudo udevadm control --reload-rules
-sudo udevadm trigger
-</code></pre>
-
-<p>And just like that, you've setup USB notifications. Give it a try! Plug in a USB device and check whether your system sends you a notification with the name of the USB device.</p>
+    <footer>
+        © 2026 subh.space
+    </footer>
 
 </body>
 </html>
+
author	subh <subh@subh.space>	2026-04-15 18:32:58 +0530
committer	subh <subh@subh.space>	2026-04-15 18:32:58 +0530
commit	afecebc9521775a3bf2cdd055035d3d0a3377554 (patch)
tree	c02d89e5083ca7978dd88c936bb5cdf5f6c02dca /stuff
parent	103f55f0f5b08d5e938f92b3e01bcd82d9247f7b (diff)