diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.d.ts | 12 | ||||
| -rw-r--r-- | src/app.html | 123 | ||||
| -rw-r--r-- | src/app.postcss | 3 | ||||
| -rw-r--r-- | src/components/contact.svelte | 46 | ||||
| -rw-r--r-- | src/index.test.ts | 7 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 8 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 0 |
7 files changed, 199 insertions, 0 deletions
diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..f59b884 --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..c9bd64d --- /dev/null +++ b/src/app.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8" /> + <link rel="icon" href="%sveltekit.assets%/favicon.png" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <style> + /* reset */ + *, + *::after, + *::before { + box-sizing: border-box; + } + + * { + font: inherit; + margin: 0; + padding: 0; + border: 0; + } + + body { + background-color: hsl(0, 0%, 100%); + font-family: system-ui, sans-serif; + color: hsl(230, 7%, 23%); + font-size: 1rem; + } + + h1, + h2, + h3, + h4 { + line-height: 1.2; + color: hsl(230, 13%, 9%); + font-weight: 700; + } + + h1 { + font-size: 2.0736rem; + } + + h2 { + font-size: 1.728rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1.2rem; + } + + ol, + ul, + menu { + list-style: none; + } + + button, + input, + textarea, + select { + background-color: transparent; + border-radius: 0; + color: inherit; + line-height: inherit; + appearance: none; + } + + textarea { + resize: vertical; + overflow: auto; + vertical-align: top; + } + + a { + color: hsl(250, 84%, 54%); + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + img, + video, + svg { + display: block; + max-width: 100%; + } + + @media (min-width: 64rem) { + body { + font-size: 1.25rem; + } + + h1 { + font-size: 3.051rem; + } + + h2 { + font-size: 2.44rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.5625rem; + } + } + </style> + %sveltekit.head% +</head> + +<body> + <div>%sveltekit.body%</div> +</body> + +</html>
\ No newline at end of file diff --git a/src/app.postcss b/src/app.postcss new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/app.postcss @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/components/contact.svelte b/src/components/contact.svelte new file mode 100644 index 0000000..c7b0be3 --- /dev/null +++ b/src/components/contact.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + export let address1: string; + export let address2: string; + export let address3: string; + export let email: string; + export let phone: string; + export let phoneHours: string; +</script> + +<section class="contact relative z-1"> + <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl"> + <div class="mb-8 lg:mb-12"> + <h1 class="text-center">Contact Us</h1> + </div> + + <div class="grid grid-cols-12 gap-8 lg:gap-12"> + <div class="col-span-12 lg:col-span-6"> + <dl class="details-list details-list--rows"> + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Address</dt> + <dd class="leading-snug lg:text-right"> + {address1}<br />{address2}<br />{address3} + </dd> + </div> + + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Email</dt> + <dd> + <a href="mailto:webmaster@example.com">{email}</a> + </dd> + </div> + + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Phone</dt> + <dd class="leading-snug lg:text-right"> + <p><a href="tel:+44 7656 6455">{phone}</a></p> + <p class="text-contrast-medium">{phoneHours}</p> + </dd> + </div> + </dl> + </div> + + <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" /> + </div> + </div> +</section> diff --git a/src/index.test.ts b/src/index.test.ts new file mode 100644 index 0000000..e07cbbd --- /dev/null +++ b/src/index.test.ts @@ -0,0 +1,7 @@ +import { describe, it, expect } from 'vitest'; + +describe('sum test', () => { + it('adds 1 + 2 to equal 3', () => { + expect(1 + 2).toBe(3); + }); +}); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..30062ed --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,8 @@ +<script lang="ts"> + import '../app.postcss'; + import type { LayoutData } from './$types'; + + export let data: LayoutData; +</script> + +<slot /> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/routes/+page.svelte |