diff --git a/src/app.html b/src/app.html index 50c86a5..7cb724e 100644 --- a/src/app.html +++ b/src/app.html @@ -1,86 +1,17 @@ - + + + + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index 8bb2e70..374a0a9 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -96,12 +96,13 @@ diff --git a/src/lib/styles/fonts.css b/src/lib/styles/fonts.css new file mode 100644 index 0000000..a7d774d --- /dev/null +++ b/src/lib/styles/fonts.css @@ -0,0 +1,47 @@ +@font-face { + font-family: 'Merienda'; + font-display: swap; + src: + url('/fonts/merienda.regular.woff2') format('woff2'), + url('/fonts/merienda.regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; + font-optical-sizing: auto; +} + +@font-face { + font-family: 'Merienda'; + font-display: swap; + src: + url('/fonts/merienda.medium.woff2') format('woff2'), + url('/fonts/merienda.medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; + font-optical-sizing: auto; +} + +@font-face { + font-family: 'Merienda'; + font-display: swap; + src: + url('/fonts/merienda.semi-bold.woff2') format('woff2'), + url('/fonts/merienda.semi-bold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; + font-optical-sizing: auto; +} + +@font-face { + font-family: 'Merienda'; + font-display: swap; + src: + url('/fonts/merienda.bold.woff2') format('woff2'), + url('/fonts/merienda.bold.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; + font-optical-sizing: auto; +} diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css new file mode 100644 index 0000000..71a074f --- /dev/null +++ b/src/lib/styles/global.css @@ -0,0 +1,74 @@ +:root { + font-family: 'Merienda', cursive; + font-size: 16px; + line-height: 24px; + font-weight: 400; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +* { + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + flex-direction: column; + margin: 0; + width: 100%; + height: 100%; +} + +#app { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #f2f6f5; + z-index: 10; +} + +input[type='submit'] { + width: 100%; + font-size: 20px; + margin-top: 20px; + background-color: #05345f; + font-weight: 700; + color: white; + padding: 10px; + -webkit-appearance: none; + border-radius: 0; +} + +input[type='submit']:hover { + cursor: pointer; + background-color: black; + color: white; +} + +body a { + text-decoration: none; + color: #06345f; + border-bottom: 3px solid #06345f; +} + +body a:hover { + background-color: #06345f; + color: #ffffff; +} + +:is(h1, h2, h3, h4, h5, h6) { + color: #06345f; +} + +strong { + color: #06345f; +} + +ul li::marker { + color: #06345f; +} diff --git a/src/lib/styles/variables.css b/src/lib/styles/variables.css new file mode 100644 index 0000000..763f082 --- /dev/null +++ b/src/lib/styles/variables.css @@ -0,0 +1,5 @@ +:root { + --color-primary: #06345f; + + --font-base: 'Merienda'; +} diff --git a/src/lib/utils/isMobile.js b/src/lib/utils/isMobile.js new file mode 100644 index 0000000..b7037ac --- /dev/null +++ b/src/lib/utils/isMobile.js @@ -0,0 +1,9 @@ +import { browser } from '$app/environment'; + +export const isMobile = () => { + if (browser) { + return window.matchMedia('only screen and (max-width: 768px)').matches; + } else { + return null; + } +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c79c07d..3b39e0a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,8 @@ -
-
-
- - Embroidery Viewer App Screenshot -
- -
-

{$t("home.banner.title")}

-

- {@html $t('home.banner.subtitle')} -

-

- {$t('home.banner.description')} -

- - -
{ - loading = true; - return async ({ result }) => { - loading = false; - feedbackMessage = result.data; - if (result.type === 'success') await invalidateAll(); - applyAction(result); - }; - }}> - - - - - - - - - {#if feedbackMessage !== null} -

- {$t(feedbackMessage.message)} -

- {/if} -
-
-
-
+
@@ -106,7 +43,7 @@

{$t('home.donation.title')}

{@html $t('home.donation.description')}

- {$t('home.donation.cta')} + {$t('home.donation.cta')} – {$t('home.donation.cta.description')}

@@ -115,57 +52,13 @@

{$t('home.cta.title')}

- {$t('home.cta.cta')} + {$t('home.cta.cta')} – {@html $t('home.cta.cta.description')}

diff --git a/static/fonts/merienda.bold.woff b/static/fonts/merienda.bold.woff new file mode 100644 index 0000000..6ac7241 Binary files /dev/null and b/static/fonts/merienda.bold.woff differ diff --git a/static/fonts/merienda.bold.woff2 b/static/fonts/merienda.bold.woff2 new file mode 100644 index 0000000..59e6256 Binary files /dev/null and b/static/fonts/merienda.bold.woff2 differ diff --git a/static/fonts/merienda.medium.woff b/static/fonts/merienda.medium.woff new file mode 100644 index 0000000..814237c Binary files /dev/null and b/static/fonts/merienda.medium.woff differ diff --git a/static/fonts/merienda.medium.woff2 b/static/fonts/merienda.medium.woff2 new file mode 100644 index 0000000..0adc93f Binary files /dev/null and b/static/fonts/merienda.medium.woff2 differ diff --git a/static/fonts/merienda.regular.woff b/static/fonts/merienda.regular.woff new file mode 100644 index 0000000..ea0bf4a Binary files /dev/null and b/static/fonts/merienda.regular.woff differ diff --git a/static/fonts/merienda.regular.woff2 b/static/fonts/merienda.regular.woff2 new file mode 100644 index 0000000..dd67139 Binary files /dev/null and b/static/fonts/merienda.regular.woff2 differ diff --git a/static/fonts/merienda.semi-bold.woff b/static/fonts/merienda.semi-bold.woff new file mode 100644 index 0000000..1d7db6a Binary files /dev/null and b/static/fonts/merienda.semi-bold.woff differ diff --git a/static/fonts/merienda.semi-bold.woff2 b/static/fonts/merienda.semi-bold.woff2 new file mode 100644 index 0000000..858cb9a Binary files /dev/null and b/static/fonts/merienda.semi-bold.woff2 differ diff --git a/svelte.config.js b/svelte.config.js index 02ba2c8..d7bf373 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -17,6 +17,9 @@ const config = { prerender: { origin: 'https://embroideryviewer.xyz', }, + env: { + publicPrefix: 'PUBLIC_', + }, }; export default config;