docs: homepage animation CSS

.cspell.json

@@ -6,10 +6,18 @@
     "atitle",
     "attrname",
     "attrvalue",
+    "Bborder",
     "bgsound",
+    "Bheight",
     "blabla",
     "blankspace",
+    "Bmargin",
+    "Bopacity",
+    "Bposition",
+    "Bwidth",
+    "Canimate",
     "checkstyle",
+    "Clinear",
     "clsx",
     "codecov",
     "CODEOWNERS",
@@ -18,6 +26,8 @@
     "commitlint",
     "Cpath",
     "csslint",
+    "Cstop",
+    "Cstyle",
     "Csvg",
     "enochian",
     "esbenp",
@@ -35,6 +45,7 @@
     "isindex",
     "Labelledby",
     "langtag",
+    "lded",
     "mingo",
     "msapplication",
     "nextid",

website/src/custom.css

@@ -125,3 +125,10 @@ img[src='/img/htmlhint-vscode-extension.png'] {
 article.card {
   padding: 1.5rem;
 }
+
+main:has(.sl-banner) .content-panel {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='margin:auto;background:transparent;z-index:1;position:relative' width='1440' height='400' preserveAspectRatio='xMidYMid' display='block'%3E%3Cg%3E%3ClinearGradient id='lg-0' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop stop-color='%23004f83' offset='0'/%3E%3Cstop stop-color='%23004f83' offset='1'/%3E%3C/linearGradient%3E%3Cpath d='M0 355.203q144 10.491 288 8.067t288-30.184 288-19.624 288-1.034 288-35.683V101.223q-144 1.784-288 .284T864 86.2883t-288-9.1024-288-17.039T0 52.4655z' fill='url(%23lg-0)' opacity='.1'%3E%3Canimate attributeName='d' dur='40s' repeatCount='indefinite' keyTimes='0;0.333;0.667;1' keySplines='0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1' begin='0s' values='M0 0M 0 339.1093180388041Q 144 363.1181046993646 288 358.7398964970856T 576 310.78513432367487T 864 322.8830546806909T 1152 316.65408857176055T 1440 264.7256777480295L 1440 103.01302533720416Q 1296 98.77410929803989 1152 97.2620078572843T 864 69.6347118828799T 576 83.70896820349128T 288 51.3111066133091T 0 51.90574284192395Z;M0 0M 0 368.08618847085927Q 144 367.75545646998756 288 366.8960532991175T 576 350.9377885594639T 864 305.92083568067005T 1152 309.0453247296068T 1440 286.36624939056605L 1440 99.79067392029518Q 1296 106.39600550674875 1152 104.90545429258752T 864 99.61892057573873T 576 71.9644095628615T 288 67.21964178197658T 0 52.91356220006735Z;M0 0M 0 339.4797920350818Q 144 344.862766283258 288 335.726190593708T 576 310.4403081293862T 864 317.42296299267275T 1152 312.42430751508635T 1440 303.80581873877884L 1440 124.34847195055274Q 1296 114.8384002022468 1152 108.72618999168589T 864 94.0651467671623T 576 60.79965197127284T 288 65.68238532141166T 0 44.20785689719561Z;M0 0M 0 339.1093180388041Q 144 363.1181046993646 288 358.7398964970856T 576 310.78513432367487T 864 322.8830546806909T 1152 316.65408857176055T 1440 264.7256777480295L 1440 103.01302533720416Q 1296 98.77410929803989 1152 97.2620078572843T 864 69.6347118828799T 576 83.70896820349128T 288 51.3111066133091T 0 51.90574284192395Z'/%3E%3C/path%3E%3Cpath d='M0 363.477q144-7.179 288-11.393t288-29.138 288-16.241 288 17.352 288-33.434V104.052q-144-10.0381-288-14.6934t-288-4.4641-288-8.3094T288 56.291 0 33.9678z' fill='url(%23lg-0)' opacity='.07'%3E%3Canimate attributeName='d' dur='20s' repeatCount='indefinite' keyTimes='0;0.333;0.667;1' keySplines='0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1' begin='-2.5s' values='M0 0M 0 357.89611736127074Q 144 341.1112672111209 288 331.20318804377246T 576 323.88972095704725T 864 338.5791225006463T 1152 278.4596548918078T 1440 286.3255256355017L 1440 90.84787648574213Q 1296 122.00560699145656 1152 113.16543199307735T 864 73.37639337802054T 576 71.3400242448649T 288 76.79389618057317T 0 49.87272366923129Z;M0 0M 0 369.22939381924397Q 144 353.6482977664671 288 350.62468311732465T 576 314.3244972639349T 864 306.1645732792536T 1152 326.010191085593T 1440 291.57948272411403L 1440 99.2859657063837Q 1296 87.59923091724625 1152 81.93757552653487T 864 93.73940287274186T 576 79.30910027070863T 288 54.24377583840464T 0 32.112803858765375Z;M0 0M 0 350.38369755377954Q 144 362.32788622307316 288 355.4059234201716T 576 342.5680238143951T 864 307.93555212708463T 1152 319.6123292148256T 1440 288.44638616363727L 1440 114.89976891404793Q 1296 108.61378073310577 1152 106.24921018271473T 864 64.76324850274672T 576 70.38525550290113T 288 60.950703002821236T 0 38.18967113145355Z;M0 0M 0 357.89611736127074Q 144 341.1112672111209 288 331.20318804377246T 576 323.88972095704725T 864 338.5791225006463T 1152 278.4596548918078T 1440 286.3255256355017L 1440 90.84787648574213Q 1296 122.00560699145656 1152 113.16543199307735T 864 73.37639337802054T 576 71.3400242448649T 288 76.79389618057317T 0 49.87272366923129Z'/%3E%3C/path%3E%3Cpath d='M0 344.469q144-6.466 288-12.799t288-2.402 288-10.594 288 4.572 288-52.675V126.896q-144-32.4188-288-41.413t-288-4.501-288-3.0847-288-16.1922T0 41.5182z' fill='url(%23lg-0)' opacity='.05'%3E%3Canimate attributeName='d' dur='10s' repeatCount='indefinite' keyTimes='0;0.333;0.667;1' keySplines='0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1' begin='-5s' values='M0 0M 0 337.52084582345435Q 144 356.92016308869216 288 348.52880768933585T 576 350.1442323995224T 864 328.6820118923992T 1152 303.5514104246024T 1440 288.15326718730995L 1440 98.51239590640546Q 1296 87.23055552392934 1152 80.81487518270079T 864 98.94115966933752T 576 89.72904986334036T 288 55.63904603710346T 0 42.706821814462074Z;M0 0M 0 336.5818447521159Q 144 350.34857769081395 288 342.089791199656T 576 330.06366696480603T 864 302.0802054990233T 1152 324.1017218993268T 1440 308.8765220391308L 1440 126.30204646597949Q 1296 89.62325619613623 1152 88.72944532468895T 864 83.74754262050139T 576 82.49008271479444T 288 53.41086827686632T 0 30.379977387815686Z;M0 0M 0 344.8654213914157Q 144 336.92462686048106 288 330.7089251441115T 576 328.07788822849466T 864 318.1033638575685T 1152 324.3678599293547T 1440 269.56921475469636L 1440 128.5132587013487Q 1296 94.89017892969063 1152 85.74901254769661T 864 79.95858546103952T 576 77.22304176401845T 288 62.05078010398582T 0 41.45046228238189Z;M0 0M 0 337.52084582345435Q 144 356.92016308869216 288 348.52880768933585T 576 350.1442323995224T 864 328.6820118923992T 1152 303.5514104246024T 1440 288.15326718730995L 1440 98.51239590640546Q 1296 87.23055552392934 1152 80.81487518270079T 864 98.94115966933752T 576 89.72904986334036T 288 55.63904603710346T 0 42.706821814462074Z'/%3E%3C/path%3E%3Cpath d='M0 345.596q144 13.999 288 12.931t288-19.067 288-31.652 288-21.233 288 2.87v-186.05q-144-11.1311-288-11.832T864 74.2658 576 88.5539 288 59.8114 0 45.3966z' fill='url(%23lg-0)' opacity='.06'%3E%3Canimate attributeName='d' dur='10s' repeatCount='indefinite' keyTimes='0;0.333;0.667;1' keySplines='0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1' begin='-7.5s' values='M0 0M 0 342.9473574726254Q 144 363.9264101576829 288 363.7476831775365T 576 341.98023841864784T 864 307.3922277919027T 1152 288.50680099737895T 1440 289.9383745173343L 1440 100.30359488550174Q 1296 85.0463691180595 1152 84.28795185477088T 864 71.49776897073141T 576 88.31935637844084T 288 64.16914176328899T 0 51.219728531475866Z;M0 0M 0 339.5269539931254Q 144 339.1337662712706 288 338.2622055993318T 576 321.094313258089T 864 318.2552585141048T 1152 301.87409901972865T 1440 298.97129302186715L 1440 127.63906746509272Q 1296 79.2723647035893 1152 78.43452991764721T 864 59.543324862021976T 576 57.116121812030485T 288 77.51878796526287T 0 41.985537109793526Z;M0 0M 0 356.5048420065953Q 144 341.7529152027714 288 337.02043952654543T 576 329.07653532315084T 864 309.5194609156358T 1152 278.6160404253201T 1440 287.41354483369724L 1440 116.1275069915114Q 1296 121.99516264623551 1152 121.53137648879917T 864 85.66840425298312T 576 89.51992247508649T 288 41.86059182755577T 0 21.408919476301037Z;M0 0M 0 342.9473574726254Q 144 363.9264101576829 288 363.7476831775365T 576 341.98023841864784T 864 307.3922277919027T 1152 288.50680099737895T 1440 289.9383745173343L 1440 100.30359488550174Q 1296 85.0463691180595 1152 84.28795185477088T 864 71.49776897073141T 576 88.31935637844084T 288 64.16914176328899T 0 51.219728531475866Z'/%3E%3C/path%3E%3C/g%3E%3Cstyle%3E.lded>.content,.lded>.content>.inner%7Bheight:100%25%7D.lded>.content>.inner>.viewer%7Bwidth:100%25;height:100%25;max-width:100%25%7D.lded>.content>.inner>.panel%7Bposition:absolute;bottom:50px;left:0;right:0;opacity:0.%7D.lded>.content>.inner>.panel:hover%7Bopacity:1%7D.lded>.content>.inner>.ctrl%7Bposition:absolute;bottom:13px;left:0;right:0;margin:auto%7D.lded>.content>.inner>.ctrl:hover%7Bz-index:10%7D%23editor>.inner>.title%7Bposition:absolute;bottom:195px;left:0;right:0;z-index:11%7D%23editor>.inner>.title>a:first-child%7Bmargin-left:0!important;%23editor .lded .viewer %7Bborder-radius:0%7D%7D%3C/style%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 0 -300px;
+  background-size: cover;
+}