|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | | - <title>Notebook Catalog</title> |
| 5 | + <title>Example Explorer</title> |
6 | 6 | <script type="module"> |
7 | 7 | import "https://cdn.jsdelivr.net/npm/@eox/layout@0.5.1/dist/eox-layout.js"; |
8 | 8 | import "https://cdn.jsdelivr.net/npm/@eox/itemfilter@1.9.1/dist/eox-itemfilter.js"; |
9 | 9 | </script> |
10 | | - |
11 | | - <style> |
12 | | - body { |
13 | | - font-family: sans-serif; |
14 | | - padding: 2em; |
15 | | - } |
16 | | - |
17 | | - .tile { |
18 | | - border: 1px solid #ccc; |
19 | | - border-radius: 10px; |
20 | | - padding: 1em; |
21 | | - background: #f9f9f9; |
22 | | - display: flex; |
23 | | - flex-direction: column; |
24 | | - justify-content: space-between; |
25 | | - box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
26 | | - } |
27 | | - |
28 | | - .tile h3 { |
29 | | - margin-top: 0; |
30 | | - } |
31 | | - |
32 | | - .tiles { |
33 | | - display: grid; |
34 | | - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
35 | | - gap: 1.5em; |
36 | | - } |
37 | | - |
38 | | - .launch-button { |
39 | | - margin-top: auto; |
40 | | - padding: 0.5em 1em; |
41 | | - background-color: #007acc; |
42 | | - color: white; |
43 | | - border: none; |
44 | | - border-radius: 5px; |
45 | | - text-decoration: none; |
46 | | - text-align: center; |
47 | | - } |
48 | | - |
49 | | - .launch-button:hover { |
50 | | - background-color: #005fa3; |
51 | | - } |
52 | | - body { |
53 | | - margin: 0; |
54 | | - padding: 2rem; |
55 | | - display: flex; |
56 | | - justify-content: center; |
57 | | - background-color: #f5f5f5; |
58 | | - font-family: sans-serif; |
59 | | - } |
60 | | - |
61 | | - .center-box { |
62 | | - max-width: 900px; |
63 | | - width: 100%; |
64 | | - background: white; |
65 | | - padding: 2rem; |
66 | | - border-radius: 12px; |
67 | | - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); |
68 | | - } |
69 | | - </style> |
| 10 | + <link |
| 11 | + rel="stylesheet" |
| 12 | + href="https://cdn.jsdelivr.net/npm/@eox/ui/dist/style.min.css" |
| 13 | + /> |
70 | 14 | <script src="https://cdn.jsdelivr.net/npm/@luigi-project/client@2.21.1/luigi-client.js"></script> |
71 | 15 | </head> |
72 | | -<body> |
73 | | - <div class="center-box"> |
74 | | - <h1>Notebook Catalog</h1> |
| 16 | + |
| 17 | +<body class="light responsive large-padding"> |
| 18 | + <article class="surface-container-lowest large-padding"> |
| 19 | + <h4>Example Explorer</h1> |
75 | 20 | <eox-itemfilter |
| 21 | + class="large-margin" |
76 | 22 | id="catalog" |
77 | | - style="--card-gap: 10px; --card-width: 270px; --card-height: 200px; --card-border-radius: 8px;" |
| 23 | + style="--form-flex-direction: row; --card-gap: 10px; --card-width: 270px; --card-height: 200px; --card-border-radius: 8px;" |
78 | 24 | > |
79 | 25 | </eox-itemfilter> |
80 | | - </div> |
| 26 | + </article> |
81 | 27 |
|
82 | 28 | <script type="module"> |
83 | 29 | const el = document.getElementById('catalog'); |
|
0 commit comments