From 16fd46185210b6dde4aca4ab61939c847cdfc74e Mon Sep 17 00:00:00 2001 From: christian skaiaa Date: Tue, 25 Apr 2023 13:17:32 +0200 Subject: [PATCH] init --- .gitignore | 24 + css_overrides/localhost:5173/index.html | 109 ++ css_overrides/localhost:5173/null | 50 + index.html | 27 + main.js | 73 ++ package-lock.json | 896 ++++++++++++++ package.json | 14 + public/vite.svg | 1 + public/web-components/miles-info.css | 100 ++ public/web-components/miles-slider.css | 63 + public/web-components/miles-wc.js | 1470 +++++++++++++++++++++++ style.css | 173 +++ vite.config.js | 6 + 13 files changed, 3006 insertions(+) create mode 100644 .gitignore create mode 100644 css_overrides/localhost:5173/index.html create mode 100644 css_overrides/localhost:5173/null create mode 100644 index.html create mode 100644 main.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 public/web-components/miles-info.css create mode 100644 public/web-components/miles-slider.css create mode 100644 public/web-components/miles-wc.js create mode 100644 style.css create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/css_overrides/localhost:5173/index.html b/css_overrides/localhost:5173/index.html new file mode 100644 index 0000000..156fd31 --- /dev/null +++ b/css_overrides/localhost:5173/index.html @@ -0,0 +1,109 @@ + + border-radius: 5; + display: flex; + flex-direction: column; + width: var(--width); + + + + + + + + + Vite App + + + +
+ + + + + + border-radiu + border-radius: 5px; + display: flex; + flex-direction: column; + width: var(--width); + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + overflow: hidden; + + padding: 1.2rem; + background-color: var(--miles_primary_dark); + background-color: var(--miles_primary_dark); + background-color: var(--miles_primary_dark); + background-color: var(--miles_primary_dark); + background-color: var(--miles_primary_dark); + background-color: var(--miles_primary_dark); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + width: var(--width); + + border-radius: 5; + display: flex; + flex-direction: column; + width + color: var(--miles_primary_light); + margin: 0; + ="en"> + + + + + + + Vite App + + + +
+ + + + diff --git a/css_overrides/localhost:5173/null b/css_overrides/localhost:5173/null new file mode 100644 index 0000000..0e82dee --- /dev/null +++ b/css_overrides/localhost:5173/null @@ -0,0 +1,50 @@ + + aspect-ratio: 1 / 1; + margin: 0; + padding: 0; + + aspect-ratio: 1 /; + margin: 0; + padding: 0; + + aspect-ratio: 1; + margin: 0; + padding: 0; + + + + + + + + + Vite App + + + +
+ + gap: 0; + display: flex; + flex-direction: column; + width: 100%; + ipt> + < + height: 200px; + aspect-ratio: 1 / 1; + margin: 0; + padding: 0; + padding: 0; + padding: 0; + padding: 0; + padding: 0; + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..222a3e4 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + Vite App + + + +
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..473030c --- /dev/null +++ b/main.js @@ -0,0 +1,73 @@ +import './style.css' + +document.querySelector('#app').innerHTML = ` +
+ + +
+ + +
+
+

+ Kompetanse i særklasse

+

+ Miles er et IT-konsulentselskap der gleden over faget og hverandre er de viktigste ledestjernene. Kjernekompetansen vår ligger i utvikling, design, prosjetledelse og rådgivning.

+ + + + + +
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+ + +` + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..094733c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,896 @@ +{ + "name": "miles-wc", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "miles-wc", + "version": "0.0.0", + "devDependencies": { + "vite": "^4.2.0" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.16.tgz", + "integrity": "sha512-baLqRpLe4JnKrUXLJChoTN0iXZH7El/mu58GE3WIA6/H834k0XWvLRmGLG8y8arTRS9hJJibPnF0tiGhmWeZgw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.16.tgz", + "integrity": "sha512-QX48qmsEZW+gcHgTmAj+x21mwTz8MlYQBnzF6861cNdQGvj2jzzFjqH0EBabrIa/WVZ2CHolwMoqxVryqKt8+Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.16.tgz", + "integrity": "sha512-G4wfHhrrz99XJgHnzFvB4UwwPxAWZaZBOFXh+JH1Duf1I4vIVfuYY9uVLpx4eiV2D/Jix8LJY+TAdZ3i40tDow==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.16.tgz", + "integrity": "sha512-/Ofw8UXZxuzTLsNFmz1+lmarQI6ztMZ9XktvXedTbt3SNWDn0+ODTwxExLYQ/Hod91EZB4vZPQJLoqLF0jvEzA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.16.tgz", + "integrity": "sha512-SzBQtCV3Pdc9kyizh36Ol+dNVhkDyIrGb/JXZqFq8WL37LIyrXU0gUpADcNV311sCOhvY+f2ivMhb5Tuv8nMOQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.16.tgz", + "integrity": "sha512-ZqftdfS1UlLiH1DnS2u3It7l4Bc3AskKeu+paJSfk7RNOMrOxmeFDhLTMQqMxycP1C3oj8vgkAT6xfAuq7ZPRA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.16.tgz", + "integrity": "sha512-rHV6zNWW1tjgsu0dKQTX9L0ByiJHHLvQKrWtnz8r0YYJI27FU3Xu48gpK2IBj1uCSYhJ+pEk6Y0Um7U3rIvV8g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.16.tgz", + "integrity": "sha512-n4O8oVxbn7nl4+m+ISb0a68/lcJClIbaGAoXwqeubj/D1/oMMuaAXmJVfFlRjJLu/ZvHkxoiFJnmbfp4n8cdSw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.16.tgz", + "integrity": "sha512-8yoZhGkU6aHu38WpaM4HrRLTFc7/VVD9Q2SvPcmIQIipQt2I/GMTZNdEHXoypbbGao5kggLcxg0iBKjo0SQYKA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.16.tgz", + "integrity": "sha512-9ZBjlkdaVYxPNO8a7OmzDbOH9FMQ1a58j7Xb21UfRU29KcEEU3VTHk+Cvrft/BNv0gpWJMiiZ/f4w0TqSP0gLA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.16.tgz", + "integrity": "sha512-TIZTRojVBBzdgChY3UOG7BlPhqJz08AL7jdgeeu+kiObWMFzGnQD7BgBBkWRwOtKR1i2TNlO7YK6m4zxVjjPRQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.16.tgz", + "integrity": "sha512-UPeRuFKCCJYpBbIdczKyHLAIU31GEm0dZl1eMrdYeXDH+SJZh/i+2cAmD3A1Wip9pIc5Sc6Kc5cFUrPXtR0XHA==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.16.tgz", + "integrity": "sha512-io6yShgIEgVUhExJejJ21xvO5QtrbiSeI7vYUnr7l+v/O9t6IowyhdiYnyivX2X5ysOVHAuyHW+Wyi7DNhdw6Q==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.16.tgz", + "integrity": "sha512-WhlGeAHNbSdG/I2gqX2RK2gfgSNwyJuCiFHMc8s3GNEMMHUI109+VMBfhVqRb0ZGzEeRiibi8dItR3ws3Lk+cA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.16.tgz", + "integrity": "sha512-gHRReYsJtViir63bXKoFaQ4pgTyah4ruiMRQ6im9YZuv+gp3UFJkNTY4sFA73YDynmXZA6hi45en4BGhNOJUsw==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.16.tgz", + "integrity": "sha512-mfiiBkxEbUHvi+v0P+TS7UnA9TeGXR48aK4XHkTj0ZwOijxexgMF01UDFaBX7Q6CQsB0d+MFNv9IiXbIHTNd4g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.16.tgz", + "integrity": "sha512-n8zK1YRDGLRZfVcswcDMDM0j2xKYLNXqei217a4GyBxHIuPMGrrVuJ+Ijfpr0Kufcm7C1k/qaIrGy6eG7wvgmA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.16.tgz", + "integrity": "sha512-lEEfkfsUbo0xC47eSTBqsItXDSzwzwhKUSsVaVjVji07t8+6KA5INp2rN890dHZeueXJAI8q0tEIfbwVRYf6Ew==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.16.tgz", + "integrity": "sha512-jlRjsuvG1fgGwnE8Afs7xYDnGz0dBgTNZfgCK6TlvPH3Z13/P5pi6I57vyLE8qZYLrGVtwcm9UbUx1/mZ8Ukag==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.16.tgz", + "integrity": "sha512-TzoU2qwVe2boOHl/3KNBUv2PNUc38U0TNnzqOAcgPiD/EZxT2s736xfC2dYQbszAwo4MKzzwBV0iHjhfjxMimg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.16.tgz", + "integrity": "sha512-B8b7W+oo2yb/3xmwk9Vc99hC9bNolvqjaTZYEfMQhzdpBsjTvZBlXQ/teUE55Ww6sg//wlcDjOaqldOKyigWdA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.16.tgz", + "integrity": "sha512-xJ7OH/nanouJO9pf03YsL9NAFQBHd8AqfrQd7Pf5laGyyTt/gToul6QYOA/i5i/q8y9iaM5DQFNTgpi995VkOg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.16.tgz", + "integrity": "sha512-aeSuUKr9aFVY9Dc8ETVELGgkj4urg5isYx8pLf4wlGgB0vTFjxJQdHnNH6Shmx4vYYrOTLCHtRI5i1XZ9l2Zcg==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.17.16", + "@esbuild/android-arm64": "0.17.16", + "@esbuild/android-x64": "0.17.16", + "@esbuild/darwin-arm64": "0.17.16", + "@esbuild/darwin-x64": "0.17.16", + "@esbuild/freebsd-arm64": "0.17.16", + "@esbuild/freebsd-x64": "0.17.16", + "@esbuild/linux-arm": "0.17.16", + "@esbuild/linux-arm64": "0.17.16", + "@esbuild/linux-ia32": "0.17.16", + "@esbuild/linux-loong64": "0.17.16", + "@esbuild/linux-mips64el": "0.17.16", + "@esbuild/linux-ppc64": "0.17.16", + "@esbuild/linux-riscv64": "0.17.16", + "@esbuild/linux-s390x": "0.17.16", + "@esbuild/linux-x64": "0.17.16", + "@esbuild/netbsd-x64": "0.17.16", + "@esbuild/openbsd-x64": "0.17.16", + "@esbuild/sunos-x64": "0.17.16", + "@esbuild/win32-arm64": "0.17.16", + "@esbuild/win32-ia32": "0.17.16", + "@esbuild/win32-x64": "0.17.16" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/is-core-module": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", + "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/resolve": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", + "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dev": true, + "dependencies": { + "is-core-module": "^2.11.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/rollup": { + "version": "3.20.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", + "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/vite": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz", + "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==", + "dev": true, + "dependencies": { + "esbuild": "^0.17.5", + "postcss": "^8.4.21", + "resolve": "^1.22.1", + "rollup": "^3.18.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + }, + "dependencies": { + "@esbuild/android-arm": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.16.tgz", + "integrity": "sha512-baLqRpLe4JnKrUXLJChoTN0iXZH7El/mu58GE3WIA6/H834k0XWvLRmGLG8y8arTRS9hJJibPnF0tiGhmWeZgw==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.16.tgz", + "integrity": "sha512-QX48qmsEZW+gcHgTmAj+x21mwTz8MlYQBnzF6861cNdQGvj2jzzFjqH0EBabrIa/WVZ2CHolwMoqxVryqKt8+Q==", + "dev": true, + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.16.tgz", + "integrity": "sha512-G4wfHhrrz99XJgHnzFvB4UwwPxAWZaZBOFXh+JH1Duf1I4vIVfuYY9uVLpx4eiV2D/Jix8LJY+TAdZ3i40tDow==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.16.tgz", + "integrity": "sha512-/Ofw8UXZxuzTLsNFmz1+lmarQI6ztMZ9XktvXedTbt3SNWDn0+ODTwxExLYQ/Hod91EZB4vZPQJLoqLF0jvEzA==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.16.tgz", + "integrity": "sha512-SzBQtCV3Pdc9kyizh36Ol+dNVhkDyIrGb/JXZqFq8WL37LIyrXU0gUpADcNV311sCOhvY+f2ivMhb5Tuv8nMOQ==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.16.tgz", + "integrity": "sha512-ZqftdfS1UlLiH1DnS2u3It7l4Bc3AskKeu+paJSfk7RNOMrOxmeFDhLTMQqMxycP1C3oj8vgkAT6xfAuq7ZPRA==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.16.tgz", + "integrity": "sha512-rHV6zNWW1tjgsu0dKQTX9L0ByiJHHLvQKrWtnz8r0YYJI27FU3Xu48gpK2IBj1uCSYhJ+pEk6Y0Um7U3rIvV8g==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.16.tgz", + "integrity": "sha512-n4O8oVxbn7nl4+m+ISb0a68/lcJClIbaGAoXwqeubj/D1/oMMuaAXmJVfFlRjJLu/ZvHkxoiFJnmbfp4n8cdSw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.16.tgz", + "integrity": "sha512-8yoZhGkU6aHu38WpaM4HrRLTFc7/VVD9Q2SvPcmIQIipQt2I/GMTZNdEHXoypbbGao5kggLcxg0iBKjo0SQYKA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.16.tgz", + "integrity": "sha512-9ZBjlkdaVYxPNO8a7OmzDbOH9FMQ1a58j7Xb21UfRU29KcEEU3VTHk+Cvrft/BNv0gpWJMiiZ/f4w0TqSP0gLA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.16.tgz", + "integrity": "sha512-TIZTRojVBBzdgChY3UOG7BlPhqJz08AL7jdgeeu+kiObWMFzGnQD7BgBBkWRwOtKR1i2TNlO7YK6m4zxVjjPRQ==", + "dev": true, + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.16.tgz", + "integrity": "sha512-UPeRuFKCCJYpBbIdczKyHLAIU31GEm0dZl1eMrdYeXDH+SJZh/i+2cAmD3A1Wip9pIc5Sc6Kc5cFUrPXtR0XHA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.16.tgz", + "integrity": "sha512-io6yShgIEgVUhExJejJ21xvO5QtrbiSeI7vYUnr7l+v/O9t6IowyhdiYnyivX2X5ysOVHAuyHW+Wyi7DNhdw6Q==", + "dev": true, + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.16.tgz", + "integrity": "sha512-WhlGeAHNbSdG/I2gqX2RK2gfgSNwyJuCiFHMc8s3GNEMMHUI109+VMBfhVqRb0ZGzEeRiibi8dItR3ws3Lk+cA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.16.tgz", + "integrity": "sha512-gHRReYsJtViir63bXKoFaQ4pgTyah4ruiMRQ6im9YZuv+gp3UFJkNTY4sFA73YDynmXZA6hi45en4BGhNOJUsw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.16.tgz", + "integrity": "sha512-mfiiBkxEbUHvi+v0P+TS7UnA9TeGXR48aK4XHkTj0ZwOijxexgMF01UDFaBX7Q6CQsB0d+MFNv9IiXbIHTNd4g==", + "dev": true, + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.16.tgz", + "integrity": "sha512-n8zK1YRDGLRZfVcswcDMDM0j2xKYLNXqei217a4GyBxHIuPMGrrVuJ+Ijfpr0Kufcm7C1k/qaIrGy6eG7wvgmA==", + "dev": true, + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.16.tgz", + "integrity": "sha512-lEEfkfsUbo0xC47eSTBqsItXDSzwzwhKUSsVaVjVji07t8+6KA5INp2rN890dHZeueXJAI8q0tEIfbwVRYf6Ew==", + "dev": true, + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.16.tgz", + "integrity": "sha512-jlRjsuvG1fgGwnE8Afs7xYDnGz0dBgTNZfgCK6TlvPH3Z13/P5pi6I57vyLE8qZYLrGVtwcm9UbUx1/mZ8Ukag==", + "dev": true, + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.16.tgz", + "integrity": "sha512-TzoU2qwVe2boOHl/3KNBUv2PNUc38U0TNnzqOAcgPiD/EZxT2s736xfC2dYQbszAwo4MKzzwBV0iHjhfjxMimg==", + "dev": true, + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.16.tgz", + "integrity": "sha512-B8b7W+oo2yb/3xmwk9Vc99hC9bNolvqjaTZYEfMQhzdpBsjTvZBlXQ/teUE55Ww6sg//wlcDjOaqldOKyigWdA==", + "dev": true, + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.16.tgz", + "integrity": "sha512-xJ7OH/nanouJO9pf03YsL9NAFQBHd8AqfrQd7Pf5laGyyTt/gToul6QYOA/i5i/q8y9iaM5DQFNTgpi995VkOg==", + "dev": true, + "optional": true + }, + "esbuild": { + "version": "0.17.16", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.16.tgz", + "integrity": "sha512-aeSuUKr9aFVY9Dc8ETVELGgkj4urg5isYx8pLf4wlGgB0vTFjxJQdHnNH6Shmx4vYYrOTLCHtRI5i1XZ9l2Zcg==", + "dev": true, + "requires": { + "@esbuild/android-arm": "0.17.16", + "@esbuild/android-arm64": "0.17.16", + "@esbuild/android-x64": "0.17.16", + "@esbuild/darwin-arm64": "0.17.16", + "@esbuild/darwin-x64": "0.17.16", + "@esbuild/freebsd-arm64": "0.17.16", + "@esbuild/freebsd-x64": "0.17.16", + "@esbuild/linux-arm": "0.17.16", + "@esbuild/linux-arm64": "0.17.16", + "@esbuild/linux-ia32": "0.17.16", + "@esbuild/linux-loong64": "0.17.16", + "@esbuild/linux-mips64el": "0.17.16", + "@esbuild/linux-ppc64": "0.17.16", + "@esbuild/linux-riscv64": "0.17.16", + "@esbuild/linux-s390x": "0.17.16", + "@esbuild/linux-x64": "0.17.16", + "@esbuild/netbsd-x64": "0.17.16", + "@esbuild/openbsd-x64": "0.17.16", + "@esbuild/sunos-x64": "0.17.16", + "@esbuild/win32-arm64": "0.17.16", + "@esbuild/win32-ia32": "0.17.16", + "@esbuild/win32-x64": "0.17.16" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "requires": { + "function-bind": "^1.1.1" + } + }, + "is-core-module": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", + "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true + }, + "path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "postcss": { + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "dev": true, + "requires": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "resolve": { + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", + "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dev": true, + "requires": { + "is-core-module": "^2.11.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + } + }, + "rollup": { + "version": "3.20.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", + "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", + "dev": true, + "requires": { + "fsevents": "~2.3.2" + } + }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, + "supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true + }, + "vite": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz", + "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==", + "dev": true, + "requires": { + "esbuild": "^0.17.5", + "fsevents": "~2.3.2", + "postcss": "^8.4.21", + "resolve": "^1.22.1", + "rollup": "^3.18.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..0bd9226 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "miles-wc", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^4.2.0" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/web-components/miles-info.css b/public/web-components/miles-info.css new file mode 100644 index 0000000..3fb80e4 --- /dev/null +++ b/public/web-components/miles-info.css @@ -0,0 +1,100 @@ +:host { + display: block; + color: inherit; + } + .podcast-teaser { + box-sizing: border-box; + width: 100vw; + position: relative; + height: 300px; + } + .bg { + background-color: rgb(255,48,59, 0.1); + width: 100%; + height: 66%; + position: absolute; + bottom: 0; + } + .inner { + height: 100%; + display: flex; + flex-direction: column; + width: 80%; + margin: auto; + align-items: center; + gap: 1em; + padding-top: 2em; + } + + miles-info { + right: 10%; + left: 10%; + position: absolute; + top: 0.75em; + + } + + @media (min-width: 768px) { + .inner { + flex-direction: row; + padding-top: 0em; + } + + .podcast-teaser { + height: 210px; + } + } + + + @media (max-width: 1024px) and (min-width: 769px) { + miles-info { + width: 28%; + left: unset; + top: 1em; + right: 4em; + } + } + + + @media (min-width: 1025px) { + miles-info { + max-width: 250px; + left: unset; + width: unset; + top: 1em; + right: 4em; + } + } + + .left { + display: flex; + flex-direction: row; + align-items: center; + gap: 1em; + } + .text { + display: flex; + flex-direction: column; + } + h3, p { + margin: 0; + } + p { + font-size: 0.8em; + color: var(--miles_primary_dark); + } + svg { + height: 70px; + width: 70px; + } + + a { + color: inherit; + right: 4em; + bottom: 1em; + position: absolute; + display: inline-block; + } + a::after { + content: "→"; + } \ No newline at end of file diff --git a/public/web-components/miles-slider.css b/public/web-components/miles-slider.css new file mode 100644 index 0000000..03a7382 --- /dev/null +++ b/public/web-components/miles-slider.css @@ -0,0 +1,63 @@ +:host { + --slide-container-height: 20vh; + --slide-container-width: 100vw; + --slides-offset: 0; + + display: block; + width: var(--slide-container-width); + height: var(--slide-container-height); +} + +section { + width: var(--slide-container-width); + height: var(--slide-container-height); + position: relative; + overflow: hidden; +} + +section .slides { + transform: translateX(calc(var(--slides-offset) * var(--slide-container-height))); + position: absolute; + display: flex; + flex-direction: row; + transition: transform 1s cubic-bezier(0.46, 0.03, 0.52, 0.96); +} + +section .slides figure { + box-sizing: border-box; + padding:1rem; + height: var(--slide-container-height); + aspect-ratio: 1 / 1; + margin: 0; +} + +section .slides figure img { + height: 100%; + width: 100%; + object-fit: cover; +} + +nav { + position: absolute; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1em; + bottom: 0; + height: 3rem; + background-color: var(--miles_secondary_four); +} + +.nav-dot { + border-radius: 50%; + display: inline-block; + height:1em; + width: 1em; + background-color: var(--miles_primary_light); +} + +.active { + background-color: var(--miles_secondary_five); +} diff --git a/public/web-components/miles-wc.js b/public/web-components/miles-wc.js new file mode 100644 index 0000000..8e68e2f --- /dev/null +++ b/public/web-components/miles-wc.js @@ -0,0 +1,1470 @@ + + +/** + * Miles LOGO + */ +const template = document.createElement("template") +template.innerHTML = ` + + +` + +class MilesLogo extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(template.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } +} + +const MilesLogoName = "miles-logo" + +if (!customElements.get(MilesLogoName)) { + customElements.define(MilesLogoName, MilesLogo) +} + +/** + * Miles Cloud + */ + +const templateCloud = document.createElement("template") +templateCloud.innerHTML = ` + +
+ + + + + + + + + + + + + + + + + + + +
+ `; + +class MilesCloud extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(templateCloud.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } +} + +const MilesCloudName = "miles-cloud" + +if (!customElements.get(MilesCloudName)) { + customElements.define(MilesCloudName, MilesCloud) +} + +/** + * Miles heart + */ + +const templateHeart = document.createElement("template") +templateHeart.innerHTML = ` + +
+ + + + + + + + + +
+ `; + + class MilesHeart extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(templateHeart.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } + } + + const MilesHeartName = "miles-heart" + + if (!customElements.get(MilesHeartName)) { + customElements.define(MilesHeartName, MilesHeart) + } + + /** + * Miles Curve + */ + + const templateCurve = document.createElement("template") + templateCurve.innerHTML = ` + +
+ + + + + + + + + + +
+ `; + + class MilesCurve extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(templateCurve.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } + } + + const MilesCurveName = "miles-curve" + + if (!customElements.get(MilesCurveName)) { + customElements.define(MilesCurveName, MilesCurve) + } + + /** + * Miles Bulb + */ + + const templateBulb = document.createElement("template") + templateBulb.innerHTML = ` + +
+ + + + + + + + + + + + + + + + + + + + + +
+ `; + + class MilesBulb extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(templateBulb.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } + } + + const MilesBulbName = "miles-bulb" + + if (!customElements.get(MilesBulbName)) { + customElements.define(MilesBulbName, MilesBulb) + } + + /** + * Miles Cup + */ + + const templateCup = document.createElement("template") + templateCup.innerHTML = ` + +
+ + + + + + + + + + + + + + + + + + +
+ `; + + class MilesCup extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(templateCup.content.cloneNode(true)) + this.svg = shadow.querySelector("svg") + } + + static get observedAttributes() { return ['width', 'height', 'color']; } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === 'width') { + this.svg.setAttribute('width', newValue) + } + if (name === 'height') { + this.svg.setAttribute('height', newValue) + } + if (name === 'color') { + this.svg.setAttribute('fill', newValue) + } + } + } + + const MilesCupName = "miles-cup" + + if (!customElements.get(MilesCupName)) { + customElements.define(MilesCupName, MilesCup) + } + + /** + * Miles Zoom + */ + class MilesZoom extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + +
+ + + + + +
+ ` + } + } + + const MilesZoomName = "miles-zoom" + + if (!customElements.get(MilesZoomName)) { + customElements.define(MilesZoomName, MilesZoom) + } + + /** + * Miles Podcast Icon + */ + class MilesPodd extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + +
+ + + + + + + + + + +
+ ` + } + } + + const MilesPoddName = "miles-pod" + + if (!customElements.get(MilesPoddName)) { + customElements.define(MilesPoddName, MilesPodd) + } + + + /** + * Miles Button Anchor + */ + + class MilesButtonAnchor extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + + + + + ` + } + } + + const MilesButtonAnchorName = "miles-button-anchor" + + if (!customElements.get(MilesButtonAnchorName)) { + customElements.define(MilesButtonAnchorName, MilesButtonAnchor) + } + + /** + * Miles Profile Card + */ + class MilesProfileCard extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + +
+
+ ${this.getAttribute('name')} +
+
+

${this.getAttribute('name')}

+
+ + + +

${this.getAttribute('description')}

+
+
+
+ ` + } + } + + const MilesProfileCardName = "miles-profile-card" + + if (!customElements.get(MilesProfileCardName)) { + customElements.define(MilesProfileCardName, MilesProfileCard) + } + + /** + * Miles info + */ + class MilesInfo extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + +
+ + + + + + +
+ ` + } + } + + const MilesInfoName = "miles-info" + + if (!customElements.get(MilesInfoName)) { + customElements.define(MilesInfoName, MilesInfo) + } + + /** + * Miles Blog Post Card + */ + class MilesBlogPostCard extends HTMLElement { + constructor() { + super() + + } +} + +/** + * Miles Podcast teaser + */ + +class MilesPodcastTeaser extends HTMLElement { + // https://feeds.acast.com/public/shows/63d28f41cd0f720011930608 + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.innerHTML = ` + +
+
+
+
+ + + + +
+

UX - med brukeren i sentrum

+

22. Mars - MilesPodden

+
+
+ Hør alle episodene +
+
+ + + Hør siste episode av MilesPodden! + +
+ `; + } + async connectedCallback() { + // + // await this.fetchRSS(); + } + + fetchRSS = async () => { // https://feeds.acast.com/public/shows/63d28f41cd0f720011930608 + const response = await fetch("https://feeds.acast.com/public/shows/5d28ef74d3cc3f013778b13b", { + mode: "no-cors", + headers: { + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Methods": "GET", + "Content-Type": "text/xml" + } + }); + +console.log(response); + + if (response.ok) { + const rssDataString = await response.text(); + console.log(response.statusText) + console.log(response) + } else { + console.log('Føkk', response.statusText) + } + + + /* + const parsedXML = new window.DOMParser().parseFromString(rssDataString, "text/xml"); + console.log(parsedXML); + */ + } +} + +const MilesPodcastTeaserName = "miles-podcast-teaser" + +if (!customElements.get(MilesPodcastTeaserName)) { + customElements.define(MilesPodcastTeaserName, MilesPodcastTeaser) +} + +/** + * Miles Image Slider + */ + +const sliderStyles = ` +:host { + --slide-container-height: calc(100vw - 2rem); + --slide-container-width: 100vw; + --slides-offset: 0; + + display: block; + width: var(--slide-container-width); + height: var(--slide-container-height); +} + +@media (min-width: 768px) { + :host { + --slide-container-height: 500px; + } +} + +section { + width: var(--slide-container-width); + height: var(--slide-container-height); + position: relative; + overflow: hidden; +} + +section .slides { + transform: translateX(calc(var(--slides-offset) * var(--slide-container-height))); + position: absolute; + display: flex; + flex-direction: row; + transition: transform 1s cubic-bezier(0.46, 0.03, 0.52, 0.96); +} + +section .slides figure { + box-sizing: border-box; + padding:1rem; + height: var(--slide-container-height); + aspect-ratio: 1 / 1; + margin: 0; +} + +section .slides figure img { + height: 100%; + width: 100%; + object-fit: cover; +} + +nav { + max-width: 100vw; + position: absolute; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1em; + bottom: 0; + height: 3rem; + background-color: var(--miles_default_bg); +} + +.nav-dot { + border-radius: 50%; + display: inline-block; + height:0.5em; + width: 0.5em; + background-color: var(--miles_secondary_four); +} + +@media (min-width: 768px) { + .nav-dot { + height:1em; + width: 1em; + } +} + +.active { + background-color: var(--miles_secondary_five); +} +`; + +// @import url('web-components/miles-slider.css'); + +const ImageSliderTemplate = document.createElement("template"); +ImageSliderTemplate.innerHTML = ` + +
+
+ + +
+ `; + + + +class MilesImageSlider extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: "open" }) + shadow.appendChild(ImageSliderTemplate.content.cloneNode(true)); + this.slides = shadow.querySelector(".slides"); + this.controls = shadow.querySelector(".controls"); + this.numberOfSlides = 0; + this.autoPlay = 0; + this.index = 0; + } + + + + connectedCallback() { + this.controls.addEventListener("click", this.goToSlide) + + const slot = this.shadowRoot.querySelector("slot") + if (slot) { + + let slottedElements = slot.assignedElements().length === 1 ? slot.assignedElements()[0].children : slot.assignedElements(); + + if (typeof slottedElements === "object") { + const slottedElementsArray = Array.from(slottedElements); + this.numberOfSlides = slottedElements.length; + try { + slottedElementsArray.forEach((element, index) => { + const figure = document.createElement("figure"); + figure.setAttribute("data-slide-image", index); + if (element.querySelector("img")) { + figure.appendChild(element.querySelector("img")) + this.slides.appendChild(figure) + + const navDot = document.createElement("span"); + navDot.setAttribute("class", "nav-dot") + navDot.setAttribute("data-slide", index) + this.controls.appendChild(navDot) + } + + }) + } catch (error) { + console.log(slottedElements); + } + } + } + + this.setActiveDot(this.index) + } + + disconnectedCallback() { + this.controls.removeEventListener("click", this.goToSlide) + + } + + goToSlide = (e) => { + let index = parseInt(e.target.dataset.slide) * -1; + if (this.numberOfSlides -1 === parseInt(e.target.dataset.slide)) { + index = 0; + } + + this.slides.style.setProperty("--slides-offset", index) + this.setActiveDot(index) + } + + startAutoPlay = (autoplay) => { + if (autoplay) { + this.autoPlay = setInterval(() => { + if (Math.abs(this.index) === this.numberOfSlides - 2) { + this.index = 0; + } else { + this.index--; + } + this.setActiveDot(this.index) + this.slides.style.setProperty("--slides-offset", this.index) + }, 5000) + } + } + + setActiveDot = (index) => { + const allDots = this.controls.querySelectorAll(".nav-dot"); + + allDots.forEach((dot) => { + dot.classList.remove("active") + }) + + allDots.forEach((dot) => { + if (parseInt(dot.getAttribute("data-slide")) === Math.abs(index)) { + dot.classList.add("active") + } + }) + } + + static get observedAttributes() { + return ["inview", "autoplay"]; + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === "inview") { + this.style.setProperty('--slide-container-width', `calc(var(--slide-container-height) * ${parseInt(newValue)})`) + } + + if (name === "autoplay") { + if (newValue === "true") { + this.startAutoPlay(true) + } else { + this.startAutoPlay(true) + } + } + } +} + +const MilesImageSliderName = "miles-image-slider"; + +if (!customElements.get(MilesImageSliderName)) { + customElements.define(MilesImageSliderName, MilesImageSlider) +} + +/** + Miles Fagblogg teaser +*/ + +const MilesFagbloggTeaserTemplate = document.createElement("template"); +MilesFagbloggTeaserTemplate.innerHTML = ` + +
+
+

Miles fagblogg

+
+ +
+
+ + + Hør på podcasten vår! + +
+`; + +class MilesFagbloggTeaser extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: "open" }) + this.shadowRoot.append(MilesFagbloggTeaserTemplate.content.cloneNode(true)) + } + + static get observedAttributes() { + return []; + } + + attributeChangedCallback(name, oldValue, newValue) { + + } + + connectedCallback() { + + } + + disconnectedCallback() { + + } +} + +const MilesFagbloggTeaserName = "miles-fagblogg-teaser"; + +if (!customElements.get(MilesFagbloggTeaserName)) { + customElements.define(MilesFagbloggTeaserName, MilesFagbloggTeaser) +} + +/** + * Miles blog card + */ + +const MilesBlogCardTemplate = document.createElement("template"); +MilesBlogCardTemplate.innerHTML = ` + +
+ + + +
+ + + + + +
Skrevet av
+
+ +
+
+`; + +class MilesBlogCard extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: "open" }) + this.shadowRoot.append(MilesBlogCardTemplate.content.cloneNode(true)) + this.posted = this.shadowRoot.querySelector("#posted") + this.updated = this.shadowRoot.querySelector("#updated") + this.author = this.shadowRoot.querySelector("#author") + } + + static get observedAttributes() { + return ["url", 'author', 'posted', 'updated']; + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name === "url") { + this.shadowRoot.querySelectorAll("a").forEach((el) => { + el.setAttribute("href", newValue) + }) + } + + if (name === "author") { + this.author.textContent = newValue + } + } + + connectedCallback() { + const imageEl = this.shadowRoot.querySelector('slot[name="image"]').assignedElements(); + if (imageEl[0]?.children) { + Array.from(imageEl[0]?.children).forEach((el) => { + el.style.objectFit = "cover"; + el.style.aspectRatio = "2/3"; + el.style.width = "100%"; + }) + } + + const postedEl = this.shadowRoot.querySelector('slot[name="meta"]').assignedElements(); + if (postedEl[0]?.children) { + Array.from(postedEl[0]?.children).forEach((el) => { + const timeArray = Array.from(el.children[0].children); + this.posted.textContent = `${this.timeFormat(new Date(timeArray[0].dateTime))}` + this.updated.textContent = `${this.timeFormat(new Date(timeArray[1].dateTime))}` + }) + postedEl[0].remove() + } + } + + timeFormat = (date) => { + return new Intl.DateTimeFormat( + "no", + { + month: "short", + day: "numeric", + year: "numeric", + } + ).format(date) + } + + disconnectedCallback() { + + } +} + +const MilesBlogCardName = "miles-blog-card"; + +if (!customElements.get(MilesBlogCardName)) { + customElements.define(MilesBlogCardName, MilesBlogCard) +} + +/** + * Miles Overlap Block + */ + +const MilesOverlapBlockTemplate = document.createElement("template"); +MilesOverlapBlockTemplate.innerHTML = ` + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +class MilesOverlapBlock extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: "open" }) + this.shadowRoot.append(MilesOverlapBlockTemplate.content.cloneNode(true)) + this.list = this.shadowRoot.querySelector("#list") + } + + static get observedAttributes() { + return []; + } + + attributeChangedCallback(name, oldValue, newValue) { + + } + + connectedCallback() { + const areas = [ + 'Systemutvikling', + 'Prosjektledelse', + 'Testledelse', + 'Smidig Coaching', + 'Design', + 'Arkitektur', + 'Rådgivning', + ] + const listElement = document.createElement('ul'); + + areas.forEach((text) => { + const listItemEl = document.createElement('li'); + listItemEl.innerHTML = `${text}`; + listElement.append(listItemEl) + }) + this.list.append(listElement) + } + + disconnectedCallback() { + + } +} + +const MilesOverlapBlockName = "miles-overlap-block"; + +if (!customElements.get(MilesOverlapBlockName)) { + customElements.define(MilesOverlapBlockName, MilesOverlapBlock) +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba5049e --- /dev/null +++ b/style.css @@ -0,0 +1,173 @@ + +@charset "UTF-8"; + +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); + +html, body, button, input, select, optgroup, textarea { + color: var(--miles_primary_light); + font-family: "Manrope", sans-serif; + font-size: 16px; + line-height: 28px; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + + background-color:#ffffff; +} +:root { + --miles_primary_dark: #b72318; /* Miles-rød */ + --miles_primary_light: #fbf0e5; /* Krem */ + --miles_secondary_one: #004047; /* Sjøgrønn */ + --miles_secondary_two: #78e8db; /* Turkis */ + --miles_secondary_three: #000000; /* Sort */ + --miles_secondary_four: #450d21; /* Burgunder */ + --miles_secondary_five: #ff303b; /* korall */ + + --miles_default_bg: #F5F5F5; + + --miles_effect_shadow_low: 0 0 4px 0 #00000033; + --miles_effect_shadow_high: 0 0 16px 0 #00000033; + + --content_width: 80vw; + --content_width_max: 1440px; + + --default_padding: 1rem 0.625rem; + --default_padding_large: 2rem 1.25rem; + + --vertical_spacing: 4rem; + --vertical_spacing_large: 8rem; + + --header-height: 72px; + + --miles-h1: 2.5rem; + --miles-h2: 3rem; + --miles-h3: 1.25rem; + + + --halve_margin_offset: calc(calc(100vw - var(--content_width)) / 2); + --halve_margin_offset_large: calc(100vw - var(--content_width)); + + font-family: 'Roboto', sans-serif; +} + +.components { + width: 100vw; +} + +.components miles-image-slider { + margin: auto; +} + + + +miles-fagblogg-teaser .wp-block-latest-posts__list { + position: relative; + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1rem; + margin: 0; + padding: 0; +} + +@media (min-width: 768px) { + miles-fagblogg-teaser .wp-block-latest-posts__list { + position: relative; + grid-template-columns: repeat(3, 250px); + gap: 1rem; + margin: 0; + padding: 0; + } +} + +miles-fagblogg-teaser .wp-block-latest-posts__list li .wp-block-latest-posts__post-title, +miles-fagblogg-teaser .wp-block-latest-posts__list li .wp-block-latest-posts__post-author, +miles-fagblogg-teaser .wp-block-latest-posts__list li .wp-block-latest-posts__post-date { + padding: 0 1rem; + color: var(--miles_secondary_three); +} + +miles-fagblogg-teaser .wp-block-latest-posts__list li .wp-block-latest-posts__post-title { + padding-top: 1.5rem; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; /* number of lines to show */ + line-clamp: 2; + -webkit-box-orient: vertical; + height: 4rem; +} + +miles-fagblogg-teaser .wp-block-latest-posts__list li { + padding-bottom: 2rem; + background-color: rgb(255,48,59, 0.1); + } + + + + miles-fagblogg-teaser .wp-block-latest-posts__list li img { + padding:0; + aspect-ratio: 1 / 1; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + border-radius: 0.5rem 0.5rem 0 0; + } + + miles-fagblogg-teaser .wp-block-latest-posts__list li a { + font-size: 1.25rem; + font-weight: 600; + text-decoration: none; + color: var(--miles_secondary_three); + } + + /* + miles-overlap-block { + display: block; + --width: 50%; + } + + + miles-overlap-block > .miles-overlap-block .wp-block-group { + background-color: var(--miles_default_bg); + color: var(--miles_secondary_three); + padding: 3rem; + width: var(--width); + position: relative; + } + */ + + /* LIST */ + /* + miles-overlap-block .wp-block-group__inner-container ul { + display: flex; + flex-direction: column; + color: var(--miles_primary_light); + background-color: var(--miles_secondary_one); + padding: 3rem; + width: var(--width); + margin: 0; + position: relative; + z-index: 5; + } + */ + + /* + miles-overlap-block .wp-block-group__inner-container ul li { + list-style: none; + padding: 0.5rem 0; + } + + + miles-overlap-block > .miles-overlap-block > .wp-block-group__inner-container { + display: flex; + flex-direction: row; + position: relative; + z-index: 5; + } + + */ + + + + + diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..dfa9790 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,6 @@ +export default { + // config options + server: { + cors: true, + } + } \ No newline at end of file