forked from duckdb/duckdb-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.scss
641 lines (613 loc) · 22.1 KB
/
home.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
---
---
/** DUCKDB HOME CSS **/
@import 'variables';
@import 'mixins';
//@import url(variables.css);
body.landing{
font-size: $fontSizep;
main{
margin-top: 70px;
}
/** GENERAL STYLES **/
h1{
font-size: $fontSizeh1;
font-weight: 500;
line-height: 1;
margin: 0;
}
h3{
font-size: $fontSizeh4;
line-height: 1.1;
font-weight: 500;
margin: 0;
}
section{
padding: 105px 15px;
div p:last-of-type{
margin-bottom: 25px;
}
}
.wrap{
max-width: $maxContentWidth;
margin: 0 auto;
}
.flexwrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.hidden{
display: none;
}
.window{
border-radius: 15px;
border: 1px solid #393939;
background: rgba(9, 9, 9, 0.50);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
.topbar{
border-radius: 15px 15px 0px 0px;
border-bottom: 1px solid #393939;
ul{
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 15px 20px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 5px;
margin: 0;
list-style: none;
gap: 10px;
li{
border-radius: 50px;
background: #2F2F2F;
padding: 10px 14px;
color: #919191;
font-size: 14px;
line-height: 1;
cursor: pointer;
-webkit-transition: background .2s, color .2s;
-o-transition: background .2s, color .2s;
transition: background .2s, color .2s;
&:hover, &.active{
background: #BCBCBC;
color: black;
}
}
}
}
.content{
padding: 20px;
font-family: "JetBrainsMono-Regular";
font-size: 14px;
position: relative;
.lines{
position: absolute;
top: 20px;
left: 12px;
color: #535353;
font-size: 14px;
line-height: 17px;
font-family: "JetBrainsMono-Regular";
pointer-events: none;
}
code{
font-size: 14px;
line-height: 17px;
font-family: "JetBrainsMono-Regular";
}
a{
color: inherit;
-webkit-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
a:hover{
color: $purple;
background: none!important;
}
pre{
margin: 0;
}
&.haslines{
padding-left: 45px;
}
}
.bottombar{
padding: 15px 20px;
border-top: 1px solid #393939;
span{
color: #3D3D3D;
font-size: 14px;
}
p{
margin: 0;
}
}
}
.accordion{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
>div{
width: calc(50% - 10px);
}
.head{
padding: 20px;
position: relative;
width: 100%;
cursor: pointer;
&::after{
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23EFEFEF'/%3E%3Cpath d='M23.8045 12.6287L15.1758 21.2574L6.54706 12.6287' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
content: "";
width: 30px;
height: 30px;
background-size: contain;
position: absolute;
display: block;
right: 20px;
top: 13px;
-webkit-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
h4{
max-width: calc(100% - 50px);
}
}
.content{
padding: 20px;
padding-top: 0;
display: none;
p{
font-size: $fontSize16;
}
p:first-child{
margin-top: 0;
}
p:last-of-type{
margin-bottom: 0;
}
}
.foldout{
background: #F9F9F9;
border-radius: 15px;
position: relative;
-webkit-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
cursor: pointer;
margin-bottom: 10px;
&:hover{
background: #F3F1FF;
.head::after{
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23DDD8FF'/%3E%3Cpath d='M23.8045 12.6287L15.1758 21.2574L6.54706 12.6287' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
}
}
.foldout.active .head::after{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
/** STYLE SELECT BOX ANYWAYS – SO IT IS COLORED DIRECTLY **/
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
padding: 0 2em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
z-index: 1;
font-weight: 500;
&::-ms-expand {
display: none;
}
outline: none;
}
select {
display: -ms-grid;
display: grid;
grid-template-areas: "select";
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
select,
&::after {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: select;
}
min-width: 15ch;
max-width: 30ch;
border: 1px solid $duckDByellow;
border-radius: 100px;
padding: 10px 14px;
font-size: 14px;
cursor: pointer;
line-height: 1.1;
color: black;
background-color: $duckDByellow;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
&:hover{
background-color: darken($duckDByellow, 5%);
}
// Custom arrow
&:not(.select--multiple)::after {
content: "";
-ms-grid-column-align: end;
justify-self: end;
width: 20px;
height: 20px;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.25' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4.60938 8.18164L10.0637 13.636L15.5181 8.18164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
}
}
/** NEW CUSTOM SELECT BOX WITH JS**/
$select-background: #c1b73d;
$select-width: 240px;
$select-height: 38px;
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
color: black;
min-width: $select-width;
//height: $select-height;
font-size: 14px;
line-height: 1;
font-weight: 500;
}
.select-styled {
position: relative;
display: inline-block;
background-color: $duckDByellow;
padding: 12px 45px 12px 20px;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
border-radius: 20px;
z-index: 710;
word-break: keep-all;
> span{
color: #beb343!important;
}
&:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.25' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4.60938 8.18164L10.0637 13.636L15.5181 8.18164' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A");
right: 10px;
top: 9px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
&:hover {
//background-color: $select-background;
}
&:active,
&.active {
&:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
}
.select-options {
display: none;
position: absolute;
top: calc(100% + 4px);
//right: 0;
//left: 0;
z-index: 700;
margin: 0;
list-style: none;
background-color: $duckDByellow;
border-radius: 20px;
padding: 8px;
//padding-top: calc(#{$select-height} / 2);
-webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
li {
word-break: keep-all;
margin: 2px 0;
padding: 8px 12px;
font-weight: 450;
-webkit-transition: all 0.15s ease-in;
-o-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
&:hover,
&.is-selected {
background: #F3E500;
border-radius: 50px;
}
&.is-selected {
font-weight: 500;
}
&[rel="hide"] {
display: none;
}
}
}
/** WELCOME SECTION **/
section.welcome{
color: white;
background-color: #161616;
background-image: url("data:image/svg+xml,%3Csvg width='1437' height='1440' viewBox='0 0 1437 1440' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2620_1918)'%3E%3Crect width='1436.79' height='1440' fill='%23161616'/%3E%3Cpath d='M1370.63 110.578C1381.62 77.3848 1392.61 44.1913 1436.79 0L1436.79 1440H0C6.54628 1431.78 14.1983 1423.2 23.2408 1414.15C67.4132 1369.96 100.593 1358.96 133.772 1347.96C166.951 1336.96 200.131 1325.97 244.303 1281.78C288.475 1237.58 299.468 1204.39 310.461 1171.2C321.455 1138 332.448 1104.81 376.62 1060.62C420.792 1016.43 453.972 1005.43 487.151 994.432C520.33 983.434 553.51 972.436 597.682 928.245C641.855 884.054 652.848 850.86 663.841 817.667C674.834 784.473 685.827 751.28 729.999 707.088C774.172 662.897 807.351 651.899 840.53 640.902C873.709 629.904 906.889 618.906 951.061 574.715C995.23 530.527 1006.22 497.342 1017.21 464.155C1028.2 430.962 1039.19 397.767 1083.38 353.558C1127.57 309.35 1160.76 298.347 1193.94 287.345C1227.12 276.344 1260.3 265.345 1304.47 221.157C1348.64 176.965 1359.63 143.772 1370.63 110.578Z' fill='%23212121'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2620_1918'%3E%3Crect width='1436.79' height='1440' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;
background-position: center center;
.flexwrap{
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
.duckdb{
width: calc(40%);
text-align: left;
p{
margin: 25px 0;
}
}
.window{
width: 550px;
}
.button.livedemo{
background: #BCBCBC;
color: black;
font-weight: 500;
}
}
}
/** FEATURES SECTION **/
section.whyduckdb{
background-image: url("data:image/svg+xml,%3Csvg width='360' height='1440' viewBox='0 0 360 1440' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2620_1994)'%3E%3Crect width='360' height='1440' fill='white'/%3E%3Cpath d='M360 160.288C315.006 160.288 292.514 148.968 270.021 137.647C247.524 126.324 225.025 115 180.009 115C134.994 115 112.488 126.324 89.9841 137.647C67.4851 148.967 44.9878 160.286 0 160.288V1440H360L360 160.288Z' fill='%23FBFAFF'/%3E%3Cpath d='M360 430C315.057 430.022 292.566 441.335 270.076 452.647C247.568 463.968 225.061 475.288 180.052 475.288C135.039 475.288 112.533 463.966 90.0264 452.644C67.5201 441.322 45.0127 430 0 430V1440H360V430Z' fill='%23F1EEFF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M360 790.288C315.006 790.288 292.514 778.968 270.021 767.647C247.524 756.324 225.025 745 180.009 745C134.994 745 112.488 756.324 89.9841 767.647C67.4851 778.967 44.9878 790.286 0 790.288V1440H360L360 790.288Z' fill='%23E8E4FF'/%3E%3Cpath d='M360.132 1060C315.101 1060 292.588 1071.32 270.076 1082.65C247.568 1093.97 225.061 1105.29 180.052 1105.29C135.039 1105.29 112.533 1093.97 90.0264 1082.64L90.026 1082.64L90.0255 1082.64C67.5192 1071.32 45.0127 1060 0 1060V1439H360.132V1060Z' fill='%23DFD9FF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2620_1994'%3E%3Crect width='360' height='1440' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
h1{
max-width: 600px;
}
.flexwrap{
margin-top: 70px;
row-gap: 20px;
.featurebox{
width: calc(33% - 10px);
padding: 30px 20px;
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 15px;
border: 1px solid #D9D2FF;
background: rgba(248, 248, 248, 0.60);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
.icon{
margin-bottom: 25px;
width: 45px;
height: 45px;
background-size: contain;
&.simple{
background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9998 43.8851C34.5343 43.8851 43.8849 34.5345 43.8849 23C43.8849 11.4655 34.5343 2.11499 22.9998 2.11499C11.4653 2.11499 2.11475 11.4655 2.11475 23C2.11475 34.5345 11.4653 43.8851 22.9998 43.8851Z' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8042 24.9262L20.0386 30.138L32.2525 17.9771' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
&.featurerich{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.38 26.437 7.137 7.138M31.989 12.69l-6.08 6.08M17.448 22.603h-4.23'/%3E%3Ccircle cx='22.207' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='37.011' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='8.988' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='8.46' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E");
}
&.speed{
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M43.885 23c0 11.535-9.35 20.885-20.885 20.885-11.535 0-20.885-9.35-20.885-20.885 0-11.534 9.35-20.885 20.885-20.885 11.534 0 20.885 9.35 20.885 20.885Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.866 23a2.867 2.867 0 1 1-5.733 0 2.867 2.867 0 0 1 5.733 0Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.047 25.457 8.19 8.19'/%3E%3C/svg%3E");
}
&.free{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.435 30.358c2.912-1.067 4.433-3.12 4.433-6.655s-3.021-6.65-6.796-6.656c-3.983-.006-6.988 3.108-6.94 6.656.048 3.547 1.764 5.908 4.51 6.761l-4.865 11.802C9.266 40.604 2.644 33.029 2.644 23.703 2.644 12.656 11.645 3.7 22.928 3.7c11.282 0 20.428 8.955 20.428 20.002 0 9.471-6.56 16.94-13.21 18.596l-4.71-11.941Z'/%3E%3C/svg%3E");
}
&.portable{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M27.929 8.46c1.145 0 2.077 1.173 2.077 2.616v2.577h-14.54v-2.577c0-1.442.93-2.616 2.076-2.616H27.93Z'/%3E%3Crect width='37.389' height='23.887' x='4.041' y='13.653' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' rx='5'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M34.371 14.903V36.29M11.1 36.29V14.903'/%3E%3C/svg%3E");
}
&.extensible{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-width='2.5' d='M29.085 35.656a5.109 5.109 0 0 1-1.71-1.58 4.99 4.99 0 0 1-.579-4.462 5.052 5.052 0 0 1 1.252-1.952 5.153 5.153 0 0 1 2.003-1.202 5.213 5.213 0 0 1 4.519.644 5.09 5.09 0 0 1 1.575 1.712c.096.17.233.315.397.423a1.261 1.261 0 0 0 1.616-.195l3.912-3.854c.925-.912.925-1.733.416-2.28l-6.133-6.043a.317.317 0 0 1 .139-.524 5.121 5.121 0 0 0 2.92-2.37 4.996 4.996 0 0 0 .482-3.696 4.975 4.975 0 0 0-1.336-2.332A5.089 5.089 0 0 0 36.19 6.63a5.207 5.207 0 0 0-3.752.475 5.08 5.08 0 0 0-2.405 2.877.318.318 0 0 1-.227.214.329.329 0 0 1-.305-.077l-6.133-6.043a1.33 1.33 0 0 0-1.852 0l-4.305 4.264a1.253 1.253 0 0 0-.394 1.043 1.241 1.241 0 0 0 .602.94 5.063 5.063 0 0 1 1.918 2.164c.412.889.554 1.877.407 2.843a5.007 5.007 0 0 1-1.236 2.601 5.126 5.126 0 0 1-2.477 1.514 5.164 5.164 0 0 1-3.21-.214 5.072 5.072 0 0 1-2.438-2.066 1.238 1.238 0 0 0-.398-.424 1.262 1.262 0 0 0-1.615.196l-3.912 3.876c-.926.912-.926 1.71-.416 2.28l6.133 6.043a.318.318 0 0 1-.017.446.326.326 0 0 1-.145.078 5.144 5.144 0 0 0-2.912 2.374 5.019 5.019 0 0 0-.49 3.692 4.998 4.998 0 0 0 1.348 2.334 5.112 5.112 0 0 0 2.378 1.314 5.207 5.207 0 0 0 3.746-.466 5.08 5.08 0 0 0 2.41-2.863.318.318 0 0 1 .22-.229.328.328 0 0 1 .313.07l6.133 6.042a1.306 1.306 0 0 0 1.829 0l4.328-4.264a1.21 1.21 0 0 0 .433-1.065 1.197 1.197 0 0 0-.212-.553 1.221 1.221 0 0 0-.453-.389Z'/%3E%3C/svg%3E");
}
}
p{
font-size: $fontSize16;
font-weight: 450;
margin: 15px 0;
}
}
}
}
/** QUICK INSTALLATION SECTION **/
section#quickinstall{
background-color: #161616;
color: white;
background-image: url("data:image/svg+xml,%3Csvg width='1440' height='1243' viewBox='0 0 1440 1243' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2668_3381)'%3E%3Crect width='1440' height='1243' fill='%23161616'/%3E%3Cpath d='M1357 373.363L1357 124.231C1357 61.6951 1306.3 11 1243.77 11V11C1181.23 11 1130.54 61.6951 1130.54 124.231L1130.54 185.006C1130.54 228.509 1095.27 263.775 1051.77 263.775V263.775C1008.27 263.775 973 299.042 973 342.545L973 657.25C973 722.834 1026.17 776 1091.75 776V776C1157.33 776 1210.5 829.166 1210.5 894.75L1210.5 1129' stroke='url(%23paint0_linear_2668_3381)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M57 229V310.845C57 338.459 79.3858 360.845 107 360.845V360.845C134.614 360.845 157 383.231 157 410.845V841.5C157 869.114 134.614 891.5 107 891.5V891.5C79.3858 891.5 57 913.886 57 941.5V1317' stroke='url(%23paint1_linear_2668_3381)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2668_3381' x1='1276.5' y1='-12' x2='1264' y2='1137' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23292058'/%3E%3Cstop offset='0.416667' stop-color='%235C4CB8'/%3E%3Cstop offset='1' stop-color='%23292058'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_2668_3381' x1='54.9428' y1='457.083' x2='157.728' y2='457.119' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23292058'/%3E%3Cstop offset='0.416667' stop-color='%235C4CB8'/%3E%3Cstop offset='1' stop-color='%23292058'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_2668_3381'%3E%3Crect width='1440' height='1243' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;
background-position: top center;
.wrap{
.intro{
max-width: 380px;
}
.install{
width: calc(100% - 450px);
tab-size: 4;
}
}
}
section.faq{
h1{
max-width: 600px;
}
.flexwrap{
margin-top: 70px;
}
}
}
@import url(syntax_highlighting.css);
@media only screen and (max-width: 1100px) {
body.landing{
h1{
font-size: 40px;
}
.window .topbar{
position: relative;
&::after{
background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
width: 25px;
position: absolute;
right: 0;
top: 0;
height: calc(100% - 3px);
background-size: contain;
content: "";
border-top-right-radius: 15px;
pointer-events: none;
z-index: 10;
}
&::before{
background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
width: 25px;
position: absolute;
left: 0;
top: 0;
height: calc(100% - 3px);
background-size: contain;
content: "";
border-top-left-radius: 15px;
pointer-events: none;
z-index: 10;
}
}
.window .topbar ul{
position: relative;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
overflow-x: auto;
&::-webkit-scrollbar {width:1px;background-color:#000;height:3px}
&::-webkit-scrollbar-track {background-color:#292929}
&::-webkit-scrollbar-thumb {background-color:#545454;border-radius:2px}
}
.window .topbar ul li{
white-space: nowrap;
}
section#quickinstall .wrap .install{
width: calc(100% - 390px);
}
}
}
@media only screen and (max-width: 940px) {
body.landing{
font-size: 17px;
h1{
max-width: 500px;
}
section.welcome .flexwrap .duckdb{
width: 100%;
}
section.welcome .flexwrap .window,
section#quickinstall .window{
width: 100%;
margin-top: 60px;
}
section#quickinstall .wrap .install,
section#quickinstall .wrap .intro{
width: 100%;
}
section.whyduckdb .flexwrap .featurebox{
width: calc(50% - 10px);
}
section.blog .postpreview{
width: calc(50% - 10px);
}
.accordion > div{
width: 100%;
}
.accordion{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
section#quickinstall .wrap .intro {
width: 100%;
}
section.whyduckdb{
background-size: cover;
}
section.blog .newstileswrap{
row-gap: 40px;
}
section.blog .postpreview:nth-child(4){
display: block;
}
.select{
margin-bottom: 10px;
}
}
}
@media only screen and (max-width: 660px) {
body.landing{
font-size: 16px;
h1{
font-size: 35px;
}
section.whyduckdb .flexwrap .featurebox{
width: 100%;
}
section.blog .postpreview{
width: 100%;
}
section.blog .newstileswrap{
row-gap: 40px;
}
section.blog .postpreview:nth-child(4){
display: none;
}
}
header .headerline .headercontent .button{
display: none;
}
}
@media only screen and (max-width: 660px) {
body.landing{
.install .environment{
display: block!important;
}
label.onlymobile{
display: none!important;
}
}
}
@media only screen and (max-width: 450px) {
body.landing{
.select{
width: 100%;
max-width: unset;
}
}
}