mirror of https://github.com/VERT-sh/VERT.git
Quality changes to be more accurate to the design
This commit is contained in:
Realmy
parent
58ea91c869
commit
df13147b3a
|
|
@ -40,6 +40,7 @@
|
||||||
"@ffmpeg/util": "^0.12.1",
|
"@ffmpeg/util": "^0.12.1",
|
||||||
"@fontsource/azeret-mono": "^5.1.0",
|
"@fontsource/azeret-mono": "^5.1.0",
|
||||||
"@fontsource/lexend": "^5.1.1",
|
"@fontsource/lexend": "^5.1.1",
|
||||||
|
"@fontsource/radio-canada-big": "^5.1.0",
|
||||||
"@imagemagick/magick-wasm": "^0.0.31",
|
"@imagemagick/magick-wasm": "^0.0.31",
|
||||||
"client-zip": "^2.4.5",
|
"client-zip": "^2.4.5",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,6 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|
|
||||||
22
src/app.scss
22
src/app.scss
|
|
@ -2,9 +2,8 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@import url(@fontsource/lexend/400.css);
|
@import url(@fontsource/radio-canada-big/600.css);
|
||||||
@import url(@fontsource/lexend/500.css);
|
@import url("$lib/assets/style/host-grotesk.css");
|
||||||
@import url(@fontsource/azeret-mono/600.css);
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--font-body: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
|
--font-body: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
|
@ -27,7 +26,6 @@
|
||||||
1.017 63.9%,
|
1.017 63.9%,
|
||||||
1.001
|
1.001
|
||||||
);
|
);
|
||||||
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin light {
|
@mixin light {
|
||||||
|
|
@ -40,7 +38,7 @@
|
||||||
--fg-on-accent: hsl(0, 0%, 0%);
|
--fg-on-accent: hsl(0, 0%, 0%);
|
||||||
|
|
||||||
// backgrounds
|
// backgrounds
|
||||||
--bg: hsl(0, 0%, 100%);
|
--bg: hsl(0, 0%, 95%);
|
||||||
--bg-gradient: linear-gradient(
|
--bg-gradient: linear-gradient(
|
||||||
to bottom left,
|
to bottom left,
|
||||||
hsla(235, 100%, 50%, 0.3),
|
hsla(235, 100%, 50%, 0.3),
|
||||||
|
|
@ -58,9 +56,11 @@
|
||||||
);
|
);
|
||||||
--bg-panel: hsl(0, 0%, 100%);
|
--bg-panel: hsl(0, 0%, 100%);
|
||||||
--bg-panel-alt: hsl(0, 0%, 92%);
|
--bg-panel-alt: hsl(0, 0%, 92%);
|
||||||
--bg-panel-accented: color-mix(in srgb, var(--accent) 35%, transparent);
|
--bg-panel-accented: hsl(300, 25%, 91%);
|
||||||
--bg-separator: hsl(0, 0%, 88%);
|
--bg-separator: hsl(0, 0%, 88%);
|
||||||
--bg-button: var(--bg-panel-accented);
|
--bg-button: var(--bg-panel-accented);
|
||||||
|
|
||||||
|
--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin dark {
|
@mixin dark {
|
||||||
|
|
@ -89,10 +89,12 @@
|
||||||
hsla(353, 100%, 50%, 0.07),
|
hsla(353, 100%, 50%, 0.07),
|
||||||
hsla(353, 100%, 50%, 0) 50%
|
hsla(353, 100%, 50%, 0) 50%
|
||||||
);
|
);
|
||||||
--bg-panel: hsl(225, 4%, 18%);
|
--bg-panel: hsl(220, 4%, 18%);
|
||||||
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
|
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||||
--bg-panel-alt: hsl(225, 6%, 25%);
|
--bg-panel-alt: hsl(220, 6%, 25%);
|
||||||
--bg-separator: hsl(214, 4%, 32%);
|
--bg-separator: hsl(220, 4%, 28%);
|
||||||
|
|
||||||
|
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
||||||
|
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
@ -130,7 +132,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 py-3 rounded-full focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
|
@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
|
||||||
transition:
|
transition:
|
||||||
opacity 0.2s ease,
|
opacity 0.2s ease,
|
||||||
transform 0.2s ease,
|
transform 0.2s ease,
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,42 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-Regular.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-Italic.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-Medium.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-MediumItalic.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-SemiBold.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Host Grotesk";
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url("$lib/assets/font/HostGrotesk-SemiBoldItalic.woff2")
|
||||||
|
format("woff2");
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { FolderArchiveIcon, RotateCw } from "lucide-svelte";
|
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
|
||||||
import Panel from "../visual/Panel.svelte";
|
import Panel from "../visual/Panel.svelte";
|
||||||
import { files } from "$lib/store/index.svelte";
|
import { files } from "$lib/store/index.svelte";
|
||||||
import Dropdown from "./Dropdown.svelte";
|
import Dropdown from "./Dropdown.svelte";
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
class="btn highlight flex gap-3"
|
class="btn highlight flex gap-3"
|
||||||
disabled={!files.ready}
|
disabled={!files.ready}
|
||||||
>
|
>
|
||||||
<RotateCw size="24" />
|
<RefreshCw size="24" />
|
||||||
<p>Convert all</p>
|
<p>Convert all</p>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
href={item.url}
|
href={item.url}
|
||||||
aria-label={item.name}
|
aria-label={item.name}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
"px-4 h-full rounded-xl flex items-center justify-center gap-3 overflow-hidden",
|
"w-32 h-full rounded-xl flex items-center justify-center gap-3 overflow-hidden",
|
||||||
{
|
{
|
||||||
"bg-panel-accented": item.activeMatch($page.url.pathname),
|
"bg-panel-accented": item.activeMatch($page.url.pathname),
|
||||||
},
|
},
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<div class="grid grid-rows-1 grid-cols-1">
|
<div class="grid grid-rows-1 grid-cols-1">
|
||||||
{#key item.name}
|
{#key item.name}
|
||||||
<p
|
<p
|
||||||
class="row-start-1 col-start-1"
|
class="row-start-1 col-start-1 font-medium"
|
||||||
in:blur={{
|
in:blur={{
|
||||||
blurMultiplier: 6,
|
blurMultiplier: 6,
|
||||||
duration,
|
duration,
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,9 @@
|
||||||
{#each links as [name, url] (name)}
|
{#each links as [name, url] (name)}
|
||||||
<!-- bullet point -->
|
<!-- bullet point -->
|
||||||
<p>•</p>
|
<p>•</p>
|
||||||
<a target="_blank" class="hover:underline" href={url}>{name}</a>
|
<a target="_blank" class="hover:underline font-normal" href={url}
|
||||||
|
>{name}</a
|
||||||
|
>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
import {
|
import {
|
||||||
InfoIcon,
|
InfoIcon,
|
||||||
MoonIcon,
|
MoonIcon,
|
||||||
RotateCw,
|
RefreshCw,
|
||||||
SettingsIcon,
|
SettingsIcon,
|
||||||
SunIcon,
|
SunIcon,
|
||||||
UploadIcon,
|
UploadIcon,
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
: `Convert`,
|
: `Convert`,
|
||||||
url: "/convert",
|
url: "/convert",
|
||||||
activeMatch: (pathname) => pathname === "/convert",
|
activeMatch: (pathname) => pathname === "/convert",
|
||||||
icon: RotateCw,
|
icon: RefreshCw,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Settings",
|
name: "Settings",
|
||||||
|
|
@ -116,11 +116,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="fixed top-0 left-0 w-screen h-screen -z-50 pointer-events-none"
|
|
||||||
style="background: var(--bg-gradient);"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div class="min-h-screen">
|
<div class="min-h-screen">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,11 @@
|
||||||
<VertVBig class="fill-[--fg] opacity-50" />
|
<VertVBig class="fill-[--fg] opacity-50" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="fixed top-0 left-0 w-screen h-screen -z-50 pointer-events-none"
|
||||||
|
style="background: var(--bg-gradient);"
|
||||||
|
></div>
|
||||||
|
|
||||||
<div class="w-screen h-screen flex items-center justify-center">
|
<div class="w-screen h-screen flex items-center justify-center">
|
||||||
<div class="max-w-5xl w-full">
|
<div class="max-w-5xl w-full">
|
||||||
<div class="flex items-center h-[266px] gap-24">
|
<div class="flex items-center h-[266px] gap-24">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue