diff --git a/package.json b/package.json
index 225d325..9c4a9ca 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/app.html b/src/app.html
index 0b55ebd..2baf8f6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,10 +6,6 @@
-
%sveltekit.head%
diff --git a/src/app.scss b/src/app.scss
index d1117cc..8584291 100644
--- a/src/app.scss
+++ b/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,
diff --git a/src/lib/assets/font/HostGrotesk-Italic.woff2 b/src/lib/assets/font/HostGrotesk-Italic.woff2
new file mode 100644
index 0000000..0f769d3
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-Italic.woff2 differ
diff --git a/src/lib/assets/font/HostGrotesk-Medium.woff2 b/src/lib/assets/font/HostGrotesk-Medium.woff2
new file mode 100644
index 0000000..35e0e20
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-Medium.woff2 differ
diff --git a/src/lib/assets/font/HostGrotesk-MediumItalic.woff2 b/src/lib/assets/font/HostGrotesk-MediumItalic.woff2
new file mode 100644
index 0000000..f914430
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-MediumItalic.woff2 differ
diff --git a/src/lib/assets/font/HostGrotesk-Regular.woff2 b/src/lib/assets/font/HostGrotesk-Regular.woff2
new file mode 100644
index 0000000..ce89d2b
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-Regular.woff2 differ
diff --git a/src/lib/assets/font/HostGrotesk-SemiBold.woff2 b/src/lib/assets/font/HostGrotesk-SemiBold.woff2
new file mode 100644
index 0000000..9a80dbf
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-SemiBold.woff2 differ
diff --git a/src/lib/assets/font/HostGrotesk-SemiBoldItalic.woff2 b/src/lib/assets/font/HostGrotesk-SemiBoldItalic.woff2
new file mode 100644
index 0000000..51a41c5
Binary files /dev/null and b/src/lib/assets/font/HostGrotesk-SemiBoldItalic.woff2 differ
diff --git a/src/lib/assets/style/host-grotesk.css b/src/lib/assets/style/host-grotesk.css
new file mode 100644
index 0000000..b23bb77
--- /dev/null
+++ b/src/lib/assets/style/host-grotesk.css
@@ -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");
+}
diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index e4fd90d..846cdb7 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -1,5 +1,5 @@