add: PASSAGE V1 COM OFFICIELLE
préparation du template intégration du fond animé fusion du style background et style pcp
This commit is contained in:
@@ -1,30 +1,22 @@
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
<div id="mainContainer">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
/*CSS général app*/
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'App',
|
||||
mounted(){
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
console.log("Vue root app is fully loaded!");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
/*=============Gamme colorée*/
|
||||
|
||||
:root[data-theme="dark"]{
|
||||
--dark-color: #380052;
|
||||
--light-color: #C303FF;
|
||||
--accent-color: #00FF76;
|
||||
}
|
||||
|
||||
:root[data-theme="light"]{
|
||||
--dark-color: #380052;
|
||||
--light-color: #C303FF;
|
||||
--accent-color: #00FF76;
|
||||
}
|
||||
|
||||
/*=============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: 'velvelyne';
|
||||
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*=============Désact défault*/
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*=====================Référencement*/
|
||||
.referenceText{
|
||||
position:absolute;
|
||||
z-index: -33;
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
/*=============Body & background*/
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
background-color: #000000;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow-x: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
/* margin-top: 0vh; */
|
||||
text-align: center;
|
||||
/* height: 100vh; */
|
||||
}
|
||||
|
||||
|
||||
.dg{
|
||||
display: none !important;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 496 B |
@@ -1,5 +1,16 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
// import CSS global
|
||||
import './assets/style.css'
|
||||
// import app vue racine
|
||||
import App from './App.vue'
|
||||
// import composants
|
||||
//import MainContent from './components/MainContent.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
// création app racine
|
||||
const app = createApp(App);
|
||||
|
||||
//Composants
|
||||
//app.component('mainDiv',MainContent);
|
||||
|
||||
//Montage dans div#app de index.html
|
||||
app.mount('#app');
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user