edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar
This commit is contained in:
@@ -1,25 +1,31 @@
|
||||
[
|
||||
{
|
||||
"type": "folder",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Artistes DRAGs",
|
||||
"description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
|
||||
"children": [
|
||||
{
|
||||
"type": "folder",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Urazoria",
|
||||
"description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
|
||||
"children": [
|
||||
{
|
||||
"type": "image",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Urazoria003.star",
|
||||
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
|
||||
"src":"./DATA/Images/ura-bleu.png"
|
||||
"src":"./DATA/Images/ura-bleu.png",
|
||||
"like": 0,
|
||||
"isLiked": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Urazoria.loveMsg",
|
||||
"description": "Coucou !"
|
||||
@@ -28,6 +34,7 @@
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Urazoria.loveMsg",
|
||||
"description": "Coucou !"
|
||||
@@ -36,18 +43,21 @@
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Artistes NERDs",
|
||||
"description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
|
||||
"children": [
|
||||
{
|
||||
"type": "folder",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Théo",
|
||||
"description": "Theo est un musicien qui construit des synthés modulaires",
|
||||
"children": [
|
||||
{
|
||||
"type": "link",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Theo.web",
|
||||
"description": "Réseaux de Theo",
|
||||
@@ -64,6 +74,7 @@
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Theo.loveMsg",
|
||||
"description": "Hello !"
|
||||
@@ -74,12 +85,14 @@
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Autres",
|
||||
"description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
|
||||
"children": [
|
||||
{
|
||||
"type": "link",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Background.web",
|
||||
"description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
|
||||
@@ -92,16 +105,20 @@
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "DNN.loveMsg",
|
||||
"description": "Hello again!"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"date": "33/33",
|
||||
"isSelected": false,
|
||||
"caption": "Urazoria003.star",
|
||||
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
|
||||
"src":"./DATA/Images/ura-vert.png"
|
||||
"src":"./DATA/Images/ura-vert.png",
|
||||
"like": 0,
|
||||
"isLiked": false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 38 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@@ -38,11 +38,11 @@
|
||||
/*===================Animation*/
|
||||
@keyframes blink {
|
||||
0% { color: var(--accent-color);}
|
||||
15% { color: var(--main-color);}
|
||||
35% { color: var(--main-color);}
|
||||
15% { color: var(--back-color);}
|
||||
35% { color: var(--back-color);}
|
||||
50% { color: var(--accent-color);}
|
||||
65% { color: var(--main-color);}
|
||||
85% { color: var(--main-color);}
|
||||
65% { color: var(--back-color);}
|
||||
85% { color: var(--back-color);}
|
||||
100% { color: var(--accent-color);}
|
||||
}
|
||||
|
||||
@@ -89,6 +89,7 @@ a button{
|
||||
}
|
||||
|
||||
p{
|
||||
pointer-events: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
@@ -222,6 +223,42 @@ canvas {
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
/*==================Reaction Bar for indi pannels*/
|
||||
.reactBar{
|
||||
margin-left: -16.1%;
|
||||
width: 77%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-family: 'lineal';
|
||||
font-weight: normal;
|
||||
color: var(--main-color);
|
||||
padding: 0;
|
||||
}
|
||||
.reactBar .reactStatStyle{
|
||||
text-align: center;
|
||||
width: 33px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.reactBar .icon{
|
||||
height: 16.1px;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
.reactBar .iconBtnStyle{
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 33px;
|
||||
}
|
||||
.reactBar .textBtnStyle{
|
||||
height: 33px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.reactedStyle{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/*==============Window*/
|
||||
.windowStyle{
|
||||
|
||||
@@ -15,7 +15,9 @@ export const dataStorage = reactive({
|
||||
},
|
||||
selectedImg: {
|
||||
src: "",
|
||||
caption: ""
|
||||
caption: "",
|
||||
like: 0,
|
||||
isLiked: false
|
||||
},
|
||||
selectedLink:{
|
||||
linksData: [],
|
||||
|
||||
@@ -34,13 +34,21 @@
|
||||
</div>
|
||||
<div class="windowContent" id="artistContent">
|
||||
<p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
|
||||
<div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
|
||||
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
|
||||
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
|
||||
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
|
||||
<p class="itemCaption">{{item.caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop>
|
||||
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
|
||||
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
|
||||
<p class="itemCaption">{{item.caption}}</p>
|
||||
<p class="itemCaption">*auteurice*</p>
|
||||
<p class="itemCaption">{{item.date}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
|
||||
<p>{{displayedDescription}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +118,7 @@
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
/*=================GRID DISPLAY*/
|
||||
.theMatrix{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
@@ -158,7 +167,7 @@
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
cursor: cell;
|
||||
}
|
||||
|
||||
.itemStyle:hover{
|
||||
@@ -187,8 +196,7 @@
|
||||
}
|
||||
.selectedItemStyle .icon{
|
||||
height:auto;
|
||||
width:50%;
|
||||
fill: currentColor;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.itemCaption{
|
||||
@@ -222,6 +230,65 @@
|
||||
grid-auto-rows: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/*======================LIST DISPLAY*/
|
||||
.nevrEndingList{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 66%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 7.77px;
|
||||
}
|
||||
|
||||
.listItemStyle{
|
||||
width:100%;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 7.77px;
|
||||
margin-left: 1.61px;
|
||||
cursor: cell;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
border-radius: 16.1px;
|
||||
}
|
||||
|
||||
.listItemStyle:hover{
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemStyle .icon{
|
||||
height: 16.1px;
|
||||
width: 33px;
|
||||
margin-left: 16.1px;
|
||||
margin-right: 16.1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.listItemStyle .itemCaption{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 16.1px;
|
||||
pointer-events: none;
|
||||
cursor:inherit;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-top: 1.61px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -242,9 +309,12 @@
|
||||
displayedItems: null,
|
||||
rootFolderContent: [],
|
||||
emptyFolder: false,
|
||||
gridDisplay: true,
|
||||
listDisplay: false,
|
||||
displayedDescription: "",
|
||||
fileName: "",
|
||||
isNotRoot : false
|
||||
isNotRoot : false,
|
||||
rootDepth: 0
|
||||
}
|
||||
},
|
||||
emits: ['close','focus','openImg','openLink'],
|
||||
@@ -257,27 +327,45 @@
|
||||
console.log(this.displayedItems);
|
||||
this.isNotRoot = false;
|
||||
this.checkEmptyFolder();
|
||||
this.deselectAll();
|
||||
this.fileName = "./";
|
||||
if(!this.emptyFolder){
|
||||
this.gridDisplay = true;
|
||||
this.listDisplay = false;
|
||||
};
|
||||
},
|
||||
deselectAll(){
|
||||
this.displayedItems.forEach(it => {
|
||||
it.isSelected = false;
|
||||
});
|
||||
if(!this.isNotRoot){
|
||||
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
|
||||
this.fileName = "./";
|
||||
}else{
|
||||
this.displayedDescription = this.rootFolderContent.at(-1).description;
|
||||
}
|
||||
},
|
||||
openFile(e){
|
||||
this.$emit('focus');
|
||||
if(e.type === 'folder'){
|
||||
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
|
||||
this.rootDepth = this.rootFolderContent.length;
|
||||
this.displayedItems = [...e.children];
|
||||
this.checkEmptyFolder();
|
||||
this.isNotRoot = true;
|
||||
this.displayedDescription = e.description
|
||||
this.fileName += e.caption + '/';
|
||||
if (e.caption === 'Autres'){
|
||||
this.gridDisplay = false;
|
||||
this.listDisplay = true;
|
||||
}
|
||||
}
|
||||
if(e.type === 'image'){
|
||||
this.$emit('openImg');
|
||||
dataStorage.selectedImg = {
|
||||
src: e.src,
|
||||
caption: e.caption
|
||||
caption: e.caption,
|
||||
like: e.like,
|
||||
isLiked: e.isLiked
|
||||
}
|
||||
this.displayedDescription = e.description;
|
||||
}
|
||||
@@ -322,22 +410,27 @@
|
||||
checkEmptyFolder(){
|
||||
if (this.displayedItems.length === 0){
|
||||
this.emptyFolder = true;
|
||||
this.gridDisplay = false;
|
||||
this.listDisplay = false;
|
||||
this.displayedItems = null;
|
||||
}else{
|
||||
this.emptyFolder = false;
|
||||
}
|
||||
},
|
||||
backToRoot(){
|
||||
let rootDepth = this.rootFolderContent.length-1;
|
||||
this.displayedItems = this.rootFolderContent[rootDepth].content;
|
||||
this.fileName = this.rootFolderContent[rootDepth].directory;
|
||||
this.displayedDescription = this.rootFolderContent[rootDepth].description;
|
||||
this.rootFolderContent.splice(rootDepth,1);
|
||||
rootDepth = this.rootFolderContent.length
|
||||
if (rootDepth === 0){
|
||||
this.displayedItems = this.rootFolderContent.at(-1).content;
|
||||
this.fileName = this.rootFolderContent.at(-1).directory;
|
||||
this.displayedDescription = this.rootFolderContent.at(-1).description;
|
||||
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
|
||||
this.rootDepth = this.rootFolderContent.length
|
||||
if (this.rootDepth === 0){
|
||||
this.isNotRoot = false;
|
||||
}
|
||||
this.checkEmptyFolder();
|
||||
if(this.listDisplay){
|
||||
this.listDisplay = false;
|
||||
this.gridDisplay = true;
|
||||
}
|
||||
},
|
||||
closeClicked(){
|
||||
this.dataFirstLoad();
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--back-color);
|
||||
border-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
font-family: 'velvelyne';
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
<div class="msgReact">
|
||||
<div class="reactBar">
|
||||
<p class="reactStatStyle">{{selectedMsg.like}}</p>
|
||||
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
@@ -65,38 +65,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.windowContent .msgReact{
|
||||
margin-left: -16.1%;
|
||||
width: 77%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-family: 'lineal';
|
||||
font-weight: normal;
|
||||
color: var(--main-color);
|
||||
padding: 0;
|
||||
}
|
||||
.windowContent .reactStatStyle{
|
||||
text-align: center;
|
||||
width: 33px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.windowContent .icon{
|
||||
height: 16.1px;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
.windowContent .iconBtnStyle{
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 33px;
|
||||
}
|
||||
.windowContent .textBtnStyle{
|
||||
height: 33px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#selectedMsgText{
|
||||
white-space: pre-line;
|
||||
font-size: 16.1px;
|
||||
@@ -109,10 +77,6 @@
|
||||
height: 77%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.reactedStyle{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -22,6 +22,12 @@
|
||||
<div class="windowContent" id="visualizerContent">
|
||||
<img :src="selectedImg.src" id="displayedImgStyle">
|
||||
</div>
|
||||
<div class="reactBar">
|
||||
<p class="reactStatStyle">{{selectedImg.like}}</p>
|
||||
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -45,7 +51,7 @@
|
||||
height: auto;
|
||||
top: 500px;
|
||||
left: 16.1px;
|
||||
border-radius: 16.1px 16.1px 0 0;
|
||||
border-radius: 16.1px;
|
||||
}
|
||||
|
||||
#displayedImgStyle{
|
||||
@@ -87,6 +93,10 @@
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
},
|
||||
likeImg(){
|
||||
this.selectedImg.isLiked = !this.selectedImg.isLiked;
|
||||
console.log(this.selectedImg);
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
@@ -107,6 +107,7 @@
|
||||
border-radius: 0;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
cursor: cell;
|
||||
}
|
||||
|
||||
.selectedStyle{
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
|
||||
<!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
</button>-->
|
||||
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
left: 4.44px;
|
||||
width: 50px;
|
||||
height: 161px;
|
||||
top: 38%;
|
||||
top: 28%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}">
|
||||
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
|
||||
<img loading="lazy" :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
top: 50%;
|
||||
top: 47%;
|
||||
left: 7.77px;
|
||||
animation: float 1.61s infinite;
|
||||
}
|
||||
@@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
#reloadBtnStyle{
|
||||
top: 59%;
|
||||
top: 49%;
|
||||
left: 44.4px;
|
||||
width: 77px;
|
||||
height: 77px;
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
<script setup>
|
||||
import TwoGraff from '../assets/icons/2graff.svg'
|
||||
import TwoExtra from '../assets/icons/2extra.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="titleTextContainer" class="uiStyle">
|
||||
<div id="mainTitleContainer">
|
||||
@@ -8,8 +13,9 @@
|
||||
<div class="titleTextStyle" id="nerd">
|
||||
<p><strong>NERDs</strong></p>
|
||||
<p>#</p>
|
||||
<p id="numberTwo"></p>
|
||||
</div>
|
||||
<TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
|
||||
<TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
|
||||
<div class="subtitleTextStyle">
|
||||
<p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
|
||||
</div>
|
||||
@@ -47,10 +53,58 @@
|
||||
|
||||
/*+++++++++++++++++ COPYBOX
|
||||
================ PC HAUT/IPAD
|
||||
@media(min-width:500px){}
|
||||
@media(min-width:650px){}
|
||||
================ PC LARGE
|
||||
@media(min-width:1000px){}
|
||||
@media(min-width:1300px){}
|
||||
*/
|
||||
.numberTwo{
|
||||
fill: currentColor;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#graffTwo{
|
||||
height: 161px;
|
||||
width: auto;
|
||||
margin-left: 285px;
|
||||
margin-top: -99px;
|
||||
color: var(--main-color);
|
||||
}
|
||||
#extraTwo{
|
||||
height: 144px;
|
||||
width: auto;
|
||||
margin-left: 285px;
|
||||
margin-top: -99px;
|
||||
animation: blink 3.33s infinite;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
/*================ PC HAUT/IPAD*/
|
||||
@media(min-width:650px){
|
||||
#graffTwo{
|
||||
height: 200px;
|
||||
margin-left: 500px;
|
||||
margin-top: -110px;
|
||||
}
|
||||
#extraTwo{
|
||||
height: 161px;
|
||||
margin-left: 500px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
}
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:900px){
|
||||
#graffTwo{
|
||||
height: 333px;
|
||||
margin-left: 633px;
|
||||
margin-top: -233px;
|
||||
}
|
||||
#extraTwo{
|
||||
height: 277px;
|
||||
margin-left: 640px;
|
||||
margin-top: -233px;
|
||||
}
|
||||
}
|
||||
|
||||
#titleTextContainer{
|
||||
width:99.8%;
|
||||
@@ -84,7 +138,7 @@
|
||||
z-index: 1;
|
||||
}
|
||||
.titleTextStyle p{
|
||||
color: (--main-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
#drag{
|
||||
margin-top: -100px;
|
||||
@@ -199,7 +253,7 @@
|
||||
padding-bottom: 16.1px;
|
||||
padding-left: 33px;
|
||||
font-size: 33px;
|
||||
color: (--main-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
#drag{
|
||||
margin-top: -150px;
|
||||
@@ -209,6 +263,7 @@
|
||||
margin-top: -75px;
|
||||
margin-left: -75px;
|
||||
justify-content: space-between;
|
||||
margin-right: 161px;
|
||||
}
|
||||
.titleTextStyle strong{
|
||||
font-size: 77px;
|
||||
|
||||
Reference in New Issue
Block a user