Initial commit

app/globals.css

@@ -0,0 +1,205 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 222 30% 7%; /* Darkened background */
+    --foreground: 210 20% 98%;
+    --card: 222 47% 9%; /* Darkened card */
+    --card-foreground: 210 20% 98%;
+    --popover: 222 47% 9%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 222 30% 12%; /* Darkened secondary */
+    --secondary-foreground: 210 20% 98%;
+    --muted: 222 30% 12%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 222 30% 12%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 222 30% 12%;
+    --input: 222 30% 12%;
+    --ring: 263.4 70% 50.4%;
+  }
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 8s ease infinite;
+}
+
+/* Animated background gradients */
+.animated-bg {
+  position: relative;
+  overflow: hidden;
+}
+
+.animated-bg::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(124, 58, 237, 0.03) 0%,
+    rgba(124, 58, 237, 0.01) 20%,
+    rgba(236, 72, 153, 0.01) 40%,
+    rgba(236, 72, 153, 0) 60%,
+    transparent 100%
+  );
+  animation: rotate 60s linear infinite;
+  z-index: -1;
+}
+
+.animated-bg::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(236, 72, 153, 0.03) 0%,
+    rgba(236, 72, 153, 0.01) 20%,
+    rgba(124, 58, 237, 0.01) 40%,
+    rgba(124, 58, 237, 0) 60%,
+    transparent 100%
+  );
+  animation: rotate 40s linear infinite reverse;
+  z-index: -1;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Modified post-link to always show the gradient line on hover */
+.post-link {
+  position: relative;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+
+.post-link::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  background: linear-gradient(90deg, #7c3aed, #ec4899);
+  transition: width 0.3s ease;
+}
+
+.post-card:hover .post-link::after {
+  width: 100%;
+}
+
+.post-card {
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.post-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 0.5rem;
+  padding: 1px;
+  background: linear-gradient(90deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.post-card:hover {
+  transform: translateY(-2px);
+}
+
+.post-card:hover::before {
+  opacity: 1;
+}
+
+.prose {
+  @apply max-w-none;
+}
+
+.prose a {
+  @apply text-purple-400 hover:text-pink-400 transition-colors duration-200;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  @apply text-foreground;
+}
+
+.prose code {
+  @apply bg-secondary text-foreground px-1 py-0.5 rounded;
+}
+
+.prose pre {
+  @apply bg-card border border-border/40 rounded-md;
+}
+
+.prose blockquote {
+  @apply border-l-4 border-purple-400 bg-secondary/50 pl-4 py-1 italic;
+}
+
+.prose img {
+  @apply rounded-md;
+}
+
+/* Ensure proper scrolling */
+html,
+body {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+/* Ensure content can extend beyond viewport */
+#__next,
+main {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Reduce spacing between posts for more compact layout */
+.space-y-6 > * + * {
+  margin-top: 1.25rem;
+}