💄 Style updates to enhance design consistency

exampleSite/layouts/partials/home/custom.html

@@ -1,38 +1,27 @@
-<script type="text/javascript">
-  function switchLayout() {
-    var pageDiv = document.getElementById("page");
-    var profileDiv = document.getElementById("profile");
-    var layoutSpan = document.getElementById("layout");
-    if (pageDiv.style.display === "none") {
-      pageDiv.style.display = "block";
-      profileDiv.style.display = "none";
-      layoutSpan.innerHTML = "page";
-    } else {
-      pageDiv.style.display = "none";
-      profileDiv.style.display = "block";
-      layoutSpan.innerHTML = "profile";
-    }
-  }
-</script>
-
-<div class="flex px-4 py-3 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center pr-3 text-primary-400">
-    {{ partial "icon.html" "exclamation-triangle" }}
-  </span>
-  <span class="flex items-center justify-between flex-grow no-prose dark:text-gray-300">
-    <span>This is a demo of the `<code id="layout" class="">page</code>` layout.</span>
-    <button
-      class="font-bold px-4 py-2 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
-      onclick="switchLayout()"
-    >
-      Switch layout &orarr;
-    </button>
-  </span>
-</div>
-
 <div id="page">
   {{ partial "partials/home/page.html" . }}
 </div>
-<div id="profile" style="display: none">
+<div id="profile" class="hidden">
   {{ partial "partials/home/profile.html" . }}
 </div>
+
+<script type="text/javascript">
+  function switchLayout() {
+    const pageDiv = document.getElementById("page");
+    const profileDiv = document.getElementById("profile");
+    const layoutCode = document.querySelectorAll("code[id=layout]");
+    if (pageDiv.style.display === "none") {
+      pageDiv.style.display = "block";
+      profileDiv.style.display = "none";
+      layoutCode.forEach(function (el) {
+        el.innerText = "page";
+      });
+    } else {
+      pageDiv.style.display = "none";
+      profileDiv.style.display = "block";
+      layoutCode.forEach(function (el) {
+        el.innerText = "profile";
+      });
+    }
+  }
+</script>