nodejs.org/packages/ui-components/src/Common/Preview/index.module.css at 6bb7b42c09869ad1d4dc7ffb855dccf0c26828de · nodejs/nodejs.org · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@reference "../../styles/index.css";

.root {
  @apply after:bg-gradient-radial
    @container/preview
    relative
    flex
    aspect-[1.90/1]
    items-center
    rounded-sm
    border
    border-neutral-900
    bg-neutral-950
    after:absolute
    after:inset-0
    after:m-auto
    after:aspect-square
    after:w-1/3
    after:rounded-full
    after:blur-2xl
    after:content-[''];

  &.announcements {
    @apply after:from-green-700/90;
  }

  &.release {
    @apply after:from-info-600/90;
  }

  &.vulnerability {
    @apply after:from-warning-600/90;
  }

  .container {
    @apply @sm/preview:text-base
      @md/preview:gap-6
      @md/preview:text-lg
      @lg/preview:gap-8
      @lg/preview:text-xl
      @xl/preview:gap-12
      @xl/preview:text-2xl
      @2xl/preview:text-3xl
      z-10
      mx-auto
      flex
      w-2/3
      max-w-xl
      flex-col
      gap-4
      text-center
      text-xs
      font-semibold
      text-white;

    .hexagon {
      @apply @md/preview:h-3/5
        @md/preview:w-3/5
        @lg/preview:h-2/3
        @lg/preview:w-2/3
        @xl/preview:h-3/5
        @xl/preview:w-3/5
        @2xl/preview:h-2/3
        @2xl/preview:w-2/3
        absolute
        inset-0
        m-auto
        size-full;
    }

    .logo {
      @apply @md/preview:size-14
        @lg/preview:size-16
        @xl/preview:size-20
        mx-auto
        size-6;
    }
  }
}