An OIDC-protected index page for your homeserver.
feat(view): add borders to cards
+73
-188
+60
-179
static/styles.css
+60
-179
static/styles.css
···
1
-
/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
1
+
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
2
+
@layer properties;
2
3
@layer theme, base, components, utilities;
3
4
@layer theme {
4
5
:root, :host {
···
9
10
--breakpoint-sm: 40rem;
10
11
--breakpoint-md: 48rem;
11
12
--breakpoint-lg: 64rem;
12
-
--breakpoint-xl: 80rem;
13
-
--breakpoint-2xl: 96rem;
14
-
--container-3xs: 16rem;
15
-
--container-2xs: 18rem;
16
13
--container-xs: 20rem;
17
-
--container-sm: 24rem;
18
-
--container-md: 28rem;
19
-
--container-lg: 32rem;
20
-
--container-xl: 36rem;
21
-
--container-2xl: 42rem;
22
-
--container-3xl: 48rem;
23
-
--container-4xl: 56rem;
24
-
--container-5xl: 64rem;
25
-
--container-6xl: 72rem;
26
-
--container-7xl: 80rem;
27
14
--text-xs: 0.75rem;
28
15
--text-xs--line-height: calc(1 / 0.75);
29
16
--text-sm: 0.875rem;
30
17
--text-sm--line-height: calc(1.25 / 0.875);
31
-
--text-base: 1rem;
32
-
--text-base--line-height: calc(1.5 / 1);
33
18
--text-lg: 1.125rem;
34
19
--text-lg--line-height: calc(1.75 / 1.125);
35
-
--text-xl: 1.25rem;
36
-
--text-xl--line-height: calc(1.75 / 1.25);
37
-
--text-2xl: 1.5rem;
38
-
--text-2xl--line-height: calc(2 / 1.5);
39
-
--text-3xl: 1.875rem;
40
-
--text-3xl--line-height: calc(2.25 / 1.875);
41
-
--text-4xl: 2.25rem;
42
-
--text-4xl--line-height: calc(2.5 / 2.25);
43
-
--text-5xl: 3rem;
44
-
--text-5xl--line-height: 1;
45
-
--text-6xl: 3.75rem;
46
-
--text-6xl--line-height: 1;
47
-
--text-7xl: 4.5rem;
48
-
--text-7xl--line-height: 1;
49
-
--text-8xl: 6rem;
50
-
--text-8xl--line-height: 1;
51
-
--text-9xl: 8rem;
52
-
--text-9xl--line-height: 1;
53
-
--font-weight-thin: 100;
54
-
--font-weight-extralight: 200;
55
-
--font-weight-light: 300;
56
-
--font-weight-normal: 400;
57
-
--font-weight-medium: 500;
58
-
--font-weight-semibold: 600;
59
20
--font-weight-bold: 700;
60
-
--font-weight-extrabold: 800;
61
-
--font-weight-black: 900;
62
-
--tracking-tighter: -0.05em;
63
-
--tracking-tight: -0.025em;
64
-
--tracking-normal: 0em;
65
-
--tracking-wide: 0.025em;
66
-
--tracking-wider: 0.05em;
67
-
--tracking-widest: 0.1em;
68
-
--leading-tight: 1.25;
69
-
--leading-snug: 1.375;
70
-
--leading-normal: 1.5;
71
-
--leading-relaxed: 1.625;
72
-
--leading-loose: 2;
73
-
--radius-xs: 0.125rem;
74
-
--radius-sm: 0.25rem;
75
-
--radius-md: 0.375rem;
76
21
--radius-lg: 0.5rem;
77
-
--radius-xl: 0.75rem;
78
-
--radius-2xl: 1rem;
79
-
--radius-3xl: 1.5rem;
80
-
--radius-4xl: 2rem;
81
-
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
82
-
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
83
-
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
84
-
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
85
-
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
86
-
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
87
-
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
88
-
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
89
-
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
90
-
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
91
-
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
92
-
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
93
-
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
94
-
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
95
-
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
96
-
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
97
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
98
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
99
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
100
-
--animate-spin: spin 1s linear infinite;
101
-
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
102
-
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
103
-
--animate-bounce: bounce 1s infinite;
104
-
--blur-xs: 4px;
105
-
--blur-sm: 8px;
106
-
--blur-md: 12px;
107
-
--blur-lg: 16px;
108
-
--blur-xl: 24px;
109
-
--blur-2xl: 40px;
110
-
--blur-3xl: 64px;
111
-
--perspective-dramatic: 100px;
112
-
--perspective-near: 300px;
113
-
--perspective-normal: 500px;
114
-
--perspective-midrange: 800px;
115
-
--perspective-distant: 1200px;
116
-
--aspect-video: 16 / 9;
117
-
--default-transition-duration: 150ms;
118
-
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
119
22
--default-font-family: var(--font-sans);
120
-
--default-font-feature-settings: var(--font-sans--font-feature-settings);
121
-
--default-font-variation-settings: var(--font-sans--font-variation-settings);
122
23
--default-mono-font-family: var(--font-mono);
123
-
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
124
24
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
125
25
--color-base: rgb(25, 23, 36);
126
26
--color-surface: rgb(31, 29, 46);
127
-
--color-overlay: rgb(38, 35, 58);
128
27
--color-muted: rgb(110, 106, 134);
129
28
--color-subtle: rgb(144, 140, 170);
130
29
--color-text: rgb(224, 222, 244);
131
-
--color-love: rgb(235, 111, 146);
132
30
--color-gold: rgb(246, 193, 119);
133
-
--color-rose: rgb(235, 188, 186);
134
-
--color-pine: rgb(49, 116, 143);
135
31
--color-foam: rgb(156, 207, 216);
136
32
--color-iris: rgb(196, 167, 231);
137
-
--color-highlight-low: rgb(33, 32, 46);
138
33
--color-highlight-med: rgb(64, 61, 82);
139
-
--color-highlight-high: rgb(82, 79, 103);
140
34
--font-serif--font-variation-settings: "slnt" -12, "CASL" 1, "CRSV" 1;
141
35
--font-mono--font-variation-settings: "MONO" 1;
142
36
}
···
152
46
line-height: 1.5;
153
47
-webkit-text-size-adjust: 100%;
154
48
tab-size: 4;
155
-
font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );
49
+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
156
50
font-feature-settings: var(--default-font-feature-settings, normal);
157
51
font-variation-settings: var(--default-font-variation-settings, normal);
158
52
-webkit-tap-highlight-color: transparent;
159
-
}
160
-
body {
161
-
line-height: inherit;
162
53
}
163
54
hr {
164
55
height: 0;
···
182
73
font-weight: bolder;
183
74
}
184
75
code, kbd, samp, pre {
185
-
font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );
76
+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
186
77
font-feature-settings: var(--default-mono-font-feature-settings, normal);
187
78
font-variation-settings: var(--default-mono-font-variation-settings, normal);
188
79
font-size: 1em;
···
248
139
}
249
140
::placeholder {
250
141
opacity: 1;
251
-
color: color-mix(in oklab, currentColor 50%, transparent);
142
+
}
143
+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
144
+
::placeholder {
145
+
color: currentcolor;
146
+
@supports (color: color-mix(in lab, red, red)) {
147
+
color: color-mix(in oklab, currentcolor 50%, transparent);
148
+
}
149
+
}
252
150
}
253
151
textarea {
254
152
resize: vertical;
···
269
167
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
270
168
padding-block: 0;
271
169
}
170
+
::-webkit-calendar-picker-indicator {
171
+
line-height: 1;
172
+
}
272
173
:-moz-ui-invalid {
273
174
box-shadow: none;
274
175
}
···
283
184
}
284
185
}
285
186
@layer utilities {
286
-
.collapse {
287
-
visibility: collapse;
288
-
}
289
-
.relative {
290
-
position: relative;
291
-
}
292
187
.static {
293
188
position: static;
294
189
}
···
298
193
.col-span-full {
299
194
grid-column: 1 / -1;
300
195
}
196
+
.container {
197
+
width: 100%;
198
+
@media (width >= 40rem) {
199
+
max-width: 40rem;
200
+
}
201
+
@media (width >= 48rem) {
202
+
max-width: 48rem;
203
+
}
204
+
@media (width >= 64rem) {
205
+
max-width: 64rem;
206
+
}
207
+
@media (width >= 80rem) {
208
+
max-width: 80rem;
209
+
}
210
+
@media (width >= 96rem) {
211
+
max-width: 96rem;
212
+
}
213
+
}
301
214
.mx-auto {
302
215
margin-inline: auto;
303
216
}
···
310
223
.block {
311
224
display: block;
312
225
}
226
+
.contents {
227
+
display: contents;
228
+
}
313
229
.flex {
314
230
display: flex;
315
231
}
316
232
.grid {
317
233
display: grid;
318
-
}
319
-
.inline-flex {
320
-
display: inline-flex;
321
-
}
322
-
.list-item {
323
-
display: list-item;
324
-
}
325
-
.table {
326
-
display: table;
327
234
}
328
235
.aspect-square {
329
236
aspect-ratio: 1 / 1;
···
346
253
.max-w-xs {
347
254
max-width: var(--container-xs);
348
255
}
349
-
.border-collapse {
350
-
border-collapse: collapse;
351
-
}
352
256
.transform {
353
-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
354
-
}
355
-
.resize {
356
-
resize: both;
257
+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
357
258
}
358
259
.grid-cols-3 {
359
260
grid-template-columns: repeat(3, minmax(0, 1fr));
···
395
296
border-style: var(--tw-border-style);
396
297
border-width: 1px;
397
298
}
299
+
.border-muted\/20 {
300
+
border-color: color-mix(in srgb, rgb(110, 106, 134) 20%, transparent);
301
+
@supports (color: color-mix(in lab, red, red)) {
302
+
border-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
303
+
}
304
+
}
398
305
.bg-base {
399
306
background-color: var(--color-base);
400
307
}
401
-
.bg-foam {
402
-
background-color: var(--color-foam);
403
-
}
404
308
.bg-foam\/20 {
405
-
background-color: color-mix(in oklab, var(--color-foam) 20%, transparent);
309
+
background-color: color-mix(in srgb, rgb(156, 207, 216) 20%, transparent);
310
+
@supports (color: color-mix(in lab, red, red)) {
311
+
background-color: color-mix(in oklab, var(--color-foam) 20%, transparent);
312
+
}
406
313
}
407
314
.bg-surface {
408
315
background-color: var(--color-surface);
···
474
381
.underline {
475
382
text-decoration-line: underline;
476
383
}
477
-
.outline {
478
-
outline-style: var(--tw-outline-style);
479
-
outline-width: 1px;
480
-
}
481
384
.sm\:max-w-screen-sm {
482
385
@media (width >= 40rem) {
483
386
max-width: var(--breakpoint-sm);
···
509
412
}
510
413
}
511
414
}
512
-
@keyframes spin {
513
-
to {
514
-
transform: rotate(360deg);
515
-
}
516
-
}
517
-
@keyframes ping {
518
-
75%, 100% {
519
-
transform: scale(2);
520
-
opacity: 0;
521
-
}
522
-
}
523
-
@keyframes pulse {
524
-
50% {
525
-
opacity: 0.5;
526
-
}
527
-
}
528
-
@keyframes bounce {
529
-
0%, 100% {
530
-
transform: translateY(-25%);
531
-
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
532
-
}
533
-
50% {
534
-
transform: none;
535
-
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
536
-
}
537
-
}
538
415
@property --tw-rotate-x {
539
416
syntax: "*";
540
417
inherits: false;
541
-
initial-value: rotateX(0);
542
418
}
543
419
@property --tw-rotate-y {
544
420
syntax: "*";
545
421
inherits: false;
546
-
initial-value: rotateY(0);
547
422
}
548
423
@property --tw-rotate-z {
549
424
syntax: "*";
550
425
inherits: false;
551
-
initial-value: rotateZ(0);
552
426
}
553
427
@property --tw-skew-x {
554
428
syntax: "*";
555
429
inherits: false;
556
-
initial-value: skewX(0);
557
430
}
558
431
@property --tw-skew-y {
559
432
syntax: "*";
560
433
inherits: false;
561
-
initial-value: skewY(0);
562
434
}
563
435
@property --tw-border-style {
564
436
syntax: "*";
···
573
445
syntax: "*";
574
446
inherits: false;
575
447
}
576
-
@property --tw-outline-style {
577
-
syntax: "*";
578
-
inherits: false;
579
-
initial-value: solid;
448
+
@layer properties {
449
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
450
+
*, ::before, ::after, ::backdrop {
451
+
--tw-rotate-x: initial;
452
+
--tw-rotate-y: initial;
453
+
--tw-rotate-z: initial;
454
+
--tw-skew-x: initial;
455
+
--tw-skew-y: initial;
456
+
--tw-border-style: solid;
457
+
--tw-leading: initial;
458
+
--tw-font-weight: initial;
459
+
}
460
+
}
580
461
}
+2
-2
views/document_templ.go
+2
-2
views/document_templ.go
···
1
1
// Code generated by templ - DO NOT EDIT.
2
2
3
-
// templ: version: v0.3.833
3
+
// templ: version: v0.3.943
4
4
package views
5
5
6
6
//lint:file-ignore SA4006 This context is only used if a nested component is present.
···
42
42
if templ_7745c5c3_Err != nil {
43
43
return templ_7745c5c3_Err
44
44
}
45
-
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " | Ladon</title><link rel=\"icon\" type=\"image/svg\" href=\"/static/favicon.svg\"><link rel=\"stylesheet\" href=\"/static/styles.css\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap\" rel=\"stylesheet\"></head><body class=\"bg-base text-text\">")
45
+
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " | Ladon</title><link rel=\"icon\" type=\"image/svg\" href=\"/static/favicon.svg\"><link rel=\"stylesheet\" href=\"/static/styles.css\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap\" rel=\"stylesheet\"></head><body class=\"bg-base text-text\">")
46
46
if templ_7745c5c3_Err != nil {
47
47
return templ_7745c5c3_Err
48
48
}
+2
-2
views/index.templ
+2
-2
views/index.templ
···
18
18
templ renderLink(name string, url string) {
19
19
<li class="col-span-1 grid grid-cols-subgrid">
20
20
<a
21
-
class="aspect-square bg-surface p-4 rounded-lg text-sm flex flex-col justify-between leading-none"
21
+
class="aspect-square bg-surface p-4 rounded-lg text-sm flex flex-col justify-between leading-none border border-muted/20"
22
22
href={ templ.URL(url) }
23
23
target="_blank"
24
24
rele="noopener noreferrer"
···
51
51
templ Authenticate() {
52
52
@Document("Log In") {
53
53
<div class="w-screen h-screen flex items-center justify-center">
54
-
<main class="w-full max-w-xs bg-surface rounded-lg p-4">
54
+
<main class="w-full max-w-xs bg-surface rounded-lg p-4 border border-muted/20">
55
55
<p class="mb-3 font-serif">Can I see some ID, please?</p>
56
56
<a href="/login" class="block text-center text-sm rounded py-2 px-2 bg-foam/20 text-foam">Log In with OIDC</a>
57
57
</main>
+9
-5
views/index_templ.go
+9
-5
views/index_templ.go
···
1
1
// Code generated by templ - DO NOT EDIT.
2
2
3
-
// templ: version: v0.3.833
3
+
// templ: version: v0.3.943
4
4
package views
5
5
6
6
//lint:file-ignore SA4006 This context is only used if a nested component is present.
···
44
44
templ_7745c5c3_Var1 = templ.NopComponent
45
45
}
46
46
ctx = templ.ClearChildren(ctx)
47
-
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<li class=\"col-span-1 grid grid-cols-subgrid\"><a class=\"aspect-square bg-surface p-4 rounded-lg text-sm flex flex-col justify-between leading-none\" href=\"")
47
+
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<li class=\"col-span-1 grid grid-cols-subgrid\"><a class=\"aspect-square bg-surface p-4 rounded-lg text-sm flex flex-col justify-between leading-none border border-muted/20\" href=\"")
48
48
if templ_7745c5c3_Err != nil {
49
49
return templ_7745c5c3_Err
50
50
}
51
-
var templ_7745c5c3_Var2 templ.SafeURL = templ.URL(url)
52
-
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
51
+
var templ_7745c5c3_Var2 templ.SafeURL
52
+
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinURLErrs(templ.URL(url))
53
+
if templ_7745c5c3_Err != nil {
54
+
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/index.templ`, Line: 22, Col: 24}
55
+
}
56
+
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
53
57
if templ_7745c5c3_Err != nil {
54
58
return templ_7745c5c3_Err
55
59
}
···
180
184
}()
181
185
}
182
186
ctx = templ.InitializeContext(ctx)
183
-
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"w-screen h-screen flex items-center justify-center\"><main class=\"w-full max-w-xs bg-surface rounded-lg p-4\"><p class=\"mb-3 font-serif\">Can I see some ID, please?</p><a href=\"/login\" class=\"block text-center text-sm rounded py-2 px-2 bg-foam/20 text-foam\">Log In with OIDC</a></main></div>")
187
+
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"w-screen h-screen flex items-center justify-center\"><main class=\"w-full max-w-xs bg-surface rounded-lg p-4 border border-muted/20\"><p class=\"mb-3 font-serif\">Can I see some ID, please?</p><a href=\"/login\" class=\"block text-center text-sm rounded py-2 px-2 bg-foam/20 text-foam\">Log In with OIDC</a></main></div>")
184
188
if templ_7745c5c3_Err != nil {
185
189
return templ_7745c5c3_Err
186
190
}