chore: cleanup

2025-02-19 15:36:41 +01:00
parent fe4b783658
commit 55d5431859
18 changed files with 5 additions and 10 deletions
@@ -0,0 +1 @@
+styles.css
@@ -0,0 +1,112 @@
+@layer components {
+    .card {
+        @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
+    }
+
+    .link {
+        @apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
+    }
+
+    .product-grid {
+        @apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
+    }
+
+    .button-gray {
+        @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
+        hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
+        focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
+        dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
+    }
+
+    .page {
+        @apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
+    }
+
+    .navbar-bg {
+        @apply bg-white dark:bg-gray-800 antialiased;
+    }
+
+    .navbar-content {
+        @apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
+    }
+
+    .navbar-align {
+        @apply flex items-center justify-between;
+    }
+
+    .navbar-categories {
+        @apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
+    }
+
+    .navbar-web-title {
+        @apply text-xl font-semibold text-gray-900 dark:text-white;
+    }
+
+    .navbar-title {
+        @apply flex items-center space-x-8;
+    }
+
+    .navbar-category-link {
+        @apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
+    }
+
+    .navbar-dropdown-menu {
+        @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3  px-4 mt-4;
+    }
+
+    .navbar-dropdown-menu-list {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-list-items {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-title {
+        @apply hover:text-primary-700 dark:hover:text-primary-500;
+    }
+
+    .icon-button {
+        @apply flex text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
+    }
+
+    .link-button {
+        @apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
+    }
+
+    .cart-navbar-floating {
+        @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
+    }
+
+    .button-primary {
+        @apply w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
+                 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
+                 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
+                 content-center items-center cursor-pointer;
+    }
+
+    .input-number {
+        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
+                focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+                dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mr-4;
+    }
+
+    .input-text {
+        @apply my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
+                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
+                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
+    }
+
+    .input-checkbox {
+        @apply my-2 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300
+                dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800;
+    }
+
+    .search-input {
+        @apply block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
+    }
+
+    .txt-2xl {
+        @apply text-2xl font-extrabold leading-tight text-gray-900 dark:text-white;
+    }
+}
@@ -0,0 +1,36 @@
+@import "tailwindcss";
+@import "./components.css";
+
+
+@theme {
+    --font-display: "Satoshi", "sans-serif";
+    --breakpoint-3xl: 1920px;
+
+    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */
+    --color-primary-50: #fff1f2;
+    --color-primary-100: #ffe4e6;
+    --color-primary-200: #fecdd3;
+    --color-primary-300: #fda4af;
+    --color-primary-400: #fb7185;
+    --color-primary-500: #f43f5e;
+    --color-primary-600: #e11d48;
+    --color-primary-700: #be123c;
+    --color-primary-800: #9f1239;
+    --color-primary-900: #881337;
+    --color-primary-950: #4c0519;
+
+    --color-gray-50: #fafafa;
+    --color-gray-100: #f4f4f5;
+    --color-gray-200: #e4e4e7;
+    --color-gray-300: #d4d4d8;
+    --color-gray-400: #a1a1aa;
+    --color-gray-500: #71717a;
+    --color-gray-600: #52525b;
+    --color-gray-700: #3f3f46;
+    --color-gray-800: #27272a;
+    --color-gray-900: #18181b;
+    --color-gray-950: #09090b;
+}
+
+@variant dark (&:where(.dark, .dark *));
@@ -0,0 +1,37 @@
+const currentTheme = localStorage.getItem('theme')
+
+const darkIcon = document.getElementById('theme-toggle-dark-icon')
+const lightIcon = document.getElementById('theme-toggle-light-icon')
+
+if (currentTheme === 'dark') {
+  document.documentElement.classList.add('dark')
+
+  if (darkIcon !== null && lightIcon !== null) {
+    darkIcon.classList.add('hidden')
+    lightIcon.classList.remove('hidden')
+  }
+} else {
+  document.documentElement.classList.remove('dark')
+
+  if (darkIcon !== null && lightIcon !== null) {
+    darkIcon.classList.remove('hidden')
+    lightIcon.classList.add('hidden')
+  }
+}
+
+
+function switchTheme() {
+  const theme = localStorage.getItem('theme')
+
+  if (theme === 'dark') {
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+    darkIcon.classList.remove('hidden')
+    lightIcon.classList.add('hidden')
+  } else {
+    document.documentElement.classList.add('dark')
+    localStorage.setItem('theme', 'dark')
+    lightIcon.classList.remove('hidden')
+    darkIcon.classList.add('hidden')
+  }
+}