Merge pull request #394 from PretendoNetwork/nuct-refactor-footer
Some checks are pending
Build and Publish Docker Image / Build and Publish (amd64) (push) Waiting to run
Build and Publish Docker Image / Build and Publish (arm64) (push) Waiting to run

feat: footer
This commit is contained in:
mrjvs 2025-04-14 22:30:26 +02:00 committed by GitHub
commit c51cec39f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 969 additions and 7 deletions

479
package-lock.json generated
View File

@ -21,7 +21,8 @@
},
"devDependencies": {
"@pretendonetwork/eslint-config": "^0.0.8",
"eslint-plugin-vue": "^10.0.0"
"eslint-plugin-vue": "^10.0.0",
"sass-embedded": "^1.86.3"
}
},
"node_modules/@ampproject/remapping": {
@ -453,6 +454,13 @@
"node": ">=6.9.0"
}
},
"node_modules/@bufbuild/protobuf": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.2.5.tgz",
"integrity": "sha512-/g5EzJifw5GF8aren8wZ/G5oMuPoGeS6MQD3ca8ddcvdXR5UELUfdTZITCGNhNXynY/AYl3Z4plmxdj/tRl/hQ==",
"devOptional": true,
"license": "(Apache-2.0 AND BSD-3-Clause)"
},
"node_modules/@capsizecss/metrics": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@capsizecss/metrics/-/metrics-2.2.0.tgz",
@ -5178,6 +5186,13 @@
"ieee754": "^1.2.1"
}
},
"node_modules/buffer-builder": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
"devOptional": true,
"license": "MIT/X11"
},
"node_modules/buffer-crc32": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
@ -5639,6 +5654,13 @@
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
},
"node_modules/colorjs.io": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
"devOptional": true,
"license": "MIT"
},
"node_modules/comma-separated-tokens": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@ -8668,6 +8690,13 @@
"resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.2.1.tgz",
"integrity": "sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw=="
},
"node_modules/immutable": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
"integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
"devOptional": true,
"license": "MIT"
},
"node_modules/import-fresh": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@ -12984,6 +13013,16 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/rxjs": {
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"devOptional": true,
"license": "Apache-2.0",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/safe-array-concat": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@ -13067,6 +13106,407 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/sass-embedded": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.86.3.tgz",
"integrity": "sha512-3pZSp24ibO1hdopj+W9DuiWsZOb2YY6AFRo/jjutKLBkqJGM1nJjXzhAYfzRV+Xn5BX1eTI4bBTE09P0XNHOZg==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"@bufbuild/protobuf": "^2.0.0",
"buffer-builder": "^0.2.0",
"colorjs.io": "^0.5.0",
"immutable": "^5.0.2",
"rxjs": "^7.4.0",
"supports-color": "^8.1.1",
"sync-child-process": "^1.0.2",
"varint": "^6.0.0"
},
"bin": {
"sass": "dist/bin/sass.js"
},
"engines": {
"node": ">=16.0.0"
},
"optionalDependencies": {
"sass-embedded-android-arm": "1.86.3",
"sass-embedded-android-arm64": "1.86.3",
"sass-embedded-android-ia32": "1.86.3",
"sass-embedded-android-riscv64": "1.86.3",
"sass-embedded-android-x64": "1.86.3",
"sass-embedded-darwin-arm64": "1.86.3",
"sass-embedded-darwin-x64": "1.86.3",
"sass-embedded-linux-arm": "1.86.3",
"sass-embedded-linux-arm64": "1.86.3",
"sass-embedded-linux-ia32": "1.86.3",
"sass-embedded-linux-musl-arm": "1.86.3",
"sass-embedded-linux-musl-arm64": "1.86.3",
"sass-embedded-linux-musl-ia32": "1.86.3",
"sass-embedded-linux-musl-riscv64": "1.86.3",
"sass-embedded-linux-musl-x64": "1.86.3",
"sass-embedded-linux-riscv64": "1.86.3",
"sass-embedded-linux-x64": "1.86.3",
"sass-embedded-win32-arm64": "1.86.3",
"sass-embedded-win32-ia32": "1.86.3",
"sass-embedded-win32-x64": "1.86.3"
}
},
"node_modules/sass-embedded-android-arm": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.86.3.tgz",
"integrity": "sha512-UyeXrFzZSvrGbvrWUBcspbsbivGgAgebLGJdSqJulgSyGbA6no3DWQ5Qpdd6+OAUC39BlpPu74Wx9s4RrVuaFw==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-android-arm64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.86.3.tgz",
"integrity": "sha512-q+XwFp6WgAv+UgnQhsB8KQ95kppvWAB7DSoJp+8Vino8b9ND+1ai3cUUZPE5u4SnLZrgo5NtrbPvN5KLc4Pfyg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-android-ia32": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.86.3.tgz",
"integrity": "sha512-gTJjVh2cRzvGujXj5ApPk/owUTL5SiO7rDtNLrzYAzi1N5HRuLYXqk3h1IQY3+eCOBjGl7mQ9XyySbJs/3hDvg==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-android-riscv64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.86.3.tgz",
"integrity": "sha512-Po3JnyiCS16kd6REo1IMUbFGYtvL9O0rmKaXx5vOuBaJD1LPy2LiSSp7TU7wkJ9IxsTDGzFaSeP1I9qb6D8VVg==",
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-android-x64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.86.3.tgz",
"integrity": "sha512-+7h3jdDv/0kUFx0BvxYlq2fa7CcHiDPlta6k5OxO5K6jyqJwo9hc0Z052BoYEauWTqZ+vK6bB5rv2BIzq4U9nA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-darwin-arm64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.86.3.tgz",
"integrity": "sha512-EgLwV4ORm5Hr0DmIXo0Xw/vlzwLnfAiqD2jDXIglkBsc5czJmo4/IBdGXOP65TRnsgJEqvbU3aQhuawX5++x9A==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-darwin-x64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.86.3.tgz",
"integrity": "sha512-dfKhfrGPRNLWLC82vy/vQGmNKmAiKWpdFuWiePRtg/E95pqw+sCu6080Y6oQLfFu37Iq3MpnXiSpDuSo7UnPWA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-arm": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.86.3.tgz",
"integrity": "sha512-+fVCIH+OR0SMHn2NEhb/VfbpHuUxcPtqMS34OCV3Ka99LYZUJZqth4M3lT/ppGl52mwIVLNYzR4iLe6mdZ6mYA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-arm64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.86.3.tgz",
"integrity": "sha512-tYq5rywR53Qtc+0KI6pPipOvW7a47ETY69VxfqI9BR2RKw2hBbaz0bIw6OaOgEBv2/XNwcWb7a4sr7TqgkqKAA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-ia32": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.86.3.tgz",
"integrity": "sha512-CmQ5OkqnaeLdaF+bMqlYGooBuenqm3LvEN9H8BLhjkpWiFW8hnYMetiqMcJjhrXLvDw601KGqA5sr/Rsg5s45g==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-musl-arm": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.86.3.tgz",
"integrity": "sha512-SEm65SQknI4pl+mH5Xf231hOkHJyrlgh5nj4qDbiBG6gFeutaNkNIeRgKEg3cflXchCr8iV/q/SyPgjhhzQb7w==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-musl-arm64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.86.3.tgz",
"integrity": "sha512-4zOr2C/eW89rxb4ozTfn7lBzyyM5ZigA1ZSRTcAR26Qbg/t2UksLdGnVX9/yxga0d6aOi0IvO/7iM2DPPRRotg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-musl-ia32": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.86.3.tgz",
"integrity": "sha512-84Tcld32LB1loiqUvczWyVBQRCChm0wNLlkT59qF29nxh8njFIVf9yaPgXcSyyjpPoD9Tu0wnq3dvVzoMCh9AQ==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-musl-riscv64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.86.3.tgz",
"integrity": "sha512-IxEqoiD7vdNpiOwccybbV93NljBy64wSTkUOknGy21SyV43C8uqESOwTwW9ywa3KufImKm8L3uQAW/B0KhJMWg==",
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-musl-x64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.86.3.tgz",
"integrity": "sha512-ePeTPXUxPK6JgHcUfnrkIyDtyt+zlAvF22mVZv6y1g/PZFm1lSfX+Za7TYHg9KaYqaaXDiw6zICX4i44HhR8rA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-riscv64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.86.3.tgz",
"integrity": "sha512-NuXQ72dwfNLe35E+RaXJ4Noq4EkFwM65eWwCwxEWyJO9qxOx1EXiCAJii6x8kkOh5daWuMU0VAI1B9RsJaqqQQ==",
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-linux-x64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.86.3.tgz",
"integrity": "sha512-t8be9zJ5B82+og9bQmIQ83yMGYZMTMrlGA+uGWtYacmwg6w3093dk91Fx0YzNSZBp3Tk60qVYjCZnEIwy60x0g==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-win32-arm64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.86.3.tgz",
"integrity": "sha512-4ghuAzjX4q8Nksm0aifRz8hgXMMxS0SuymrFfkfJlrSx68pIgvAge6AOw0edoZoe0Tf5ZbsWUWamhkNyNxkTvw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-win32-ia32": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.86.3.tgz",
"integrity": "sha512-tCaK4zIRq9mLRPxLzBAdYlfCuS/xLNpmjunYxeWkIwlJo+k53h1udyXH/FInnQ2GgEz0xMXyvH3buuPgzwWYsw==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded-win32-x64": {
"version": "1.86.3",
"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.86.3.tgz",
"integrity": "sha512-zS+YNKfTF4SnOfpC77VTb0qNZyTXrxnAezSoRV0xnw6HlY+1WawMSSB6PbWtmbvyfXNgpmJUttoTtsvJjRCucg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/sass-embedded/node_modules/supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
"node_modules/scslre": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/scslre/-/scslre-0.3.0.tgz",
@ -13970,6 +14410,29 @@
"url": "https://opencollective.com/svgo"
}
},
"node_modules/sync-child-process": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
"integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"sync-message-port": "^1.0.0"
},
"engines": {
"node": ">=16.0.0"
}
},
"node_modules/sync-message-port": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
"integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=16.0.0"
}
},
"node_modules/synckit": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
@ -14997,6 +15460,13 @@
"spdx-license-ids": "^3.0.0"
}
},
"node_modules/varint": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
"devOptional": true,
"license": "MIT"
},
"node_modules/vfile": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@ -15037,9 +15507,10 @@
}
},
"node_modules/vite": {
"version": "6.2.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
"integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
"version": "6.2.6",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
"integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
"license": "MIT",
"dependencies": {
"esbuild": "^0.25.0",
"postcss": "^8.5.3",

View File

@ -25,6 +25,7 @@
},
"devDependencies": {
"@pretendonetwork/eslint-config": "^0.0.8",
"eslint-plugin-vue": "^10.0.0"
"eslint-plugin-vue": "^10.0.0",
"sass-embedded": "^1.86.3"
}
}

View File

@ -64,11 +64,21 @@ button {
cursor: pointer;
}
.wrapper {
width: 95%;
max-width: 1590px;
margin: 48px auto 0;
}
.hide-on-desktop {
display: none !important;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 90%;
}
.hide-on-mobile {
display: none !important;
}

View File

@ -0,0 +1,412 @@
<script lang="ts" setup>
const { tm, t } = useI18n();
const year = new Date().getFullYear();
const bandwidthQuoteIndex = ref<number>(-1);
const quotes = computed(() => tm<string>('footer.bandwidthRaccoonQuotes') as string[]);
const totalBandwidthQuotes = computed(() => quotes.value.length);
const currentQuote = computed(() => t(`footer.bandwidthRaccoonQuotes[${Math.max(0, bandwidthQuoteIndex.value)}]`));
watch([totalBandwidthQuotes], () => {
bandwidthQuoteIndex.value = -1;
});
function bandwidthClickHandler() {
if (bandwidthQuoteIndex.value + 1 >= totalBandwidthQuotes.value) {
bandwidthQuoteIndex.value = 0;
} else {
bandwidthQuoteIndex.value++;
}
}
</script>
<template>
<footer>
<div>
<svg
class="logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 120 39.876"
preserveAspectRatio="xMinYMin meet"
>
<g
id="logo_type"
data-name="logo type"
transform="translate(-553 -467)"
>
<g
id="logo"
transform="translate(553 467)"
>
<rect
id="XMLID_158_"
width="39.876"
height="39.876"
fill="#9d6ff3"
opacity="0"
/>
<g
id="XMLID_6_"
transform="translate(8.222 1.418)"
>
<path
id="XMLID_15_"
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
transform="translate(-64.246 -23.389)"
fill="#9d6ff3"
/>
<path
id="XMLID_14_"
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
transform="translate(-57.476 -7.693)"
fill="#9d6ff3"
/>
<path
id="XMLID_9_"
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
transform="translate(-44.6 -40.406)"
fill="#9d6ff3"
/>
</g>
</g>
<text
id="Pretendo"
transform="translate(593 492)"
fill="#fff"
font-size="17"
font-family="Poppins-Bold, Poppins"
font-weight="700"
>
<tspan
x="0"
y="0"
>Pretendo</tspan>
</text>
</g>
</svg>
<p>Copyright {{ year }}</p>
<p>
Site by <a
href="https://mrjvs.com/"
target="_blank"
>mrjvs</a>, <a
href="https://jipfr.nl/"
target="_blank"
>jipfr</a> & <a
href="https://limes.pink/"
target="_blank"
>pinklimes</a>
</p>
</div>
<div>
<h1>{{ $t("footer.socials") }}</h1>
<a
href="https://twitter.com/PretendoNetwork/"
target="_blank"
>Twitter</a>
<a
href="https://mastodon.pretendo.network/@pretendo"
target="_blank"
rel="me"
>Mastodon</a>
<a
href="https://discord.gg/pretendo"
target="_blank"
>Discord</a>
<a
href="https://github.com/PretendoNetwork"
target="_blank"
>GitHub</a>
<a
href="https://bsky.app/profile/pretendo.network"
target="_blank"
>Bluesky</a>
</div>
<div>
<h1>{{ $t("footer.usefulLinks") }}</h1>
<a href="/terms/privacy">Privacy Policy</a>
<!-- TODO - Add this to weblate.Quick and dirty for now, just to get something out the door -->
<a href="/docs">{{ $t("nav.docs") }}</a>
<a href="/#faq">{{ $t("nav.faq") }}</a>
<a href="/progress">{{ $t("nav.progress") }}</a>
<a href="/blog">{{ $t("nav.blog") }}</a>
<a href="/account">{{ $t("nav.account") }}</a>
<a href="/account/upgrade">{{ $t("nav.donate") }}</a>
</div>
<!-- TODO - Create a "Legal" section here -->
<div class="discord-server-card-wrapper">
<div class="discord-server-card">
<h1>{{ $t("footer.widget.captions[0]") }}</h1>
<h2>{{ $t("footer.widget.captions[1]") }}</h2>
<a href="https://discord.gg/pretendo">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-arrow-right"
>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
<polyline points="12 5 19 12 12 19" />
</svg>
{{ $t("footer.widget.button") }}
</a>
</div>
<div :class="{ 'bandwidth-raccoon-wrapper': true, 'speak': bandwidthQuoteIndex !== -1 }">
<div class="text-bubble">
<p>{{ currentQuote }}</p>
</div>
<img
src="/assets/images/bandwidth.svg"
class="bandwidth-raccoon"
@click="bandwidthClickHandler()"
>
</div>
</div>
</footer>
</template>
<style scoped>
footer {
width: 100%;
display: grid;
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
gap: min(48px, 7.7vw);
color: var(--text-shade-1);
margin-top: 120px;
position: relative;
padding: 60px 0;
}
footer::after {
content: "";
width: 400vw;
height: 100%;
position: absolute;
top: 0;
left: -50vw;
background: var(--bg-shade-0);
z-index: -1;
}
footer div {
display: flex;
flex-flow: column;
width: fit-content;
}
footer svg.logotype {
height: 56px;
margin: -10px 0 24px -10px;
}
footer p {
margin: 0;
}
footer h1 {
font-size: 20px;
margin-top: 0;
color: var(--text-shade-3);
}
footer a {
color: var(--text-shade-1);
text-decoration: none;
width: fit-content;
}
footer a:hover {
color: var(--text-shade-3);
text-decoration: underline;
}
footer div.discord-server-card-wrapper {
z-index: 2;
justify-self: end;
position: relative;
}
footer div.discord-server-card {
background: var(--bg-shade-2);
border-radius: 12px;
padding: 30px 90px 30px 36px;
}
footer div.discord-server-card h1 {
font-size: 25px;
margin: 0;
}
footer div.discord-server-card h2 {
color: var(--text-shade-3);
font-size: 22px;
margin: 0;
}
footer div.discord-server-card a {
display: flex;
align-items: center;
color: var(--accent-shade-3);
font-size: 22px;
text-decoration: none;
width: fit-content;
margin-left: -2px;
margin-top: 12px;
}
footer div.discord-server-card a:hover {
text-decoration: underline;
}
footer div.discord-server-card svg {
height: 24px;
stroke-width: 3px;
margin-right: 4px;
}
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
position: absolute;
top: -120px;
right: 0px;
z-index: -1;
}
footer div.discord-server-card-wrapper img.bandwidth-raccoon {
width: 192px;
height: 192px;
cursor: pointer;
transform: none;
transition: transform 150ms;
}
footer div.bandwidth-raccoon-wrapper.speak img.bandwidth-raccoon {
transform: rotate(12deg) translateY(-12px);
}
footer .bandwidth-raccoon-wrapper .text-bubble {
position: absolute;
right: 0;
margin: 0 auto;
top: -24px;
max-width: min(200%, 90vw);
width: max-content;
background: var(--bg-shade-3);
padding: 18px;
align-self: center;
margin-bottom: 12px;
border-radius: 12px;
box-sizing: border-box;
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: opacity 250ms;
}
footer .bandwidth-raccoon-wrapper.speak .text-bubble {
opacity: 1;
}
footer .bandwidth-raccoon-wrapper .text-bubble:after {
content: "";
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: var(--bg-shade-3) transparent;
border-width: 12px 12px 0;
bottom: -9px;
right: 60px;
margin-left: -10px;
}
</style>
<style lang="scss">
@media screen and (max-width: 900px) {
#root {
footer {
margin-top: 100px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, fit-content(100%));
}
footer div {
justify-self: center;
}
footer div.discord-server-card-wrapper {
grid-column: 1 / span 4;
width: 100%;
justify-self: normal;
}
footer div.discord-server-card-wrapper::before {
content: "";
width: 100%;
height: 60px;
position: absolute;
bottom: -60px;
left: 0;
background: var(--bg-shade-0);
z-index: 2;
}
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
bottom: -72px;
top: unset;
z-index: 0;
}
footer div.discord-server-card {
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
}
}
@media screen and (max-width: 580px) {
#root {
footer {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, fit-content(100%));
}
footer div {
justify-self: start;
}
footer div.discord-server-card-wrapper {
grid-column: 1 / span 1;
}
footer div.discord-server-card {
padding: 30px;
overflow: visible;
}
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
bottom: unset;
top: -120px;
z-index: -1;
}
}
}
@media screen and (max-width: 320px) {
#root {
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
display: none;
}
}
}
</style>

View File

@ -1,6 +1,9 @@
<template>
<div>
<div id="root">
<Navbar />
<slot />
<div class="wrapper">
<slot />
<Footer />
</div>
</div>
</template>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB