nextjs-strapi-nginx-docker

1
.main {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: space-between;
5
  align-items: center;
6
  padding: 6rem;
7
  min-height: 100vh;
8
}
9

10
.description {
11
  display: inherit;
12
  justify-content: inherit;
13
  align-items: inherit;
14
  font-size: 0.85rem;
15
  max-width: var(--max-width);
16
  width: 100%;
17
  z-index: 2;
18
  font-family: var(--font-mono);
19
}
20

21
.description a {
22
  display: flex;
23
  justify-content: center;
24
  align-items: center;
25
  gap: 0.5rem;
26
}
27

28
.description p {
29
  position: relative;
30
  margin: 0;
31
  padding: 1rem;
32
  background-color: rgba(var(--callout-rgb), 0.5);
33
  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34
  border-radius: var(--border-radius);
35
}
36

37
.code {
38
  font-weight: 700;
39
  font-family: var(--font-mono);
40
}
41

42
.grid {
43
  display: grid;
44
  grid-template-columns: repeat(4, minmax(25%, auto));
45
  max-width: 100%;
46
  width: var(--max-width);
47
}
48

49
.card {
50
  padding: 1rem 1.2rem;
51
  border-radius: var(--border-radius);
52
  background: rgba(var(--card-rgb), 0);
53
  border: 1px solid rgba(var(--card-border-rgb), 0);
54
  transition: background 200ms, border 200ms;
55
}
56

57
.card span {
58
  display: inline-block;
59
  transition: transform 200ms;
60
}
61

62
.card h2 {
63
  font-weight: 600;
64
  margin-bottom: 0.7rem;
65
}
66

67
.card p {
68
  margin: 0;
69
  opacity: 0.6;
70
  font-size: 0.9rem;
71
  line-height: 1.5;
72
  max-width: 30ch;
73
  text-wrap: balance;
74
}
75

76
.center {
77
  display: flex;
78
  justify-content: center;
79
  align-items: center;
80
  position: relative;
81
  padding: 4rem 0;
82
}
83

84
.center::before {
85
  background: var(--secondary-glow);
86
  border-radius: 50%;
87
  width: 480px;
88
  height: 360px;
89
  margin-left: -400px;
90
}
91

92
.center::after {
93
  background: var(--primary-glow);
94
  width: 240px;
95
  height: 180px;
96
  z-index: -1;
97
}
98

99
.center::before,
100
.center::after {
101
  content: "";
102
  left: 50%;
103
  position: absolute;
104
  filter: blur(45px);
105
  transform: translateZ(0);
106
}
107

108
.logo {
109
  position: relative;
110
}
111
/* Enable hover only on non-touch devices */
112
@media (hover: hover) and (pointer: fine) {
113
  .card:hover {
114
    background: rgba(var(--card-rgb), 0.1);
115
    border: 1px solid rgba(var(--card-border-rgb), 0.15);
116
  }
117

118
  .card:hover span {
119
    transform: translateX(4px);
120
  }
121
}
122

123
@media (prefers-reduced-motion) {
124
  .card:hover span {
125
    transform: none;
126
  }
127
}
128

129
/* Mobile */
130
@media (max-width: 700px) {
131
  .content {
132
    padding: 4rem;
133
  }
134

135
  .grid {
136
    grid-template-columns: 1fr;
137
    margin-bottom: 120px;
138
    max-width: 320px;
139
    text-align: center;
140
  }
141

142
  .card {
143
    padding: 1rem 2.5rem;
144
  }
145

146
  .card h2 {
147
    margin-bottom: 0.5rem;
148
  }
149

150
  .center {
151
    padding: 8rem 0 6rem;
152
  }
153

154
  .center::before {
155
    transform: none;
156
    height: 300px;
157
  }
158

159
  .description {
160
    font-size: 0.8rem;
161
  }
162

163
  .description a {
164
    padding: 1rem;
165
  }
166

167
  .description p,
168
  .description div {
169
    display: flex;
170
    justify-content: center;
171
    position: fixed;
172
    width: 100%;
173
  }
174

175
  .description p {
176
    align-items: center;
177
    inset: 0 0 auto;
178
    padding: 2rem 1rem 1.4rem;
179
    border-radius: 0;
180
    border: none;
181
    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
182
    background: linear-gradient(
183
      to bottom,
184
      rgba(var(--background-start-rgb), 1),
185
      rgba(var(--callout-rgb), 0.5)
186
    );
187
    background-clip: padding-box;
188
    backdrop-filter: blur(24px);
189
  }
190

191
  .description div {
192
    align-items: flex-end;
193
    pointer-events: none;
194
    inset: auto 0 0;
195
    padding: 2rem;
196
    height: 200px;
197
    background: linear-gradient(
198
      to bottom,
199
      transparent 0%,
200
      rgb(var(--background-end-rgb)) 40%
201
    );
202
    z-index: 1;
203
  }
204
}
205

206
/* Tablet and Smaller Desktop */
207
@media (min-width: 701px) and (max-width: 1120px) {
208
  .grid {
209
    grid-template-columns: repeat(2, 50%);
210
  }
211
}
212

213
@media (prefers-color-scheme: dark) {
214
  .vercelLogo {
215
    filter: invert(1);
216
  }
217

218
  .logo {
219
    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
220
  }
221
}
222

223
@keyframes rotate {
224
  from {
225
    transform: rotate(360deg);
226
  }
227
  to {
228
    transform: rotate(0deg);
229
  }
230
}
231