tunnel: création de toute la structure et contenu textes, sans les images de drag, interactivté et style (bug avec le dossier typo dans /public => déplacer dans assets)
This commit is contained in:
Generated
+245
@@ -8,6 +8,7 @@
|
||||
"name": "v0-appel-projet",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"vite-svg-loader": "^5.1.1",
|
||||
"vue": "^3.5.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -990,12 +991,185 @@
|
||||
"integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
|
||||
"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/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-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/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",
|
||||
@@ -1098,6 +1272,18 @@
|
||||
"@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/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.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
@@ -1116,6 +1302,18 @@
|
||||
"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/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
@@ -1208,6 +1406,15 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz",
|
||||
"integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==",
|
||||
"license": "BlueOak-1.0.0",
|
||||
"engines": {
|
||||
"node": ">=11.0.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",
|
||||
@@ -1217,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.15",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||
@@ -1309,6 +1541,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.30",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vite-svg-loader": "^5.1.1",
|
||||
"vue": "^3.5.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,12 +1,413 @@
|
||||
<script setup>
|
||||
import GrainOverlay from './assets/noise.svg?component'
|
||||
import Two from './assets/2.svg?component'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="mainContainer">
|
||||
<GrainOverlay name="grain" class="overlay"/>
|
||||
<workshopPannel v-show="workshopActive" @close="workshopToggle" :class="{alonePannel: workshopIsAlone}"></workshopPannel>
|
||||
<aboutPannel v-show="aboutActive" @close="aboutToggle"></aboutPannel>
|
||||
<div id="titleContainer">
|
||||
<div id="windowContainer">
|
||||
<div id="imgContainer">
|
||||
|
||||
</div>
|
||||
<div id="textContainer">
|
||||
<Two name="two" class="numberTwo"/>
|
||||
<div class="titleText" id="drag">
|
||||
<p>DRAGs<b class="smallerText"> AND</b></p>
|
||||
</div>
|
||||
<div class="titleText" id="nerd">
|
||||
<p>NERDs<b class="smallerText">#</b></p>
|
||||
</div>
|
||||
<div class="descText" id="descTextTop">
|
||||
<b id="subtitle">> Appel à Projet</b>
|
||||
<br>
|
||||
Drag shows, musique électronique, synthés vidéos
|
||||
<br class="smallWidthBreaker">
|
||||
et autre performances nerds
|
||||
<br>
|
||||
On recherche actuellement : artistes drags,
|
||||
<br class="smallWidthBreaker">
|
||||
artistes nerds, crafties pour la scéno ...
|
||||
</div>
|
||||
<div id="bottomInfo">
|
||||
<div id="date" class="descText" ><b>22 Mai 2026</b></div>
|
||||
<div id="adress" class="descText" ><b>Grrrnd Zero</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btnContainer">
|
||||
<button type="button" class="btnStyle" id="about" @click="aboutToggle">À PROPOS DE NOUS...</button>
|
||||
<button type="button" class="btnStyle" id="workshop" @click="workshopToggle">ATELIERS PARTICPATIFS</button>
|
||||
<button type="button" class="btnStyle" id="joinUs" @click="contactToggle">JE VEUX PARTICIPER!</button>
|
||||
<contactPannel v-show="contactActive" @close="contactToggle"></contactPannel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.alonePannel{
|
||||
transform: translate(0);
|
||||
}
|
||||
/*=========Texture grain*/
|
||||
.overlay{
|
||||
inset:0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: multiply;
|
||||
background-blend-mode: multiply;
|
||||
z-index: 1;
|
||||
opacity:0.333;
|
||||
}
|
||||
|
||||
/*=========Main*/
|
||||
#mainContainer{
|
||||
position: fixed;
|
||||
inset:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#titleContainer{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#windowContainer{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
border-style: solid;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--dark-color);
|
||||
border-width: thin;
|
||||
margin-bottom: 3.33%;
|
||||
}
|
||||
|
||||
#imgContainer{
|
||||
position:relative;
|
||||
z-index:33;
|
||||
width:100%;
|
||||
height:65%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#textContainer{
|
||||
position:relative;
|
||||
z-index:33;
|
||||
width:100%;
|
||||
height:44.4%;
|
||||
background-color: var(--dark-color);
|
||||
border-radius: 0 0 16.1px 16.1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*==============Title*/
|
||||
.titleText{
|
||||
background-color: var(--dark-color);
|
||||
width: 77%;
|
||||
height: 50px;
|
||||
color: var(--light-color);
|
||||
font-family: 'PressStart2P';
|
||||
font-size: 44.4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.numberTwo{
|
||||
position:fixed;
|
||||
top:44.4%;
|
||||
right:3.33%;
|
||||
width:40%;
|
||||
height:auto;
|
||||
fill: currentColor;
|
||||
z-index:35;
|
||||
animation: blink 10s infinite;
|
||||
}
|
||||
|
||||
#drag{
|
||||
position:fixed;
|
||||
justify-content: flex-end;
|
||||
top:40%;
|
||||
right:1%;
|
||||
z-index: 33;
|
||||
}
|
||||
#drag p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#nerd{
|
||||
position:fixed;
|
||||
justify-content: flex-start;
|
||||
top:48%;
|
||||
left:1%;
|
||||
z-index: 34;
|
||||
}
|
||||
#nerd p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.smallerText{
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
/*==============Subitle*/
|
||||
.descText{
|
||||
text-align: left;
|
||||
color: var(--light-color);
|
||||
font-family: 'velvelyne';
|
||||
font-size: 16.1px;
|
||||
margin-left: 16.1px;
|
||||
margin-right: 16.1px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#descTextTop{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#subtitle{
|
||||
font-size: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/*================Boutons en bas*/
|
||||
#btnContainer{
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
height: 7%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btnStyle{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 33.3%;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--dark-color);
|
||||
background-color: var(--accent-color-2);
|
||||
color: var(--dark-color);
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 13.12px;
|
||||
margin-bottom: 3.33%;
|
||||
margin-right: 1.61%;
|
||||
margin-left: 1.61%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btnStyle:hover{
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#joinUs{
|
||||
animation: float 1s infinite;
|
||||
}
|
||||
|
||||
/*============Format tel*/
|
||||
@media(max-width:999px){
|
||||
#windowContainer{
|
||||
margin-top: 10%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#bottomInfo{
|
||||
display: flex;
|
||||
width:100%;
|
||||
margin-left: 16.1px;
|
||||
margin-right: 16.1px;
|
||||
margin-top: 20px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/*============Format pc étroit*/
|
||||
@media(min-width:1000px){
|
||||
.smallWidthBreaker{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#mainContainer{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#titleContainer{
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/*===========Highlight WS*/
|
||||
.alonePannel{
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#windowContainer{
|
||||
margin-top: 5vh;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#btnContainer{
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin-top: 20vh;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.btnStyle{
|
||||
height: 5%;
|
||||
width: 80%;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
|
||||
.titleText{
|
||||
font-size: 75px;
|
||||
width: 44%;
|
||||
height: 77px;
|
||||
}
|
||||
|
||||
|
||||
#drag{
|
||||
top:43%;
|
||||
left:33.3%;
|
||||
}
|
||||
#drag p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#nerd{
|
||||
top:54%;
|
||||
left:25%;
|
||||
}
|
||||
#nerd p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#bottomInfo{
|
||||
display: flex;
|
||||
width:100%;
|
||||
margin-left: 0;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.numberTwo{
|
||||
top:50%;
|
||||
right:21.5%;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*============Format pc large*/
|
||||
@media(min-width:1500px){
|
||||
.titleText{
|
||||
font-size: 87px;
|
||||
width: 44%;
|
||||
height: 77px;
|
||||
}
|
||||
|
||||
#drag{
|
||||
top:43%;
|
||||
left:33.3%;
|
||||
}
|
||||
#drag p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#nerd{
|
||||
top:55%;
|
||||
left:25%;
|
||||
}
|
||||
#nerd p{
|
||||
position:absolute;
|
||||
margin-top: 16.1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'App',
|
||||
data(){
|
||||
return{
|
||||
aboutActive: false,
|
||||
contactActive: false,
|
||||
workshopActive: true,
|
||||
workshopIsAlone: true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
aboutToggle(){
|
||||
this.aboutActive = !this.aboutActive;
|
||||
this.checkAlone();
|
||||
},
|
||||
contactToggle(){
|
||||
this.contactActive = !this.contactActive;
|
||||
},
|
||||
workshopToggle(){
|
||||
this.workshopActive = !this.workshopActive;
|
||||
},
|
||||
checkAlone(){
|
||||
if(this.aboutActive === false){
|
||||
this.workshopIsAlone = true;
|
||||
}else{
|
||||
this.workshopIsAlone = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log("Vue root app is fully loaded!");
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.66 304.5">
|
||||
<path d="M2.79,304.5l34.12-87h43.5l17.06-43.5h43.5l17.06-43.5h87l17.06-43.5h43.5l17.06-43.5h-130.5l-17.06,43.5h-87l17.06-43.5h43.5L165.72,0h217.5l-17.06,43.5h43.5l-34.12,87h-43.5l-17.06,43.5h-43.5l-17.06,43.5h-87l-17.06,43.5h174l-17.06,43.5H2.79Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 400 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.73 53.59">
|
||||
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
@@ -0,0 +1,12 @@
|
||||
<!-- svg: first layer -->
|
||||
<svg viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'>
|
||||
<filter id='noiseFilter'>
|
||||
<feTurbulence
|
||||
type='fractalNoise'
|
||||
baseFrequency='333'
|
||||
numOctaves='6'
|
||||
stitchTiles='stitch'/>
|
||||
</filter>
|
||||
|
||||
<rect width='100vw' height='100vh' opacity="1" filter='url(#noiseFilter)'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 333 B |
@@ -0,0 +1,164 @@
|
||||
/*====================Couleurs*/
|
||||
:root{
|
||||
--light-color: #FFFFFFFF;
|
||||
--dark-color: #000000FF;
|
||||
--accent-color: #C303FFFF;
|
||||
--accent-color-2: #00FF76FF;
|
||||
}
|
||||
|
||||
/*====================Typo*/
|
||||
@font-face {
|
||||
font-family: 'lineal';
|
||||
src: url('./typo/Lineal-Heavy.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pressStart2P';
|
||||
src: url('./typo/PressStart2P-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src: url('./typo/Velvelyne-Light.ttf') format('truetype');
|
||||
font-weight:lighter;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'avara';
|
||||
src: url('./typo/Avara-Black.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*====================App Racine Vue*/
|
||||
#app{
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
cursor: cell;
|
||||
scrollbar-color: var(--accent-color-2) transparent;
|
||||
scrollbar-width: thin;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
|
||||
background-image:
|
||||
radial-gradient(150px 150px at 15% 80%, var(--dark-color) 18%, var(--accent-color) 87%, transparent 100%),
|
||||
radial-gradient(200px 200px at 33% 50%, var(--dark-color) 20%, var(--accent-color) 93%, transparent 99%),
|
||||
radial-gradient(66% 100% at 0% 0%, var(--dark-color) 15%, var(--accent-color) 45%, var(--light-color) 64%, transparent 81%),
|
||||
radial-gradient(150% 100% at 80% 0%, var(--dark-color) 0%, var(--accent-color) 0%, var(--light-color) 27%, transparent 100%),
|
||||
radial-gradient(142% 91% at -6% 74%, var(--accent-color) 4%, transparent 99%),
|
||||
radial-gradient(142% 200% at 83% 77%, var(--dark-color) 20%, var(--accent-color) 39%, var(--light-color) 69%);
|
||||
}
|
||||
|
||||
/*===================Desact. Default*/
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*===================Animation*/
|
||||
@keyframes blink {
|
||||
0% { color: var(--accent-color);}
|
||||
15% { color: var(--accent-color-2);}
|
||||
35% { color: var(--accent-color-2);}
|
||||
50% { color: var(--accent-color);}
|
||||
65% { color: var(--accent-color-2);}
|
||||
85% { color: var(--accent-color-2);}
|
||||
100% { color: var(--accent-color);}
|
||||
}
|
||||
|
||||
@keyframes blinkBack {
|
||||
0% { background-color: var(--accent-color);}
|
||||
15% { background-color: var(--accent-color-2);}
|
||||
35% { background-color: var(--accent-color-2);}
|
||||
50% { background-color: var(--accent-color);}
|
||||
65% { background-color: var(--accent-color-2);}
|
||||
85% { background-color: var(--accent-color-2);}
|
||||
100% { background-color: var(--accent-color);}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
35% { transform: translateY(1px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
65% { transform: translateY(1px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
/*===================Classes générales*/
|
||||
|
||||
.windowStyle{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--light-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--dark-color);
|
||||
}
|
||||
|
||||
.windowTitle{
|
||||
width:100%;
|
||||
height:50px;
|
||||
background-color: var(--dark-color);
|
||||
border-radius: 16.1px 16.1px 0 0;
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
color: var(--light-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.windowTitleLower{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: lighter;
|
||||
font-size: 13.12px;
|
||||
}
|
||||
|
||||
.closeBtn{
|
||||
color: var(--light-color);
|
||||
background-color: var(--dark-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--light-color);
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeBtn:hover{
|
||||
color: var(--dark-color);
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
|
||||
.icon{
|
||||
height:16.1px;
|
||||
width:auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.windowContent{
|
||||
height:77%;
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/close.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="aboutContainer" class="windowStyle">
|
||||
<div class="windowTitle">
|
||||
<p>
|
||||
<b class="windowTitleLower">À Propos du collectif</b>
|
||||
<br>
|
||||
Drags and Nerds:
|
||||
</p>
|
||||
<button type="button" class="closeBtn" @click="$emit('close')">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
<div id="aboutText">
|
||||
<div>
|
||||
Nous sommes un collectif antifasciste, nous sommes opposéxs à toute forme d’oppression et <b id="accentAbout">nous condamnons:</b>
|
||||
<p id="accentAbout">
|
||||
> le racisme
|
||||
<br>
|
||||
> la misogynie
|
||||
<br>
|
||||
> les queerphobies
|
||||
<br>
|
||||
> la grossophobie
|
||||
<br>
|
||||
> le validisme
|
||||
<br>
|
||||
> le classisme
|
||||
<br>
|
||||
> la putophobie
|
||||
</p>
|
||||
On veut que nos soirées soient centrées autour de l’inclusivité : chacunx doit s’y sentir bien, nous voulons créer du lien entre les différentes communautés (nerds, LGBTQIA+, les personnes racisées, les personnes handi, les bricoleuxes, les personnes précaires etc…)
|
||||
<br>
|
||||
Pour cette raison, nous imposons notamment <b id="accentAbout">le port du masque FFP2 pour toutes les activités se déroulant à l'intérieur.</b>
|
||||
<br>
|
||||
On veut aussi que nos soirées soient respectueuses de l’environnement (il faut utiliser un maximum de matériaux de récupérations) et véganes (pas de vente de produits d’origine animale).
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#aboutContainer{
|
||||
width: 95%;
|
||||
height: 30%;
|
||||
position: fixed;
|
||||
top: 38%;
|
||||
left: 2.5%;
|
||||
z-index: 66;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
#aboutText{
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
padding-left: 10px;
|
||||
padding-right: 15px;
|
||||
padding-top: 10px;
|
||||
text-align: left;
|
||||
color: var(--dark-color);
|
||||
font-weight: bold;
|
||||
font-family: 'velvelyne';
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
#accentAbout{
|
||||
font-family: 'lineal';
|
||||
font-size: 21px;
|
||||
}
|
||||
/*=======================Format PC*/
|
||||
@media(min-width: 1000px){
|
||||
#aboutContainer{
|
||||
width: 20%;
|
||||
height: 50%;
|
||||
top: 3.33%;
|
||||
left: 3.33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'AboutPannel',
|
||||
emits:['close'],
|
||||
mounted(){
|
||||
console.log("About pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/close.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="contactContainer" class="windowStyle">
|
||||
<div class="windowTitle">
|
||||
<p>Contacts:</p>
|
||||
<button type="button" class="closeBtn" @click="$emit('close')">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent" id="contactContent">
|
||||
<div id="contactCardContainer">
|
||||
<a href="#" class="contactLink">
|
||||
<div class="contactCard">
|
||||
<div id="contactName">Urazoria</div>
|
||||
<div id="contactField">Perf Drag</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="contactLink">
|
||||
<div class="contactCard">
|
||||
<div id="contactName">Kiwi</div>
|
||||
<div id="contactField">Perf Nerds</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="contactLink">
|
||||
<div class="contactCard">
|
||||
<div id="contactName">Vega</div>
|
||||
<div id="contactField">Scéno</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#contactCardContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:95%;
|
||||
height:91%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.contactCard{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
color: var(--dark-color);
|
||||
font-weight: bold;
|
||||
font-family: 'velvelyne';
|
||||
font-size: 16.1px;
|
||||
border-style: solid;
|
||||
border-color: var(--dark-color);
|
||||
border-width: thin;
|
||||
border-radius: 13.12px;
|
||||
}
|
||||
|
||||
.contactCard:hover{
|
||||
animation: blinkBack 10s infinite;
|
||||
}
|
||||
|
||||
.contactLink{
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#contactContainer{
|
||||
width: 95%;
|
||||
height: 22.2%;
|
||||
position: fixed;
|
||||
top: 68.8%;
|
||||
left: 2.5%;
|
||||
z-index: 66;
|
||||
}
|
||||
|
||||
#contactField{
|
||||
font-family: 'lineal';
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#contactContent{
|
||||
position:relative;
|
||||
height:100%;
|
||||
}
|
||||
/*=======================Format PC*/
|
||||
@media(min-width: 1000px){
|
||||
#contactContainer{
|
||||
width: 20%;
|
||||
height: 55%;
|
||||
top: 40%;
|
||||
left: 79%;
|
||||
}
|
||||
|
||||
#contactCardContainer{
|
||||
flex-direction: column;
|
||||
margin-top: 3.33%;
|
||||
}
|
||||
|
||||
.contactCard{
|
||||
width: 93%;
|
||||
}
|
||||
.contactLink{
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'ContactPannel',
|
||||
emits:['close'],
|
||||
mounted(){
|
||||
console.log("Contact pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/close.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="workshopContainer" class="windowStyle">
|
||||
<div class="windowTitle">
|
||||
<p>
|
||||
Atelier Drags and Nerds 1/3
|
||||
</p>
|
||||
<button type="button" class="closeBtn" @click="$emit('close')">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
<div id="workshopText">
|
||||
<p>
|
||||
A toutes les drags, tous les nerds et l'ensemble des personnes entre les deux !<br/>
|
||||
Vous êtes invité·es à participer aux ateliers meetup Drags&Nerds !
|
||||
</p>
|
||||
<p>
|
||||
Le premier atelier meetup c'est le <strong id="accentWS"><time datetime="2026-03-21">21 Mars 2026</time> <br>
|
||||
au <a href="https://labolyon.fr">Laboratoire Ouvert Lyonnais</a></strong><br>7 Place Louis Chazette 69001 Lyon
|
||||
</p>
|
||||
<p>
|
||||
Que vous aimiez dessiner, coudre et crafter des costumes à paillettes.
|
||||
Coder, souder, clouer, imprimer en 3D ou en 2D...
|
||||
Que votre truc ce soit d'écrire des histoires toutes plus queer les unes que les autres, des poèmes lyriques ou encore du code source.
|
||||
Drags&Nerds c'est tout ça et bien plus.
|
||||
</p>
|
||||
<p>
|
||||
Pendant les ateliers, on prépare nos performances pour le grand drag show du <time datetime="2026-05-22">22 Mai 2026</time> au Grrrnd Zero.<br/>
|
||||
On construit des scenes, des histoires, des makeups et des costumes.
|
||||
On met tout en place pour que le 22 mai prochain, on puisse briller sur la grande scène du Grrrnd Zero.
|
||||
</p>
|
||||
<p>
|
||||
Tu as envie de faire du lips sync ? De jouer de ton synthé ?
|
||||
Ou juste de donner un coup de pouce a des drags pour leurs show.
|
||||
Il y a une place pour toi.
|
||||
</p>
|
||||
<p>
|
||||
<strong id="accentWS">Venez, quelque soit votre intérêt spécifique.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
<div style="margin-left: -3rem; width: calc(100% + 3rem); text-align: center; margin-top: 3rem;">
|
||||
<p style="font-size: 1.2em; font-weight: bold; padding: 0;">
|
||||
<a style="display: block; text-align: center;" href="https://drags-nerds.net/">drags-nerds.net</a>
|
||||
</p>
|
||||
<script type="module" src="https://esm.sh/webcomponent-qr-code"></script>
|
||||
<qr-code data="https://drags-nerds.net/"></qr-code>
|
||||
</div>
|
||||
*/
|
||||
#workshopContainer{
|
||||
width: 95%;
|
||||
height: 36%;
|
||||
position: fixed;
|
||||
top: 1.61%;
|
||||
left: 2.5%;
|
||||
z-index: 66;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
a{
|
||||
color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#workshopText{
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
padding-left: 10px;
|
||||
padding-right: 15px;
|
||||
text-align: left;
|
||||
color: var(--dark-color);
|
||||
font-weight: bold;
|
||||
font-family: 'velvelyne';
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
#accentWS{
|
||||
font-family: 'lineal';
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#workshopText > p:first-of-type {
|
||||
background: black;
|
||||
color: var(--dark-color);
|
||||
margin-top: 3.33px;
|
||||
padding-left: 3.33px;
|
||||
animation: blinkBack 10s infinite;
|
||||
}
|
||||
/*=======================Format PC*/
|
||||
@media(min-width: 1000px){
|
||||
#workshopContainer{
|
||||
width: 44.4%;
|
||||
height: 33.3%;
|
||||
top: 3.33%;
|
||||
left: 25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'WorkshopPannel',
|
||||
emits:['close'],
|
||||
mounted(){
|
||||
console.log("Workshop pannel pannel is loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -4,13 +4,18 @@ import './assets/style.css'
|
||||
// import app vue racine
|
||||
import App from './App.vue'
|
||||
// import composants
|
||||
|
||||
import AboutPannel from './components/AboutPannel.vue'
|
||||
import ContactPannel from './components/ContactPannel.vue'
|
||||
import WorkshopPannel from './components/WorkshopPannel.vue'
|
||||
|
||||
|
||||
// création app racine
|
||||
const app = createApp(App);
|
||||
|
||||
//Composants
|
||||
app.component('aboutPannel', AboutPannel);
|
||||
app.component('contactPannel', ContactPannel);
|
||||
app.component('workshopPannel', WorkshopPannel);
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
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,
|
||||
|
||||
Reference in New Issue
Block a user