vgaNAR6ta/333v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: création d'une structure responsive qui servira de base pour la suite (structure html & composants vue , class css communes, typo, gamme colorée)

Browse Source
This commit is contained in:
Vega
2026-03-04 02:19:09 +01:00
parent f43a578671
commit 01bfa58f27
5 changed files with 378 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ExtraContent.vue
+162
View File
@@ -0,0 +1,162 @@
<script setup>
</script>
<template>
<div id="extraContainer">
<div id="btnPannel">
<button type="button" class="btnColStyle"><p>I</p></button>
<button type="button" class="btnColStyle"><p>@</p></button>
<button type="button" class="btnColStyle"><p>#</p></button>
<button type="button" class="btnColStyle"><p>:/</p></button>
</div>
<div id="contentContainer">
<div class="windowContainer" id="contentPannel">
</div>
</div>
</div>
</template>vh
<style scoped>
/*Template HTML pour section titre pre-styled
<div class="windowTitle">
<div class="titleContent">
<p>./ExtraContent.333</p>
<button type="button" class="titleBtn"> <p>×</p> </button>
</div>
</div>
*/
/*=====================Extra Content CSS*/
.btnColStyle{
background-color: var(--dark-color);
z-index: 1;
font-family: 'lineal';
font-size: 33px;
color: var(--light-color);
border-color: var(--Light-color);
border-style: solid;
border-radius: 16.1px;
border-width: thin;
display: flex;
align-items: center;
justify-content: space-around;
}
.btnColStyle:hover{
background-color: var(--light-color);
color: var(--dark-color);
}
/*=====================format pc*/
@media (min-width:800px){
#extraContainer{
position: fixed;
height: 100%;
width: 50%;
right: 0;
background-color: transparent;
display: flex;
flex-direction: row;
align-items: flex-start;
z-index: -2;
}
#btnPannel{
position: relative;
height: 100%;
width: 25%;
left:0;
padding-top: 2vh;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
z-index: 0;
}
#contentContainer{
position: relative;
height: 100%;
width: 75%;
left:0;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
z-index: 0;
}
#contentPannel{
background-color: transparent;
z-index: 1;
}
.btnColStyle{
width:100%;
height:20%;
margin-top: 3.33vh;
}
}
/*=====================format tel*/
@media (max-width:800px){
#extraContainer{
position: fixed;
height: 50%;
width: 100%;
bottom: 0;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: -2;
}
#btnPannel{
position: relative;
height: 25%;
width: 100%;
top: 0;
padding-left: 3vw;
background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
z-index: 0;
}
#contentContainer{
position: relative;
height: 75%;
width: 100%;
top: 0;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
z-index: 0;
}
#contentPannel{
background-color: transparent;
z-index: 1;
}
.btnColStyle{
width:20%;
height:100%;
margin-left: 2.666vw;
}
}
</style>
<script>
export default {
name : 'ExtraContent',
mounted(){
console.log("Extra content is loaded!");
}
};
</script>
src/components/MainContent.vue
+53 -2
View File
@@ -2,12 +2,63 @@
</script>
<template>
<div class="mainContainer">
<div id="mainContainer">
<div class="windowContainer" id="mainPannel">
<div class="windowTitle">
<div class="titleContent">
<p>./MainContent.333</p>
<button type="button" class="titleBtn"> <p>RELOAD</p> </button>
</div>
</div>
</div>
</div>
</template>
<style scoped>
/*CSS général app*/
/*=====================Main Content CSS*/
/*=====================format pc*/
@media(min-width:800px){
#mainContainer{
position: fixed;
height: 100%;
width: 50%;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: transparent;
z-index: -2;
}
#mainPannel{
background-color: transparent;
z-index: 1;
}
}
/*=====================format tel*/
@media(max-width:800px){
#mainContainer{
position: fixed;
height: 50%;
width: 100%;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
background-color: transparent;
z-index: -2;
}
#mainPannel{
background-color: transparent;
z-index: 1;
}
}
</style>
<script>