100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<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>
|
||
<br>
|
||
<br>
|
||
<br>
|
||
.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
#aboutContainer{
|
||
width: 95%;
|
||
height: 30%;
|
||
position: fixed;
|
||
top: 38%;
|
||
left: 2.5%;
|
||
z-index: 66;
|
||
cursor: ns-resize;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#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>
|