ClubWebsite/styles/components/HackathonModal.module.scss at main · Trent-Computer-Science-Club-Association/ClubWebsite · 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
80
81
82
83
84
85
86
87
88
89
90
91
// Import fonts
@import url('https://fonts.cdnfonts.com/css/motorblock');

.Modal {
  @apply w-11/12 max-w-2xl outline-none overflow-hidden;
  @apply bg-opacity-0;
}

.modalImageContainer {
  @apply absolute z-10;
  @apply top-8 left-1/2;
  @apply animate-hackathonModalFloat;
  @apply w-1/4;
  @apply aspect-[0.7];

  // Mobile
  @media (max-width: 768px) {
    @apply w-1/3;
  }
}

.modalContent {
  @apply fixed z-50;
  @apply top-1/2 left-1/2;
  @apply transform -translate-x-1/2 -translate-y-[40%];
  @apply rounded-2xl shadow-md;
  @apply p-8;
  @apply w-11/12 max-w-2xl;
  @apply aspect-[1.5];
  @apply outline-none;
  background: linear-gradient(
    135deg,
    #210535 30%,
    #102542 50%,
    #142043 60%,
    #1c1645 70%
  );
  @apply flex flex-col items-center justify-center;
  @apply text-center;

  h3 {
    @apply text-3xl font-bold mb-2 text-color-2;
    @apply font-semibold;
  }

  h2 {
    @apply mb-0 text-color-2 flex flex-col items-center;
    font-family: 'motorblock';
    span {
      @apply text-6xl font-bold;
      @apply tracking-[0.2em];
      @apply leading-none;
      @apply p-0 m-0;
    }
  }

  > span {
    @apply font-bold mb-6 text-color-2;
  }

  p {
    @apply mx-auto;
    @apply max-w-md;
    @apply text-center;
    @apply text-lg mb-4 text-color-2 w-1/2;
    @apply mt-4;
  }

  .buttonContainer {
    @apply flex flex-row items-center;
    @apply gap-4;
  }
}

.imageContainer {
  @apply z-10;
  @apply absolute inset-0;
  @apply grid grid-cols-2 grid-rows-2 gap-16;
  @apply p-4;
  @apply pointer-events-none;

  > span {
    @apply relative;
    @apply w-full h-full;
  }
}

.ModalOverlay {
  @apply fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-40;
  @apply backdrop-blur-sm;
}