Leire Aguirre commited on
Commit
a4f672b
·
1 Parent(s): 3cf77f9

move custom styles to style.css

Browse files
Files changed (2) hide show
  1. src/index.html +0 -73
  2. src/style.css +71 -0
src/index.html CHANGED
@@ -9,79 +9,6 @@
9
  <base target="_blank">
10
  <title>FineWeb: decanting the web for the finest text data at scale</title>
11
  <link rel="stylesheet" href="style.css">
12
- <style>
13
- #controls {
14
- display: grid;
15
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16
- column-gap: 10px;
17
- margin-bottom: 20px;
18
- max-width: 100%;
19
- container-type: inline-size;
20
- }
21
-
22
- #controls .cell {
23
- padding: 1px;
24
- box-sizing: border-box;
25
- }
26
-
27
- #controls .column-1 {
28
- display: flex;
29
- align-items: center;
30
- justify-content: space-between;
31
- }
32
-
33
- #controls .column-2 {
34
- display: flex;
35
- align-items: center;
36
- justify-content: space-between;
37
- }
38
- @container (max-width: 600px) {
39
- #controls .column-2 {
40
- order: 2;
41
- }
42
- }
43
-
44
- #controls label {
45
- text-align: right;
46
- padding-right: 10px;
47
- flex: 0 0 auto;
48
- width: 150px;
49
- line-height: 1.5em;
50
- font-size: 0.8em;
51
- }
52
-
53
- #controls input[type="range"] {
54
- width: 50%;
55
- margin: 0 10px;
56
- }
57
-
58
- #controls input[type="number"] {
59
- flex-shrink: 0;
60
- width: 60px;
61
- height: 24px;
62
- border: 1px solid var(--distill-gray-light);
63
- border-radius: 0.2rem;
64
- }
65
-
66
- #controls select {
67
- width: 100%;
68
- min-height: 28px;
69
- border: 1px solid var(--distill-gray-light);
70
- border-radius: 0.2rem;
71
- }
72
-
73
- #controls .column {
74
- display: contents;
75
- }
76
-
77
- #graph svg {
78
- font-family: sans-serif;
79
- }
80
-
81
- #graph svg rect {
82
- cursor: pointer;
83
- }
84
- </style>
85
  </head>
86
 
87
  <body>
 
9
  <base target="_blank">
10
  <title>FineWeb: decanting the web for the finest text data at scale</title>
11
  <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
 
14
  <body>
src/style.css CHANGED
@@ -261,3 +261,74 @@ d-contents nav > ul > li > a:hover {
261
  text-decoration: none;
262
  }
263
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  text-decoration: none;
262
  }
263
 
264
+ /* memory */
265
+ #controls {
266
+ display: grid;
267
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
268
+ column-gap: 10px;
269
+ margin-bottom: 20px;
270
+ max-width: 100%;
271
+ container-type: inline-size;
272
+ }
273
+
274
+ #controls .cell {
275
+ padding: 1px;
276
+ box-sizing: border-box;
277
+ }
278
+
279
+ #controls .column-1 {
280
+ display: flex;
281
+ align-items: center;
282
+ }
283
+
284
+ #controls .column-2 {
285
+ display: flex;
286
+ align-items: center;
287
+ }
288
+ @container (max-width: 600px) {
289
+ #controls .column-2 {
290
+ order: 2;
291
+ }
292
+ }
293
+
294
+ #controls label {
295
+ text-align: right;
296
+ padding-right: 10px;
297
+ flex: 0 0 auto;
298
+ width: 150px;
299
+ line-height: 1.5em;
300
+ font-size: 0.8em;
301
+ }
302
+
303
+ #controls input[type="range"] {
304
+ width: 50%;
305
+ margin: 0 10px;
306
+ }
307
+
308
+ #controls input[type="number"] {
309
+ flex-shrink: 0;
310
+ width: 60px;
311
+ height: 24px;
312
+ border: 1px solid var(--distill-gray-light);
313
+ border-radius: 0.2rem;
314
+ }
315
+
316
+ #controls select {
317
+ width: 100%;
318
+ min-height: 28px;
319
+ border: 1px solid var(--distill-gray-light);
320
+ border-radius: 0.2rem;
321
+ }
322
+
323
+ #controls .column {
324
+ display: contents;
325
+ }
326
+
327
+ #graph svg {
328
+ font-family: sans-serif;
329
+ }
330
+
331
+ #graph svg rect {
332
+ cursor: pointer;
333
+ }
334
+