From df13147b3ab02263c6e63c6e8e62f7c9beeefc2c Mon Sep 17 00:00:00 2001 From: Realmy <163438634+RealmyTheMan@users.noreply.github.com> Date: Sat, 16 Nov 2024 10:22:20 +0100 Subject: [PATCH] Quality changes to be more accurate to the design --- package.json | 1 + src/app.html | 4 -- src/app.scss | 22 ++++----- src/lib/assets/font/HostGrotesk-Italic.woff2 | Bin 0 -> 31076 bytes src/lib/assets/font/HostGrotesk-Medium.woff2 | Bin 0 -> 29572 bytes .../font/HostGrotesk-MediumItalic.woff2 | Bin 0 -> 31016 bytes src/lib/assets/font/HostGrotesk-Regular.woff2 | Bin 0 -> 29624 bytes .../assets/font/HostGrotesk-SemiBold.woff2 | Bin 0 -> 29700 bytes .../font/HostGrotesk-SemiBoldItalic.woff2 | Bin 0 -> 31168 bytes src/lib/assets/style/host-grotesk.css | 42 ++++++++++++++++++ .../functional/ConversionPanel.svelte | 4 +- src/lib/components/functional/Navbar.svelte | 4 +- src/lib/components/visual/Footer.svelte | 4 +- src/routes/+layout.svelte | 9 +--- src/routes/+page.svelte | 5 +++ 15 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 src/lib/assets/font/HostGrotesk-Italic.woff2 create mode 100644 src/lib/assets/font/HostGrotesk-Medium.woff2 create mode 100644 src/lib/assets/font/HostGrotesk-MediumItalic.woff2 create mode 100644 src/lib/assets/font/HostGrotesk-Regular.woff2 create mode 100644 src/lib/assets/font/HostGrotesk-SemiBold.woff2 create mode 100644 src/lib/assets/font/HostGrotesk-SemiBoldItalic.woff2 create mode 100644 src/lib/assets/style/host-grotesk.css 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 0000000000000000000000000000000000000000..0f769d3befa2694205cd00d78a7e63a9c18d10e5 GIT binary patch literal 31076 zcmZ7b1B|9!(*=yS-P5*h+qP}nc2663o70-MZQHhO+r~f7`<;{X=d4t6?NoAQqiU~J z+2x@i&I|+$^bcO9K*;|-z?>mKK%Vdad_(_v|NnsF?
zYpNb1vfwy;@}sq$bm}>A5S$szyWew)7N}J+UoNt*QZu@*MFZ3*^sDJrd<;N{Lf|o5
z{9dG85)CG5*EZ6OGFa&DdSs`z{dZhn;NY@woP}U$!k4g2r1D_)$tcA|ZYLet_s?Zp
z*(^qB)k_Jv9GM4!R?j^`9Ghh}p0
z`{*6cvki*zto; _Ov%T5&iG32P8OeGG<2si$1*E|!B};tR%&wFbv#
zugQ>TWB+XXlP@ejpz?G-K#m7){igIXo;G=r!Up3!- (nUum;nXzrl#OJ
zfT!zFtGNy-W@15WF51#T$+ZcvD20#qsmLF$O+Y(Cl29Np6kgDav-*)Y5nP3&!D*wO
zFYtH`@B<9C>%=@22!nZY=x?Q~(Ao~q6DFijH35a@rOxwqCRej?fW2^P-n-KxZzaR1
zFzl_!TUlKMSwqL(m=b%(-t3z{&y6t^v@Dj{7eDyF1hfl&Yg6pc{ucPH6+FOxhYGf4
ztGb|d;UR|s@Or!L14%-*Bp@fmrHFhBL_ca5)sCW8i#FHs5_uDApNbsK8QyK=PlTlP
z*}z0i&Az{7`=-pMoI6qIPvU<6K;T?MO}3L|=oIXy1^nV7YF7W3*dFz38dy=SJZP!+
zy6VO8Ak@G0vo#RYj7B!&NSSCRBbq5onyKTPX#sngGn%hp&Fa6`4%_|l5523~_nDu%
z`rVTLe@*|-OnzMjq|rjonATvPK|?nmC%tk=Iieh^H^(6z>f|l6rmVO2ZKaNv-z>vK
zp8z?hu6_)REzCZY9`sE+PL=OdjXHkJt>Kh2$~omiFNaK!Me1ZTN7of;Cwf5_p@Ff5
z*@qeo#?Cjyl+0s~lf-WW(RTT9j9&o))*<|mUjpJ=KIZ6HnYIt9M?d)JOFt>uP%@Nn
zih2w+Q#xn>`4%_Scb*I)=hR7NjI2mZ^eRzO&L|h^9D*4ti^PhW`GaJ5azs~K;;aqX
zjt4;wt1G)Y=UXQ6>9^!o4R!THowb%p+=HPVM+KBK$_3?6y^0VP5jIm5TlR{UgT)#f
zPPq^`6eFt!`vNEz>K%e-MJ&GmY>;y98y-qDk$?J`vaUR@T&VXX2W}y}C4YI*dLl_^
z^h0E$1@UK)Hg(mb-x{IYoJ4Kk^(CGo1By*)RoZ)LG6AW?*@Eo1%!oGSjhb~R|7cG-
zlpqHn+O`{8+uFF@zu8g9&jFtO3C_e#CV6*j#}E^@n9S7E{G$g9