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)
This commit is contained in:
+3
-3
@@ -2,9 +2,8 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="test">
|
||||
<p>It's empty now!</p>
|
||||
</div>
|
||||
<mainDiv></mainDiv>
|
||||
<extraDiv></extraDiv>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -15,6 +14,7 @@
|
||||
export default {
|
||||
name : 'App',
|
||||
mounted(){
|
||||
document.documentElement.setAttribute("data-theme", "purple");
|
||||
console.log("Vue root app is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1 +1,157 @@
|
||||
/*=====================Gamme color + theme*/
|
||||
:root[data-theme="purple"]{
|
||||
--dark-color: #380052;
|
||||
--light-color: #C303FF;
|
||||
--accent-color: #00FF76;
|
||||
}
|
||||
|
||||
:root[data-theme="orange"]{
|
||||
--dark-color: #E67300;
|
||||
--light-color: #99FF99;
|
||||
--accent-color: #00CC00;
|
||||
}
|
||||
|
||||
:root[data-theme="green"]{
|
||||
--dark-color: #004D33;
|
||||
--light-color: #33FF77;
|
||||
--accent-color: #E600E6;
|
||||
}
|
||||
|
||||
/*====================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;
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
/*===================Desact. Default*/
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*=====================Classes générales*/
|
||||
.windowContainer{
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: var(--light-color);
|
||||
border-radius: 16.1px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.windowTitle{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: var(--light-color);
|
||||
color: var(--dark-color);
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
top: 0;
|
||||
border-radius: 16.1px 16.1px 0 0;
|
||||
width:100%;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.titleContent{
|
||||
box-sizing: border-box;
|
||||
padding-left: 16.1px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.titleBtn{
|
||||
margin-right: 16.1px;
|
||||
background-color: var(--light-color);
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
color: var(--dark-color);
|
||||
border-color: var(--dark-color);
|
||||
border-style: solid;
|
||||
border-radius: 16.1px;
|
||||
border-width: thin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 27px;
|
||||
padding: 0 16.1px 0 16.1px;
|
||||
}
|
||||
|
||||
.titleBtn:hover{
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/*=====================Animation*/
|
||||
.floating {
|
||||
position: fixed;
|
||||
animation: float 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating:hover{
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
35% { transform: translateY(1px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
65% { transform: translateY(1px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
.blinking{
|
||||
animation: blink 3.33s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { border-color: var(--accent-color);}
|
||||
25% { border-color: var(--dark-color);}
|
||||
50% { border-color: var(--accent-color);}
|
||||
75% { border-color: var(--dark-color);}
|
||||
100% { border-color: var(--accent-color);}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
+4
-2
@@ -5,12 +5,14 @@ import './assets/style.css'
|
||||
import App from './App.vue'
|
||||
// import composants
|
||||
import MainContent from './components/MainContent.vue'
|
||||
import ExtraContent from './components/ExtraContent.vue'
|
||||
|
||||
// création app racine
|
||||
const app = createApp(App);
|
||||
|
||||
//Composants
|
||||
app.component('mainDiv',MainContent)
|
||||
app.component('mainDiv',MainContent);
|
||||
app.component('extraDiv',ExtraContent);
|
||||
|
||||
//Démarrage dans div#app de index.html
|
||||
app.mount('#app')
|
||||
app.mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user