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",
|
||||
"@fontsource/azeret-mono": "^5.1.0",
|
||||
"@fontsource/lexend": "^5.1.1",
|
||||
"@fontsource/radio-canada-big": "^5.1.0",
|
||||
"@imagemagick/magick-wasm": "^0.0.31",
|
||||
"client-zip": "^2.4.5",
|
||||
"clsx": "^2.1.1",
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
|
|
|||
22
src/app.scss
22
src/app.scss
|
|
@ -2,9 +2,8 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url(@fontsource/lexend/400.css);
|
||||
@import url(@fontsource/lexend/500.css);
|
||||
@import url(@fontsource/azeret-mono/600.css);
|
||||
@import url(@fontsource/radio-canada-big/600.css);
|
||||
@import url("$lib/assets/style/host-grotesk.css");
|
||||
|
||||
:root {
|
||||
--font-body: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
1.017 63.9%,
|
||||
1.001
|
||||
);
|
||||
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
||||
}
|
||||
|
||||
@mixin light {
|
||||
|
|
@ -40,7 +38,7 @@
|
|||
--fg-on-accent: hsl(0, 0%, 0%);
|
||||
|
||||
// backgrounds
|
||||
--bg: hsl(0, 0%, 100%);
|
||||
--bg: hsl(0, 0%, 95%);
|
||||
--bg-gradient: linear-gradient(
|
||||
to bottom left,
|
||||
hsla(235, 100%, 50%, 0.3),
|
||||
|
|
@ -58,9 +56,11 @@
|
|||
);
|
||||
--bg-panel: hsl(0, 0%, 100%);
|
||||
--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-button: var(--bg-panel-accented);
|
||||
|
||||
--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
|
|
@ -89,10 +89,12 @@
|
|||
hsla(353, 100%, 50%, 0.07),
|
||||
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-alt: hsl(225, 6%, 25%);
|
||||
--bg-separator: hsl(214, 4%, 32%);
|
||||
--bg-panel-alt: hsl(220, 6%, 25%);
|
||||
--bg-separator: hsl(220, 4%, 28%);
|
||||
|
||||
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
|
@ -130,7 +132,7 @@ body {
|
|||
}
|
||||
|
||||
.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:
|
||||
opacity 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">
|
||||
import { FolderArchiveIcon, RotateCw } from "lucide-svelte";
|
||||
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
|
||||
import Panel from "../visual/Panel.svelte";
|
||||
import { files } from "$lib/store/index.svelte";
|
||||
import Dropdown from "./Dropdown.svelte";
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
class="btn highlight flex gap-3"
|
||||
disabled={!files.ready}
|
||||
>
|
||||
<RotateCw size="24" />
|
||||
<RefreshCw size="24" />
|
||||
<p>Convert all</p>
|
||||
</button>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
href={item.url}
|
||||
aria-label={item.name}
|
||||
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),
|
||||
},
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="grid grid-rows-1 grid-cols-1">
|
||||
{#key item.name}
|
||||
<p
|
||||
class="row-start-1 col-start-1"
|
||||
class="row-start-1 col-start-1 font-medium"
|
||||
in:blur={{
|
||||
blurMultiplier: 6,
|
||||
duration,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
{#each links as [name, url] (name)}
|
||||
<!-- bullet point -->
|
||||
<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}
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
import {
|
||||
InfoIcon,
|
||||
MoonIcon,
|
||||
RotateCw,
|
||||
RefreshCw,
|
||||
SettingsIcon,
|
||||
SunIcon,
|
||||
UploadIcon,
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
: `Convert`,
|
||||
url: "/convert",
|
||||
activeMatch: (pathname) => pathname === "/convert",
|
||||
icon: RotateCw,
|
||||
icon: RefreshCw,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
|
|
@ -116,11 +116,6 @@
|
|||
</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">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
<VertVBig class="fill-[--fg] opacity-50" />
|
||||
</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="max-w-5xl w-full">
|
||||
<div class="flex items-center h-[266px] gap-24">
|
||||
|
|
|
|||
Loading…
Reference in New Issue