Leire Aguirre
commited on
Commit
·
a4f672b
1
Parent(s):
3cf77f9
move custom styles to style.css
Browse files- src/index.html +0 -73
- 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 |
+
|