RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎉 Added theming support, We are almost ready for release!

Browse source
This commit is contained in:
wearrrrr 2024-01-23 01:19:51 -06:00
parent a005c2803f
commit 744ee95af1
17 changed files with 392 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
public/img/purplewaves.svg → public/img/aluwaves.svg
View file

@ -1,6 +1,8 @@
<svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style> <svg width="100%" height="100%" preserveAspectRatio="none" id="svg" viewBox="0 0 1440 390"
xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
<style>
.path-0{ .path-0{
animation:pathAnim-0 4s; animation:pathAnim-0 15s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
@ -20,9 +22,18 @@
100%{ 100%{
d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z"); d: path("M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z");
} }
}</style><style class="darkreader darkreader--sync" media="screen"></style><defs><linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%"><stop offset="5%" stop-color="#702dc2" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #5a249b;"></stop><stop offset="95%" stop-color="#3d097d" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #310764;"></stop></linearGradient></defs><path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: none;"></path><style> }</style>
<style media="screen"></style>
<defs>
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
<stop offset="5%" stop-color="#702dc2"></stop>
<stop offset="95%" stop-color="#3d097d"></stop>
</linearGradient>
</defs>
<path d="M 0,400 L 0,100 C 124.53333333333336,122.66666666666667 249.06666666666672,145.33333333333334 415,143 C 580.9333333333333,140.66666666666666 788.2666666666667,113.33333333333333 966,102 C 1143.7333333333333,90.66666666666667 1291.8666666666668,95.33333333333334 1440,100 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<style>
.path-1{ .path-1{
animation:pathAnim-1 4s; animation:pathAnim-1 15s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
@ -42,4 +53,13 @@
100%{ 100%{
d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z"); d: path("M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z");
} }
}</style><style class="darkreader darkreader--sync" media="screen"></style><defs><linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%"><stop offset="5%" stop-color="#702dc2" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #5a249b;"></stop><stop offset="95%" stop-color="#3d097d" data-darkreader-inline-stopcolor="" style="--darkreader-inline-stopcolor: #310764;"></stop></linearGradient></defs><path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: none;"></path></svg> }</style>
<style media="screen"></style>
<defs>
<linearGradient id="gradient" x1="0%" y1="53%" x2="100%" y2="47%">
<stop offset="5%" stop-color="#702dc2"></stop>
<stop offset="95%" stop-color="#3d097d"></stop>
</linearGradient>
</defs>
<path d="M 0,400 L 0,233 C 170.53333333333336,233.66666666666666 341.0666666666667,234.33333333333331 507,236 C 672.9333333333333,237.66666666666669 834.2666666666667,240.33333333333334 989,240 C 1143.7333333333333,239.66666666666666 1291.8666666666668,236.33333333333331 1440,233 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

67
public/img/darkwaves.svg
View file

@ -1,67 +0,0 @@
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>
.path-0{
animation:pathAnim-0 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0{
0%{
d: path("M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,175 0,175 C 71.32051282051285,180.2 142.6410256410257,185.4 224,167 C 305.3589743589743,148.6 396.7564102564103,106.60000000000001 493,110 C 589.2435897435897,113.39999999999999 690.3333333333333,162.2 764,171 C 837.6666666666667,179.8 883.9102564102564,148.60000000000002 962,129 C 1040.0897435897436,109.39999999999998 1150.0256410256409,101.39999999999999 1235,111 C 1319.9743589743591,120.60000000000001 1379.9871794871797,147.8 1440,175 C 1440,175 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,175 0,175 C 67.12051282051283,184.24615384615385 134.24102564102566,193.49230769230766 207,195 C 279.75897435897434,196.50769230769234 358.15641025641025,190.27692307692308 452,171 C 545.8435897435897,151.72307692307692 655.1333333333334,119.39999999999999 727,113 C 798.8666666666666,106.60000000000001 833.3102564102564,126.12307692307695 916,145 C 998.6897435897436,163.87692307692305 1129.625641025641,182.1076923076923 1225,187 C 1320.374358974359,191.8923076923077 1380.1871794871795,183.44615384615383 1440,175 C 1440,175 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,175 0,175 C 76.09999999999997,135.03076923076924 152.19999999999993,95.06153846153846 224,110 C 295.80000000000007,124.93846153846154 363.30000000000007,194.7846153846154 441,231 C 518.6999999999999,267.2153846153846 606.5999999999999,269.8 693,234 C 779.4000000000001,198.2 864.3000000000002,124.0153846153846 941,118 C 1017.6999999999998,111.9846153846154 1086.2,174.13846153846154 1168,195 C 1249.8,215.86153846153846 1344.9,195.43076923076922 1440,175 C 1440,175 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z");
}
}</style><path d="M 0,700 C 0,700 0,175 0,175 C 98.76666666666668,201.13846153846154 197.53333333333336,227.27692307692308 279,216 C 360.46666666666664,204.72307692307692 424.6333333333333,156.0307692307692 488,154 C 551.3666666666667,151.9692307692308 613.9333333333334,196.6 695,208 C 776.0666666666666,219.4 875.6333333333332,197.56923076923076 954,192 C 1032.3666666666668,186.43076923076924 1089.5333333333333,197.12307692307692 1167,197 C 1244.4666666666667,196.87692307692308 1342.2333333333333,185.93846153846152 1440,175 C 1440,175 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667e66" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><style>
.path-1{
animation:pathAnim-1 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1{
0%{
d: path("M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,350 0,350 C 82.77179487179487,328.6871794871795 165.54358974358973,307.374358974359 250,311 C 334.45641025641027,314.625641025641 420.59743589743596,343.18974358974356 503,357 C 585.402564102564,370.81025641025644 664.0666666666667,369.8666666666667 738,350 C 811.9333333333333,330.1333333333333 881.1358974358975,291.3435897435897 955,292 C 1028.8641025641025,292.6564102564103 1107.3897435897436,332.7589743589744 1189,349 C 1270.6102564102564,365.2410256410256 1355.3051282051283,357.6205128205128 1440,350 C 1440,350 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,350 0,350 C 65.52820512820512,346.8307692307692 131.05641025641023,343.66153846153844 217,344 C 302.94358974358977,344.33846153846156 409.30256410256413,348.18461538461537 490,343 C 570.6974358974359,337.81538461538463 625.7333333333332,323.6 702,326 C 778.2666666666668,328.4 875.7641025641026,347.41538461538465 952,366 C 1028.2358974358974,384.58461538461535 1083.2102564102565,402.73846153846154 1161,400 C 1238.7897435897435,397.26153846153846 1339.3948717948717,373.63076923076926 1440,350 C 1440,350 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,350 0,350 C 68.02820512820512,330.8897435897436 136.05641025641023,311.77948717948715 221,324 C 305.94358974358977,336.22051282051285 407.80256410256425,379.7717948717949 483,404 C 558.1974358974358,428.2282051282051 606.7333333333332,433.1333333333333 686,414 C 765.2666666666668,394.8666666666667 875.2641025641026,351.6948717948718 960,327 C 1044.7358974358974,302.3051282051282 1104.2102564102565,296.08717948717947 1180,303 C 1255.7897435897435,309.91282051282053 1347.8948717948717,329.95641025641027 1440,350 C 1440,350 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z");
}
}</style><path d="M 0,700 C 0,700 0,350 0,350 C 61.27692307692308,353.24871794871797 122.55384615384617,356.49743589743593 195,348 C 267.44615384615383,339.50256410256407 351.0615384615385,319.25897435897434 455,336 C 558.9384615384615,352.74102564102566 683.1999999999999,406.46666666666664 757,409 C 830.8000000000001,411.53333333333336 854.1384615384617,362.87435897435904 929,352 C 1003.8615384615383,341.12564102564096 1130.2461538461537,368.0358974358974 1224,374 C 1317.7538461538463,379.9641025641026 1378.876923076923,364.9820512820513 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667e88" class="transition-all duration-300 ease-in-out delay-150 path-1"></path><style>
.path-2{
animation:pathAnim-2 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2{
0%{
d: path("M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z");
}
25%{
d: path("M 0,700 C 0,700 0,525 0,525 C 55.110256410256426,538.3461538461538 110.22051282051285,551.6923076923077 204,557 C 297.77948717948715,562.3076923076923 430.2282051282051,559.5769230769231 507,558 C 583.7717948717949,556.4230769230769 604.8666666666667,556 687,537 C 769.1333333333333,518 912.3051282051283,480.42307692307696 994,467 C 1075.6948717948717,453.57692307692304 1095.9128205128204,464.3076923076923 1160,478 C 1224.0871794871796,491.6923076923077 1332.0435897435898,508.3461538461538 1440,525 C 1440,525 1440,700 1440,700 Z");
}
50%{
d: path("M 0,700 C 0,700 0,525 0,525 C 98.69487179487183,536.551282051282 197.38974358974366,548.1025641025641 278,541 C 358.61025641025634,533.8974358974359 421.1358974358974,508.1410256410257 495,497 C 568.8641025641026,485.8589743589743 654.0666666666667,489.3333333333333 736,491 C 817.9333333333333,492.6666666666667 896.5974358974356,492.52564102564105 969,499 C 1041.4025641025644,505.47435897435895 1107.5435897435898,518.5641025641025 1185,524 C 1262.4564102564102,529.4358974358975 1351.228205128205,527.2179487179487 1440,525 C 1440,525 1440,700 1440,700 Z");
}
75%{
d: path("M 0,700 C 0,700 0,525 0,525 C 66.24871794871794,489.1051282051282 132.49743589743588,453.2102564102564 212,463 C 291.5025641025641,472.7897435897436 384.25897435897434,528.2641025641026 481,535 C 577.7410256410257,541.7358974358974 678.4666666666667,499.7333333333333 747,481 C 815.5333333333333,462.2666666666667 851.874358974359,466.80256410256413 926,491 C 1000.125641025641,515.1974358974359 1112.0358974358974,559.0564102564103 1204,568 C 1295.9641025641026,576.9435897435897 1367.9820512820513,550.9717948717948 1440,525 C 1440,525 1440,700 1440,700 Z");
}
100%{
d: path("M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z");
}
}</style><path d="M 0,700 C 0,700 0,525 0,525 C 75,542.6179487179487 150,560.2358974358974 236,544 C 322,527.7641025641026 419,477.674358974359 501,483 C 583,488.325641025641 650,549.0666666666667 716,576 C 782,602.9333333333333 847.0000000000001,596.0589743589743 935,580 C 1022.9999999999999,563.9410256410257 1133.9999999999998,538.697435897436 1222,528 C 1310.0000000000002,517.302564102564 1375,521.151282051282 1440,525 C 1440,525 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#5b667eff" class="transition-all duration-300 ease-in-out delay-150 path-2"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

96
public/img/macchiatowaves.svg Normal file
View file

@ -0,0 +1,96 @@
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590"
xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
<style>
.path-0{
animation:pathAnim-0 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0{
0%{
d: path("M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,112 C 289.5,106 579,100 819,100 C 1059,100 1249.5,106 1440,112 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,112 C 300.5,84 601,56 841,56 C 1081,56 1260.5,84 1440,112 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,112 C 256,112.5 512,113 752,113 C 992,113 1216,112.5 1440,112 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z");
}
}</style>
<style media="screen"></style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#1e2030"></stop>
<stop offset="95%" stop-color="#181926"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,112 C 283.5,125.5 567,139 807,139 C 1047,139 1243.5,125.5 1440,112 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<style>
.path-1{
animation:pathAnim-1 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1{
0%{
d: path("M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,262 C 191,240.5 382,219 622,219 C 862,219 1151,240.5 1440,262 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,262 C 305.5,268.5 611,275 851,275 C 1091,275 1265.5,268.5 1440,262 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,262 C 286,273.5 572,285 812,285 C 1052,285 1246,273.5 1440,262 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z");
}
}</style>
<style media="screen"></style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#1e2030"></stop>
<stop offset="95%" stop-color="#181926"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,262 C 259,246.5 518,231 758,231 C 998,231 1219,246.5 1440,262 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
<style>
.path-2{
animation:pathAnim-2 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2{
0%{
d: path("M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,412 C 218,423 436,434 676,434 C 916,434 1178,423 1440,412 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,412 C 264,431 528,450 768,450 C 1008,450 1224,431 1440,412 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,412 C 245.5,439.5 491,467 731,467 C 971,467 1205.5,439.5 1440,412 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z");
}
}</style>
<style media="screen"></style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#1e2030"></stop>
<stop offset="95%" stop-color="#181926"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,412 C 209,406.5 418,401 658,401 C 898,401 1169,406.5 1440,412 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

93
public/img/mochawaves.svg Normal file
View file

@ -0,0 +1,93 @@
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590"
xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
<style>
.path-0{
animation:pathAnim-0 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-0{
0%{
d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,112 C 166.53333333333336,123.60000000000001 333.0666666666667,135.20000000000002 475,129 C 616.9333333333333,122.79999999999998 734.2666666666667,98.79999999999998 891,93 C 1047.7333333333333,87.20000000000002 1243.8666666666668,99.60000000000001 1440,112 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,112 C 178.66666666666669,132.53333333333333 357.33333333333337,153.06666666666666 507,164 C 656.6666666666666,174.93333333333334 777.3333333333333,176.26666666666668 928,166 C 1078.6666666666667,155.73333333333332 1259.3333333333335,133.86666666666667 1440,112 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,112 C 152,116.4 304,120.8 482,107 C 660,93.2 864,61.199999999999996 1028,59 C 1192,56.800000000000004 1316,84.4 1440,112 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z");
}
}</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#181825"></stop>
<stop offset="95%" stop-color="#11111b"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,112 C 133.2,136.13333333333333 266.4,160.26666666666668 417,163 C 567.6,165.73333333333332 735.5999999999999,147.06666666666666 909,135 C 1082.4,122.93333333333334 1261.2,117.46666666666667 1440,112 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4" class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
<style>
.path-1{
animation:pathAnim-1 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-1{
0%{
d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,262 C 111.46666666666664,236.13333333333333 222.93333333333328,210.26666666666668 393,211 C 563.0666666666667,211.73333333333332 791.7333333333333,239.06666666666666 976,252 C 1160.2666666666667,264.93333333333334 1300.1333333333332,263.4666666666667 1440,262 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,262 C 164.66666666666663,293.3333333333333 329.33333333333326,324.66666666666663 508,314 C 686.6666666666667,303.33333333333337 879.3333333333335,250.66666666666669 1037,235 C 1194.6666666666665,219.33333333333331 1317.3333333333333,240.66666666666666 1440,262 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,262 C 122.13333333333333,279.4666666666667 244.26666666666665,296.93333333333334 392,303 C 539.7333333333333,309.06666666666666 713.0666666666668,303.73333333333335 892,295 C 1070.9333333333332,286.26666666666665 1255.4666666666667,274.1333333333333 1440,262 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z");
}
}</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#181825"></stop>
<stop offset="95%" stop-color="#11111b"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,262 C 126.53333333333336,275.4666666666667 253.06666666666672,288.93333333333334 423,294 C 592.9333333333333,299.06666666666666 806.2666666666667,295.73333333333335 983,289 C 1159.7333333333333,282.26666666666665 1299.8666666666668,272.1333333333333 1440,262 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
<style>
.path-2{
animation:pathAnim-2 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pathAnim-2{
0%{
d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
}
25%{
d: path("M 0,600 L 0,412 C 186.93333333333334,388 373.8666666666667,364 512,368 C 650.1333333333333,372 739.4666666666667,404 886,416 C 1032.5333333333333,428 1236.2666666666667,420 1440,412 L 1440,600 L 0,600 Z");
}
50%{
d: path("M 0,600 L 0,412 C 139.33333333333331,406.4 278.66666666666663,400.8 438,405 C 597.3333333333334,409.2 776.6666666666667,423.20000000000005 947,426 C 1117.3333333333333,428.79999999999995 1278.6666666666665,420.4 1440,412 L 1440,600 L 0,600 Z");
}
75%{
d: path("M 0,600 L 0,412 C 168.66666666666663,412.1333333333333 337.33333333333326,412.2666666666667 491,413 C 644.6666666666667,413.7333333333333 783.3333333333335,415.06666666666666 939,415 C 1094.6666666666665,414.93333333333334 1267.3333333333333,413.4666666666667 1440,412 L 1440,600 L 0,600 Z");
}
100%{
d: path("M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z");
}
}</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#181825"></stop>
<stop offset="95%" stop-color="#11111b"></stop>
</linearGradient>
</defs>
<path d="M 0,600 L 0,412 C 126,431.20000000000005 252,450.40000000000003 417,459 C 582,467.59999999999997 786,465.6 963,456 C 1140,446.4 1290,429.2 1440,412 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

9
src/components/Dropdown.astro
View file

@ -22,11 +22,12 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
box-shadow: 4px 6px 15px 0px #0e0e0e; box-shadow: 4px 6px 15px 0px #0e0e0e;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
position: relative;
} }
.dropdown-toggle { .dropdown-toggle {
background-color: #2e2e2e; background-color: #2e2e2e;
border: none; border: none;
color: white; color: var(--text-color);
padding: 12px 16px; padding: 12px 16px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
@ -46,13 +47,13 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
background-color: #212121; background-color: #212121;
position: fixed; position: absolute;
width: 140px; width: 100%;
} }
.dropdown-item { .dropdown-item {
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;
padding: 10px; padding: 10px;
color: white; color: var(--text-color);
cursor: pointer; cursor: pointer;
} }
.dropdown-item:nth-last-child(1) { .dropdown-item:nth-last-child(1) {

21
src/components/Footer.astro
View file

@ -23,9 +23,18 @@
</div> </div>
<style> <style>
:root {
--footer-svg-url: url("/img/aluwaves.svg");
}
[data-theme="mocha"] {
--footer-svg-url: url("/img/mochawaves.svg");
}
[data-theme="macchiato"] {
--footer-svg-url: url("/img/macchiatowaves.svg");
}
#footer { #footer {
padding-top: 20vh; padding-top: 20vh;
background-image: url("/img/purplewaves.svg"); background-image: var(--footer-svg-url);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100vw auto; background-size: 100vw auto;
width: 100%; width: 100%;
@ -62,19 +71,19 @@
.footerbrand div a { .footerbrand div a {
font-family: 'Varela Round', sans-serif; font-family: 'Varela Round', sans-serif;
color: #fff !important; color: var(--text-color) !important;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.footerbrand p { .footerbrand p {
font-family: 'Varela Round', sans-serif; font-family: 'Varela Round', sans-serif;
color: #fff; color: var(--text-color);
} }
.footerbrand a { .footerbrand a {
font-family: 'Varela Round', sans-serif; font-family: 'Varela Round', sans-serif;
color: #fff; color: var(--text-color);
} }
.footerlist-heading { .footerlist-heading {
@ -93,12 +102,12 @@
} }
.footerlist ul > li > a { .footerlist ul > li > a {
color: #fff; color: var(--text-color);
} }
.footerlist > * { .footerlist > * {
font-family: 'Varela Round', sans-serif; font-family: 'Varela Round', sans-serif;
color: #fff; color: var(--text-color);
} }
.footersocials { .footersocials {

2
src/components/GameItem.astro
View file

@ -22,7 +22,7 @@ const { name, image, slugName } = Astro.props;
} }
.game-title { .game-title {
color: white; color: var(--text-color);
text-align: center; text-align: center;
max-width: 125px; max-width: 125px;
} }

6
src/components/Header.astro
View file

@ -20,7 +20,7 @@
} }
.title-background { .title-background {
background-color: #7900e1; background-color: var(--accent-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -42,14 +42,14 @@
} }
.header-item { .header-item {
color: #fff; color: var(--text-color);
text-decoration: none; text-decoration: none;
font-size: 22px; font-size: 22px;
transition: 250ms ease-in-out; transition: 250ms ease-in-out;
} }
.header-item:hover { .header-item:hover {
color: #c0c0c0; color: var(--text-color-accent);
} }
@media only screen and (max-width: 1003px) { @media only screen and (max-width: 1003px) {

2
src/components/Input.astro
View file

@ -19,7 +19,7 @@ interface Props {
border: 4px solid #E0E0E0; border: 4px solid #E0E0E0;
border-radius: 10px; border-radius: 10px;
background-color: #1b1b1b; background-color: #1b1b1b;
color: white; color: var(--text-color);
transition: 100ms ease-in-out; transition: 100ms ease-in-out;
} }
input:focus { input:focus {

11
src/components/SettingsContent/CustomizationTab.astro Normal file
View file

@ -0,0 +1,11 @@
---
import Dropdown from "../Dropdown.astro"
import Input from "../Input.astro"
---
<div class="settings-container">
<div class="setting__theme">
<label class="setting-label">Theme</label>
<Dropdown buttonNameDefault="Alu" dropdownList={["Alu", "Macchiato", "Mocha"]}, id="dropdown__selected-theme" />
</div>
</div>

27
src/components/SettingsContent/ProxyTab.astro Normal file
View file

@ -0,0 +1,27 @@
---
import Input from "../Input.astro"
import Dropdown from "../Dropdown.astro"
---
<div class="settings-container">
<div class="setting__selected-proxy">
<label class="setting-label">Selected Proxy</label>
<Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy" />
</div>
<div class="setting__search-engine">
<label class="setting-label">Search Engine</label>
<Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine" />
</div>
<div class="setting__open_with">
<label class="setting-label">Open With</label>
<Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with" />
</div>
<div class="setting__bare-url">
<label class="setting-label">Bare URL</label>
<Input inputName="bare-url" />
</div>
</div>
<div class="setting__searxng-url">
<label for="searxng-url-input" class="setting-label">Searxng URL</label>
<Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
</div>

74
src/components/SettingsTablist.astro
View file

@ -1,44 +1,24 @@
--- ---
import Dropdown from "./Dropdown.astro"; import ProxyTab from "./SettingsContent/ProxyTab.astro";
import Input from "./Input.astro"; import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
--- ---
<div class="content-hidden"> <div class="content-hidden">
<div id="content-setting-tab-proxy"> <div id="content-setting-tab-proxy">
<h1 style="color: white;">Proxy</h1> <h1 class="content-setting-header">Proxy</h1>
<div class="settings-container"> <ProxyTab />
<div class="setting__selected-proxy">
<p class="setting-label">Selected Proxy</p>
<Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
</div>
<div class="setting__search-engine">
<p class="setting-label">Search Engine</p>
<Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine"></Dropdown>
</div>
<div class="setting__open_with">
<p class="setting-label">Open With</p>
<Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with"></Dropdown>
</div>
<div class="setting__bare-url">
<p class="setting-label">Bare URL</p>
<Input inputName="bare-url" />
</div>
</div>
<div class="setting__searxng-url">
<div class="setting-label">Searxng URL</div>
<Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
</div>
</div> </div>
<div id="content-setting-tab-customization"> <div id="content-setting-tab-customization">
<h1 style="color: white;">Customization</h1> <h1 class="content-setting-header">Customization</h1>
<p style="color: white;">Customization settings</p> <CustomizationTab />
</div> </div>
<div id="content-setting-tab-cloaking"> <div id="content-setting-tab-cloaking">
<h1 style="color: white;">Cloaking</h1> <h1 class="content-setting-header">Cloaking</h1>
<p style="color: white;">Cloaking settings</p> <p style="color: white;">Cloaking settings</p>
</div> </div>
<div id="content-setting-tab-credits"> <div id="content-setting-tab-credits">
<h1 style="color: white;">Credits</h1> <h1 class="content-setting-header">Credits</h1>
<p style="color: white;">Credits settings</p> <p style="color: white;">Credits settings</p>
</div> </div>
</div> </div>
@ -120,6 +100,8 @@ import Input from "./Input.astro";
function determineListener(event) { function determineListener(event) {
if (event.detail == "setting-tab-proxy") { if (event.detail == "setting-tab-proxy") {
addDropdownListener() addDropdownListener()
} else if (event.detail == "setting-tab-customization") {
addDropdownListener()
} }
} }
@ -167,6 +149,23 @@ import Input from "./Input.astro";
loadContent('setting-tab-proxy') loadContent('setting-tab-proxy')
function setupCustomizationSettings() {
applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
let dropdown = document.getElementById('dropdown__selected-theme-menu')
applyDropdownEventListeners(dropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
}
function changeTheme() {
let theme = localStorage.getItem('alu__selectedTheme')
if (theme) {
document.documentElement.setAttribute('data-theme', theme.toLowerCase())
}
let footer = document.getElementById('footer');
if (footer) {
footer.dataset.theme = theme.toLowerCase();
}
}
function setupSettings(event) { function setupSettings(event) {
if (event.detail == "setting-tab-proxy") { if (event.detail == "setting-tab-proxy") {
applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy'); applySavedLocalStorage('alu__selectedProxy', 'dropdown__selected-proxy');
@ -182,6 +181,7 @@ import Input from "./Input.astro";
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/") if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl") searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
} }
// Proxy settings
applyInputListeners(bareUrlInput, 'alu__bareUrl') applyInputListeners(bareUrlInput, 'alu__bareUrl')
applyInputListeners(searxngUrlInput, 'alu__searxngUrl') applyInputListeners(searxngUrlInput, 'alu__searxngUrl')
applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng); applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
@ -193,6 +193,8 @@ import Input from "./Input.astro";
bareUrlInput.value = '/bare/' bareUrlInput.value = '/bare/'
} }
checkSearxng(); checkSearxng();
} else if (event.detail == "setting-tab-customization") {
setupCustomizationSettings();
} }
} }
@ -209,7 +211,7 @@ import Input from "./Input.astro";
document.addEventListener('setting-tabLoad', setupSettings) document.addEventListener('setting-tabLoad', setupSettings)
</script> </script>
<style> <style is:global>
.content-hidden { .content-hidden {
display: none; display: none;
} }
@ -223,9 +225,19 @@ import Input from "./Input.astro";
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.content-setting-header {
color: var(--text-color);
}
.setting-label { .setting-label {
color: white; color: var(--text-color);
font-size: 18px; font-size: 18px;
/* annoying stuff with label elements. */
display: block;
opacity: 1.0;
margin-block: 1em;
margin-inline: 0;
user-select: none;
width: 100%;
} }
.setting__searxng-url { .setting__searxng-url {

18
src/components/ThemeLoader.astro Normal file
View file

@ -0,0 +1,18 @@
<script>
function switchTheme() {
let currentTheme = localStorage.getItem("alu__selectedTheme")
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme.toLowerCase());
let footer = document.getElementById('footer');
if (footer) {
footer.dataset.theme = currentTheme.toLowerCase();
}
}
}
switchTheme()
document.addEventListener('astro:after-swap', switchTheme)
</script>

4
src/components/UVRegistrar.astro
View file

@ -1,6 +1,8 @@
<script src="/uv/uv.bundle.js" transition:persist is:inline></script> <script src="/uv/uv.bundle.js" transition:persist is:inline></script>
<script src="/uv.config.js" transition:persist is:inline></script> <script src="/uv.config.js" transition:persist is:inline></script>
<script transition:persist> <script transition:persist defer>
// This is a hack to make sure window.__uv$config is defined, because this means everything has been.
if (window.__uv$config == undefined) window.location.reload();
var form = document.querySelector('form'); var form = document.querySelector('form');
var input = document.querySelector('input'); var input = document.querySelector('input');
window.navigator.serviceWorker.register('/sw.js', { window.navigator.serviceWorker.register('/sw.js', {

57
src/layouts/Layout.astro
View file

@ -2,6 +2,7 @@
import { ViewTransitions } from 'astro:transitions'; import { ViewTransitions } from 'astro:transitions';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import ThemeLoader from '../components/ThemeLoader.astro';
interface Props { interface Props {
title: string; title: string;
@ -23,6 +24,7 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<ViewTransitions /> <ViewTransitions />
<ThemeLoader />
</head> </head>
<body> <body>
<Header></Header> <Header></Header>
@ -35,6 +37,45 @@ const { title } = Astro.props;
box-sizing: border-box; box-sizing: border-box;
} }
body {
opacity: 0;
animation: fadeIn ease 0.15s forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
:root {
--background-color: #080808;
--background-highlight: #252525;
--accent-color: #7900e1;
--text-color: #fff;
--text-color-accent: #c7c7c7;
}
[data-theme="mocha"] {
/* Catppucin Mocha theme */
--background-color: #1e1e2e;
--background-highlight: #45475a;
--accent-color: #181825;
--text-color: #cdd6f4;
--text-color-accent: #bac2de;
}
[data-theme="macchiato"] {
/* Catppuccin Macchiato Theme */
--background-color: #24273a;
--background-highlight: #494d64;
--accent-color: #1e2030;
--text-color: #cad3f5;
--text-color-accent: #b8c0e0;
}
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -43,7 +84,7 @@ body, html {
} }
body { body {
background-color: #080808; background-color: var(--background-color);
max-width: 100vw; max-width: 100vw;
margin: 0; margin: 0;
display: flex; display: flex;
@ -68,7 +109,7 @@ body > * {
} }
} */ } */
.title-text { .title-text {
color: white; color: var(--text-color);
text-align: center; text-align: center;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -87,10 +128,10 @@ body > * {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
width: 100vw; width: 100vw;
height: 100vh; height: 95vh;
top: 5vh; top: 5vh;
border: none; border: none;
background-color: #080808; background-color: var(--background-color);
transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;
pointer-events: none; pointer-events: none;
} }
@ -103,8 +144,8 @@ body > * {
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 1rem;
height: 5vh; height: 5vh;
background-color: #7900e1; background-color: var(--accent-color);
color: white; color: var(--text-color);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -117,8 +158,8 @@ body > * {
padding: 5px; padding: 5px;
padding-inline: 40px; padding-inline: 40px;
border: none; border: none;
background-color: #252525; background-color: var(--background-highlight);
color: #c7c7c7; color: var(--text-color-accent);
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
} }

2
src/pages/games.astro
View file

@ -65,7 +65,7 @@ import GameItem from "../components/GameItem.astro";
<style> <style>
.grid { .grid {
color: #fff; color: var(--text-color);
margin-top: -10px; margin-top: -10px;
height: max-content; height: max-content;
width: calc(100% - 60px); width: calc(100% - 60px);

2
src/pages/settings.astro
View file

@ -2,13 +2,13 @@
import Switch from "../components/Switch.astro"; import Switch from "../components/Switch.astro";
import SettingsTablist from "../components/SettingsTablist.astro"; import SettingsTablist from "../components/SettingsTablist.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import ThemeLoader from "../components/ThemeLoader.astro";
--- ---
<Layout title="Settings | Alu"> <Layout title="Settings | Alu">
<h1 class="title-text">Settings</h1> <h1 class="title-text">Settings</h1>
<SettingsTablist /> <SettingsTablist />
</Layout> </Layout>
<style> <style>