diff --git a/index.html b/index.html index 325d342..3dac66c 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,122 @@ - + - - - - lolv333 + + + + L(. O.)L + +
+
+
+ +

LOL

+
+
+ Git + Wiki + Matrix + Fediverse + Diffusion +
+ +
+
+
+

+ Hackerspace queer +

+

+ Lieu de réappropriation,
+ réparation & recyclage
+ des objets techniques
+ & technologiques +

+
+
+

+ 7 place Chazette +
+ 69001 Lyon +

+ 45° 46' 23.698" N +
+ 4° 50' 14.052" E +

+ +
+
+

+ Dim.   15h → 23h
+ Lun.   15h → 23h
+ Mar.   15h → 23h

+   → nocturne :  
+ Ven.   21h → 5h +

+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+

Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :

+
+
+
+
+

+ Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique, + qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.
+ Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes. +

+

+ Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre. + Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc. + Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi ! +

+

+ Nous revendiquons l'ouverture du code et des techniques, + le partage des connaissances et l'autogestion, + la liberté et l'anti-fascisme.

+ Nous condamnons donc toute forme de violence et de discrimination dans nos locaux. + Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie. +

+
+
+
+ évènements
   → → → à venir : +
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json index e64eb9e..202f840 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "lolv333", "version": "0.0.0", "dependencies": { - "vue": "^3.5.39" + "vite-svg-loader": "^5.1.1", + "vue": "^3.5.39", + "vue3-moveable": "^0.28.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.7", @@ -61,6 +63,48 @@ "node": ">=6.9.0" } }, + "node_modules/@cfcs/core": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.6.tgz", + "integrity": "sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==", + "license": "MIT", + "dependencies": { + "@egjs/component": "^3.0.2" + } + }, + "node_modules/@daybrush/utils": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz", + "integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==", + "license": "MIT" + }, + "node_modules/@egjs/agent": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.4.tgz", + "integrity": "sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==", + "license": "MIT" + }, + "node_modules/@egjs/children-differ": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz", + "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==", + "license": "MIT", + "dependencies": { + "@egjs/list-differ": "^1.0.0" + } + }, + "node_modules/@egjs/component": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz", + "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==", + "license": "MIT" + }, + "node_modules/@egjs/list-differ": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz", + "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==", + "license": "MIT" + }, "node_modules/@emnapi/core": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", @@ -394,6 +438,34 @@ "dev": true, "license": "MIT" }, + "node_modules/@scena/dragscroll": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.4.0.tgz", + "integrity": "sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.6.0", + "@scena/event-emitter": "^1.0.2" + } + }, + "node_modules/@scena/event-emitter": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz", + "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.1.1" + } + }, + "node_modules/@scena/matrix": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz", + "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.4.0" + } + }, "node_modules/@tybys/wasm-util": { "version": "0.10.3", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz", @@ -522,12 +594,183 @@ "integrity": "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA==", "license": "MIT" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "license": "ISC" + }, + "node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "license": "MIT", + "engines": { + "node": ">= 10" + } + }, + "node_modules/croact": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/croact/-/croact-1.0.4.tgz", + "integrity": "sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@egjs/list-differ": "^1.0.0" + } + }, + "node_modules/croact-css-styled": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/croact-css-styled/-/croact-css-styled-1.1.9.tgz", + "integrity": "sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "css-styled": "~1.0.8", + "framework-utils": "^1.1.0" + } + }, + "node_modules/croact-moveable": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/croact-moveable/-/croact-moveable-0.9.0.tgz", + "integrity": "sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@egjs/agent": "^2.2.1", + "@egjs/children-differ": "^1.0.1", + "@egjs/list-differ": "^1.0.0", + "@scena/dragscroll": "^1.4.0", + "@scena/event-emitter": "^1.0.5", + "@scena/matrix": "^1.1.1", + "croact-css-styled": "^1.1.9", + "css-to-mat": "^1.1.1", + "framework-utils": "^1.1.0", + "gesto": "^1.19.3", + "overlap-area": "^1.1.0", + "react-css-styled": "^1.1.9", + "react-moveable": "~0.56.0" + }, + "peerDependencies": { + "croact": "^1.0.4" + } + }, + "node_modules/css-select": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", + "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-styled": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz", + "integrity": "sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0" + } + }, + "node_modules/css-to-mat": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz", + "integrity": "sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@scena/matrix": "^1.0.0" + } + }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/css-what": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz", + "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "license": "MIT", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "license": "CC0-1.0" + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "license": "MIT" }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -538,6 +781,73 @@ "node": ">=8" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/dom-serializer/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/entities": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz", @@ -574,6 +884,12 @@ } } }, + "node_modules/framework-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz", + "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==", + "license": "MIT" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -589,6 +905,34 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/gesto": { + "version": "1.19.4", + "resolved": "https://registry.npmjs.org/gesto/-/gesto-1.19.4.tgz", + "integrity": "sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@scena/event-emitter": "^1.0.2" + } + }, + "node_modules/keycode": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", + "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==", + "license": "MIT" + }, + "node_modules/keycon": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/keycon/-/keycon-1.4.0.tgz", + "integrity": "sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==", + "license": "MIT", + "dependencies": { + "@cfcs/core": "^0.0.6", + "@daybrush/utils": "^1.7.1", + "@scena/event-emitter": "^1.0.2", + "keycode": "^2.2.0" + } + }, "node_modules/lightningcss": { "version": "1.32.0", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", @@ -859,6 +1203,31 @@ "@jridgewell/sourcemap-codec": "^1.5.5" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "license": "CC0-1.0" + }, + "node_modules/moveable": { + "version": "0.53.0", + "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.53.0.tgz", + "integrity": "sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@scena/event-emitter": "^1.0.5", + "croact": "^1.0.4", + "croact-moveable": "~0.9.0", + "react-moveable": "~0.56.0" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, "node_modules/nanoid": { "version": "3.3.15", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", @@ -877,6 +1246,27 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, + "node_modules/overlap-area": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz", + "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.7.1" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -924,6 +1314,46 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/react-css-styled": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz", + "integrity": "sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==", + "license": "MIT", + "dependencies": { + "css-styled": "~1.0.8", + "framework-utils": "^1.1.0" + } + }, + "node_modules/react-moveable": { + "version": "0.56.0", + "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.56.0.tgz", + "integrity": "sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@egjs/agent": "^2.2.1", + "@egjs/children-differ": "^1.0.1", + "@egjs/list-differ": "^1.0.0", + "@scena/dragscroll": "^1.4.0", + "@scena/event-emitter": "^1.0.5", + "@scena/matrix": "^1.1.1", + "css-to-mat": "^1.1.1", + "framework-utils": "^1.1.0", + "gesto": "^1.19.3", + "overlap-area": "^1.1.0", + "react-css-styled": "^1.1.9", + "react-selecto": "^1.25.0" + } + }, + "node_modules/react-selecto": { + "version": "1.26.3", + "resolved": "https://registry.npmjs.org/react-selecto/-/react-selecto-1.26.3.tgz", + "integrity": "sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==", + "license": "MIT", + "dependencies": { + "selecto": "~1.26.3" + } + }, "node_modules/rolldown": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz", @@ -958,6 +1388,33 @@ "@rolldown/binding-win32-x64-msvc": "1.1.3" } }, + "node_modules/sax": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz", + "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==", + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=11.0.0" + } + }, + "node_modules/selecto": { + "version": "1.26.3", + "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz", + "integrity": "sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==", + "license": "MIT", + "dependencies": { + "@daybrush/utils": "^1.13.0", + "@egjs/children-differ": "^1.0.1", + "@scena/dragscroll": "^1.4.0", + "@scena/event-emitter": "^1.0.5", + "css-styled": "^1.0.8", + "css-to-mat": "^1.1.1", + "framework-utils": "^1.1.0", + "gesto": "^1.19.4", + "keycon": "^1.2.0", + "overlap-area": "^1.1.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -967,6 +1424,31 @@ "node": ">=0.10.0" } }, + "node_modules/svgo": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz", + "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==", + "license": "MIT", + "dependencies": { + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0", + "sax": "^1.5.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, "node_modules/tinyglobby": { "version": "0.2.17", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", @@ -1070,6 +1552,19 @@ } } }, + "node_modules/vite-svg-loader": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz", + "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==", + "license": "MIT", + "dependencies": { + "debug": "^4.3.4", + "svgo": "^3.3.3" + }, + "peerDependencies": { + "vue": ">=3.2.13" + } + }, "node_modules/vue": { "version": "3.5.39", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.39.tgz", @@ -1090,6 +1585,16 @@ "optional": true } } + }, + "node_modules/vue3-moveable": { + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/vue3-moveable/-/vue3-moveable-0.28.0.tgz", + "integrity": "sha512-vplQO0XkxVEtXMDh2/lZE+c5kMycGXAfYFMvbwFKi8UVYzVk8MTgVHr4fxO9Z+4i4Rb+U/IEIgkhHRMAbx8FJg==", + "license": "MIT", + "dependencies": { + "framework-utils": "^1.1.0", + "moveable": "~0.53.0" + } } } } diff --git a/package.json b/package.json index d8260d7..e78c0b7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "preview": "vite preview" }, "dependencies": { - "vue": "^3.5.39" + "vite-svg-loader": "^5.1.1", + "vue": "^3.5.39", + "vue3-moveable": "^0.28.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.7", diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index 6893eb1..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/icons.svg b/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/typo/Avara-Black.woff2 b/public/typo/Avara-Black.woff2 new file mode 100644 index 0000000..24a6617 Binary files /dev/null and b/public/typo/Avara-Black.woff2 differ diff --git a/public/typo/Karrik-Italic.woff2 b/public/typo/Karrik-Italic.woff2 new file mode 100644 index 0000000..203f936 Binary files /dev/null and b/public/typo/Karrik-Italic.woff2 differ diff --git a/public/typo/Karrik-Regular.woff2 b/public/typo/Karrik-Regular.woff2 new file mode 100644 index 0000000..8754815 Binary files /dev/null and b/public/typo/Karrik-Regular.woff2 differ diff --git a/public/typo/Lineal-Heavy.ttf b/public/typo/Lineal-Heavy.ttf new file mode 100644 index 0000000..ee6c18d Binary files /dev/null and b/public/typo/Lineal-Heavy.ttf differ diff --git a/public/typo/PressStart2P-Regular.ttf b/public/typo/PressStart2P-Regular.ttf new file mode 100644 index 0000000..2442aff Binary files /dev/null and b/public/typo/PressStart2P-Regular.ttf differ diff --git a/public/typo/Velvelyne-Bold.ttf b/public/typo/Velvelyne-Bold.ttf new file mode 100644 index 0000000..a9a4c84 Binary files /dev/null and b/public/typo/Velvelyne-Bold.ttf differ diff --git a/public/typo/Velvelyne-Light.ttf b/public/typo/Velvelyne-Light.ttf new file mode 100644 index 0000000..8601c1d Binary files /dev/null and b/public/typo/Velvelyne-Light.ttf differ diff --git a/src/App.vue b/src/App.vue index 62ebe1b..b324744 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,21 @@ - - + + + + diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg new file mode 100644 index 0000000..ef2b02f --- /dev/null +++ b/src/assets/favicon.svg @@ -0,0 +1,76 @@ + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/fleche.svg b/src/assets/fleche.svg new file mode 100644 index 0000000..dab8f42 --- /dev/null +++ b/src/assets/fleche.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/hero.png b/src/assets/hero.png deleted file mode 100644 index 02251f4..0000000 Binary files a/src/assets/hero.png and /dev/null differ diff --git a/src/assets/icons/about.svg b/src/assets/icons/about.svg new file mode 100644 index 0000000..edd3e8d --- /dev/null +++ b/src/assets/icons/about.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg new file mode 100644 index 0000000..7ed3714 --- /dev/null +++ b/src/assets/icons/back.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 0000000..3821cc9 --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/contact.svg b/src/assets/icons/contact.svg new file mode 100644 index 0000000..296b560 --- /dev/null +++ b/src/assets/icons/contact.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg new file mode 100644 index 0000000..6f8cb9c --- /dev/null +++ b/src/assets/icons/file.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg new file mode 100644 index 0000000..258f9f5 --- /dev/null +++ b/src/assets/icons/folder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100644 index 0000000..1262b3e --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg new file mode 100644 index 0000000..a2ed00b --- /dev/null +++ b/src/assets/icons/link.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg new file mode 100644 index 0000000..ba6b56f --- /dev/null +++ b/src/assets/icons/next.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg new file mode 100644 index 0000000..35f115d --- /dev/null +++ b/src/assets/icons/play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/prev.svg b/src/assets/icons/prev.svg new file mode 100644 index 0000000..904d3db --- /dev/null +++ b/src/assets/icons/prev.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/reload.svg b/src/assets/icons/reload.svg new file mode 100644 index 0000000..af82d98 --- /dev/null +++ b/src/assets/icons/reload.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/logo/logo-contour.svg b/src/assets/logo/logo-contour.svg new file mode 100644 index 0000000..291cc0a --- /dev/null +++ b/src/assets/logo/logo-contour.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo/logo-contreforme.svg b/src/assets/logo/logo-contreforme.svg new file mode 100644 index 0000000..aa92ebd --- /dev/null +++ b/src/assets/logo/logo-contreforme.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/logo/logo-forme.svg b/src/assets/logo/logo-forme.svg new file mode 100644 index 0000000..a0000d6 --- /dev/null +++ b/src/assets/logo/logo-forme.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo_hackerspaces_monde.png b/src/assets/logo_hackerspaces_monde.png new file mode 100644 index 0000000..952f48c Binary files /dev/null and b/src/assets/logo_hackerspaces_monde.png differ diff --git a/src/assets/plan.svg b/src/assets/plan.svg new file mode 100644 index 0000000..ebb4cb0 --- /dev/null +++ b/src/assets/plan.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/vite.svg b/src/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index f91553d..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/src/components/lolStatus.vue b/src/components/lolStatus.vue new file mode 100644 index 0000000..0ec6198 --- /dev/null +++ b/src/components/lolStatus.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/src/lolStatus.js b/src/lolStatus.js new file mode 100644 index 0000000..274d443 --- /dev/null +++ b/src/lolStatus.js @@ -0,0 +1,7 @@ +import { reactive } from 'vue' + +export const lolState = reactive( + { + isOpen: false + } +) diff --git a/src/main.js b/src/main.js index 2425c0f..91dace5 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,27 @@ import { createApp } from 'vue' +// import CSS global import './style.css' +// import app vue racine import App from './App.vue' +// import composants +import lolStatus from './components/lolStatus.vue' +// création app racine +const app = createApp(App); -createApp(App).mount('#app') +//Composants +app.component('lolStatusDiv', lolStatus); + +//Démarrage dans div#app de index.html +app.mount('#app'); + +let menuActive = false; +document.documentElement.setAttribute('data-theme', 'closed'); +document.querySelector('#menuBtn').addEventListener('click', () => { + let target = document.querySelector('#mainContainer .right'); + let btnIcon = document.querySelector('#menuBtn .icon') + menuActive = !menuActive + + target.style.display = menuActive ? 'flex' : 'none'; + target.style.visibility = menuActive ? 'visible' : 'collapse'; + btnIcon.classList.toggle('rotated'); +}) diff --git a/src/style.css b/src/style.css index 527d4fb..f0efb34 100644 --- a/src/style.css +++ b/src/style.css @@ -1,296 +1,584 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } +:root[data-theme="closed"]{ + --back-color: #FFFF4D; + --main-color: #000000; } -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } +:root[data-theme="open"]{ + --back-color: #00FF44; + --main-color: #000000; } -body { +/*====================Typo*/ +@font-face { + font-family: 'karrik'; + src: url('./typo/Karrik-Italic.woff2').format('woff2'); + font-style: italic; +} + +@font-face { + font-family: 'karrik'; + src: url('./typo/Karrik-Regular.woff2') format('woff2'); + font-style: normal; +} + +@font-face { + font-family: 'velvelyne'; + src: url('./typo/Velvelyne-Light.ttf') format('truetype'); + font-weight: normal; +} + +@font-face { + font-family: 'avara'; + src: url('./typo/Avara-Black.woff2') format('woff2'); +} + +@font-face { + font-family: 'pressStart2P'; + src: url('./typo/PressStart2P-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'velvelyne'; + src:url('./typo/Velvelyne-Bold.ttf') format('truetype'); + font-weight: bold; +} + +/*===================Animation*/ +@keyframes blink { + 0% { color: var(--back-color);} + 15% { color: var(--main-color);} + 35% { color: var(--main-color);} + 50% { color: var(--back-color);} + 65% { color: var(--main-color);} + 85% { color: var(--main-color);} + 100% { color: var(--back-color);} +} + +@keyframes blinkBack { + 0% { background-color: var(--back-color);} + 15% { background-color: var(--main-color);} + 35% { background-color: var(--main-color);} + 50% { background-color: var(--back-color);} + 65% { background-color: var(--main-color);} + 85% { background-color: var(--main-color);} + 100% { background-color: var(--back-color);} +} + +@keyframes blinkBorder { + 0% { border-color: var(--main-color);} + 15% { border-color: var(--accent-color);} + 35% { border-color: var(--accent-color);} + 50% { border-color: var(--main-color);} + 65% { border-color: var(--accent-color);} + 85% { border-color: var(--accent-color);} + 100% { border-color: var(--main-color);} +} + +@keyframes float { + 0% { transform: translateY(0px); } + 35% { transform: translateY(1px); } + 50% { transform: translateY(-10px); } + 65% { transform: translateY(1px); } + 100% { transform: translateY(0px); } +} + +/*=============Désact défault*/ +input { + -webkit-appearance: none !important; + appearance: none !important; +} + +a{ + text-decoration: none; + color: inherit; + cursor: alias; +} + +button{ + cursor: cell; +} + +a p{ + cursor:inherit; +} + +a button{ + cursor: inherit; +} + +p{ + cursor: inherit; + pointer-events: none; +} + +.dg{ + display: none !important; + height: 0; + overflow: hidden; +} + +/*==========================Moveable*/ +.moveable-control-box { + display: none !important; +} + +/*=============Body & background*/ +html, body{ margin: 0; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} - -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#app { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; + background-color: var(--main-color); width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } + height:100%; + position: fixed; + inset: 0; + overflow-x: hidden; + overflow-y: scroll; + display: block; + scrollbar-color: var(--back-color) var(--main-color); + scrollbar-width: thin; + z-index: -33; +} + +#mainContainer{ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + height: auto; + gap: 0; +} + +/*=====================BUTTONS*/ +.textBtnStyle{ + font-family: 'karrik'; + font-size: 13.12px; + background-color: var(--back-color); + color: var(--main-color); + border-color: var(--main-color); + border-style: solid; + border-width: 1.75px; + border-radius: 16.1px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.textBtnStyle:hover{ + background-color: var(--main-color); + color: var(--back-color); +} + +.iconBtnStyle{ + background-color: var(--back-color); + color: var(--main-color); + border-color: var(--main-color); + border-style: solid; + border-width: thin; + border-radius: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.iconBtnStyle:hover{ + background-color: var(--main-color); + color: var(--back-color); +} + +/*=============INTERFACE*/ +.uiStyle{ + background-color: var(--back-color); + border-color: var(--main-color); + border-style: solid; + border-width: thin; +} + +.icon{ + height: 16.1px; + width: auto; + fill: currentColor; + pointer-events: none; +} + +#topBar{ + position: relative; + top: 0; + left: 0; + width: 100vw; + height: 50px; + z-index: 3; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + color: var(--main-color); + padding-left: 7.77px; + padding-right: 16.1px; + gap: 7.77px; + box-sizing: border-box; + + p{ + font-family: 'velvelyne'; + font-size: 40px; + font-weight: bold; + padding-top: 7.77px; + } + + #mainLogo{ + height: auto; + width: 50px; + } + + .left{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + width: auto; + gap: 7.77px; + height: 100%; + } + + .right{ + display: none; + visibility: collapse; + flex-direction: column; + align-items: center; + justify-content: space-around; + width:33%; + height: 200px; + position: absolute; + top: 55px; + right: 7.77px; + z-index: 3; + + .textBtnStyle{ + width: 16.1%; + min-width: 93px; + height: 33px; + text-transform: uppercase; + } + + .textBtnStyle:hover{ + border-color: var(--back-color); + } + } + + .iconBtnStyle{ + width: 33px; + height: 33px; + } + + #menuBtn{ + .icon.rotated{ + transform: rotate(0); + } + + .icon{ + transform: rotate(45deg); + } + } + + @media(min-width: 700px){ + #menuBtn{ + display: none; + visibility: collapse; + } + + .right{ + display: flex; + visibility: visible; + flex-direction: row; + align-items: center; + justify-content: space-around; + width:70%; + height: 100%; + position: relative; + top: 0; + left: 0; + } + } +} + +#mainInfo{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 2fr 1fr; + grid-template-areas: + "topL topR" + "midL midR" + "botL botR"; + box-sizing: border-box; + width: 100vw; + height: auto; + align-items: stretch; + + @media(min-width: 700px){ + height: 90vh; + } + + .uiStyle{ + width:100%; + height: auto; + padding-left: 7.77px; + box-sizing: border-box; + font-family: 'velvelyne'; + font-size: 13.12px; + font-weight: bold; + } + + #planContainer{ + width: 200%; + height: auto; + color: var(--back-color); + display: flex; + flex-direction: column; + align-items: center; + + #plan{ + position: relative; + width: 90%; + margin-bottom: 13.12px; + } + #fleche{ + position: absolute; + + width: 90%; + fill: currentColor; + z-index: -1; + } + @media(max-width: 700px){ + grid-row: 2; + grid-column: 1 / 2; + } + } + + #title{ + grid-area: topL; + font-size: 22px; + line-height: .7; + height: 100%; + + #desc{ + font-family: 'velvelyne'; + font-style: normal; + font-size: 13.12px; + line-height: 1em; + text-transform: uppercase; + + } + } + + #address{ + grid-area: topR; + font-family: 'karrik'; + color: var(--back-color); + font-style: normal; + font-size: 13.12px; + line-height: 1em; + text-transform: uppercase; + padding-left: 13.12px; + + #hackerLogo{ + width: 77px; + height: auto; + align-self: end; + position: absolute; + right: 13.12px; + top: 117px; + } + + } + + #openingHours{ + grid-area: botL; + text-align: right; + padding-right: 13.12px; + font-weight: normal; + line-height: 1em; + margin-top: -13.12px; + + strong{ + font-weight: bold; + } + } + + #lolOpener{ + grid-area: botR; + font-weight: normal; + padding-right: 7.77px; + line-height: 1em; + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + gap: 0; + height: auto; + + #lolStatus{ + width:90%; + height: 44px; + border-color: var(--main-color); + border-style: solid; + border-width: thin; + border-radius: 0; + align-self: center; + margin-bottom: 7.77px; + + } + } + + @media(min-width: 700px){ + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr 1.61fr 77px; + height: auto; + + .uiStyle{ + font-size: 16.1px; + } + + #planContainer{ + width: 100vh; + grid-row: 2; + grid-column: 2; + margin-left: 0; + margin-top: -88px; + + + + @media(min-width: 1300px){ + margin-top: -117px; + margin-bottom: 77px; + } + + + #plan{ + width:90%; + height: auto; + } + #fleche{ + width:60%; + height: auto; + } + } + + #openingHours{ + grid-area: midL; + height: 60% + } + + #lolOpener{ + width: 300%; + grid-column: 1 / 2; + grid-row: 3; + flex-direction: row; + gap: 7.77px; + align-items: center; + justify-content: space-between; + padding-left: 16.1px; + height: 77px; + + #lolStatus{ + width: 44%; + align-self: center; + margin-top: 7.77px; + } + } + + #title{ + margin-bottom: 3.33px; + font-size: 27px; + line-height: 0; + + #desc{ + font-size: 16.1px; + } + } + + #address #hackerLogo{ + grid-area: midL; + position: relative; + top: 0; + left: 7.77px; + right: unset; + } + } + + @media(min-width: 1300px){ + .uiStyle{ + font-size: 16.1px; + } + + #lolOpener{ + font-size: 22px; + } + #address{ + font-size: 22px; + + #hackerLogo{ + width: 117px; + } + } + #openingHours{ + font-size: 33px; + } + + #title{ + margin-bottom: 3.33px; + font-size: 44px; + line-height: 0; + + #desc{ + font-size: 22px; + } + } + } +} + +#aboutSection{ + position: relative; + top: 0; + left: 0; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + box-sizing: border-box; + + #aboutText{ + width: 60%; + height: 100%; + overflow-y: scroll; + padding-left: 4.44px; + padding-right: 13.12px; + box-sizing: border-box; + + p{ + font-family: 'velvelyne'; + font-weight: normal; + font-size: 13.12px; + color: var(--main-color); + } + } + + #eventSection{ + width: 40%; + height: auto; + + #title{ + height: 44px; + padding-top: 7.77px; + padding-left: 7.77px; + box-sizing: border-box; + font-family: 'karrik'; + font-style: italic; + font-size: 13.12px; + text-transform: uppercase; + color: var(--main-color); + } + } } diff --git a/vite.config.js b/vite.config.js index bbcf80c..b1c0264 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,18 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import path from 'path' +import svgLoader from 'vite-svg-loader' // https://vite.dev/config/ export default defineConfig({ - plugins: [vue()], + plugins: [vue(), svgLoader()], + server: { + host: '0.0.0.0', + port: 8080 + }, + resolve: { + alias: { + '@': path.resolve(__dirname, './src') + } + } })