added ui

index.html

@@ -30,17 +30,23 @@
         <article>
           <p class="font-semibold">Read more</p>
           <ul>
-            <li><a href="https://vite.dev/guide/">Vite Documentation</a></li>
             <li>
-              <a href="https://tailwindcss.com/docs/utility-first"
+              <a class="link" href="https://vite.dev/guide/"
+                >Vite Documentation</a
+              >
+            </li>
+            <li>
+              <a class="link" href="https://tailwindcss.com/docs/utility-first"
                 >Tailwind CSS Documentation</a
               >
             </li>
             <li>
-              <a href="https://icones.js.org/">Icones</a>
+              <a class="link" href="https://icones.js.org/">Icones</a>
             </li>
             <li>
-              <a href="https://github.com/pr4j3sh/frames">@pr4j3sh/frames</a>
+              <a class="link" href="https://github.com/pr4j3sh/frames"
+                >@pr4j3sh/frames</a
+              >
             </li>
           </ul>
         </article>

src/components/navbar.js

@@ -3,9 +3,7 @@ import { SITE } from "../lib/consts";
 const component = `<nav>
 <a href="/" class="font-semibold">${SITE.REPO}</a>
         <ul>
-          <li>
             <button class="icon" id="theme-toggle" aria-label="Theme"></button>
-          </li>
         </ul>
       </nav>`;
 

style.css

@@ -1,67 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  @apply bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50 transition-all ease-in-out;
-}
-
-svg {
-  @apply h-4 w-4;
-}
-
-.container {
-  @apply m-auto max-w-lg flex flex-col gap-4 h-screen px-2 md:px-0;
-}
-
-nav {
-  @apply my-4 flex items-center justify-between;
-}
-
-main {
-  @apply flex-grow flex flex-col gap-4;
-}
-
-pre {
-  @apply border border-gray-200 p-2 rounded-md my-2 bg-gray-100 overflow-auto text-sm dark:bg-gray-900 dark:border-gray-800;
-}
-
-code {
-  @apply text-sm p-0.5 rounded bg-gray-100 dark:bg-gray-900;
-}
-
-blockquote {
-  @apply border-l-gray-300 dark:border-l-gray-800  border-l-4 pl-2;
-}
-
-li a {
-  @apply underline text-gray-800 dark:text-gray-200;
-}
-
-hr {
-  @apply border border-gray-200 dark:border-gray-800 my-2;
-}
-
-button {
-  @apply py-1.5 px-4 bg-gray-900 hover:bg-gray-800 text-gray-50 rounded-lg font-semibold border border-gray-200 dark:border-gray-800 dark:bg-gray-50 dark:text-gray-900 hover:dark:bg-gray-200;
-}
-
-.secondary {
-  @apply bg-gray-100 hover:bg-gray-200 text-gray-950 dark:bg-gray-900 dark:text-gray-50 hover:dark:bg-gray-800;
-}
-
-.icon {
-  @apply p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-950 dark:bg-gray-900 dark:text-gray-50 hover:dark:bg-gray-800;
-}
-
-section {
-  @apply flex flex-col gap-2;
-}
-
-.card {
-  @apply border border-gray-200 dark:border-gray-800 rounded-md p-4 flex flex-col gap-4 bg-gray-100 dark:bg-gray-900;
-}
-
-footer {
-  @apply py-4 flex items-center justify-between text-sm text-gray-700 dark:text-gray-400;
-}
+@import url("https://pr4j3sh.github.io/ui/style.css");