Tidy layout on CIDR by rearranging and adding a sub header

Author: ryuheechul

src/components/blend/IPv4Network.svelte

@@ -56,6 +56,10 @@ to augment IPv4 with Network and Netmask visualization
   }
 </script>
 
+<small class="absolute mt-0.6">
+  <pre class="mx-2 text-gray-400">Netmask: {renderedMask}</pre>
+</small>
+<small class="opacity-0">placeholder</small>
 <div class="relative">
   <div class="absolute w-full h-full rounded-b overflow-clip z--10">
     <div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`} />
@@ -76,8 +80,12 @@ to augment IPv4 with Network and Netmask visualization
     />
   </div>
 </div>
-<small class="absolute mt-0.6">
-  <pre class="mx-2 text-gray-400">Netmask: {renderedMask}</pre>
+<small class="mx-2 text-gray-600 absolute mt-0.6">
+  <pre class="inline-block text-cyan">Network:</pre>
+  <div class="inline-block text-cyan">
+    <PartialTransition notation={renderedNetwork} />
+  </div>
+  <pre class="text-gray-400 inline-block lt-xs:hidden">= Address & Netmask</pre>
 </small>
 <small class="opacity-0">placeholder</small>
 <Bits
@@ -92,11 +100,3 @@ to augment IPv4 with Network and Netmask visualization
   on:update={onUpdateForNetwork}
   disabledBits={~mask >>> 0}
 />
-<small class="mx-2 text-gray-600 absolute mt-0.6">
-  <pre class="text-gray-400 inline-block lt-xs:hidden">IP & Netmask = </pre>
-  <pre class="inline-block text-cyan">Network:</pre>
-  <div class="inline-block text-cyan">
-    <PartialTransition notation={renderedNetwork} />
-  </div>
-</small>
-<small class="opacity-0">placeholder</small>

src/components/parts/IPv4Chart.svelte

@@ -62,6 +62,21 @@ Visualize various IPv4 related info
 <div class="flex">
   <div class="grow" />
   <div class="w-full sm:w-[94%]">
+    <div class="text-gray-400 my-3">
+      <span class="i-bi-bar-chart inline-block text-gray-400 translate-y-0.5" />
+      <span class="text-gray-200">
+        <span class="text-gray-300"> IPv4 </span>
+        /
+        <small>
+          <span class="text-cyan"> Network </span>
+
+          /
+          <small>
+            <span class="text-lime-600"> Address </span>
+          </small>
+        </small>
+      </span>
+    </div>
     <!-- overview -->
     <div>
       <div class="flex text-center text-gray items-end text-xs lt-xs:text-[0.5rem]">