add prettier and eslint
This commit is contained in:
parent
9d8a8c9b2f
commit
eab080d599
4
.idea/watcherTasks.xml
generated
Normal file
4
.idea/watcherTasks.xml
generated
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
|
||||||
|
</project>
|
||||||
20
sesame-vitejs/sesame/.eslintrc.json
Normal file
20
sesame-vitejs/sesame/.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-recommended",
|
||||||
|
"eslint:recommended",
|
||||||
|
"@vue/typescript/recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 2021
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
}
|
||||||
|
}
|
||||||
1
sesame-vitejs/sesame/.prettierrc.json
Normal file
1
sesame-vitejs/sesame/.prettierrc.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
2
sesame-vitejs/sesame/.vscode/extensions.json
vendored
2
sesame-vitejs/sesame/.vscode/extensions.json
vendored
@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue + TS</title>
|
<title>Vite + Vue + TS</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
8473
sesame-vitejs/sesame/package-lock.json
generated
8473
sesame-vitejs/sesame/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,26 +1,35 @@
|
|||||||
{
|
{
|
||||||
"name": "sesame",
|
"name": "sesame",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vue-tsc && vite build",
|
"build": "vue-tsc && vite build",
|
||||||
"preview": "vite preview"
|
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
|
||||||
},
|
"format": "prettier . --write",
|
||||||
"dependencies": {
|
"preview": "vite preview"
|
||||||
"vue": "^3.2.47"
|
},
|
||||||
},
|
"dependencies": {
|
||||||
"devDependencies": {
|
"vue": "^3.2.47"
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
},
|
||||||
"rollup-plugin-scss": "^3.0.0",
|
"devDependencies": {
|
||||||
"sass": "^1.62.0",
|
"@typescript-eslint/eslint-plugin": "^5.59.7",
|
||||||
"typescript": "^5.0.2",
|
"@typescript-eslint/parser": "^5.59.7",
|
||||||
"vite": "^4.3.0",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
"vite-aliases": "^0.11.1",
|
"@vue/eslint-config-typescript": "^11.0.3",
|
||||||
"vite-plugin-eslint": "^1.8.1",
|
"eslint": "^8.41.0",
|
||||||
"vite-plugin-stylelint": "^4.3.0",
|
"eslint-config-prettier": "^8.8.0",
|
||||||
"vue-tsc": "^1.2.0"
|
"eslint-plugin-vue": "^9.14.0",
|
||||||
}
|
"prettier": "2.8.8",
|
||||||
|
"rollup-plugin-scss": "^3.0.0",
|
||||||
|
"sass": "^1.62.0",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.3.0",
|
||||||
|
"vite-aliases": "^0.11.1",
|
||||||
|
"vite-plugin-eslint": "^1.8.1",
|
||||||
|
"vite-plugin-stylelint": "^4.3.0",
|
||||||
|
"vue-tsc": "^1.2.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import CoverSection from './components/CoverSection.vue'
|
import CoverSection from "./components/CoverSection.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
<CoverSection msg="hohooo" />
|
<CoverSection msg="hohooo" />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/******** all sections *********/
|
/******** all sections *********/
|
||||||
|
|
||||||
/*@import 'styles/main.scss';*/
|
|
||||||
|
|
||||||
|
|
||||||
|
/*@import 'styles/main.scss';*/
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,44 +1,43 @@
|
|||||||
|
|
||||||
main nav {
|
main nav {
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.burger-menu {
|
.burger-menu {
|
||||||
float: left;
|
float: left;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-burger {
|
.icon-burger {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: left;
|
float: left;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
margin-top: 0.3rem;
|
margin-top: 0.3rem;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-burger .line {
|
.icon-burger .line {
|
||||||
border-top: 2px solid #fff;
|
border-top: 2px solid #fff;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-main {
|
.nav-main {
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 54px;
|
top: 54px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-nav {
|
.fixed-nav {
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,35 +1,35 @@
|
|||||||
/******** all sections *********/
|
/******** all sections *********/
|
||||||
body {
|
body {
|
||||||
background: #020225;
|
background: #020225;
|
||||||
padding-bottom: 50vh;
|
padding-bottom: 50vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section {
|
main section {
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
height: 1300px;
|
height: 1300px;
|
||||||
min-height: 1300px;
|
min-height: 1300px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section h2 {
|
main section h2 {
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
/* or 66px */
|
/* or 66px */
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
|
|
||||||
/* Secondary 100 */
|
/* Secondary 100 */
|
||||||
line-height: 110%;
|
line-height: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits {
|
.credits {
|
||||||
margin-top: 10vh;
|
margin-top: 10vh;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,25 +6,23 @@
|
|||||||
/******** section 1 *********/
|
/******** section 1 *********/
|
||||||
|
|
||||||
#main_title_container {
|
#main_title_container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_title {
|
#main_title {
|
||||||
|
background: url("/img/sesame.png") no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
background: url("/img/sesame.png") no-repeat;
|
height: 35vh;
|
||||||
background-size: contain;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
max-width: 1200px;
|
||||||
|
position: relative;
|
||||||
height: 35vh;
|
top: 4rem;
|
||||||
margin: 0 auto;
|
width: 95vw;
|
||||||
max-width: 1200px;
|
|
||||||
position: relative;
|
|
||||||
top: 4rem;
|
|
||||||
width: 95vw;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_title_container h2 {
|
#main_title_container h2 {
|
||||||
margin-top: 5vh;
|
margin-top: 5vh;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,63 +1,62 @@
|
|||||||
|
|
||||||
#hand {
|
#hand {
|
||||||
background: url("/img/hand 1.png") center;
|
background: url("/img/hand 1.png") center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 1300px;
|
height: 1300px;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
z-index: 0
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_title_container {
|
#main_title_container {
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover {
|
#cover {
|
||||||
background: url("/img/BG 1.png") center no-repeat;
|
background: url("/img/BG 1.png") center no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover
|
#cover .title-container {
|
||||||
.title-container {
|
text-align: center;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover h2 {
|
#cover h2 {
|
||||||
|
color: #fffdfc;
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
line-height: 120%;
|
||||||
|
|
||||||
color: #fffdfc;
|
position: relative;
|
||||||
font-size: 40px;
|
text-align: center;
|
||||||
font-style: normal;
|
z-index: 2;
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
line-height: 120%;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover .button {
|
#cover .button {
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
background: linear-gradient(329.49deg,
|
background: linear-gradient(
|
||||||
rgba(255, 216, 244, 0) 34.06%,
|
329.49deg,
|
||||||
rgba(255, 207, 242, 0.2) 77.26%);
|
rgba(255, 216, 244, 0) 34.06%,
|
||||||
border-radius: 100%;
|
rgba(255, 207, 242, 0.2) 77.26%
|
||||||
bottom: 0;
|
);
|
||||||
box-sizing: border-box;
|
border-radius: 100%;
|
||||||
color: white;
|
bottom: 0;
|
||||||
font-size: 18px;
|
box-sizing: border-box;
|
||||||
font-style: normal;
|
color: white;
|
||||||
font-weight: 400;
|
font-size: 18px;
|
||||||
height: 150px;
|
font-style: normal;
|
||||||
line-height: 26px;
|
font-weight: 400;
|
||||||
padding: 1rem;
|
height: 150px;
|
||||||
position: relative;
|
line-height: 26px;
|
||||||
right: 0;
|
padding: 1rem;
|
||||||
top: 16vh;
|
position: relative;
|
||||||
width: 150px;
|
right: 0;
|
||||||
|
top: 16vh;
|
||||||
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,38 @@
|
|||||||
|
#transactionnal_webdesign {
|
||||||
|
padding-top: 363px;
|
||||||
|
background: url('');
|
||||||
|
font-family: "GT Walsheim Pro";
|
||||||
|
color: #00001f;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 1680px;
|
||||||
|
height: 109px;
|
||||||
|
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 95%;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #fffdfc;
|
||||||
|
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: rgba(231, 112, 100, 0.8);
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 270px;
|
||||||
|
line-height: 65%;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-emphasis {
|
||||||
|
color: #1e33da;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
#coming_soon{
|
#coming_soon {
|
||||||
background: #2b74b1;
|
background: #2b74b1;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
color: white;
|
color: white;
|
||||||
|
|||||||
@ -1,74 +1,71 @@
|
|||||||
|
|
||||||
#welcome {
|
#welcome {
|
||||||
background: #000;
|
background: #000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-shadow: 0 0 1rem #333;
|
text-shadow: 0 0 1rem #333;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome img {
|
#welcome img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome h2 {
|
#welcome h2 {
|
||||||
color: #f9f3f1;
|
color: #f9f3f1;
|
||||||
font-size: 8em;
|
font-size: 8em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
margin-top: 400px;
|
margin-top: 400px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome .color-emphasis {
|
#welcome .color-emphasis {
|
||||||
color: #1e33da;
|
color: #1e33da;
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome .phone-container {
|
#welcome .phone-container {
|
||||||
background: url("/img/section2_phone.png");
|
background: url("/img/section2_phone.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/************ phones ************/
|
/************ phones ************/
|
||||||
.phones-land {
|
.phones-land {
|
||||||
float: left;
|
float: left;
|
||||||
position: static;
|
position: static;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#phone-watches-1 {
|
#phone-watches-1 {
|
||||||
height: 690px;
|
height: 690px;
|
||||||
left: -137px;
|
left: -137px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1531px;
|
top: 1531px;
|
||||||
width: 345px;
|
width: 345px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#phone-watches-2 {
|
#phone-watches-2 {
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
height: 176px;
|
height: 176px;
|
||||||
left: -200px;
|
left: -200px;
|
||||||
top: 470px;
|
top: 470px;
|
||||||
width: 88px;
|
width: 88px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#phone-watches-3 {
|
#phone-watches-3 {
|
||||||
filter: blur(4px);
|
filter: blur(4px);
|
||||||
height: 342px;
|
height: 342px;
|
||||||
left: 916px;
|
left: 916px;
|
||||||
top: 475px;
|
top: 475px;
|
||||||
width: 171px;
|
width: 171px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#phone-watches-4 {
|
#phone-watches-4 {
|
||||||
filter: blur(6px);
|
filter: blur(6px);
|
||||||
height: 550px;
|
height: 550px;
|
||||||
left: 1222px;
|
left: 1222px;
|
||||||
top: 523px;
|
top: 523px;
|
||||||
width: 275px;
|
width: 275px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,29 +1,28 @@
|
|||||||
|
|
||||||
#open {
|
#open {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: rgba(248, 243, 241, 0.1);
|
color: rgba(248, 243, 241, 0.1);
|
||||||
font-size: 200px;
|
font-size: 200px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
height: 50vh;
|
height: 50vh;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
line-height: 90%;
|
line-height: 90%;
|
||||||
padding-top: 310px;
|
padding-top: 310px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: 88vh;
|
top: 88vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#open .text {
|
#open .text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 400px;
|
margin-bottom: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#open img {
|
#open img {
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#open-handle {
|
#open-handle {
|
||||||
float: left;
|
float: left;
|
||||||
height: 20vh;
|
height: 20vh;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,52 +1,51 @@
|
|||||||
|
|
||||||
#content {
|
#content {
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content h2 {
|
#content h2 {
|
||||||
margin-top: 33vh;
|
margin-top: 33vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all {
|
#content_all {
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 120%;
|
width: 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all_img {
|
#content_all_img {
|
||||||
background: url("/img/bg_content.png");
|
background: url("/img/bg_content.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
/*width: 100vw;*/
|
/*width: 100vw;*/
|
||||||
height: 150vh;
|
height: 150vh;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: -50vh;
|
margin-top: -50vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all .columns {
|
#content_all .columns {
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -133vh;
|
top: -133vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all .text {
|
#content_all .text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
padding-right: 80px;
|
padding-right: 80px;
|
||||||
padding-top: 1vh;
|
padding-top: 1vh;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all h2 {
|
#content_all h2 {
|
||||||
font-size: 100px !important;
|
font-size: 100px !important;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
text-shadow: 0 0 1rem #333;
|
text-shadow: 0 0 1rem #333;
|
||||||
}
|
}
|
||||||
#content_all .text,
|
#content_all .text,
|
||||||
@ -55,33 +54,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#content_all .columns > .column:nth-of-type(1) {
|
#content_all .columns > .column:nth-of-type(1) {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
line-height: 90px;
|
line-height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all .color-emphasis {
|
#content_all .color-emphasis {
|
||||||
color: #1e33da;
|
color: #1e33da;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_first {
|
#content_first {
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
backdrop-filter: blur(5px);
|
color: #e77064;
|
||||||
color: #e77064;
|
flex: none;
|
||||||
flex: none;
|
flex-grow: 0;
|
||||||
flex-grow: 0;
|
font-size: 40px;
|
||||||
font-size: 40px;
|
font-style: normal;
|
||||||
font-style: normal;
|
font-weight: 600;
|
||||||
font-weight: 600;
|
height: 35px;
|
||||||
height: 35px;
|
letter-spacing: 0.2em;
|
||||||
letter-spacing: 0.2em;
|
line-height: 95%;
|
||||||
line-height: 95%;
|
margin-bottom: 40px;
|
||||||
margin-bottom: 40px;
|
margin-top: 20vh;
|
||||||
margin-top: 20vh;
|
opacity: 0.4;
|
||||||
opacity: 0.4;
|
order: 0;
|
||||||
order: 0;
|
text-align: center;
|
||||||
text-align: center;
|
text-transform: uppercase;
|
||||||
text-transform: uppercase;
|
|
||||||
width: 50%;
|
width: 50%;
|
||||||
left: 5vw;
|
left: 5vw;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
@ -92,136 +90,136 @@
|
|||||||
#content_second {
|
#content_second {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
right: -20vw;
|
right: -20vw;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
color: rgba(255, 255, 255, 0.35);
|
color: rgba(255, 255, 255, 0.35);
|
||||||
flex: none;
|
flex: none;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
font-family: "GT Walsheim Pro";
|
font-family: "GT Walsheim Pro";
|
||||||
font-size: 230px;
|
font-size: 230px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
height: 170px;
|
height: 170px;
|
||||||
line-height: 65px;
|
line-height: 65px;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
order: 1;
|
order: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-handle {
|
.flip-handle {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: 10vh;
|
height: 10vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -25vh;
|
top: -25vh;
|
||||||
width: 2vw;
|
width: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container {
|
.flip-container {
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
padding-top: 15vh;
|
padding-top: 15vh;
|
||||||
transform-origin: right;
|
transform-origin: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container.flip-from-left {
|
.flip-container.flip-from-left {
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container + .flip-container {
|
.flip-container + .flip-container {
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
margin-top: -15vh;
|
margin-top: -15vh;
|
||||||
min-height: 91vh;
|
min-height: 91vh;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .container-text {
|
.flip-container .container-text {
|
||||||
left: 30vw;
|
left: 30vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container.flip-from-left .container-text {
|
.flip-container.flip-from-left .container-text {
|
||||||
left: 613px;
|
left: 613px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .color-emphasis {
|
.flip-container .color-emphasis {
|
||||||
color: #1e33da;
|
color: #1e33da;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 760px;
|
max-width: 760px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .text-title {
|
.flip-container .text-title {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
line-height: 110%;
|
line-height: 110%;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
margin-top: 158px;
|
margin-top: 158px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .text-description {
|
.flip-container .text-description {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
width: 380px;
|
width: 380px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .phone-container {
|
.flip-container .phone-container {
|
||||||
background: rgba(225, 196, 183, 0.2);
|
background: rgba(225, 196, 183, 0.2);
|
||||||
border-color: rgba(255, 255, 255, 0.4);
|
border-color: rgba(255, 255, 255, 0.4);
|
||||||
border-radius: 70px;
|
border-radius: 70px;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 700px;
|
height: 700px;
|
||||||
left: 66vw;
|
left: 66vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -540px;
|
top: -540px;
|
||||||
width: 342px;
|
width: 342px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container.flip-from-left .phone-container {
|
.flip-container.flip-from-left .phone-container {
|
||||||
left: 183px;
|
left: 183px;
|
||||||
top: -540px;
|
top: -540px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .phone-container img {
|
.flip-container .phone-container img {
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
width: 318px;
|
width: 318px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .call-to-action {
|
.flip-container .call-to-action {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 2px solid #743ad5;
|
border: 2px solid #743ad5;
|
||||||
border-radius: 70px;
|
border-radius: 70px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: none;
|
flex: none;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
order: 2;
|
order: 2;
|
||||||
padding: 12px 36px;
|
padding: 12px 36px;
|
||||||
width: 198px;
|
width: 198px;
|
||||||
/*border-image-slice: 1;*/
|
/*border-image-slice: 1;*/
|
||||||
/*border-width: 5px;*/
|
/*border-width: 5px;*/
|
||||||
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
|
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-2 {
|
#content-2 {
|
||||||
margin-top: 50vh;
|
margin-top: 50vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#flipping_zone {
|
#flipping_zone {
|
||||||
margin-top: -180vh;
|
margin-top: -180vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,119 +1,124 @@
|
|||||||
/******** phone base *********/
|
/******** phone base *********/
|
||||||
|
|
||||||
#popover {
|
#popover {
|
||||||
background: url("/img/bg_pink.png") no-repeat;
|
background: url("/img/bg_pink.png") no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popover .dark-emphasis {
|
#popover .dark-emphasis {
|
||||||
color: #3b3b49;
|
color: #3b3b49;
|
||||||
font-family: "GT Walsheim Pro";
|
font-family: "GT Walsheim Pro";
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
/* identical to box height, or 66px */
|
/* identical to box height, or 66px */
|
||||||
line-height: 110%;
|
line-height: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-grey {
|
.text-grey {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-screen .text {
|
.slider-screen .text {
|
||||||
left: 55vw;
|
left: 55vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
top: -30%;
|
top: -30%;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-screen .text-title {
|
.slider-screen .text-title {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-container {
|
.phone-container {
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
width: 411px;
|
width: 411px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-container .top {
|
.phone-container .top {
|
||||||
background: url("/img/phone_rectangle_top.jpg") no-repeat center;
|
background: url("/img/phone_rectangle_top.jpg") no-repeat center;
|
||||||
border-top-left-radius: 1rem;
|
border-top-left-radius: 1rem;
|
||||||
|
|
||||||
border-top-right-radius: 1rem;
|
border-top-right-radius: 1rem;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-container .bottom {
|
.phone-container .bottom {
|
||||||
background: url("/img/phone_rectangle_bottom.jpg") no-repeat center;
|
background: url("/img/phone_rectangle_bottom.jpg") no-repeat center;
|
||||||
border-bottom-left-radius: 2rem;
|
border-bottom-left-radius: 2rem;
|
||||||
border-bottom-right-radius: 2rem;
|
border-bottom-right-radius: 2rem;
|
||||||
height: 62px;
|
height: 62px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 676.5px;
|
top: 676.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-container.transparent {
|
.phone-container.transparent {
|
||||||
background: rgba(248, 243, 241, 0.1);
|
background: rgba(248, 243, 241, 0.1);
|
||||||
border-radius: 70px;
|
border-radius: 70px;
|
||||||
height: 700px;
|
height: 700px;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-screen .phone-container {
|
.slider-screen .phone-container {
|
||||||
background: url("/img/phone_cream.png") no-repeat;
|
background: url("/img/phone_cream.png") no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 776px;
|
height: 776px;
|
||||||
left: 20vw;
|
left: 20vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 20vh;
|
top: 20vh;
|
||||||
width: 411px;
|
width: 411px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
float: right;
|
float: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
top: 56px;
|
top: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-left, .arrow-right {
|
.arrow-left,
|
||||||
backdrop-filter: blur(5px);
|
.arrow-right {
|
||||||
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
|
backdrop-filter: blur(5px);
|
||||||
border: solid 2px #1e33da;
|
background: linear-gradient(
|
||||||
border-radius: 70px;
|
310.41deg,
|
||||||
|
rgba(255, 255, 255, 0.3) 10.9%,
|
||||||
|
rgba(255, 255, 255, 0) 81.35%
|
||||||
|
);
|
||||||
|
border: solid 2px #1e33da;
|
||||||
|
border-radius: 70px;
|
||||||
|
|
||||||
/* Note: backdrop-filter has minimal browser support */
|
/* Note: backdrop-filter has minimal browser support */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-right {
|
.arrow-right {
|
||||||
float: right;
|
float: right;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50vh;
|
top: 50vh;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-left {
|
.arrow-left {
|
||||||
float: left;
|
float: left;
|
||||||
left: 40px;
|
left: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50vh;
|
top: 50vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bullets {
|
.bullets {
|
||||||
left: 0;
|
left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 30vh;
|
top: 30vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bullets img {
|
.bullets img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,18 @@
|
|||||||
|
|
||||||
#portfolio {
|
#portfolio {
|
||||||
background: url("/img/bg_grey.jpg") no-repeat;
|
background: url("/img/bg_grey.jpg") no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popover .color-emphasis,
|
#popover .color-emphasis,
|
||||||
#portfolio .color-emphasis {
|
#portfolio .color-emphasis {
|
||||||
color: #e77064;
|
color: #e77064;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#portfolio .phone-container {
|
#portfolio .phone-container {
|
||||||
background: url("/img/phone_shoes.png");
|
background: url("/img/phone_shoes.png");
|
||||||
height: 776px;
|
height: 776px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,6 @@
|
|||||||
top: 15rem;
|
top: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#cover .button {
|
#cover .button {
|
||||||
top: 7vh;
|
top: 7vh;
|
||||||
}
|
}
|
||||||
@ -19,12 +18,12 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all .columns{
|
#content_all .columns {
|
||||||
top: -145vh;
|
top: -145vh;
|
||||||
width: 55vw;
|
width: 55vw;
|
||||||
}
|
}
|
||||||
.columns{
|
.columns {
|
||||||
display:block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
.column {
|
.column {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
@ -40,52 +39,49 @@
|
|||||||
margin-top: -120vh;
|
margin-top: -120vh;
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
.flip-container{
|
.flip-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flip-container + .flip-container {
|
||||||
|
|
||||||
.flip-container + .flip-container{
|
|
||||||
margin-top: -5vh;
|
margin-top: -5vh;
|
||||||
}
|
}
|
||||||
.flip-container .container-text{
|
.flip-container .container-text {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left:33vw;
|
left: 33vw;
|
||||||
}
|
}
|
||||||
.flip-container .text-title{
|
.flip-container .text-title {
|
||||||
margin-top:0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container .phone-container{
|
.flip-container .phone-container {
|
||||||
left: 42vw;
|
left: 42vw;
|
||||||
top: 5vh;
|
top: 5vh;
|
||||||
}
|
}
|
||||||
.flip-container.flip-from-left .container-text{
|
.flip-container.flip-from-left .container-text {
|
||||||
left: 33vw;
|
left: 33vw;
|
||||||
top: 5vh;
|
top: 5vh;
|
||||||
}
|
}
|
||||||
.flip-container.flip-from-left .phone-container{
|
.flip-container.flip-from-left .phone-container {
|
||||||
left: 25vw;
|
left: 25vw;
|
||||||
top: 10vh;
|
top: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-4{
|
#content-4 {
|
||||||
margin-top: 25vh;
|
margin-top: 25vh;
|
||||||
}
|
}
|
||||||
#content-5
|
#content-5 {
|
||||||
{
|
|
||||||
margin-top: 15vh;
|
margin-top: 15vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popover{
|
#popover {
|
||||||
margin-top: 100vh;
|
margin-top: 100vh;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
exemples sliders
|
exemples sliders
|
||||||
*/
|
*/
|
||||||
.slider-screen .text-title{
|
.slider-screen .text-title {
|
||||||
margin-top:1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
.slider-screen .text,
|
.slider-screen .text,
|
||||||
.slider-screen .phone-container {
|
.slider-screen .phone-container {
|
||||||
@ -94,57 +90,55 @@
|
|||||||
left: 25vw;
|
left: 25vw;
|
||||||
top: 5vh;
|
top: 5vh;
|
||||||
}
|
}
|
||||||
.bullets{
|
.bullets {
|
||||||
top: 28em;
|
top: 28em;
|
||||||
}
|
}
|
||||||
.arrow-left,
|
.arrow-left,
|
||||||
.arrow-right{
|
.arrow-right {
|
||||||
top: 60vh;
|
top: 60vh;
|
||||||
}
|
}
|
||||||
.slider-screen{
|
.slider-screen {
|
||||||
min-height:100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 35em) {
|
@media screen and (max-width: 35em) {
|
||||||
#main_title{
|
#main_title {
|
||||||
margin-top: 5vh;
|
margin-top: 5vh;
|
||||||
}
|
}
|
||||||
#main_title_container h2 {
|
#main_title_container h2 {
|
||||||
margin-top: 15vh;
|
margin-top: 15vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all h2, #welcome h2 {
|
#content_all h2,
|
||||||
|
#welcome h2 {
|
||||||
font-size: 4rem !important;
|
font-size: 4rem !important;
|
||||||
}
|
}
|
||||||
#content_all .text{
|
#content_all .text {
|
||||||
padding-right:0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
.container-text-md{
|
.container-text-md {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
#content_all .columns{
|
#content_all .columns {
|
||||||
width:100%;
|
width: 100%;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
.flip-container .container-text{
|
.flip-container .container-text {
|
||||||
width:100%;
|
width: 100%;
|
||||||
left:5vw;
|
left: 5vw;
|
||||||
}
|
}
|
||||||
.flip-container .phone-container {
|
.flip-container .phone-container {
|
||||||
|
position: static;
|
||||||
position: static;
|
margin: 4rem auto;
|
||||||
margin: 4rem auto;
|
}
|
||||||
}
|
.flip-container.flip-from-left .container-text {
|
||||||
.flip-container.flip-from-left .container-text{
|
|
||||||
left: 5vw;
|
left: 5vw;
|
||||||
}
|
}
|
||||||
.flip-container .phone-container {
|
.flip-container .phone-container {
|
||||||
|
|
||||||
margin-top: 7rem;
|
margin-top: 7rem;
|
||||||
}
|
}
|
||||||
.flip-container .text-description{
|
.flip-container .text-description {
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -155,9 +149,9 @@
|
|||||||
margin-top: 45vh;
|
margin-top: 45vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-screen .text, .slider-screen .phone-container{
|
.slider-screen .text,
|
||||||
|
.slider-screen .phone-container {
|
||||||
left: 5vw;
|
left: 5vw;
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,29 +12,28 @@
|
|||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
background: #020225;
|
||||||
|
color: #f9f3f1;
|
||||||
|
|
||||||
background: #020225;
|
font-family: "GT Walsheim Pro";
|
||||||
color: #f9f3f1;
|
|
||||||
|
|
||||||
font-family: "GT Walsheim Pro";
|
/* or 90% */
|
||||||
|
font-size: 1em;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
|
||||||
/* or 90% */
|
/* Secondary 100 */
|
||||||
font-size: 1em;
|
line-height: 1.4;
|
||||||
letter-spacing: -0.04em;
|
text-align: center;
|
||||||
|
|
||||||
/* Secondary 100 */
|
|
||||||
line-height: 1.4;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: #2323ff;
|
background: #2323ff;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: #2323ff;
|
background: #2323ff;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -42,12 +41,12 @@ html {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
display: block;
|
display: block;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -62,7 +61,7 @@ iframe,
|
|||||||
img,
|
img,
|
||||||
svg,
|
svg,
|
||||||
video {
|
video {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -70,9 +69,9 @@ video {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -80,7 +79,7 @@ fieldset {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
@ -97,7 +96,7 @@ textarea {
|
|||||||
|
|
||||||
.hidden,
|
.hidden,
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -110,16 +109,16 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.sr-only {
|
.sr-only {
|
||||||
border: 0;
|
border: 0;
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -130,13 +129,13 @@ textarea {
|
|||||||
|
|
||||||
.sr-only.focusable:active,
|
.sr-only.focusable:active,
|
||||||
.sr-only.focusable:focus {
|
.sr-only.focusable:focus {
|
||||||
clip: auto;
|
clip: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
position: static;
|
position: static;
|
||||||
white-space: inherit;
|
white-space: inherit;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -144,7 +143,7 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.invisible {
|
.invisible {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -161,12 +160,12 @@ textarea {
|
|||||||
|
|
||||||
.clearfix::before,
|
.clearfix::before,
|
||||||
.clearfix::after {
|
.clearfix::after {
|
||||||
content: " ";
|
content: " ";
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix::after {
|
.clearfix::after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
@ -176,14 +175,14 @@ textarea {
|
|||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@media only screen and (min-width: 35em) {
|
@media only screen and (min-width: 35em) {
|
||||||
/* Style adjustments for viewports that meet the condition */
|
/* Style adjustments for viewports that meet the condition */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print,
|
@media print,
|
||||||
(-webkit-min-device-pixel-ratio: 1.25),
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
(min-resolution: 1.25dppx),
|
(min-resolution: 1.25dppx),
|
||||||
(min-resolution: 120dpi) {
|
(min-resolution: 120dpi) {
|
||||||
/* Style adjustments for high resolution devices */
|
/* Style adjustments for high resolution devices */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
@ -193,94 +192,94 @@ textarea {
|
|||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
/* Black prints faster */
|
/* Black prints faster */
|
||||||
color: #000 !important;
|
color: #000 !important;
|
||||||
text-shadow: none !important;
|
text-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:visited {
|
a:visited {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href]::after {
|
a[href]::after {
|
||||||
content: " (" attr(href) ")";
|
content: " (" attr(href) ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title]::after {
|
abbr[title]::after {
|
||||||
content: " (" attr(title) ")";
|
content: " (" attr(title) ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Don't show links that are fragment identifiers,
|
* Don't show links that are fragment identifiers,
|
||||||
* or use the `javascript:` pseudo protocol
|
* or use the `javascript:` pseudo protocol
|
||||||
*/
|
*/
|
||||||
a[href^="#"]::after,
|
a[href^="#"]::after,
|
||||||
a[href^="javascript:"]::after {
|
a[href^="javascript:"]::after {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
blockquote {
|
blockquote {
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Printing Tables:
|
* Printing Tables:
|
||||||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||||
*/
|
*/
|
||||||
thead {
|
thead {
|
||||||
display: table-header-group;
|
display: table-header-group;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr,
|
tr,
|
||||||
img {
|
img {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
orphans: 3;
|
orphans: 3;
|
||||||
widows: 3;
|
widows: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.margin-auto {
|
.margin-auto {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-text {
|
.container-text {
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-text-md {
|
.container-text-md {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-text-lg {
|
.container-text-lg {
|
||||||
max-width: 1062px;
|
max-width: 1062px;
|
||||||
}
|
}
|
||||||
|
|||||||
12895
sesame-vitejs/sesame/src/assets/styles/libs/bulma.css
vendored
12895
sesame-vitejs/sesame/src/assets/styles/libs/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
@ -9,8 +9,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sections
|
/* Sections
|
||||||
@ -21,7 +21,7 @@ html {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -29,7 +29,7 @@ body {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
main {
|
main {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -38,8 +38,8 @@ main {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin: 0.67em 0;
|
margin: 0.67em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grouping content
|
/* Grouping content
|
||||||
@ -51,9 +51,9 @@ h1 {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
box-sizing: content-box; /* 1 */
|
box-sizing: content-box; /* 1 */
|
||||||
height: 0; /* 1 */
|
height: 0; /* 1 */
|
||||||
overflow: visible; /* 2 */
|
overflow: visible; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -62,8 +62,8 @@ hr {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text-level semantics
|
/* Text-level semantics
|
||||||
@ -74,7 +74,7 @@ pre {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -83,9 +83,9 @@ a {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: none; /* 1 */
|
border-bottom: none; /* 1 */
|
||||||
text-decoration: underline; /* 2 */
|
text-decoration: underline; /* 2 */
|
||||||
text-decoration: underline dotted; /* 2 */
|
text-decoration: underline dotted; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -94,7 +94,7 @@ abbr[title] {
|
|||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -105,8 +105,8 @@ strong {
|
|||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: monospace, monospace; /* 1 */
|
font-family: monospace, monospace; /* 1 */
|
||||||
font-size: 1em; /* 2 */
|
font-size: 1em; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -114,7 +114,7 @@ samp {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -124,18 +124,18 @@ small {
|
|||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Embedded content
|
/* Embedded content
|
||||||
@ -146,7 +146,7 @@ sup {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Forms
|
/* Forms
|
||||||
@ -162,10 +162,10 @@ input,
|
|||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit; /* 1 */
|
font-family: inherit; /* 1 */
|
||||||
font-size: 100%; /* 1 */
|
font-size: 100%; /* 1 */
|
||||||
line-height: 1.15; /* 1 */
|
line-height: 1.15; /* 1 */
|
||||||
margin: 0; /* 2 */
|
margin: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -174,8 +174,9 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input { /* 1 */
|
input {
|
||||||
overflow: visible;
|
/* 1 */
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -184,8 +185,9 @@ input { /* 1 */
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select { /* 1 */
|
select {
|
||||||
text-transform: none;
|
/* 1 */
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -196,7 +198,7 @@ button,
|
|||||||
[type="button"],
|
[type="button"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -207,8 +209,8 @@ button::-moz-focus-inner,
|
|||||||
[type="button"]::-moz-focus-inner,
|
[type="button"]::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type="reset"]::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type="submit"]::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -219,7 +221,7 @@ button:-moz-focusring,
|
|||||||
[type="button"]:-moz-focusring,
|
[type="button"]:-moz-focusring,
|
||||||
[type="reset"]:-moz-focusring,
|
[type="reset"]:-moz-focusring,
|
||||||
[type="submit"]:-moz-focusring {
|
[type="submit"]:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -227,7 +229,7 @@ button:-moz-focusring,
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
padding: 0.35em 0.75em 0.625em;
|
padding: 0.35em 0.75em 0.625em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -238,12 +240,12 @@ fieldset {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
color: inherit; /* 2 */
|
color: inherit; /* 2 */
|
||||||
display: table; /* 1 */
|
display: table; /* 1 */
|
||||||
max-width: 100%; /* 1 */
|
max-width: 100%; /* 1 */
|
||||||
padding: 0; /* 3 */
|
padding: 0; /* 3 */
|
||||||
white-space: normal; /* 1 */
|
white-space: normal; /* 1 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -251,7 +253,7 @@ legend {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -259,7 +261,7 @@ progress {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -269,8 +271,8 @@ textarea {
|
|||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
box-sizing: border-box; /* 1 */
|
box-sizing: border-box; /* 1 */
|
||||||
padding: 0; /* 2 */
|
padding: 0; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -279,7 +281,7 @@ textarea {
|
|||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -288,8 +290,8 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield; /* 1 */
|
-webkit-appearance: textfield; /* 1 */
|
||||||
outline-offset: -2px; /* 2 */
|
outline-offset: -2px; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -297,7 +299,7 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -306,8 +308,8 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button; /* 1 */
|
-webkit-appearance: button; /* 1 */
|
||||||
font: inherit; /* 2 */
|
font: inherit; /* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Interactive
|
/* Interactive
|
||||||
@ -318,7 +320,7 @@ textarea {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -326,7 +328,7 @@ details {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Misc
|
/* Misc
|
||||||
@ -337,7 +339,7 @@ summary {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
template {
|
template {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -345,5 +347,5 @@ template {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section id="base_section" class="has-text-centerd">
|
<section id="base_section" class="has-text-centerd"></section>
|
||||||
</section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,284 +1,310 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
import {ref} from 'vue'
|
|
||||||
|
|
||||||
defineProps<{ msg: string }>()
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
|
<!-- sprint 4 content-->
|
||||||
|
<section
|
||||||
|
id="transactionnal_webdesign"
|
||||||
|
class="has-text-centerd"
|
||||||
|
>
|
||||||
|
<h2 class="title">
|
||||||
|
Transactional
|
||||||
|
</h2>
|
||||||
|
<p class="description">
|
||||||
|
Webdesign
|
||||||
|
</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column first">
|
||||||
|
<h3 class="sub-title">
|
||||||
|
For all your
|
||||||
|
<br>
|
||||||
|
<span class="color-emphasis"> digital</span> uses.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="column second">
|
||||||
|
Our creative competitive edge <br>
|
||||||
|
<br>
|
||||||
|
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||||
|
We power transactional content with our technology. Our content is
|
||||||
|
transactional and generate online sales. We produce multi-purpose
|
||||||
|
content at scale for all touchpoints to reduce costs.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="carry">
|
||||||
|
<h2 class="color-emphasis">
|
||||||
|
We carry out web design and development
|
||||||
|
</h2>
|
||||||
|
<p class="description">
|
||||||
|
in headless commerce.
|
||||||
|
</p>
|
||||||
|
|
||||||
<!-- sprint 4 content-->
|
<div class="bubbles">
|
||||||
<section id="transactionnal_webdesign" class="has-text-centerd">
|
<p>Evolutive maintenance</p>
|
||||||
|
<p>Front end (ux/ui) development</p>
|
||||||
|
<p>Web App (pwa) development</p>
|
||||||
|
<p>Consulting</p>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
We craft e-commerce Ux template based on qualitative and quantitative
|
||||||
|
studies
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section id="kyc">
|
||||||
|
<h2>We help you to know your customer needs</h2>
|
||||||
|
<p>With our method</p>
|
||||||
|
<a
|
||||||
|
href="#kyc"
|
||||||
|
class="button"
|
||||||
|
> Show Sesame method </a>
|
||||||
|
|
||||||
<h2>Transactional</h2>
|
<div class="bubbles">
|
||||||
<p>
|
<p>to Prioritize development effort</p>
|
||||||
Webcontent
|
<p>to improve customer satisfaction</p>
|
||||||
</p>
|
<p>to increase conversion rate</p>
|
||||||
<div class="aside">
|
</div>
|
||||||
Our creative competitive edge
|
</section>
|
||||||
|
<section id="china">
|
||||||
|
<h2>Our China-inspired ui in 4 pillars</h2>
|
||||||
|
<p>
|
||||||
|
a quick and smoth consumer journey and never ending shopping experience
|
||||||
|
at the same time
|
||||||
|
</p>
|
||||||
|
<div class="blocks">
|
||||||
|
<div class="block">
|
||||||
|
<div class="top">
|
||||||
|
Content driven
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
-Rebound rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top">
|
||||||
|
Experimental
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
-Return rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top">
|
||||||
|
Interactive
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
+Conversion rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top">
|
||||||
|
Agile
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
+Retention rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="we_develop">
|
||||||
|
<h2>
|
||||||
|
We develop custom-made innovative e-commerce features based on your
|
||||||
|
brand stakes.
|
||||||
|
</h2>
|
||||||
|
<div class="phone-container">
|
||||||
|
<div class="top" />
|
||||||
|
<div class="picture" />
|
||||||
|
<div class="bottom" />
|
||||||
|
</div>
|
||||||
|
<div class="arrow-left" />
|
||||||
|
<div class="arrow-right" />
|
||||||
|
<div class="data">
|
||||||
|
Data
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
AR
|
||||||
|
</div>
|
||||||
|
<div class="quick">
|
||||||
|
Quick wins
|
||||||
|
</div>
|
||||||
|
<div class="long_term">
|
||||||
|
Long-Term Project
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="full_creative">
|
||||||
|
<h2>A full creative & production Studio in Paris</h2>
|
||||||
|
<div class="tiles columns">
|
||||||
|
<div class="aside column" />
|
||||||
|
<div class="picture column" />
|
||||||
|
<div class="picture column" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="our_team">
|
||||||
|
<h2>Our team.</h2>
|
||||||
|
<div class="sub-category">
|
||||||
|
<p>of experts and directors.</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sub-category">
|
||||||
|
<p>and our senior team</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="china_achievements">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<h2>Our China achievements</h2>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p>
|
||||||
|
Backed by the Baozun Group (the leading e-commerce technology Group
|
||||||
|
in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
|
||||||
|
2021), we embrace China’s e-commerce, capitalizing on the market’s
|
||||||
|
unique technology and digital sales mechanisms.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
|
<div class="tiles-box">
|
||||||
technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
|
<div class="tile-item">
|
||||||
for all touchpoints to reduce costs.
|
<div class="column">
|
||||||
</div>
|
<h3>
|
||||||
</section>
|
<span class="number">400+</span>
|
||||||
<section id="carry">
|
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
|
||||||
<p>We carry out web design and development</p>
|
</h3>
|
||||||
<p>in headless</p>
|
</div>
|
||||||
<p>commerce.</p>
|
<div class="column">
|
||||||
|
<div class="picture has-rounded-corners" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bubbles">
|
<p>
|
||||||
<p>Evolutive maintenance</p>
|
100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
|
||||||
<p>Front end (ux/ui) development</p>
|
Luxury Brands supported with E2E services 50+ Brands assisted in
|
||||||
<p>Web App (pwa)
|
social project commerces. 30+ PROJECTS converted into Ecom Ops
|
||||||
development</p>
|
management. 30-60% Of our brands’ partner China GMV done online.
|
||||||
<p>Consulting</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p>We craft e-commerce Ux template based on qualitative and quantitative studies</p>
|
</section>
|
||||||
|
<section
|
||||||
</section>
|
id="baozun_group"
|
||||||
<section id="kyc">
|
class="has-rounded-corners"
|
||||||
<h2>We help you to know your customer needs</h2>
|
>
|
||||||
<p>With our method</p>
|
<h2>Baozun Group and Company.</h2>
|
||||||
<a href="#kyc" class="button">
|
</section>
|
||||||
Show Sesame method
|
</main>
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="bubbles">
|
|
||||||
<p>to Prioritize
|
|
||||||
development
|
|
||||||
effort</p>
|
|
||||||
<p>
|
|
||||||
to improve customer satisfaction
|
|
||||||
</p>
|
|
||||||
<p>to increase conversion rate</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="china">
|
|
||||||
<h2>Our China-inspired ui in 4 pillars</h2>
|
|
||||||
<p>
|
|
||||||
a quick and smoth consumer journey and never ending shopping experience at the same time
|
|
||||||
</p>
|
|
||||||
<div class="blocks">
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">Content driven</div>
|
|
||||||
<div class="bottom">-Rebound rate</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">Experimental</div>
|
|
||||||
<div class="bottom">-Return rate</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">Interactive</div>
|
|
||||||
<div class="bottom">+Conversion rate</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">Agile</div>
|
|
||||||
<div class="bottom">+Retention rate</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="we_develop">
|
|
||||||
<h2>
|
|
||||||
We develop custom-made innovative e-commerce features based on your brand stakes.
|
|
||||||
</h2>
|
|
||||||
<div class="phone-container">
|
|
||||||
<div class="top">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="picture"></div>
|
|
||||||
<div class="bottom"></div>
|
|
||||||
</div>
|
|
||||||
<div class="arrow-left"></div>
|
|
||||||
<div class="arrow-right"></div>
|
|
||||||
<div class="data">Data</div>
|
|
||||||
<div class="data">AR</div>
|
|
||||||
<div class="quick">
|
|
||||||
Quick wins
|
|
||||||
</div>
|
|
||||||
<div class="long_term">
|
|
||||||
Long-Term Project
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="full_creative">
|
|
||||||
<h2>A full creative & production Studio in Paris</h2>
|
|
||||||
<div class="tiles columns">
|
|
||||||
<div class="aside column"></div>
|
|
||||||
<div class="picture column"></div>
|
|
||||||
<div class="picture column"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="our_team">
|
|
||||||
<h2>Our team.</h2>
|
|
||||||
<div class="sub-category">
|
|
||||||
|
|
||||||
<p>
|
|
||||||
of experts and directors.
|
|
||||||
</p>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sub-category">
|
|
||||||
|
|
||||||
<p>
|
|
||||||
and our senior team
|
|
||||||
</p>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture"></div>
|
|
||||||
<p class="name">Name Surname</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<section id="china_achievements">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
|
|
||||||
<h2>Our China achievements</h2>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<p>
|
|
||||||
Backed by the Baozun Group (the leading e-commerce technology Group in China listed in NASDAQ and Hong Kong,
|
|
||||||
reaching $10Mn GMV in 2021), we embrace China’s e-commerce, capitalizing on the market’s unique technology
|
|
||||||
and digital sales mechanisms.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tiles-box">
|
|
||||||
<div class="tile-item">
|
|
||||||
<div class="column">
|
|
||||||
<h3>
|
|
||||||
<span class="number">400+</span>
|
|
||||||
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<div class="picture has-rounded-corners"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
|
|
||||||
100+
|
|
||||||
Luxury Store launches on incl. Christofle, De Beers etc.
|
|
||||||
|
|
||||||
40+
|
|
||||||
Luxury Brands supported with E2E services
|
|
||||||
|
|
||||||
50+
|
|
||||||
Brands assisted in social project commerces.
|
|
||||||
|
|
||||||
30+
|
|
||||||
PROJECTS converted into Ecom Ops management.
|
|
||||||
|
|
||||||
30-60%
|
|
||||||
Of our brands’ partner China GMV done online.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="baozun_group" class="has-rounded-corners">
|
|
||||||
<h2>Baozun Group and Company.</h2>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
#hand {
|
||||||
|
background: url("/img/hand 1.png");
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 1300px;
|
||||||
|
left: 1px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
#hand {
|
#cover {
|
||||||
background: url('/img/hand 1.png');
|
background: url("/img/BG 1.png") no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
|
h2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
top: 10vh;
|
||||||
height: 1300px;
|
left: 42vw;
|
||||||
left: 1px;
|
|
||||||
top: -2px;
|
|
||||||
|
|
||||||
|
/* Subtitle/desktop_1 */
|
||||||
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 120%;
|
||||||
|
|
||||||
|
/* or 48px */
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
|
||||||
|
/* Secondary 100 */
|
||||||
|
color: #fffdfc;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover {
|
.button {
|
||||||
background: url('/img/BG 1.png') no-repeat;
|
box-sizing: border-box;
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
h2 {
|
position: relative;
|
||||||
position: absolute;
|
right: 0;
|
||||||
top: 10vh;
|
top: calc(1 / 3 * 100vh);
|
||||||
left: 42vw;
|
bottom: 0;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
padding: 1rem;
|
||||||
|
color: white;
|
||||||
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 26px;
|
||||||
|
background: linear-gradient(
|
||||||
|
329.49deg,
|
||||||
|
rgba(255, 216, 244, 0) 34.06%,
|
||||||
|
rgba(255, 207, 242, 0.2) 77.26%
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(2.96px);
|
||||||
|
|
||||||
/* Subtitle/desktop_1 */
|
border-radius: 100%;
|
||||||
font-family: 'GT Walsheim Pro', Arial;
|
left: 3rem;
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 40px;
|
|
||||||
line-height: 120%;
|
|
||||||
|
|
||||||
/* or 48px */
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
/* Secondary 100 */
|
|
||||||
color: #fffdfc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
right: 0;
|
|
||||||
top: calc(1 / 3 * 100vh);
|
|
||||||
bottom: 0;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
padding: 1rem;
|
|
||||||
color: white;
|
|
||||||
font-family: 'GT Walsheim Pro', Arial;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 26px;
|
|
||||||
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
|
|
||||||
backdrop-filter: blur(2.96px);
|
|
||||||
|
|
||||||
border-radius: 100%;
|
|
||||||
left: 3rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from "vue";
|
||||||
import './assets/styles/main.scss'
|
import "./assets/styles/main.scss";
|
||||||
import App from './App.vue'
|
import App from "./App.vue";
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).mount("#app");
|
||||||
|
|||||||
@ -1,50 +1,50 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"lib": [
|
"lib": [
|
||||||
"ES2020",
|
"ES2020",
|
||||||
"DOM",
|
"DOM",
|
||||||
"DOM.Iterable"
|
"DOM.Iterable"
|
||||||
],
|
],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"paths": {
|
"paths": {
|
||||||
"~assets/*": [
|
"~assets/*": [
|
||||||
"src/assets/*"
|
"src/assets/*"
|
||||||
],
|
],
|
||||||
"~components/*": [
|
"~components/*": [
|
||||||
"src/components/*"
|
"src/components/*"
|
||||||
],
|
],
|
||||||
"~styles/*": [
|
"~styles/*": [
|
||||||
"./src/assets/styles/*"
|
"./src/assets/styles/*"
|
||||||
],
|
],
|
||||||
"~/*": [
|
"~/*": [
|
||||||
"src/*"
|
"src/*"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.ts",
|
"src/**/*.ts",
|
||||||
"src/**/*.d.ts",
|
"src/**/*.d.ts",
|
||||||
"src/**/*.tsx",
|
"src/**/*.tsx",
|
||||||
"src/**/*.vue"
|
"src/**/*.vue"
|
||||||
],
|
],
|
||||||
"references": [
|
"references": [
|
||||||
{
|
{
|
||||||
"path": "./tsconfig.node.json"
|
"path": "./tsconfig.node.json"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowSyntheticDefaultImports": true
|
"allowSyntheticDefaultImports": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
"include": ["vite.config.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,26 @@
|
|||||||
import {defineConfig} from 'vite'
|
import { defineConfig } from "vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from "@vitejs/plugin-vue";
|
||||||
import scss from 'rollup-plugin-scss'
|
import scss from "rollup-plugin-scss";
|
||||||
|
import eslint from "vite-plugin-eslint";
|
||||||
import eslint from 'vite-plugin-eslint'
|
import stylelint from "vite-plugin-stylelint";
|
||||||
|
import { ViteAliases } from "vite-aliases";
|
||||||
import stylelint from 'vite-plugin-stylelint';
|
|
||||||
|
|
||||||
import {ViteAliases} from 'vite-aliases'
|
|
||||||
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
/** @type {import('vite').UserConfig} */
|
/** @type {import('vite').UserConfig} */
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue(), scss(), ViteAliases(),stylelint({
|
plugins: [
|
||||||
fix:true,
|
vue(),
|
||||||
}),eslint()],
|
scss(),
|
||||||
|
ViteAliases(),
|
||||||
})
|
// stylelint({
|
||||||
|
// fix: true,
|
||||||
|
// configBasedir: '.',
|
||||||
|
// parserOptions: {
|
||||||
|
// extraFileExtensions: true
|
||||||
|
// }
|
||||||
|
// }),
|
||||||
|
eslint({
|
||||||
|
fix: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user