linkat-directory / src / lib / css / app.css

@import "$css/variables.css";

/* Linkat Directory - Core CSS Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  /* Custom scrollbar styling for webkit browsers */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--header-footer-bg);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--button-bg);
    border-radius: 0px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--button-hover-bg);
  }

  * {
    color: var(--text-color);
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  h1 {
    @apply text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-bold;
  }

  h3 {
    @apply text-2xl font-bold;
  }

  h4 {
    @apply text-xl font-semibold;
  }

  h5 {
    @apply text-lg font-semibold;
  }

  h6 {
    @apply text-sm font-semibold;
  }

  a {
    @apply text-[var(--link-color)] hover:text-[var(--link-hover-color)] no-underline;
    /* Simplified hover transitions */
    transition: color 0.2s ease;
  }

  a:hover {
    @apply font-semibold;
  }

  a,
  a:visited,
  a:hover,
  a:active,
  a:focus {
    text-decoration: none !important;
  }

  /* Header links - simplified transitions */
  header a,
  a.font-medium {
    @apply no-underline hover:no-underline inline-block;
    /* Only animate on hover, not constantly */
    transition: transform 0.2s ease;
  }

  header a:hover,
  a.font-medium:hover {
    transform: scale(1.1);
  }

  /* Typography styles for blog/prose content using Tailwind Typography plugin */
  .prose {
    @apply max-w-none;
  }

  /* Left-align headings in blog posts */
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    @apply text-left;
  }

  /* Left-align paragraphs and lists */
  .prose p,
  .prose ul,
  .prose ol {
    @apply text-left;
  }

  .prose img {
    @apply border-0 rounded-lg mx-auto;
  }

  a {
    color: var(--link-color);
    text-decoration: none;
  }

  a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
  }

  /* Prose element styling with CSS variables for theme consistency */
  .prose a {
    color: var(--link-color);
    text-decoration: none;
  }

  .prose a:hover {
    color: var(--link-hover-color);
  }

  .prose blockquote {
    @apply border-l-2 pl-4 rounded-none mx-auto;
    border-color: var(--button-bg);
    background-color: var(--card-bg);
  }

  .prose code {
    background-color: var(--card-bg);
    @apply rounded px-1 font-mono;
  }

  .prose pre {
    background-color: var(--card-bg);
    @apply rounded-md mx-auto text-left font-mono p-4 overflow-x-auto;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
  }

  .prose pre code {
    @apply bg-transparent p-0;
  }
}

.text-link {
  color: var(--link-color);
}

.text-link-hover,
.text-link:hover {
  color: var(--link-hover-color);
}

.text-primary {
  color: var(--text-color);
}

.text-muted {
  color: var(--link-color);
  opacity: 0.8;
}