ds-one 0.3.0-alpha.3 → 0.3.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/DS1/1-root/one.css +10 -12
  2. package/DS1/2-core/ds-button.ts +13 -31
  3. package/DS1/2-core/ds-cycle.ts +7 -14
  4. package/DS1/2-core/ds-text.ts +3 -7
  5. package/DS1/2-core/generated/ds-icon-map.ts +8 -0
  6. package/DS1/2-core/styles/ds-button.css +32 -40
  7. package/DS1/2-core/styles/ds-cycle.css +0 -9
  8. package/DS1/2-core/styles/ds-text.css +3 -2
  9. package/DS1/3-unit/styles/ds-row.css +1 -0
  10. package/DS1/4-page/ds-layout.ts +815 -616
  11. package/DS1/x-icon/exercise.svg +4 -0
  12. package/DS1/x-icon/life.svg +9 -0
  13. package/DS1/x-icon/school.svg +5 -0
  14. package/DS1/x-icon/work.svg +4 -0
  15. package/README.md +2 -2
  16. package/dist/2-core/ds-button.d.ts +7 -22
  17. package/dist/2-core/ds-button.d.ts.map +1 -1
  18. package/dist/2-core/ds-button.js +10 -25
  19. package/dist/2-core/ds-cycle.d.ts.map +1 -1
  20. package/dist/2-core/ds-cycle.js +7 -14
  21. package/dist/2-core/ds-text.d.ts +0 -6
  22. package/dist/2-core/ds-text.d.ts.map +1 -1
  23. package/dist/2-core/ds-text.js +3 -6
  24. package/dist/2-core/generated/ds-icon-map.d.ts +1 -1
  25. package/dist/2-core/generated/ds-icon-map.d.ts.map +1 -1
  26. package/dist/2-core/generated/ds-icon-map.js +8 -0
  27. package/dist/4-page/ds-layout.d.ts.map +1 -1
  28. package/dist/4-page/ds-layout.js +815 -616
  29. package/dist/ds-one.bundle.js +799 -623
  30. package/dist/ds-one.bundle.js.map +1 -1
  31. package/dist/ds-one.bundle.min.js +1283 -1090
  32. package/dist/ds-one.bundle.min.js.map +1 -1
  33. package/package.json +1 -1
package/dist/4-page/ds-layout.js CHANGED
@@ -14,40 +14,26 @@ export class Layout extends LitElement {
14
14
  const isApp = this.mode === "app";
15
15
  const isList = this.mode === "list";
16
16
  const isHome = this.mode === "home";
17
+ const isSettings = this.mode === "settings";
17
18
  return html `
18
19
  <slot></slot>
19
20
  ${isView
20
21
  ? html `
21
22
  <div class="view-overlay">
22
- ${isHome
23
+ ${isSettings
23
24
  ? html `
24
25
  <div class="view-area view-banner">
25
26
  <div class="grid-area-label">
26
27
  <ds-text text="banner"></ds-text>
27
28
  </div>
28
29
  </div>
29
- <div class="view-area view-header">
30
+ <div class="view-area view-settings">
30
31
  <div class="grid-area-label">
31
- <ds-text text="header"></ds-text>
32
- </div>
33
- </div>
34
- <div class="view-area view-message">
35
- <div class="grid-area-label">
36
- <ds-text text="message"></ds-text>
37
- </div>
38
- </div>
39
- <div class="view-area view-lists">
40
- <div class="grid-area-label">
41
- <ds-text text="lists"></ds-text>
42
- </div>
43
- </div>
44
- <div class="view-area view-footer">
45
- <div class="grid-area-label">
46
- <ds-text text="footer"></ds-text>
32
+ <ds-text text="settings"></ds-text>
47
33
  </div>
48
34
  </div>
49
35
  `
50
- : isList
36
+ : isHome
51
37
  ? html `
52
38
  <div class="view-area view-banner">
53
39
  <div class="grid-area-label">
@@ -59,13 +45,23 @@ export class Layout extends LitElement {
59
45
  <ds-text text="header"></ds-text>
60
46
  </div>
61
47
  </div>
62
- <div class="view-area view-board">
48
+ <div class="view-area view-message">
49
+ <div class="grid-area-label">
50
+ <ds-text text="message"></ds-text>
51
+ </div>
52
+ </div>
53
+ <div class="view-area view-lists">
63
54
  <div class="grid-area-label">
64
- <ds-text text="board"></ds-text>
55
+ <ds-text text="lists"></ds-text>
56
+ </div>
57
+ </div>
58
+ <div class="view-area view-footer">
59
+ <div class="grid-area-label">
60
+ <ds-text text="footer"></ds-text>
65
61
  </div>
66
62
  </div>
67
63
  `
68
- : isApp
64
+ : isList
69
65
  ? html `
70
66
  <div class="view-area view-banner">
71
67
  <div class="grid-area-label">
@@ -77,32 +73,32 @@ export class Layout extends LitElement {
77
73
  <ds-text text="header"></ds-text>
78
74
  </div>
79
75
  </div>
80
- <div class="view-area view-main">
81
- <div class="grid-area-label">
82
- <ds-text text="main"></ds-text>
83
- </div>
84
- </div>
85
- <div class="view-area view-page-dots">
76
+ <div class="view-area view-board">
86
77
  <div class="grid-area-label">
87
- <ds-text text="page-dots"></ds-text>
88
- </div>
89
- </div>
90
- <div class="view-area view-footer">
91
- <div class="grid-area-label">
92
- <ds-text text="footer"></ds-text>
78
+ <ds-text text="board"></ds-text>
93
79
  </div>
94
80
  </div>
95
81
  `
96
- : isCompany
82
+ : isApp
97
83
  ? html `
84
+ <div class="view-area view-banner">
85
+ <div class="grid-area-label">
86
+ <ds-text text="banner"></ds-text>
87
+ </div>
88
+ </div>
98
89
  <div class="view-area view-header">
99
90
  <div class="grid-area-label">
100
91
  <ds-text text="header"></ds-text>
101
92
  </div>
102
93
  </div>
103
- <div class="view-area view-content">
94
+ <div class="view-area view-main">
95
+ <div class="grid-area-label">
96
+ <ds-text text="main"></ds-text>
97
+ </div>
98
+ </div>
99
+ <div class="view-area view-page-dots">
104
100
  <div class="grid-area-label">
105
- <ds-text text="content"></ds-text>
101
+ <ds-text text="page-dots"></ds-text>
106
102
  </div>
107
103
  </div>
108
104
  <div class="view-area view-footer">
@@ -111,36 +107,16 @@ export class Layout extends LitElement {
111
107
  </div>
112
108
  </div>
113
109
  `
114
- : isPortfolio
110
+ : isCompany
115
111
  ? html `
116
- <div class="view-area view-square">
117
- <div class="grid-area-label">
118
- <ds-text text="square"></ds-text>
119
- </div>
120
- </div>
121
- <div class="view-area view-title">
122
- <div class="grid-area-label">
123
- <ds-text text="title"></ds-text>
124
- </div>
125
- </div>
126
112
  <div class="view-area view-header">
127
113
  <div class="grid-area-label">
128
114
  <ds-text text="header"></ds-text>
129
115
  </div>
130
116
  </div>
131
- <div class="view-area view-projects">
117
+ <div class="view-area view-content">
132
118
  <div class="grid-area-label">
133
- <ds-text text="projects"></ds-text>
134
- </div>
135
- </div>
136
- <div class="view-area view-bio">
137
- <div class="grid-area-label">
138
- <ds-text text="bio"></ds-text>
139
- </div>
140
- </div>
141
- <div class="view-area view-nav">
142
- <div class="grid-area-label">
143
- <ds-text text="nav"></ds-text>
119
+ <ds-text text="content"></ds-text>
144
120
  </div>
145
121
  </div>
146
122
  <div class="view-area view-footer">
@@ -149,7 +125,45 @@ export class Layout extends LitElement {
149
125
  </div>
150
126
  </div>
151
127
  `
152
- : ""}
128
+ : isPortfolio
129
+ ? html `
130
+ <div class="view-area view-square">
131
+ <div class="grid-area-label">
132
+ <ds-text text="square"></ds-text>
133
+ </div>
134
+ </div>
135
+ <div class="view-area view-title">
136
+ <div class="grid-area-label">
137
+ <ds-text text="title"></ds-text>
138
+ </div>
139
+ </div>
140
+ <div class="view-area view-header">
141
+ <div class="grid-area-label">
142
+ <ds-text text="header"></ds-text>
143
+ </div>
144
+ </div>
145
+ <div class="view-area view-projects">
146
+ <div class="grid-area-label">
147
+ <ds-text text="projects"></ds-text>
148
+ </div>
149
+ </div>
150
+ <div class="view-area view-bio">
151
+ <div class="grid-area-label">
152
+ <ds-text text="bio"></ds-text>
153
+ </div>
154
+ </div>
155
+ <div class="view-area view-nav">
156
+ <div class="grid-area-label">
157
+ <ds-text text="nav"></ds-text>
158
+ </div>
159
+ </div>
160
+ <div class="view-area view-footer">
161
+ <div class="grid-area-label">
162
+ <ds-text text="footer"></ds-text>
163
+ </div>
164
+ </div>
165
+ `
166
+ : ""}
153
167
  </div>
154
168
  `
155
169
  : ""}
@@ -164,568 +178,753 @@ Layout.properties = {
164
178
  Layout.styles = [
165
179
  unsafeCSS(styles),
166
180
  css `
167
- :host {
168
- display: grid;
169
- position: relative;
170
- width: 100%;
171
- }
172
-
173
- slot {
174
- display: contents;
175
- }
176
-
177
- :host([mode="portfolio"]) {
178
- --portfolio-cols: 120px 480px 40px;
179
- --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
180
- --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
181
- ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
182
- --portfolio-overlay-cols: 120px 480px;
183
- --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
184
- ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
185
- grid-template-columns: var(--portfolio-cols);
186
- grid-template-rows: var(--portfolio-rows);
187
- grid-template-areas: var(--portfolio-areas);
188
- min-height: 600px;
189
- background-color: rgba(165, 165, 165, 0.03);
190
- max-width: 640px;
191
- margin: 0;
192
- }
193
-
194
- :host([mode="portfolio"]) .view-overlay {
195
- grid-template-columns: var(--portfolio-overlay-cols);
196
- grid-template-rows: var(--portfolio-rows);
197
- grid-template-areas: var(--portfolio-overlay-areas);
198
- }
199
-
200
- :host([mode="company"]) {
201
- --company-cols: auto 400px auto;
202
- --company-rows: 80px 20px 20px 120px 20px 120px;
203
- --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
204
- ". footer .";
205
- grid-template-columns: var(--company-cols);
206
- grid-template-rows: var(--company-rows);
207
- grid-template-areas: var(--company-areas);
208
- gap: 0;
209
- max-width: 100%;
210
- }
211
-
212
- :host([mode="company"]) .view-overlay {
213
- grid-template-columns: var(--company-cols);
214
- grid-template-rows: var(--company-rows);
215
- grid-template-areas: var(--company-areas);
216
- gap: 0;
217
- }
218
-
219
- :host([align="left"]),
220
- :host([mode="portfolio"][align="left"]),
221
- :host([mode="company"][align="left"]),
222
- :host([mode="app"][align="left"]),
223
- :host([mode="list"][align="left"]),
224
- :host([mode="home"][align="left"]) {
225
- margin: 0;
226
- justify-self: start;
227
- }
228
-
229
- :host([align="center"]),
230
- :host([mode="portfolio"][align="center"]),
231
- :host([mode="company"][align="center"]),
232
- :host([mode="app"][align="center"]),
233
- :host([mode="list"][align="center"]),
234
- :host([mode="home"][align="center"]) {
235
- margin: 0 auto;
236
- justify-self: center;
237
- }
238
-
239
- :host([align="right"]),
240
- :host([mode="portfolio"][align="right"]),
241
- :host([mode="company"][align="right"]),
242
- :host([mode="app"][align="right"]),
243
- :host([mode="list"][align="right"]),
244
- :host([mode="home"][align="right"]) {
245
- margin: 0 0 0 auto;
246
- justify-self: end;
247
- }
248
-
249
- /* App mode - Base */
250
- :host([mode="app"]) {
251
- --app-cols: 100%;
252
- --app-overlay-cols: 100%;
253
- grid-template-columns: var(--app-cols);
254
- grid-template-rows: var(--app-layout);
255
- grid-template-areas: var(--app-layout-areas);
256
- min-height: 100vh;
257
- background-color: transparent;
258
- width: calc(240px * var(--sf, 1));
259
- max-width: calc(240px * var(--sf, 1));
260
- margin: 0 auto;
261
- }
262
-
263
- :host([mode="app"]) .view-overlay {
264
- grid-template-columns: var(--app-overlay-cols);
265
- grid-template-rows: var(--app-layout);
266
- grid-template-areas: var(--app-layout-areas);
267
- }
268
-
269
- /* List mode - Base */
270
- :host([mode="list"]) {
271
- --list-cols: 100%;
272
- --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
273
- calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
274
- --list-areas: "banner" "." "header" "board";
275
- --list-overlay-cols: 100%;
276
- --list-overlay-rows: calc(var(--unit) * var(--sf))
277
- calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
278
- calc(var(--twenty) * var(--sf));
279
- --list-overlay-areas: "banner" "." "header" "board";
280
- grid-template-columns: var(--list-cols);
281
- grid-template-rows: var(--list-rows);
282
- grid-template-areas: var(--list-areas);
283
- min-height: 100vh;
284
- background-color: transparent;
285
- width: calc(240px * var(--sf, 1));
286
- max-width: calc(240px * var(--sf, 1));
287
- margin: 0 auto;
288
- }
289
-
290
- :host([mode="list"]) .view-overlay {
291
- grid-template-columns: var(--list-overlay-cols);
292
- grid-template-rows: var(--list-overlay-rows);
293
- grid-template-areas: var(--list-overlay-areas);
294
- }
295
-
296
- /* Home mode - Base */
297
- :host([mode="home"]) {
298
- --home-cols: 100%;
299
- --home-areas: "banner" "." "header" "." "message" "lists" "." "footer";
300
- --home-overlay-cols: 100%;
301
- --home-overlay-areas: "banner" "." "header" "." "message" "lists" "."
302
- "footer";
303
- grid-template-columns: var(--home-cols);
304
- grid-template-rows: var(--home-layout);
305
- grid-template-areas: var(--home-areas);
306
- min-height: 100vh;
307
- background-color: transparent;
308
- width: calc(240px * var(--sf, 1));
309
- max-width: calc(240px * var(--sf, 1));
310
- margin: 0 auto;
311
- }
312
-
313
- :host([mode="home"]) .view-overlay {
314
- grid-template-columns: var(--home-overlay-cols);
315
- grid-template-rows: var(--home-layout);
316
- grid-template-areas: var(--home-overlay-areas);
317
- }
318
-
319
- .view-overlay {
320
- position: absolute;
321
- margin-left: -1px;
322
- top: 0;
323
- left: 0;
324
- right: 0;
325
- bottom: 0;
326
- pointer-events: none;
327
- z-index: 1000;
328
- display: grid;
329
- }
330
-
331
- .view-area {
332
- display: flex;
333
- width: calc(240px * var(--sf, 1));
334
- height: 100%;
335
- align-items: center;
336
- justify-content: center;
337
- font-family: var(--typeface-regular);
338
- font-size: calc(var(--type-size-default) * var(--05));
339
- color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
340
- background-color: color-mix(
341
- in srgb,
342
- var(--accent-color) 25%,
343
- transparent
344
- );
345
- opacity: 1;
346
- position: relative;
347
- }
348
-
349
- .grid-area-label {
350
- position: absolute;
351
- top: calc(-20px * var(--sf, 1));
352
- left: 0;
353
- height: calc(20px * var(--sf, 1));
354
- width: fit-content;
355
- display: inline-flex;
356
- align-items: center;
357
- justify-content: center;
358
- padding: 0 calc(4px * var(--sf, 1));
359
- border-radius: calc(2px * var(--sf, 1));
360
- z-index: 10000;
361
- pointer-events: none;
362
- white-space: nowrap;
363
- }
364
-
365
- /* Banner label stays inside the area (first item) */
366
- :host([mode="app"]) .view-area.view-banner .grid-area-label,
367
- :host([mode="list"]) .view-area.view-banner .grid-area-label,
368
- :host([mode="home"]) .view-area.view-banner .grid-area-label,
369
- :host([mode="company"]) .view-area.view-header .grid-area-label,
370
- :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
371
- top: 0;
372
- }
373
-
374
- .grid-area-label ds-text {
375
- font-size: calc(11px * var(--sf, 1));
376
- line-height: 1;
377
- color: white;
378
- text-transform: lowercase;
379
- }
380
-
381
- :host([mode="portfolio"]) .view-area:nth-of-type(1) {
382
- background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
383
- }
384
- :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
385
- background-image:
386
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
387
- linear-gradient(
388
- 90deg,
389
- color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
390
- color-mix(in srgb, var(--tuned-red) 70%, black) 100%
391
- );
392
- }
393
- :host([mode="portfolio"]) .view-area:nth-of-type(2) {
394
- border-color: var(--sharp-blue);
395
- }
396
- :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
397
- background-image:
398
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
399
- linear-gradient(
400
- 90deg,
401
- color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
402
- color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
403
- );
404
- }
405
- :host([mode="portfolio"]) .view-area:nth-of-type(3) {
406
- border-color: var(--yellow);
407
- }
408
- :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
409
- background-image:
410
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
411
- linear-gradient(
412
- 90deg,
413
- color-mix(in srgb, var(--yellow) 70%, black) 0%,
414
- color-mix(in srgb, var(--yellow) 70%, black) 100%
415
- );
416
- }
417
- :host([mode="portfolio"]) .view-area:nth-of-type(4) {
418
- border-color: var(--apple-green);
419
- }
420
- :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
421
- background-image:
422
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
423
- linear-gradient(
424
- 90deg,
425
- color-mix(in srgb, var(--apple-green) 70%, black) 0%,
426
- color-mix(in srgb, var(--apple-green) 70%, black) 100%
427
- );
428
- }
429
- :host([mode="portfolio"]) .view-area:nth-of-type(5) {
430
- border-color: var(--pink);
431
- }
432
- :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
433
- background-image:
434
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
435
- linear-gradient(
436
- 90deg,
437
- color-mix(in srgb, var(--pink) 70%, black) 0%,
438
- color-mix(in srgb, var(--pink) 70%, black) 100%
439
- );
440
- }
441
- :host([mode="portfolio"]) .view-area:nth-of-type(6) {
442
- border-color: var(--orange);
443
- }
444
- :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
445
- background-image:
446
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
447
- linear-gradient(
448
- 90deg,
449
- color-mix(in srgb, var(--orange) 70%, black) 0%,
450
- color-mix(in srgb, var(--orange) 70%, black) 100%
451
- );
452
- }
453
- :host([mode="portfolio"]) .view-area:nth-of-type(7) {
454
- border-color: var(--zenith-blue);
455
- }
456
- :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
457
- background-image:
458
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
459
- linear-gradient(
460
- 90deg,
461
- color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
462
- color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
463
- );
464
- }
465
-
466
- :host([mode="company"]) .view-area:nth-of-type(1) {
467
- border-color: var(--tuned-red);
468
- }
469
- :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
470
- background-image:
471
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
472
- linear-gradient(
473
- 90deg,
474
- color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
475
- color-mix(in srgb, var(--tuned-red) 70%, black) 100%
476
- );
477
- }
478
- :host([mode="company"]) .view-area:nth-of-type(2) {
479
- border-color: var(--sharp-blue);
480
- }
481
- :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
482
- background-image:
483
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
484
- linear-gradient(
485
- 90deg,
486
- color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
487
- color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
488
- );
489
- }
490
- :host([mode="company"]) .view-area:nth-of-type(3) {
491
- border-color: var(--yellow);
492
- }
493
- :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
494
- background-image:
495
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
496
- linear-gradient(
497
- 90deg,
498
- color-mix(in srgb, var(--yellow) 70%, black) 0%,
499
- color-mix(in srgb, var(--yellow) 70%, black) 100%
181
+ :host {
182
+ display: grid;
183
+ position: relative;
184
+ width: 100%;
185
+ }
186
+
187
+ slot {
188
+ display: contents;
189
+ }
190
+
191
+ :host([mode="portfolio"]) {
192
+ --portfolio-cols: 120px 480px 40px;
193
+ --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px
194
+ 120px;
195
+ --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
196
+ ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
197
+ --portfolio-overlay-cols: 120px 480px;
198
+ --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
199
+ ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
200
+ grid-template-columns: var(--portfolio-cols);
201
+ grid-template-rows: var(--portfolio-rows);
202
+ grid-template-areas: var(--portfolio-areas);
203
+ min-height: 600px;
204
+ background-color: rgba(165, 165, 165, 0.03);
205
+ max-width: 640px;
206
+ margin: 0;
207
+ }
208
+
209
+ :host([mode="portfolio"]) .view-overlay {
210
+ grid-template-columns: var(--portfolio-overlay-cols);
211
+ grid-template-rows: var(--portfolio-rows);
212
+ grid-template-areas: var(--portfolio-overlay-areas);
213
+ }
214
+
215
+ :host([mode="company"]) {
216
+ --company-cols: auto 400px auto;
217
+ --company-rows: 80px 20px 20px 120px 20px 120px;
218
+ --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
219
+ ". footer .";
220
+ grid-template-columns: var(--company-cols);
221
+ grid-template-rows: var(--company-rows);
222
+ grid-template-areas: var(--company-areas);
223
+ gap: 0;
224
+ max-width: 100%;
225
+ }
226
+
227
+ :host([mode="company"]) .view-overlay {
228
+ grid-template-columns: var(--company-cols);
229
+ grid-template-rows: var(--company-rows);
230
+ grid-template-areas: var(--company-areas);
231
+ gap: 0;
232
+ }
233
+
234
+ :host([align="left"]),
235
+ :host([mode="portfolio"][align="left"]),
236
+ :host([mode="company"][align="left"]),
237
+ :host([mode="app"][align="left"]),
238
+ :host([mode="list"][align="left"]),
239
+ :host([mode="home"][align="left"]),
240
+ :host([mode="settings"][align="left"]) {
241
+ margin: 0;
242
+ justify-self: start;
243
+ }
244
+
245
+ :host([align="center"]),
246
+ :host([mode="portfolio"][align="center"]),
247
+ :host([mode="company"][align="center"]),
248
+ :host([mode="app"][align="center"]),
249
+ :host([mode="list"][align="center"]),
250
+ :host([mode="home"][align="center"]),
251
+ :host([mode="settings"][align="center"]) {
252
+ margin: 0 auto;
253
+ justify-self: center;
254
+ }
255
+
256
+ :host([align="right"]),
257
+ :host([mode="portfolio"][align="right"]),
258
+ :host([mode="company"][align="right"]),
259
+ :host([mode="app"][align="right"]),
260
+ :host([mode="list"][align="right"]),
261
+ :host([mode="home"][align="right"]),
262
+ :host([mode="settings"][align="right"]) {
263
+ margin: 0 0 0 auto;
264
+ justify-self: end;
265
+ }
266
+
267
+ /* App mode - Base */
268
+ :host([mode="app"]) {
269
+ --app-cols: 100%;
270
+ --app-overlay-cols: 100%;
271
+ grid-template-columns: var(--app-cols);
272
+ grid-template-rows: var(--app-layout);
273
+ grid-template-areas: var(--app-layout-areas);
274
+ min-height: 100vh;
275
+ background-color: transparent;
276
+ width: calc(240px * var(--sf, 1));
277
+ max-width: calc(240px * var(--sf, 1));
278
+ margin: 0 auto;
279
+ }
280
+
281
+ :host([mode="app"]) .view-overlay {
282
+ grid-template-columns: var(--app-overlay-cols);
283
+ grid-template-rows: var(--app-layout);
284
+ grid-template-areas: var(--app-layout-areas);
285
+ }
286
+
287
+ /* List mode - Base */
288
+ :host([mode="list"]) {
289
+ --list-cols: 100%;
290
+ --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
291
+ calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
292
+ --list-areas: "banner" "." "header" "board";
293
+ --list-overlay-cols: 100%;
294
+ --list-overlay-rows: calc(var(--unit) * var(--sf))
295
+ calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
296
+ calc(var(--twenty) * var(--sf));
297
+ --list-overlay-areas: "banner" "." "header" "board";
298
+ grid-template-columns: var(--list-cols);
299
+ grid-template-rows: var(--list-rows);
300
+ grid-template-areas: var(--list-areas);
301
+ min-height: 100vh;
302
+ background-color: transparent;
303
+ width: calc(240px * var(--sf, 1));
304
+ max-width: calc(240px * var(--sf, 1));
305
+ margin: 0 auto;
306
+ }
307
+
308
+ :host([mode="list"]) .view-overlay {
309
+ grid-template-columns: var(--list-overlay-cols);
310
+ grid-template-rows: var(--list-overlay-rows);
311
+ grid-template-areas: var(--list-overlay-areas);
312
+ }
313
+
314
+ /* Home mode - Base */
315
+ :host([mode="home"]) {
316
+ --home-cols: 100%;
317
+ --home-areas: "banner" "." "header" "." "lists";
318
+ --home-overlay-cols: 100%;
319
+ --home-overlay-areas: "banner" "." "header" "." "lists";
320
+ grid-template-columns: var(--home-cols);
321
+ grid-template-rows: var(--home-layout);
322
+ grid-template-areas: var(--home-areas);
323
+ min-height: 100vh;
324
+ background-color: transparent;
325
+ width: calc(240px * var(--sf, 1));
326
+ max-width: calc(240px * var(--sf, 1));
327
+ margin: 0 auto;
328
+ }
329
+
330
+ :host([mode="home"]) .view-overlay {
331
+ grid-template-columns: var(--home-overlay-cols);
332
+ grid-template-rows: var(--home-layout);
333
+ grid-template-areas: var(--home-overlay-areas);
334
+ }
335
+
336
+ /* Settings mode - Base */
337
+ :host([mode="settings"]) {
338
+ --settings-cols: 100%;
339
+ --settings-overlay-cols: 100%;
340
+ grid-template-columns: var(--settings-cols);
341
+ grid-template-rows: var(--settings-layout);
342
+ grid-template-areas: var(--settings-layout-areas);
343
+ min-height: 100vh;
344
+ background-color: transparent;
345
+ width: calc(240px * var(--sf, 1));
346
+ max-width: calc(240px * var(--sf, 1));
347
+ margin: 0 auto;
348
+ }
349
+
350
+ :host([mode="settings"]) .view-overlay {
351
+ grid-template-columns: var(--settings-overlay-cols);
352
+ grid-template-rows: var(--settings-layout);
353
+ grid-template-areas: var(--settings-layout-areas);
354
+ }
355
+
356
+ .view-overlay {
357
+ position: absolute;
358
+ margin-left: -1px;
359
+ top: 0;
360
+ left: 0;
361
+ right: 0;
362
+ bottom: 0;
363
+ pointer-events: none;
364
+ z-index: 1000;
365
+ display: grid;
366
+ }
367
+
368
+ .view-area {
369
+ display: flex;
370
+ width: calc(240px * var(--sf, 1));
371
+ height: 100%;
372
+ align-items: center;
373
+ justify-content: center;
374
+ font-family: var(--typeface-regular);
375
+ font-size: calc(var(--type-size-default) * var(--05));
376
+ color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
377
+ background-color: color-mix(
378
+ in srgb,
379
+ var(--accent-color) 25%,
380
+ transparent
500
381
  );
501
- }
502
-
503
- :host([mode="app"]) .view-area:nth-of-type(1) {
504
- background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
505
- }
506
- :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
507
- background-image:
508
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
509
- linear-gradient(
510
- 90deg,
511
- color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
512
- color-mix(in srgb, var(--tuned-red) 70%, black) 100%
382
+ opacity: 1;
383
+ position: relative;
384
+ }
385
+
386
+ .grid-area-label {
387
+ position: absolute;
388
+ top: calc(-20px * var(--sf, 1));
389
+ left: 0;
390
+ height: calc(20px * var(--sf, 1));
391
+ width: fit-content;
392
+ display: inline-flex;
393
+ align-items: center;
394
+ justify-content: center;
395
+ padding: 0 calc(4px * var(--sf, 1));
396
+ border-radius: calc(2px * var(--sf, 1));
397
+ z-index: 10000;
398
+ pointer-events: none;
399
+ white-space: nowrap;
400
+ }
401
+
402
+ /* Banner label stays inside the area (first item) */
403
+ :host([mode="app"]) .view-area.view-banner .grid-area-label,
404
+ :host([mode="list"]) .view-area.view-banner .grid-area-label,
405
+ :host([mode="home"]) .view-area.view-banner .grid-area-label,
406
+ :host([mode="settings"]) .view-area.view-banner .grid-area-label,
407
+ :host([mode="company"]) .view-area.view-header .grid-area-label,
408
+ :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
409
+ top: 0;
410
+ }
411
+
412
+ .grid-area-label ds-text {
413
+ font-size: calc(11px * var(--sf, 1));
414
+ line-height: 1;
415
+ color: white;
416
+ text-transform: lowercase;
417
+ }
418
+
419
+ :host([mode="portfolio"]) .view-area:nth-of-type(1) {
420
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
421
+ }
422
+ :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
423
+ background-image:
424
+ linear-gradient(
425
+ 90deg,
426
+ rgba(0, 0, 0, 0.2) 0%,
427
+ rgba(0, 0, 0, 0.2) 100%
428
+ ),
429
+ linear-gradient(
430
+ 90deg,
431
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
432
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
433
+ );
434
+ }
435
+ :host([mode="portfolio"]) .view-area:nth-of-type(2) {
436
+ border-color: var(--sharp-blue);
437
+ }
438
+ :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
439
+ background-image:
440
+ linear-gradient(
441
+ 90deg,
442
+ rgba(0, 0, 0, 0.2) 0%,
443
+ rgba(0, 0, 0, 0.2) 100%
444
+ ),
445
+ linear-gradient(
446
+ 90deg,
447
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
448
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
449
+ );
450
+ }
451
+ :host([mode="portfolio"]) .view-area:nth-of-type(3) {
452
+ border-color: var(--yellow);
453
+ }
454
+ :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
455
+ background-image:
456
+ linear-gradient(
457
+ 90deg,
458
+ rgba(0, 0, 0, 0.2) 0%,
459
+ rgba(0, 0, 0, 0.2) 100%
460
+ ),
461
+ linear-gradient(
462
+ 90deg,
463
+ color-mix(in srgb, var(--yellow) 70%, black) 0%,
464
+ color-mix(in srgb, var(--yellow) 70%, black) 100%
465
+ );
466
+ }
467
+ :host([mode="portfolio"]) .view-area:nth-of-type(4) {
468
+ border-color: var(--apple-green);
469
+ }
470
+ :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
471
+ background-image:
472
+ linear-gradient(
473
+ 90deg,
474
+ rgba(0, 0, 0, 0.2) 0%,
475
+ rgba(0, 0, 0, 0.2) 100%
476
+ ),
477
+ linear-gradient(
478
+ 90deg,
479
+ color-mix(in srgb, var(--apple-green) 70%, black) 0%,
480
+ color-mix(in srgb, var(--apple-green) 70%, black) 100%
481
+ );
482
+ }
483
+ :host([mode="portfolio"]) .view-area:nth-of-type(5) {
484
+ border-color: var(--pink);
485
+ }
486
+ :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
487
+ background-image:
488
+ linear-gradient(
489
+ 90deg,
490
+ rgba(0, 0, 0, 0.2) 0%,
491
+ rgba(0, 0, 0, 0.2) 100%
492
+ ),
493
+ linear-gradient(
494
+ 90deg,
495
+ color-mix(in srgb, var(--pink) 70%, black) 0%,
496
+ color-mix(in srgb, var(--pink) 70%, black) 100%
497
+ );
498
+ }
499
+ :host([mode="portfolio"]) .view-area:nth-of-type(6) {
500
+ border-color: var(--orange);
501
+ }
502
+ :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
503
+ background-image:
504
+ linear-gradient(
505
+ 90deg,
506
+ rgba(0, 0, 0, 0.2) 0%,
507
+ rgba(0, 0, 0, 0.2) 100%
508
+ ),
509
+ linear-gradient(
510
+ 90deg,
511
+ color-mix(in srgb, var(--orange) 70%, black) 0%,
512
+ color-mix(in srgb, var(--orange) 70%, black) 100%
513
+ );
514
+ }
515
+ :host([mode="portfolio"]) .view-area:nth-of-type(7) {
516
+ border-color: var(--zenith-blue);
517
+ }
518
+ :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
519
+ background-image:
520
+ linear-gradient(
521
+ 90deg,
522
+ rgba(0, 0, 0, 0.2) 0%,
523
+ rgba(0, 0, 0, 0.2) 100%
524
+ ),
525
+ linear-gradient(
526
+ 90deg,
527
+ color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
528
+ color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
529
+ );
530
+ }
531
+
532
+ :host([mode="company"]) .view-area:nth-of-type(1) {
533
+ border-color: var(--tuned-red);
534
+ }
535
+ :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
536
+ background-image:
537
+ linear-gradient(
538
+ 90deg,
539
+ rgba(0, 0, 0, 0.2) 0%,
540
+ rgba(0, 0, 0, 0.2) 100%
541
+ ),
542
+ linear-gradient(
543
+ 90deg,
544
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
545
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
546
+ );
547
+ }
548
+ :host([mode="company"]) .view-area:nth-of-type(2) {
549
+ border-color: var(--sharp-blue);
550
+ }
551
+ :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
552
+ background-image:
553
+ linear-gradient(
554
+ 90deg,
555
+ rgba(0, 0, 0, 0.2) 0%,
556
+ rgba(0, 0, 0, 0.2) 100%
557
+ ),
558
+ linear-gradient(
559
+ 90deg,
560
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
561
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
562
+ );
563
+ }
564
+ :host([mode="company"]) .view-area:nth-of-type(3) {
565
+ border-color: var(--yellow);
566
+ }
567
+ :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
568
+ background-image:
569
+ linear-gradient(
570
+ 90deg,
571
+ rgba(0, 0, 0, 0.2) 0%,
572
+ rgba(0, 0, 0, 0.2) 100%
573
+ ),
574
+ linear-gradient(
575
+ 90deg,
576
+ color-mix(in srgb, var(--yellow) 70%, black) 0%,
577
+ color-mix(in srgb, var(--yellow) 70%, black) 100%
578
+ );
579
+ }
580
+
581
+ :host([mode="app"]) .view-area:nth-of-type(1) {
582
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
583
+ }
584
+ :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
585
+ background-image:
586
+ linear-gradient(
587
+ 90deg,
588
+ rgba(0, 0, 0, 0.2) 0%,
589
+ rgba(0, 0, 0, 0.2) 100%
590
+ ),
591
+ linear-gradient(
592
+ 90deg,
593
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
594
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
595
+ );
596
+ }
597
+ :host([mode="app"]) .view-area:nth-of-type(2) {
598
+ background-color: color-mix(
599
+ in srgb,
600
+ var(--sharp-blue) 25%,
601
+ transparent
513
602
  );
514
- }
515
- :host([mode="app"]) .view-area:nth-of-type(2) {
516
- background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
517
- }
518
- :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
519
- background-image:
520
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
521
- linear-gradient(
522
- 90deg,
523
- color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
524
- color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
603
+ }
604
+ :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
605
+ background-image:
606
+ linear-gradient(
607
+ 90deg,
608
+ rgba(0, 0, 0, 0.2) 0%,
609
+ rgba(0, 0, 0, 0.2) 100%
610
+ ),
611
+ linear-gradient(
612
+ 90deg,
613
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
614
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
615
+ );
616
+ }
617
+ :host([mode="app"]) .view-area:nth-of-type(3) {
618
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
619
+ }
620
+ :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
621
+ background-image:
622
+ linear-gradient(
623
+ 90deg,
624
+ rgba(0, 0, 0, 0.2) 0%,
625
+ rgba(0, 0, 0, 0.2) 100%
626
+ ),
627
+ linear-gradient(
628
+ 90deg,
629
+ color-mix(in srgb, var(--yellow) 70%, black) 0%,
630
+ color-mix(in srgb, var(--yellow) 70%, black) 100%
631
+ );
632
+ }
633
+ :host([mode="app"]) .view-area:nth-of-type(4) {
634
+ background-color: color-mix(
635
+ in srgb,
636
+ var(--apple-green) 25%,
637
+ transparent
525
638
  );
526
- }
527
- :host([mode="app"]) .view-area:nth-of-type(3) {
528
- background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
529
- }
530
- :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
531
- background-image:
532
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
533
- linear-gradient(
534
- 90deg,
535
- color-mix(in srgb, var(--yellow) 70%, black) 0%,
536
- color-mix(in srgb, var(--yellow) 70%, black) 100%
639
+ }
640
+ :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
641
+ background-image:
642
+ linear-gradient(
643
+ 90deg,
644
+ rgba(0, 0, 0, 0.2) 0%,
645
+ rgba(0, 0, 0, 0.2) 100%
646
+ ),
647
+ linear-gradient(
648
+ 90deg,
649
+ color-mix(in srgb, var(--apple-green) 70%, black) 0%,
650
+ color-mix(in srgb, var(--apple-green) 70%, black) 100%
651
+ );
652
+ }
653
+ :host([mode="app"]) .view-area:nth-of-type(5) {
654
+ background-color: color-mix(in srgb, var(--pink) 25%, transparent);
655
+ }
656
+ :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
657
+ background-image:
658
+ linear-gradient(
659
+ 90deg,
660
+ rgba(0, 0, 0, 0.2) 0%,
661
+ rgba(0, 0, 0, 0.2) 100%
662
+ ),
663
+ linear-gradient(
664
+ 90deg,
665
+ color-mix(in srgb, var(--pink) 70%, black) 0%,
666
+ color-mix(in srgb, var(--pink) 70%, black) 100%
667
+ );
668
+ }
669
+
670
+ :host([mode="list"]) .view-area:nth-of-type(1) {
671
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
672
+ }
673
+ :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
674
+ background-image:
675
+ linear-gradient(
676
+ 90deg,
677
+ rgba(0, 0, 0, 0.2) 0%,
678
+ rgba(0, 0, 0, 0.2) 100%
679
+ ),
680
+ linear-gradient(
681
+ 90deg,
682
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
683
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
684
+ );
685
+ }
686
+ :host([mode="list"]) .view-area:nth-of-type(2) {
687
+ background-color: color-mix(
688
+ in srgb,
689
+ var(--sharp-blue) 25%,
690
+ transparent
537
691
  );
538
- }
539
- :host([mode="app"]) .view-area:nth-of-type(4) {
540
- background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
541
- }
542
- :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
543
- background-image:
544
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
545
- linear-gradient(
546
- 90deg,
547
- color-mix(in srgb, var(--apple-green) 70%, black) 0%,
548
- color-mix(in srgb, var(--apple-green) 70%, black) 100%
692
+ }
693
+ :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
694
+ background-image:
695
+ linear-gradient(
696
+ 90deg,
697
+ rgba(0, 0, 0, 0.2) 0%,
698
+ rgba(0, 0, 0, 0.2) 100%
699
+ ),
700
+ linear-gradient(
701
+ 90deg,
702
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
703
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
704
+ );
705
+ }
706
+ :host([mode="list"]) .view-area:nth-of-type(3) {
707
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
708
+ }
709
+ :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
710
+ background-image:
711
+ linear-gradient(
712
+ 90deg,
713
+ rgba(0, 0, 0, 0.2) 0%,
714
+ rgba(0, 0, 0, 0.2) 100%
715
+ ),
716
+ linear-gradient(
717
+ 90deg,
718
+ color-mix(in srgb, var(--yellow) 70%, black) 0%,
719
+ color-mix(in srgb, var(--yellow) 70%, black) 100%
720
+ );
721
+ }
722
+ :host([mode="list"]) .view-area:nth-of-type(4) {
723
+ background-color: color-mix(
724
+ in srgb,
725
+ var(--apple-green) 25%,
726
+ transparent
549
727
  );
550
- }
551
- :host([mode="app"]) .view-area:nth-of-type(5) {
552
- background-color: color-mix(in srgb, var(--pink) 25%, transparent);
553
- }
554
- :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
555
- background-image:
556
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
557
- linear-gradient(
558
- 90deg,
559
- color-mix(in srgb, var(--pink) 70%, black) 0%,
560
- color-mix(in srgb, var(--pink) 70%, black) 100%
728
+ }
729
+ :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
730
+ background-image:
731
+ linear-gradient(
732
+ 90deg,
733
+ rgba(0, 0, 0, 0.2) 0%,
734
+ rgba(0, 0, 0, 0.2) 100%
735
+ ),
736
+ linear-gradient(
737
+ 90deg,
738
+ color-mix(in srgb, var(--apple-green) 70%, black) 0%,
739
+ color-mix(in srgb, var(--apple-green) 70%, black) 100%
740
+ );
741
+ }
742
+
743
+ :host([mode="home"]) .view-area:nth-of-type(1) {
744
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
745
+ }
746
+ :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
747
+ background-image:
748
+ linear-gradient(
749
+ 90deg,
750
+ rgba(0, 0, 0, 0.2) 0%,
751
+ rgba(0, 0, 0, 0.2) 100%
752
+ ),
753
+ linear-gradient(
754
+ 90deg,
755
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
756
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
757
+ );
758
+ }
759
+ :host([mode="home"]) .view-area:nth-of-type(2) {
760
+ background-color: color-mix(
761
+ in srgb,
762
+ var(--sharp-blue) 25%,
763
+ transparent
561
764
  );
562
- }
563
-
564
- :host([mode="list"]) .view-area:nth-of-type(1) {
565
- background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
566
- }
567
- :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
568
- background-image:
569
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
570
- linear-gradient(
571
- 90deg,
572
- color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
573
- color-mix(in srgb, var(--tuned-red) 70%, black) 100%
574
- );
575
- }
576
- :host([mode="list"]) .view-area:nth-of-type(2) {
577
- background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
578
- }
579
- :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
580
- background-image:
581
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
582
- linear-gradient(
583
- 90deg,
584
- color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
585
- color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
765
+ }
766
+ :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
767
+ background-image:
768
+ linear-gradient(
769
+ 90deg,
770
+ rgba(0, 0, 0, 0.2) 0%,
771
+ rgba(0, 0, 0, 0.2) 100%
772
+ ),
773
+ linear-gradient(
774
+ 90deg,
775
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
776
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
777
+ );
778
+ }
779
+ :host([mode="home"]) .view-area:nth-of-type(3) {
780
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
781
+ }
782
+ :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
783
+ background-image:
784
+ linear-gradient(
785
+ 90deg,
786
+ rgba(0, 0, 0, 0.2) 0%,
787
+ rgba(0, 0, 0, 0.2) 100%
788
+ ),
789
+ linear-gradient(
790
+ 90deg,
791
+ color-mix(in srgb, var(--yellow) 70%, black) 0%,
792
+ color-mix(in srgb, var(--yellow) 70%, black) 100%
793
+ );
794
+ }
795
+ :host([mode="home"]) .view-area:nth-of-type(4) {
796
+ background-color: color-mix(
797
+ in srgb,
798
+ var(--apple-green) 25%,
799
+ transparent
586
800
  );
587
- }
588
- :host([mode="list"]) .view-area:nth-of-type(3) {
589
- background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
590
- }
591
- :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
592
- background-image:
593
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
594
- linear-gradient(
595
- 90deg,
596
- color-mix(in srgb, var(--yellow) 70%, black) 0%,
597
- color-mix(in srgb, var(--yellow) 70%, black) 100%
598
- );
599
- }
600
- :host([mode="list"]) .view-area:nth-of-type(4) {
601
- background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
602
- }
603
- :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
604
- background-image:
605
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
606
- linear-gradient(
607
- 90deg,
608
- color-mix(in srgb, var(--apple-green) 70%, black) 0%,
609
- color-mix(in srgb, var(--apple-green) 70%, black) 100%
801
+ }
802
+ :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
803
+ background-image:
804
+ linear-gradient(
805
+ 90deg,
806
+ rgba(0, 0, 0, 0.2) 0%,
807
+ rgba(0, 0, 0, 0.2) 100%
808
+ ),
809
+ linear-gradient(
810
+ 90deg,
811
+ color-mix(in srgb, var(--apple-green) 70%, black) 0%,
812
+ color-mix(in srgb, var(--apple-green) 70%, black) 100%
813
+ );
814
+ }
815
+ :host([mode="home"]) .view-area:nth-of-type(5) {
816
+ background-color: color-mix(in srgb, var(--pink) 25%, transparent);
817
+ }
818
+ :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
819
+ background-image:
820
+ linear-gradient(
821
+ 90deg,
822
+ rgba(0, 0, 0, 0.2) 0%,
823
+ rgba(0, 0, 0, 0.2) 100%
824
+ ),
825
+ linear-gradient(
826
+ 90deg,
827
+ color-mix(in srgb, var(--pink) 70%, black) 0%,
828
+ color-mix(in srgb, var(--pink) 70%, black) 100%
829
+ );
830
+ }
831
+
832
+ .view-square {
833
+ grid-area: square;
834
+ }
835
+
836
+ .view-title {
837
+ grid-area: title;
838
+ }
839
+
840
+ .view-header {
841
+ grid-area: header;
842
+ }
843
+
844
+ .view-projects {
845
+ grid-area: projects;
846
+ }
847
+
848
+ .view-bio {
849
+ grid-area: bio;
850
+ }
851
+
852
+ .view-nav {
853
+ grid-area: nav;
854
+ }
855
+
856
+ .view-footer {
857
+ grid-area: footer;
858
+ }
859
+
860
+ .view-content {
861
+ grid-area: content;
862
+ }
863
+
864
+ .view-banner {
865
+ grid-area: banner;
866
+ }
867
+
868
+ .view-main {
869
+ grid-area: main;
870
+ }
871
+
872
+ .view-page-dots {
873
+ grid-area: page-dots;
874
+ }
875
+
876
+ .view-board {
877
+ grid-area: board;
878
+ }
879
+
880
+ .view-message {
881
+ grid-area: message;
882
+ }
883
+
884
+ .view-lists {
885
+ grid-area: lists;
886
+ }
887
+
888
+ .view-settings {
889
+ grid-area: settings;
890
+ }
891
+
892
+ :host([mode="settings"]) .view-area:nth-of-type(1) {
893
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
894
+ }
895
+ :host([mode="settings"]) .view-area:nth-of-type(1) .grid-area-label {
896
+ background-image:
897
+ linear-gradient(
898
+ 90deg,
899
+ rgba(0, 0, 0, 0.2) 0%,
900
+ rgba(0, 0, 0, 0.2) 100%
901
+ ),
902
+ linear-gradient(
903
+ 90deg,
904
+ color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
905
+ color-mix(in srgb, var(--tuned-red) 70%, black) 100%
906
+ );
907
+ }
908
+ :host([mode="settings"]) .view-area:nth-of-type(2) {
909
+ background-color: color-mix(
910
+ in srgb,
911
+ var(--sharp-blue) 25%,
912
+ transparent
610
913
  );
611
- }
612
-
613
- :host([mode="home"]) .view-area:nth-of-type(1) {
614
- background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
615
- }
616
- :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
617
- background-image:
618
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
619
- linear-gradient(
620
- 90deg,
621
- color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
622
- color-mix(in srgb, var(--tuned-red) 70%, black) 100%
623
- );
624
- }
625
- :host([mode="home"]) .view-area:nth-of-type(2) {
626
- background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
627
- }
628
- :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
629
- background-image:
630
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
631
- linear-gradient(
632
- 90deg,
633
- color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
634
- color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
635
- );
636
- }
637
- :host([mode="home"]) .view-area:nth-of-type(3) {
638
- background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
639
- }
640
- :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
641
- background-image:
642
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
643
- linear-gradient(
644
- 90deg,
645
- color-mix(in srgb, var(--yellow) 70%, black) 0%,
646
- color-mix(in srgb, var(--yellow) 70%, black) 100%
647
- );
648
- }
649
- :host([mode="home"]) .view-area:nth-of-type(4) {
650
- background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
651
- }
652
- :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
653
- background-image:
654
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
655
- linear-gradient(
656
- 90deg,
657
- color-mix(in srgb, var(--apple-green) 70%, black) 0%,
658
- color-mix(in srgb, var(--apple-green) 70%, black) 100%
659
- );
660
- }
661
- :host([mode="home"]) .view-area:nth-of-type(5) {
662
- background-color: color-mix(in srgb, var(--pink) 25%, transparent);
663
- }
664
- :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
665
- background-image:
666
- linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
667
- linear-gradient(
668
- 90deg,
669
- color-mix(in srgb, var(--pink) 70%, black) 0%,
670
- color-mix(in srgb, var(--pink) 70%, black) 100%
671
- );
672
- }
673
-
674
- .view-square {
675
- grid-area: square;
676
- }
677
-
678
- .view-title {
679
- grid-area: title;
680
- }
681
-
682
- .view-header {
683
- grid-area: header;
684
- }
685
-
686
- .view-projects {
687
- grid-area: projects;
688
- }
689
-
690
- .view-bio {
691
- grid-area: bio;
692
- }
693
-
694
- .view-nav {
695
- grid-area: nav;
696
- }
697
-
698
- .view-footer {
699
- grid-area: footer;
700
- }
701
-
702
- .view-content {
703
- grid-area: content;
704
- }
705
-
706
- .view-banner {
707
- grid-area: banner;
708
- }
709
-
710
- .view-main {
711
- grid-area: main;
712
- }
713
-
714
- .view-page-dots {
715
- grid-area: page-dots;
716
- }
717
-
718
- .view-board {
719
- grid-area: board;
720
- }
721
-
722
- .view-message {
723
- grid-area: message;
724
- }
725
-
726
- .view-lists {
727
- grid-area: lists;
728
- }
729
- `
914
+ }
915
+ :host([mode="settings"]) .view-area:nth-of-type(2) .grid-area-label {
916
+ background-image:
917
+ linear-gradient(
918
+ 90deg,
919
+ rgba(0, 0, 0, 0.2) 0%,
920
+ rgba(0, 0, 0, 0.2) 100%
921
+ ),
922
+ linear-gradient(
923
+ 90deg,
924
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
925
+ color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
926
+ );
927
+ }
928
+ `,
730
929
  ];
731
930
  customElements.define("ds-layout", Layout);