create package, create onboarding and account pages
This commit is contained in:
commit
51dec75baf
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
# Svelte + Vite
|
||||
|
||||
This template should help get you started developing with Svelte in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
## Need an official Svelte framework?
|
||||
|
||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||
|
||||
## Technical considerations
|
||||
|
||||
**Why use this over SvelteKit?**
|
||||
|
||||
- It brings its own routing solution which might not be preferable for some users.
|
||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||
|
||||
This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
||||
|
||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
||||
|
||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||
|
||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
||||
|
||||
**Why include `.vscode/extensions.json`?**
|
||||
|
||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
||||
|
||||
**Why enable `checkJs` in the JS template?**
|
||||
|
||||
It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
|
||||
|
||||
**Why is HMR not preserving my local component state?**
|
||||
|
||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
|
||||
|
||||
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
||||
|
||||
```js
|
||||
// store.js
|
||||
// An extremely simple external store
|
||||
import { writable } from 'svelte/store'
|
||||
export default writable(0)
|
||||
```
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lume Account</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/account.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lume Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "bundler",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
/**
|
||||
* svelte-preprocess cannot figure out whether you have
|
||||
* a value or a type, so tell TypeScript to enforce using
|
||||
* `import type` instead of `import` for Types.
|
||||
*/
|
||||
"verbatimModuleSyntax": true,
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* To have warnings / errors of the Svelte compiler at the
|
||||
* correct position, enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable this if you'd like to use dynamic types.
|
||||
*/
|
||||
"checkJs": true
|
||||
},
|
||||
/**
|
||||
* Use global.d.ts instead of compilerOptions.types
|
||||
* to avoid limiting type declarations.
|
||||
*/
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lume Onboarding</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/onboarding.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "lume-extension",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@scure/bip39": "^1.2.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.4",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.24",
|
||||
"sass": "^1.63.3",
|
||||
"svelte": "^3.58.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"vite": "^4.3.9"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,2 @@
|
|||
User-Agent: *
|
||||
Allow: /
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Account from '/src/components/account/Account.svelte'
|
||||
|
||||
const app = new Account({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 719 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 921 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 815 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import logo from '/src/assets/lume-logo.png';
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<img src={logo} alt="Lume"/>
|
||||
</header>
|
||||
|
||||
<style lang="scss">
|
||||
@import "/src/styles/mixins.scss";
|
||||
|
||||
header {
|
||||
padding: 2.5em;
|
||||
color: #fff;
|
||||
background: #080808;
|
||||
border-bottom: 0.1em solid #363636;
|
||||
|
||||
img {
|
||||
@include fluid-width-height(7.875rem, 2.625rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import '/src/styles/global.scss';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
background: #080808;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<script>
|
||||
import '/src/styles/global.scss';
|
||||
import Header from '/src/components/Header.svelte';
|
||||
|
||||
let started = false;
|
||||
let step = 1;
|
||||
|
||||
const start = () => {
|
||||
started = true;
|
||||
step = 2;
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
step--;
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
step++;
|
||||
};
|
||||
|
||||
const redirect = () => {
|
||||
window.location.href = '/account.html';
|
||||
};
|
||||
</script>
|
||||
|
||||
<Header/>
|
||||
<main class:started={started} class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
|
||||
<div class="art art-1"></div>
|
||||
<div class="art art-2"></div>
|
||||
<div class="art art-3"></div>
|
||||
<div class="art art-4"></div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="page content-1">
|
||||
<h1>Thank you for supporting an open web.</h1>
|
||||
<p>We are an independent, pure organization. We have decided not to take money from venture capitalists. Nor do we have a large treasury funding our work.</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main" on:click={() => start()}>Begin</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-2">
|
||||
<h1>Gateway for easy access to the open web.</h1>
|
||||
<p>Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS) support, you can forget eth.link and hns.is. This is your gateway.</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => redirect()}>Skip</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-3">
|
||||
<h1>Universal storage drive slide.</h1>
|
||||
<p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand.</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}>Back</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-4">
|
||||
<h1>Create decentralized websites.</h1>
|
||||
<p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand. Stop worrying about being vendor-locked.</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}>Back</button>
|
||||
<button class="btn-main btn-green" on:click={() => redirect()}>Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grant-info">
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com">learn more</a> about the work we’re doing to provide accessible access to the open web for everyone.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
background: #080808;
|
||||
}
|
||||
|
||||
.art, .content {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.art-1 {
|
||||
left: 0;
|
||||
background-image: url("/src/assets/onboarding-1.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-right: 1px solid #363636;
|
||||
}
|
||||
|
||||
.art-2 {
|
||||
left: 50%;
|
||||
background-image: url("/src/assets/onboarding-2.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.art-3 {
|
||||
left: 50%;
|
||||
background-image: url("/src/assets/onboarding-3.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.art-4 {
|
||||
left: 50%;
|
||||
background-image: url("/src/assets/onboarding-4.jpg");
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-left: 1px solid #363636;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
padding: 5.5em 3.75%;
|
||||
color: #fff;
|
||||
background: #080808;
|
||||
transition: left 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: auto;
|
||||
|
||||
> div:first-child {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
jusify-content: center;
|
||||
align-items: center;
|
||||
max-width: 43.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 42em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
@include fluid-font-size(3.125rem);
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.25rem);
|
||||
margin-top: 1.4em;
|
||||
line-height: 122%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
margin-top: 5.5em;
|
||||
}
|
||||
|
||||
.grant-info {
|
||||
@include fluid-font-size(1rem);
|
||||
margin-top: 5em;
|
||||
max-width: 27em;
|
||||
line-height: 125%;
|
||||
color: #808080;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content-2, .content-3, .content-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.started {
|
||||
.art-1 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.step-2 {
|
||||
.art-2 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-2 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.step-3 {
|
||||
.art-3 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-3 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.step-4 {
|
||||
.art-4 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content-4 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 48rem) {
|
||||
.art {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Dashboard from '/src/components/dashboard/Dashboard.svelte'
|
||||
|
||||
const app = new Dashboard({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Onboarding from '/src/components/onboarding/Onboarding.svelte'
|
||||
|
||||
const app = new Onboarding({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,115 @@
|
|||
@import "./mixins.scss";
|
||||
@import "./vars.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("/fonts/JetBrainsMono-Light.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/JetBrainsMono-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/fonts/JetBrainsMono-Bold.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/JetBrainsMono-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Jaldi';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Jaldi-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background: #080808;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(0.625rem);
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
@include fluid-font-size(1.25rem);
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background: #252525;
|
||||
border: 0.05em solid #252525;
|
||||
border-radius: 0.25em;
|
||||
transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #2e2e2e;
|
||||
}
|
||||
|
||||
&.btn-green {
|
||||
color: #080808;
|
||||
background: #62c554;
|
||||
border-color: #62c554;
|
||||
|
||||
&:hover {
|
||||
background: #6ee65d;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-black {
|
||||
background: #080808;
|
||||
border-color: #777;
|
||||
|
||||
&:hover {
|
||||
border-color: #a1a1a1;
|
||||
}
|
||||
|
||||
&.gray-text {
|
||||
color: #777;
|
||||
|
||||
&:hover {
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
@use "sass:math";
|
||||
|
||||
$min-vw: 56rem;
|
||||
$max-vw: 476rem; // 336rem, 616rem
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
||||
@mixin fluid-font-size($font-size) {
|
||||
$min-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width-height($width, $height) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
$u4: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
width: $min-width;
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
width: $max-width;
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width($width) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
width: $min-width;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
width: $max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-height($height) {
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-max-width-height($width, $height) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
$u4: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
max-width: $min-width;
|
||||
max-height: $min-height;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
max-width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
max-height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
max-width: $max-width;
|
||||
max-height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$font-family-jaldi: "Jaldi", sans-serif;
|
||||
$font-family-jetbrains-mono: "JetBrains Mono", monospace;
|
||||
|
||||
$transition-duration: 250ms;
|
||||
$transition-duration-double: 500ms;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess()
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
module.exports = {
|
||||
content: [
|
||||
'./onboarding.html',
|
||||
'./account.html',
|
||||
'./dashboard.html',
|
||||
'./src/**/*.{svelte,js,ts}'
|
||||
],
|
||||
mode: 'jit',
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
variants: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
import { resolve } from 'path';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
onboarding: resolve(__dirname, 'onboarding.html'),
|
||||
account: resolve(__dirname, 'account.html'),
|
||||
dashboard: resolve(__dirname, 'dashboard.html')
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue