aboutsummaryrefslogtreecommitdiff
path: root/tailwind_in.css
blob: 1b961a24b63f6f48715cffd8c065dc765669007a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@layer components {
  .project-list-heading {
    @apply text-lg group-hover:underline group-hover:text-pink-900 group-hover:bg-pink-100 p-1;
  }

  .project-list-description {
    @apply pl-3 border-l-3 border-dashed border-pink-300 group-hover:text-pink-900 group-hover:bg-pink-100 group-hover:underline flex items-center;
  }

  .button {
    @apply hover:underline hover:text-pink-900 hover:bg-pink-100 p-1 border-2 px-4;
  }

  .button-inverted {
    @apply h-full bg-pink-100 text-pink-900 hover:bg-zinc-900 hover:text-pink-300 hover:underline border-transparent hover:border-pink-300 border-2 selection:bg-zinc-400;
  }

  .card-container {
    @apply px-16 flex flex-wrap gap-8 items-stretch justify-center;
  }
  
  .card-anchor {
    @apply flex-grow flex-shrink basis-128 min-w-64 max-w-128 py-2 px-4 flex flex-col justify-between w-full;
  }
}

@layer utilities {
  .prose {
    --tw-prose-body: var(--color-text);
    --tw-prose-headings: var(--color-primary);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: var(--color-primary-light);
    --tw-prose-hr: var(--color-border);
    --tw-prose-code: var(--color-primary);
    --tw-prose-quotes: var(--color-primary);
  }

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

}

@layer base {
  code,
  kbd,
  samp,
  pre {
    font-family: "Jersey 15";
    font-size: 40px;
  }
}