vt3e.cat
this repo has no descr,ription
vt3e.cat
feat: change cardlayout
+43
-35
+43
-35
pkgs/web/src/components/Card/CardLayout.vue
+43
-35
pkgs/web/src/components/Card/CardLayout.vue
···
118
118
</div>
119
119
</div>
120
120
121
-
<div class="card-body">
122
-
<aside class="card-intro">
123
-
<slot name="intro" />
124
-
</aside>
125
-
<slot />
121
+
<div class="scroll-wrapper">
122
+
<div class="card-body">
123
+
<aside class="card-intro">
124
+
<slot name="intro" />
125
+
</aside>
126
+
<slot />
127
+
</div>
126
128
</div>
127
129
</div>
128
130
</div>
···
144
146
145
147
.card-sheet {
146
148
--bg-colour: color-mix(in srgb, hsl(var(--page-accent)) 5%, hsl(var(--base)));
149
+
--radius: 2rem;
147
150
width: 100%;
148
151
max-width: 900px;
149
152
150
153
max-height: calc(100dvh - 2rem);
151
-
overflow-y: auto;
152
-
display: block;
154
+
display: flex;
155
+
flex-direction: column;
156
+
gap: 0.25rem;
153
157
154
-
border-radius: 2rem;
155
-
background-color: var(--bg-colour);
156
-
border: 4px solid hsla(var(--page-accent) / 0.25);
158
+
border-radius: var(--radius);
159
+
background-color: color-mix(in srgb, hsla(var(--page-accent) / 1) 100%, white);
157
160
color: hsl(var(--text));
158
161
159
-
padding: 0;
162
+
padding: 0.25rem;
163
+
--inner-radius: calc(var(--radius) - 0.25rem);
160
164
}
161
165
162
166
.card-header {
163
-
position: sticky;
164
-
top: 0;
165
-
z-index: 50;
166
-
167
167
background-color: var(--bg-colour);
168
168
169
169
display: flex;
···
171
171
align-items: center;
172
172
173
173
padding: 0.25rem 1rem;
174
-
border-bottom: 4px solid hsla(var(--page-accent) / 0.25);
174
+
border-radius: var(--inner-radius) var(--inner-radius) 0.5rem 0.5rem;
175
175
176
176
.card-title {
177
177
font-size: 3rem;
···
248
248
}
249
249
}
250
250
251
+
.scroll-wrapper {
252
+
flex-grow: 1;
253
+
overflow: hidden;
254
+
border-radius: 0.5rem 0.5rem var(--inner-radius) var(--inner-radius);
255
+
}
256
+
251
257
.card-body {
258
+
background-color: var(--bg-colour);
252
259
overflow-y: auto;
260
+
height: 100%;
253
261
flex-grow: 1;
254
262
min-height: 0;
255
263
padding: 1rem;
256
-
}
257
264
258
-
.card-intro {
259
-
margin-bottom: 1.5rem;
260
-
padding-bottom: 1rem;
261
-
border-bottom: 1px solid hsla(var(--overlay1) / 0.25);
265
+
.card-intro {
266
+
margin-bottom: 1.5rem;
267
+
padding-bottom: 1rem;
268
+
border-bottom: 1px solid hsla(var(--overlay1) / 0.25);
262
269
263
-
:deep(h2) {
264
-
margin-top: 0;
265
-
font-size: 1.5rem;
266
-
font-weight: 900;
267
-
}
268
-
:deep(p) {
269
-
font-size: 1rem;
270
-
line-height: 1.6;
271
-
color: hsl(var(--text));
272
-
}
273
-
:deep(.meta) {
274
-
font-size: 0.875rem;
275
-
color: hsl(var(--subtext0));
270
+
:deep(h2) {
271
+
margin-top: 0;
272
+
font-size: 1.5rem;
273
+
font-weight: 900;
274
+
}
275
+
:deep(p) {
276
+
font-size: 1rem;
277
+
line-height: 1.6;
278
+
color: hsl(var(--text));
279
+
}
280
+
:deep(.meta) {
281
+
font-size: 0.875rem;
282
+
color: hsl(var(--subtext0));
283
+
}
276
284
}
277
285
}
278
286
279
287
@media (max-width: 600px) {
280
288
.card-sheet {
281
-
padding: 0;
282
289
border-radius: 0;
283
290
min-height: 100vh;
284
291
border: none;
292
+
--radius: 1.5rem;
285
293
}
286
294
.card-header {
287
295
.card-title {