add styles of first part in vite js
This commit is contained in:
parent
158636fba9
commit
c4735c8971
Binary file not shown.
Binary file not shown.
|
|
@ -16,6 +16,7 @@
|
|||
"sass": "^1.62.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.0",
|
||||
"vite-aliases": "^0.11.1",
|
||||
"vue-tsc": "^1.2.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -452,6 +453,41 @@
|
|||
"@jridgewell/sourcemap-codec": "1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@nodelib/fs.stat": "2.0.5",
|
||||
"run-parallel": "^1.1.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.stat": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
|
||||
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.walk": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
|
||||
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@nodelib/fs.scandir": "2.1.5",
|
||||
"fastq": "^1.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
|
||||
|
|
@ -662,6 +698,12 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/array-timsort": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
|
||||
"integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -741,6 +783,34 @@
|
|||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/comment-json": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.2.3.tgz",
|
||||
"integrity": "sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"array-timsort": "^1.0.3",
|
||||
"core-util-is": "^1.0.3",
|
||||
"esprima": "^4.0.1",
|
||||
"has-own-prop": "^2.0.0",
|
||||
"repeat-string": "^1.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/consola": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/consola/-/consola-3.1.0.tgz",
|
||||
"integrity": "sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "2.6.21",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
|
||||
|
|
@ -789,11 +859,49 @@
|
|||
"@esbuild/win32-x64": "0.17.18"
|
||||
}
|
||||
},
|
||||
"node_modules/esprima": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
|
||||
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"esparse": "bin/esparse.js",
|
||||
"esvalidate": "bin/esvalidate.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.2.12",
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
|
||||
"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@nodelib/fs.stat": "^2.0.2",
|
||||
"@nodelib/fs.walk": "^1.2.3",
|
||||
"glob-parent": "^5.1.2",
|
||||
"merge2": "^1.3.0",
|
||||
"micromatch": "^4.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
|
||||
"integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"reusify": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
|
|
@ -832,6 +940,15 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/has-own-prop": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-own-prop/-/has-own-prop-2.0.0.tgz",
|
||||
"integrity": "sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
|
|
@ -889,6 +1006,18 @@
|
|||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/local-pkg": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
|
||||
"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||
|
|
@ -909,6 +1038,28 @@
|
|||
"sourcemap-codec": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/merge2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
|
||||
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"braces": "^3.0.2",
|
||||
"picomatch": "^2.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.0.tgz",
|
||||
|
|
@ -1000,6 +1151,26 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
|
|
@ -1012,6 +1183,25 @@
|
|||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/repeat-string": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
|
||||
"integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/reusify": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
|
||||
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"iojs": ">=1.0.0",
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.21.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
|
||||
|
|
@ -1052,6 +1242,29 @@
|
|||
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/run-parallel": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
|
||||
"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.62.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz",
|
||||
|
|
@ -1164,14 +1377,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
|
||||
"integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
|
||||
"version": "4.3.8",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
|
||||
"integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.17.5",
|
||||
"postcss": "^8.4.21",
|
||||
"rollup": "^3.20.2"
|
||||
"postcss": "^8.4.23",
|
||||
"rollup": "^3.21.0"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
|
|
@ -1211,6 +1424,24 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vite-aliases": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-aliases/-/vite-aliases-0.11.1.tgz",
|
||||
"integrity": "sha512-9187zrn1GJdHBpIesqDoAFLk3LPRN2QRn3XuRyni3q02RqtDu+8iGcHNpPFwTc3yGXMak+QumXDZ7HZZ0V0Hcg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.5.3",
|
||||
"comment-json": "^4.2.3",
|
||||
"consola": "^3.1.0",
|
||||
"fast-glob": "^3.2.12",
|
||||
"local-pkg": "^0.4.3",
|
||||
"vite": "^4.3.8",
|
||||
"vite-aliases": "^0.11.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
"sass": "^1.62.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.0",
|
||||
"vite-aliases": "^0.11.1",
|
||||
"vue-tsc": "^1.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,71 +11,7 @@ import CoverSection from './components/CoverSection.vue'
|
|||
<style lang="scss">
|
||||
/******** all sections *********/
|
||||
|
||||
.has-text-centered{
|
||||
text-align: center;
|
||||
}
|
||||
#content-1 h2,
|
||||
#content-2 h2,
|
||||
#content-3 h2,
|
||||
#content-4 h2 {
|
||||
margin-left: 10vw;
|
||||
}
|
||||
/*@import 'styles/main.scss';*/
|
||||
|
||||
main nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 130%;
|
||||
text-align: center;
|
||||
color: #FFFDFC;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
width: 150px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
text-align: center;
|
||||
top: 54px;
|
||||
color: #FFFDFC;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
main section {
|
||||
height: 1300px;
|
||||
min-height: 1300px;
|
||||
width: 100vw;
|
||||
font-family: 'GT Walsheim Pro', Arial;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
font-family: 'GT Walsheim Pro', Arial;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
|
||||
/* or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
/* Secondary 100 */
|
||||
color: #FFFDFC;
|
||||
}
|
||||
|
||||
/******** phone base *********/
|
||||
|
||||
.phone-container.transparent{
|
||||
background: rgba(248, 243, 241, 0.1);
|
||||
border-radius: 70px;
|
||||
width: 350px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
main nav {
|
||||
color: #fffdfc;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 130%;
|
||||
padding: 24px;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
float: left;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.icon-burger {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 1em;
|
||||
margin-top: 0.3rem;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.icon-burger .line {
|
||||
border-top: 2px solid #fff;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
color: #fffdfc;
|
||||
height: 54px;
|
||||
text-align: center;
|
||||
top: 54px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed-nav {
|
||||
z-index: 30;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/******** all sections *********/
|
||||
body {
|
||||
background: #020225;
|
||||
padding-bottom: 50vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main section {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
height: 1300px;
|
||||
min-height: 1300px;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
color: #fffdfc;
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
|
||||
/* or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
/* Secondary 100 */
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.credits {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
css JS and html
|
||||
made by B. Lemoine - cipherbliss.com
|
||||
04 2023
|
||||
*/
|
||||
/******** section 1 *********/
|
||||
|
||||
#main_title_container {
|
||||
text-align: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#main_title {
|
||||
|
||||
background: url("/img/sesame.png") no-repeat;
|
||||
background-size: contain;
|
||||
box-sizing: border-box;
|
||||
|
||||
height: 35vh;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
position: relative;
|
||||
top: 4rem;
|
||||
width: 95vw;
|
||||
|
||||
}
|
||||
|
||||
#main_title_container h2 {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
#hand {
|
||||
background: url("/img/hand 1.png") center;
|
||||
background-size: cover;
|
||||
height: 1300px;
|
||||
left: 1px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 100vw;
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
#main_title_container {
|
||||
backdrop-filter: blur(3px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cover {
|
||||
background: url("/img/BG 1.png") center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#cover
|
||||
.title-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#cover h2 {
|
||||
|
||||
color: #fffdfc;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 120%;
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cover .button {
|
||||
backdrop-filter: blur(3px);
|
||||
background: linear-gradient(329.49deg,
|
||||
rgba(255, 216, 244, 0) 34.06%,
|
||||
rgba(255, 207, 242, 0.2) 77.26%);
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
height: 150px;
|
||||
line-height: 26px;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 16vh;
|
||||
width: 150px;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
#coming_soon{
|
||||
background: #2b74b1;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
text-shadow: 0 0 1em black;
|
||||
height: 50vh;
|
||||
margin-top: 100vh;
|
||||
padding-top: 50vh;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
#welcome {
|
||||
background: #000;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 1rem #333;
|
||||
|
||||
}
|
||||
|
||||
#welcome img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#welcome h2 {
|
||||
color: #f9f3f1;
|
||||
font-size: 8em;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90px;
|
||||
margin-top: 400px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 80vw;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#welcome .color-emphasis {
|
||||
color: #1e33da;
|
||||
}
|
||||
|
||||
#welcome .phone-container {
|
||||
background: url("/img/section2_phone.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/************ phones ************/
|
||||
.phones-land {
|
||||
float: left;
|
||||
position: static;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#phone-watches-1 {
|
||||
height: 690px;
|
||||
left: -137px;
|
||||
position: absolute;
|
||||
top: 1531px;
|
||||
width: 345px;
|
||||
}
|
||||
|
||||
#phone-watches-2 {
|
||||
filter: blur(2px);
|
||||
height: 176px;
|
||||
left: -200px;
|
||||
top: 470px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
#phone-watches-3 {
|
||||
filter: blur(4px);
|
||||
height: 342px;
|
||||
left: 916px;
|
||||
top: 475px;
|
||||
width: 171px;
|
||||
}
|
||||
|
||||
#phone-watches-4 {
|
||||
filter: blur(6px);
|
||||
height: 550px;
|
||||
left: 1222px;
|
||||
top: 523px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
#open {
|
||||
box-sizing: border-box;
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
font-size: 200px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
height: 50vh;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90%;
|
||||
padding-top: 310px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 88vh;
|
||||
}
|
||||
|
||||
#open .text {
|
||||
color: #fff;
|
||||
margin-bottom: 400px;
|
||||
}
|
||||
|
||||
#open img {
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
#open-handle {
|
||||
float: left;
|
||||
height: 20vh;
|
||||
}
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
|
||||
#content {
|
||||
height: 60vh;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
margin-top: 33vh;
|
||||
}
|
||||
|
||||
#content_all {
|
||||
color: #fffdfc;
|
||||
padding-top: 100px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 120%;
|
||||
}
|
||||
|
||||
#content_all_img {
|
||||
background: url("/img/bg_content.png");
|
||||
background-size: cover;
|
||||
/*width: 100vw;*/
|
||||
height: 150vh;
|
||||
left: 0;
|
||||
margin-top: -50vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content_all .columns {
|
||||
font-size: 100px;
|
||||
margin: 0 auto;
|
||||
max-width: 80vw;
|
||||
position: relative;
|
||||
top: -133vh;
|
||||
}
|
||||
|
||||
#content_all .text {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
padding-right: 80px;
|
||||
padding-top: 1vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#content_all h2 {
|
||||
font-size: 100px !important;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90px;
|
||||
text-shadow: 0 0 1rem #333;
|
||||
}
|
||||
#content_all .text,
|
||||
.text-title {
|
||||
text-shadow: 0 0 1rem #333;
|
||||
}
|
||||
|
||||
#content_all .columns > .column:nth-of-type(1) {
|
||||
font-size: 1em;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
#content_all .color-emphasis {
|
||||
color: #1e33da;
|
||||
}
|
||||
|
||||
#content_first {
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
color: #e77064;
|
||||
flex: none;
|
||||
flex-grow: 0;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
height: 35px;
|
||||
letter-spacing: 0.2em;
|
||||
line-height: 95%;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20vh;
|
||||
opacity: 0.4;
|
||||
order: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 50%;
|
||||
left: 5vw;
|
||||
font-size: 3rem;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content_second {
|
||||
width: 50%;
|
||||
right: -20vw;
|
||||
backdrop-filter: blur(5px);
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
flex: none;
|
||||
flex-grow: 0;
|
||||
font-family: "GT Walsheim Pro";
|
||||
font-size: 230px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
height: 170px;
|
||||
line-height: 65px;
|
||||
margin-bottom: 100px;
|
||||
opacity: 0.25;
|
||||
order: 1;
|
||||
text-align: center;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flip-handle {
|
||||
background: transparent;
|
||||
height: 10vh;
|
||||
position: relative;
|
||||
top: -25vh;
|
||||
width: 2vw;
|
||||
}
|
||||
|
||||
.flip-container {
|
||||
color: #fffdfc;
|
||||
padding-top: 15vh;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.flip-container.flip-from-left {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.flip-container + .flip-container {
|
||||
height: 90vh;
|
||||
margin-top: -15vh;
|
||||
min-height: 91vh;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.flip-container .container-text {
|
||||
left: 30vw;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.flip-container.flip-from-left .container-text {
|
||||
left: 613px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.flip-container .color-emphasis {
|
||||
color: #1e33da;
|
||||
margin: 0 auto;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.flip-container .text-title {
|
||||
font-size: 60px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 110%;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 158px;
|
||||
}
|
||||
|
||||
.flip-container .text-description {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.flip-container .phone-container {
|
||||
background: rgba(225, 196, 183, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 70px;
|
||||
border-width: 2px;
|
||||
box-sizing: border-box;
|
||||
height: 700px;
|
||||
left: 66vw;
|
||||
position: relative;
|
||||
top: -540px;
|
||||
width: 342px;
|
||||
}
|
||||
|
||||
.flip-container.flip-from-left .phone-container {
|
||||
left: 183px;
|
||||
top: -540px;
|
||||
}
|
||||
|
||||
.flip-container .phone-container img {
|
||||
height: auto;
|
||||
margin-top: 70px;
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.flip-container .call-to-action {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 2px solid #743ad5;
|
||||
border-radius: 70px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: row;
|
||||
flex-grow: 0;
|
||||
gap: 10px;
|
||||
height: 56px;
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
padding: 12px 36px;
|
||||
width: 198px;
|
||||
/*border-image-slice: 1;*/
|
||||
/*border-width: 5px;*/
|
||||
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
|
||||
}
|
||||
|
||||
#content-2 {
|
||||
margin-top: 50vh;
|
||||
}
|
||||
|
||||
#flipping_zone {
|
||||
margin-top: -180vh;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/******** phone base *********/
|
||||
|
||||
#popover {
|
||||
background: url("/img/bg_pink.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#popover .dark-emphasis {
|
||||
color: #3b3b49;
|
||||
font-family: "GT Walsheim Pro";
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
/* identical to box height, or 66px */
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.text-grey {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.slider-screen .text {
|
||||
left: 55vw;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
top: -30%;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.slider-screen .text-title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.phone-container {
|
||||
border-radius: 1rem;
|
||||
width: 411px;
|
||||
}
|
||||
|
||||
.phone-container .top {
|
||||
background: url("/img/phone_rectangle_top.jpg") no-repeat center;
|
||||
border-top-left-radius: 1rem;
|
||||
|
||||
border-top-right-radius: 1rem;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.phone-container .bottom {
|
||||
background: url("/img/phone_rectangle_bottom.jpg") no-repeat center;
|
||||
border-bottom-left-radius: 2rem;
|
||||
border-bottom-right-radius: 2rem;
|
||||
height: 62px;
|
||||
position: relative;
|
||||
top: 676.5px;
|
||||
}
|
||||
|
||||
.phone-container.transparent {
|
||||
background: rgba(248, 243, 241, 0.1);
|
||||
border-radius: 70px;
|
||||
height: 700px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.slider-screen .phone-container {
|
||||
background: url("/img/phone_cream.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 776px;
|
||||
left: 20vw;
|
||||
position: relative;
|
||||
top: 20vh;
|
||||
width: 411px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 40px;
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
.arrow-left, .arrow-right {
|
||||
backdrop-filter: blur(5px);
|
||||
background: linear-gradient(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 */
|
||||
cursor: pointer;
|
||||
padding: 1.5rem;
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
float: left;
|
||||
left: 40px;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.bullets {
|
||||
left: 0;
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
}
|
||||
|
||||
.bullets img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
#portfolio {
|
||||
background: url("/img/bg_grey.jpg") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#popover .color-emphasis,
|
||||
#portfolio .color-emphasis {
|
||||
color: #e77064;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#portfolio .phone-container {
|
||||
background: url("/img/phone_shoes.png");
|
||||
height: 776px;
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
@media screen and (max-width: 1023px) {
|
||||
#main_title_container h2 {
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
#main_title {
|
||||
top: 15rem;
|
||||
}
|
||||
|
||||
|
||||
#cover .button {
|
||||
top: 7vh;
|
||||
}
|
||||
|
||||
#content_all h2,
|
||||
#welcome h2 {
|
||||
font-size: 6em;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#content_all .columns{
|
||||
top: -145vh;
|
||||
width: 55vw;
|
||||
}
|
||||
.columns{
|
||||
display:block !important;
|
||||
}
|
||||
.column {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#open {
|
||||
top: 80vh;
|
||||
}
|
||||
/**
|
||||
flipping part
|
||||
*/
|
||||
#flipping_zone {
|
||||
margin-top: -120vh;
|
||||
position: static;
|
||||
}
|
||||
.flip-container{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flip-container + .flip-container{
|
||||
margin-top: -5vh;
|
||||
}
|
||||
.flip-container .container-text{
|
||||
z-index: 1;
|
||||
left:33vw;
|
||||
}
|
||||
.flip-container .text-title{
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.flip-container .phone-container{
|
||||
left: 42vw;
|
||||
top: 5vh;
|
||||
}
|
||||
.flip-container.flip-from-left .container-text{
|
||||
left: 33vw;
|
||||
top: 5vh;
|
||||
}
|
||||
.flip-container.flip-from-left .phone-container{
|
||||
left: 25vw;
|
||||
top: 10vh;
|
||||
}
|
||||
|
||||
#content-4{
|
||||
margin-top: 25vh;
|
||||
}
|
||||
#content-5
|
||||
{
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
#popover{
|
||||
margin-top: 100vh;
|
||||
}
|
||||
/**
|
||||
exemples sliders
|
||||
*/
|
||||
.slider-screen .text-title{
|
||||
margin-top:1em;
|
||||
}
|
||||
.slider-screen .text,
|
||||
.slider-screen .phone-container {
|
||||
position: relative;
|
||||
width: 412px;
|
||||
left: 25vw;
|
||||
top: 5vh;
|
||||
}
|
||||
.bullets{
|
||||
top: 28em;
|
||||
}
|
||||
.arrow-left,
|
||||
.arrow-right{
|
||||
top: 60vh;
|
||||
}
|
||||
.slider-screen{
|
||||
min-height:100vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 35em) {
|
||||
#main_title{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
#main_title_container h2 {
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
#content_all h2, #welcome h2 {
|
||||
font-size: 4rem !important;
|
||||
}
|
||||
#content_all .text{
|
||||
padding-right:0;
|
||||
}
|
||||
.container-text-md{
|
||||
width: auto;
|
||||
}
|
||||
#content_all .columns{
|
||||
width:100%;
|
||||
margin: 1rem;
|
||||
}
|
||||
.flip-container .container-text{
|
||||
width:100%;
|
||||
left:5vw;
|
||||
}
|
||||
.flip-container .phone-container {
|
||||
|
||||
position: static;
|
||||
margin: 4rem auto;
|
||||
}
|
||||
.flip-container.flip-from-left .container-text{
|
||||
left: 5vw;
|
||||
}
|
||||
.flip-container .phone-container {
|
||||
|
||||
margin-top: 7rem;
|
||||
}
|
||||
.flip-container .text-description{
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
#content-4 {
|
||||
margin-top: 50vh;
|
||||
}
|
||||
#content-5 {
|
||||
margin-top: 45vh;
|
||||
}
|
||||
|
||||
.slider-screen .text, .slider-screen .phone-container{
|
||||
left: 5vw;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
|
||||
|
||||
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
|
||||
background: #020225;
|
||||
color: #f9f3f1;
|
||||
|
||||
font-family: "GT Walsheim Pro";
|
||||
|
||||
/* or 90% */
|
||||
font-size: 1em;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
/* Secondary 100 */
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #2323ff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #2323ff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden,
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .sr-only class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
/* Style adjustments for viewports that meet the condition */
|
||||
}
|
||||
|
||||
@media print,
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
https://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background: #fff !important;
|
||||
box-shadow: none !important;
|
||||
/* Black prints faster */
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
a[href^="#"]::after,
|
||||
a[href^="javascript:"]::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
font-style: normal;
|
||||
left: 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.margin-auto {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-text {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.container-text-md {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.container-text-lg {
|
||||
max-width: 1062px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
libs
|
||||
*/
|
||||
@import "./libs/boilerplate.css";
|
||||
@import "./libs/normalize.css";
|
||||
@import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
|
||||
@import "./libs/bulma.css";
|
||||
|
||||
/**
|
||||
custom
|
||||
*/
|
||||
@import "./0-general.css";
|
||||
@import "./0-1-nav.css";
|
||||
@import "./1-cover.css";
|
||||
@import "./1-2-main_title.css";
|
||||
@import "./2-we-come-from.css";
|
||||
@import "./3-open-sesame.css";
|
||||
@import "./4-content.css";
|
||||
@import "./5-popover.css";
|
||||
@import "./6-portfolio.css";
|
||||
@import "./100-coming_soon.css";
|
||||
@import "./7-responsive.css";
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import './assets/styles/main.scss'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
:root {
|
||||
font-family: Inter, 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;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body{
|
||||
margin:0;
|
||||
}
|
||||
|
|
@ -3,9 +3,12 @@
|
|||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
|
|
@ -13,13 +16,35 @@
|
|||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"~assets/*": [
|
||||
"src/assets/*"
|
||||
],
|
||||
"~components/*": [
|
||||
"src/components/*"
|
||||
],
|
||||
"~styles/*": [
|
||||
"src/assets/styles/*"
|
||||
],
|
||||
"~/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import {defineConfig} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import scss from 'rollup-plugin-scss'
|
||||
|
||||
import {ViteAliases} from 'vite-aliases'
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
/** @type {import('vite').UserConfig} */
|
||||
export default defineConfig({
|
||||
plugins: [vue(), scss()],
|
||||
plugins: [vue(), scss(), ViteAliases()],
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue