init commit

frontend/linktree-frontend/src/app/globals.css

@@ -0,0 +1,173 @@
+@import "tailwindcss";
+/* src/app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/* дальше — ваши кастом-стили */
+@layer base {
+  h1 {
+    @apply text-3xl font-bold;
+  }
+  h2 {
+    @apply text-2xl font-bold;
+  }
+  h3 {
+    @apply text-xl font-bold;
+  }
+  p {
+    @apply text-base;
+  }
+}
+@layer components {
+  .btn {
+    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+  }
+  .btn:hover {
+    @apply bg-blue-700;
+  }
+}
+@layer utilities {
+  .bg-custom {
+    @apply bg-blue-100;
+  }
+  .text-custom {
+    @apply text-blue-500;
+  }
+}
+@layer screens {
+  @screen sm {
+    .text-sm {
+      @apply text-xs;
+    }
+  }
+  @screen md {
+    .text-md {
+      @apply text-base;
+    }
+  }
+  @screen lg {
+    .text-lg {
+      @apply text-lg;
+    }
+  }
+}
+@layer forms {
+  .form-input {
+    @apply border-gray-300 rounded-md shadow-sm;
+  }
+  .form-input:focus {
+    @apply border-blue-500 ring-blue-500;
+  }
+}
+@layer typography {
+  .prose {
+    @apply prose-lg;
+  }
+  .prose h1 {
+    @apply text-3xl font-bold;
+  }
+  .prose h2 {
+    @apply text-2xl font-bold;
+  }
+  .prose h3 {
+    @apply text-xl font-bold;
+  }
+}
+@layer animations {
+  .fade-in {
+    @apply transition-opacity duration-500 ease-in;
+  }
+  .fade-out {
+    @apply transition-opacity duration-500 ease-out;
+  }
+}
+@layer transitions {
+  .transition-all {
+    @apply transition-all duration-300 ease-in-out;
+  }
+  .transition-colors {
+    @apply transition-colors duration-300 ease-in-out;
+  }
+}
+@layer shadows {
+  .shadow-custom {
+    @apply shadow-lg;
+  }
+  .shadow-none {
+    @apply shadow-none;
+  }
+}
+@layer borders {
+  .border-custom {
+    @apply border-2 border-blue-500;
+  }
+  .border-none {
+    @apply border-none;
+  }
+}
+@layer spacing {
+  .p-custom {
+    @apply p-4;
+  }
+  .m-custom {
+    @apply m-4;
+  }
+}
+@layer flex {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+  .flex-column {
+    @apply flex flex-col;
+  }
+}
+@layer grid {
+  .grid-custom {
+    @apply grid grid-cols-3 gap-4;
+  }
+  .grid-center {
+    @apply grid place-items-center;
+  }
+}
+@layer typography {
+  .prose {
+    @apply prose-lg;
+  }
+  .prose h1 {
+    @apply text-3xl font-bold;
+  }
+  .prose h2 {
+    @apply text-2xl font-bold;
+  }
+  .prose h3 {
+    @apply text-xl font-bold;
+  }
+}