aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorFuwn <[email protected]>2022-09-21 18:29:52 -0700
committerFuwn <[email protected]>2022-09-21 18:29:52 -0700
commit7051213e0fdbd47ab1c0e6e8a67bda4f9cfba323 (patch)
treea0a59d1bf0b800635eb988a8c030cc0b0ed7c7fe /src
downloadcapybara-markets-7051213e0fdbd47ab1c0e6e8a67bda4f9cfba323.tar.xz
capybara-markets-7051213e0fdbd47ab1c0e6e8a67bda4f9cfba323.zip
feat: initial commit
Diffstat (limited to 'src')
-rw-r--r--src/app.css110
-rw-r--r--src/app.d.ts14
-rw-r--r--src/app.html12
-rw-r--r--src/hooks.server.ts16
-rw-r--r--src/lib/Counter.svelte103
-rw-r--r--src/lib/header/Header.svelte132
-rw-r--r--src/lib/header/capybara-markets-logo.svg1
-rw-r--r--src/routes/+layout.svelte49
-rw-r--r--src/routes/+page.svelte48
-rw-r--r--src/routes/+page.ts1
-rw-r--r--src/routes/about/+page.svelte35
-rw-r--r--src/routes/about/+page.ts9
12 files changed, 530 insertions, 0 deletions
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..ab61613
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,110 @@
+@import '@fontsource/fira-mono';
+
+@font-face {
+ font-family: 'Gilroy ExtraBold';
+ src: url('/Gilroy-FREE/Gilroy-ExtraBold.otf');
+}
+
+@font-face {
+ font-family: 'Gilroy Light';
+ src: url('/Gilroy-FREE/Gilroy-Light.otf');
+}
+
+:root {
+ font-family: 'Fira Mono', monospace;
+ --font-mono: 'Fira Mono', monospace;
+ --pure-white: #ffffff;
+ --primary-color: #b9c6d2;
+ --secondary-color: #d0dde9;
+ --tertiary-color: #edf0f8;
+ --accent-color: #ffe000;
+ --heading-color: rgba(0, 0, 0, 0.7);
+ --text-color: #444444;
+ --background-without-opacity: rgba(255, 255, 255, 0.7);
+ --column-width: 42rem;
+ --column-margin-top: 4rem;
+}
+
+body {
+ min-height: 100vh;
+ margin: 0;
+ /* background-color: var(--primary-color); */
+}
+
+body::before {
+ content: '';
+ width: 80vw;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ left: 10vw;
+ z-index: -1;
+ background: radial-gradient(
+ 50% 50% at 50% 50%,
+ var(--pure-white) 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ opacity: 0.05;
+}
+
+#svelte {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+h1,
+h2,
+p {
+ font-weight: 400;
+ color: var(--heading-color);
+}
+
+p {
+ line-height: 1.5;
+}
+
+a {
+ color: var(--accent-color);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+h1 {
+ font-size: 2rem;
+ text-align: center;
+}
+
+h2 {
+ font-size: 1rem;
+}
+
+pre {
+ font-size: 16px;
+ font-family: var(--font-mono);
+ background-color: rgba(255, 255, 255, 0.45);
+ border-radius: 3px;
+ box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+ padding: 0.5em;
+ overflow-x: auto;
+ color: var(--text-color);
+}
+
+input,
+button {
+ font-size: inherit;
+ font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+ outline: none;
+}
+
+@media (min-width: 720px) {
+ h1 {
+ font-size: 2.4rem;
+ }
+}
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..89fa05e
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,14 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+ interface Locals {
+ userid: string;
+ }
+
+ // interface PageData {}
+
+ // interface PageError {}
+
+ // interface Platform {}
+}
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..5b53ef7
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!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" />
+ %sveltekit.head%
+ </head>
+ <body>
+ <div>%sveltekit.body%</div>
+ </body>
+</html>
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
new file mode 100644
index 0000000..ef64e7f
--- /dev/null
+++ b/src/hooks.server.ts
@@ -0,0 +1,16 @@
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+ let userid = event.cookies.get('userid');
+
+ if (!userid) {
+ // if this is the first time the user has visited this app,
+ // set a cookie so that we recognise them when they return
+ userid = crypto.randomUUID();
+ event.cookies.set('userid', userid, { path: '/' });
+ }
+
+ event.locals.userid = userid;
+
+ return resolve(event);
+};
diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
new file mode 100644
index 0000000..bb71271
--- /dev/null
+++ b/src/lib/Counter.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+ import { spring } from 'svelte/motion';
+
+ let count = 0;
+
+ const displayed_count = spring();
+ $: displayed_count.set(count);
+ $: offset = modulo($displayed_count, 1);
+
+ function modulo(n: number, m: number) {
+ // handle negative numbers
+ return ((n % m) + m) % m;
+ }
+</script>
+
+<div class="counter">
+ <button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+ <svg aria-hidden="true" viewBox="0 0 1 1">
+ <path d="M0,0.5 L1,0.5" />
+ </svg>
+ </button>
+
+ <div class="counter-viewport">
+ <div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+ <strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+ <strong>{Math.floor($displayed_count)}</strong>
+ </div>
+ </div>
+
+ <button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+ <svg aria-hidden="true" viewBox="0 0 1 1">
+ <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+ </svg>
+ </button>
+</div>
+
+<style>
+ .counter {
+ display: flex;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ margin: 1rem 0;
+ }
+
+ .counter button {
+ width: 2em;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 0;
+ background-color: transparent;
+ touch-action: manipulation;
+ color: var(--text-color);
+ font-size: 2rem;
+ }
+
+ .counter button:hover {
+ background-color: var(--secondary-color);
+ }
+
+ svg {
+ width: 25%;
+ height: 25%;
+ }
+
+ path {
+ vector-effect: non-scaling-stroke;
+ stroke-width: 2px;
+ stroke: var(--text-color);
+ }
+
+ .counter-viewport {
+ width: 8em;
+ height: 4em;
+ overflow: hidden;
+ text-align: center;
+ position: relative;
+ }
+
+ .counter-viewport strong {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ font-weight: 400;
+ color: var(--accent-color);
+ font-size: 4rem;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .counter-digits {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ .hidden {
+ top: -100%;
+ user-select: none;
+ }
+</style>
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
new file mode 100644
index 0000000..534f306
--- /dev/null
+++ b/src/lib/header/Header.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+ import { page } from '$app/stores';
+ // import logo from './capybara-markets-logo.svg';
+</script>
+
+<header>
+ <div class="corner">
+ <a href="https://capybara.markets">
+ <!-- <img src={logo} alt="Capybara Markets" id="capybara-markets-logo" /> -->
+
+ <!-- <svg
+ id="Layer_1"
+ data-name="Layer 1"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 286.37 318.64"
+ ><path
+ d="M314.66,244.45c6,0,12.07,0,18.16,0,24-.14,47.93-.65,71.88-.33,17.5.24,32.36,6.08,40.21,23.39,4.89,10.77,4.92,22.22,3.6,33.55a126.61,126.61,0,0,1-16.46,48.84c-4.53,7.88-10.5,14-18.88,17.88a220.4,220.4,0,0,0-20.62,11c-6.18,3.73-6.13,6.59-.66,11.32,19.26,16.63,34.45,36.07,41.1,61.12,8.36,31.46-2.18,63.56-27.07,82-29.67,21.93-59.9,9.39-75.43-11.61a38.34,38.34,0,0,1-6.86-17.7c-1.77-15.65,7.93-27,23.89-29.26,4.67-.65,9.48-.24,14.2-.61,1.39-.1,3.57-.91,3.92-1.92,5.59-15.68,6.31-33.68-9-46.61a34.1,34.1,0,0,0-50.16,6.34c-2.44,3.44-4.5,7.15-6.94,11.07-2.16-3.53-4-6.86-6.17-10-9.49-14.09-25.43-19.19-41.1-13.22A35.44,35.44,0,0,0,229.89,457c.23,1.85.39,3.72.71,5.56,1.86,10.93,2.05,11,13,11.27a53.41,53.41,0,0,1,9.61,1c18.36,3.84,27.16,20.45,20.29,38.1C262,542.45,223,554.46,195.58,536.5c-19.91-13-30.22-32.25-32.33-55.68-2.28-25.33,6.22-47.59,21.71-67.13,7-8.83,15.41-16.55,23.37-24.59,3.72-3.75,3.43-7.78,2-12.19-2.94-9-7.16-17.84-8.53-27.08-4.3-29-.47-56.8,14.84-82.44,1-1.68,1.14-4.08,1.12-6.14-.06-7.78-1-15.61-.38-23.32.88-10.6,7.25-14.42,16.53-9.51,8.31,4.41,15.63,10.66,23.55,15.85a14.36,14.36,0,0,0,7.19,2.49c6.61.09,13.24-.64,19.85-.65,3,0,4.44-1.31,5.93-3.67a117.21,117.21,0,0,1,9.65-13.67c3-3.53,5.84-3.17,8.07.95C310.71,234.46,312.55,239.6,314.66,244.45Zm-29,47.82c.06-7.63-4.34-14.16-9.86-14.6-5.71-.45-10.47,5.17-11.22,13.28-.72,7.84,4.24,15.65,10.15,16S285.62,300.62,285.7,292.27Zm110.64-19.79-2-1.94a18.55,18.55,0,0,0-1.08,4.15,5.67,5.67,0,0,0,1,3.56,92.61,92.61,0,0,0,7.61,8,3.28,3.28,0,0,0,5.8-1.9C408.25,281,399.79,272.41,396.34,272.48Zm35.8,0c-4,.15-10.6,9.17-9.49,12.43a4.31,4.31,0,0,0,2.74,2.53c1,.14,2.48-.83,3.21-1.75a65.68,65.68,0,0,0,5.34-7.88,5,5,0,0,0,.32-3.68C434,273.3,432.59,272.82,432.14,272.5Z"
+ transform="translate(-162.88 -226.3)"
+ /></svg
+ > -->
+
+ <p style="font-family: 'Gilroy ExtraBold';">Capybara</p>
+ <p style="font-family: 'Gilroy Light';">Markets</p>
+ </a>
+ </div>
+
+ <nav data-sveltekit-prefetch>
+ <ul>
+ <li class:active={$page.url.pathname === '/'}>
+ <a href="/">Home</a>
+ </li>
+ <li class:active={$page.url.pathname === '/about'}>
+ <a href="/about">About</a>
+ </li>
+ <li>
+ <a href="https://twitter.com/CapybaraMarkets" target="_blank">Twitter</a>
+ </li>
+ </ul>
+ </nav>
+
+ <div class="corner">
+ <!-- TODO put something else here? github link? -->
+ </div>
+</header>
+
+<style>
+ header {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .corner {
+ width: 10em;
+ height: 3em;
+ }
+
+ .corner a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ }
+
+ .corner svg /* img */ {
+ width: 2em;
+ height: 2em;
+ object-fit: contain;
+ }
+
+ nav {
+ display: flex;
+ justify-content: center;
+ }
+
+ svg {
+ width: 2em;
+ height: 3em;
+ display: block;
+ }
+
+ path {
+ fill: var(--background);
+ }
+
+ ul {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ height: 3em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ list-style: none;
+ background: var(--background);
+ background-size: contain;
+ }
+
+ li {
+ position: relative;
+ height: 100%;
+ }
+
+ li.active::before {
+ --size: 6px;
+ content: '';
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: 0;
+ left: calc(50% - var(--size));
+ border: var(--size) solid transparent;
+ border-top: var(--size) solid var(--accent-color);
+ }
+
+ nav a {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ padding: 0 1em;
+ color: var(--heading-color);
+ font-weight: 700;
+ font-size: 0.8rem;
+ letter-spacing: 0.1em;
+ text-decoration: none;
+ transition: color 0.2s linear;
+ }
+
+ a:hover {
+ color: var(--accent-color);
+ }
+</style>
diff --git a/src/lib/header/capybara-markets-logo.svg b/src/lib/header/capybara-markets-logo.svg
new file mode 100644
index 0000000..9dd986d
--- /dev/null
+++ b/src/lib/header/capybara-markets-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.37 318.64"><path d="M314.66,244.45c6,0,12.07,0,18.16,0,24-.14,47.93-.65,71.88-.33,17.5.24,32.36,6.08,40.21,23.39,4.89,10.77,4.92,22.22,3.6,33.55a126.61,126.61,0,0,1-16.46,48.84c-4.53,7.88-10.5,14-18.88,17.88a220.4,220.4,0,0,0-20.62,11c-6.18,3.73-6.13,6.59-.66,11.32,19.26,16.63,34.45,36.07,41.1,61.12,8.36,31.46-2.18,63.56-27.07,82-29.67,21.93-59.9,9.39-75.43-11.61a38.34,38.34,0,0,1-6.86-17.7c-1.77-15.65,7.93-27,23.89-29.26,4.67-.65,9.48-.24,14.2-.61,1.39-.1,3.57-.91,3.92-1.92,5.59-15.68,6.31-33.68-9-46.61a34.1,34.1,0,0,0-50.16,6.34c-2.44,3.44-4.5,7.15-6.94,11.07-2.16-3.53-4-6.86-6.17-10-9.49-14.09-25.43-19.19-41.1-13.22A35.44,35.44,0,0,0,229.89,457c.23,1.85.39,3.72.71,5.56,1.86,10.93,2.05,11,13,11.27a53.41,53.41,0,0,1,9.61,1c18.36,3.84,27.16,20.45,20.29,38.1C262,542.45,223,554.46,195.58,536.5c-19.91-13-30.22-32.25-32.33-55.68-2.28-25.33,6.22-47.59,21.71-67.13,7-8.83,15.41-16.55,23.37-24.59,3.72-3.75,3.43-7.78,2-12.19-2.94-9-7.16-17.84-8.53-27.08-4.3-29-.47-56.8,14.84-82.44,1-1.68,1.14-4.08,1.12-6.14-.06-7.78-1-15.61-.38-23.32.88-10.6,7.25-14.42,16.53-9.51,8.31,4.41,15.63,10.66,23.55,15.85a14.36,14.36,0,0,0,7.19,2.49c6.61.09,13.24-.64,19.85-.65,3,0,4.44-1.31,5.93-3.67a117.21,117.21,0,0,1,9.65-13.67c3-3.53,5.84-3.17,8.07.95C310.71,234.46,312.55,239.6,314.66,244.45Zm-29,47.82c.06-7.63-4.34-14.16-9.86-14.6-5.71-.45-10.47,5.17-11.22,13.28-.72,7.84,4.24,15.65,10.15,16S285.62,300.62,285.7,292.27Zm110.64-19.79-2-1.94a18.55,18.55,0,0,0-1.08,4.15,5.67,5.67,0,0,0,1,3.56,92.61,92.61,0,0,0,7.61,8,3.28,3.28,0,0,0,5.8-1.9C408.25,281,399.79,272.41,396.34,272.48Zm35.8,0c-4,.15-10.6,9.17-9.49,12.43a4.31,4.31,0,0,0,2.74,2.53c1,.14,2.48-.83,3.21-1.75a65.68,65.68,0,0,0,5.34-7.88,5,5,0,0,0,.32-3.68C434,273.3,432.59,272.82,432.14,272.5Z" transform="translate(-162.88 -226.3)"/></svg> \ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..e6c496d
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+ import Header from '$lib/header/Header.svelte';
+ import '../app.css';
+</script>
+
+<Header />
+
+<main>
+ <slot />
+</main>
+
+<footer>
+ <p>
+ Visit <a href="https://twitter.com/CapybaraMarkets" target="_blank"
+ >twitter.com/CapybaraMarkets</a
+ > to learn more
+ </p>
+</footer>
+
+<style>
+ main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ width: 100%;
+ max-width: 1024px;
+ margin: 0 auto;
+ box-sizing: border-box;
+ }
+
+ footer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+ }
+
+ footer a {
+ font-weight: bold;
+ }
+
+ @media (min-width: 480px) {
+ footer {
+ padding: 40px 0;
+ }
+ }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..b80f6cf
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,48 @@
+<svelte:head>
+ <title>Home | Capybara Markets</title>
+ <meta name="description" content="Dashboard" />
+</svelte:head>
+
+<section>
+ <h1>
+ <span class="welcome">
+ <img src="NameYellow.png" alt="Capybara Markets" />
+ </span>
+ </h1>
+
+ <h1>Your one-stop shop to all things finance</h1>
+
+ <h2>
+ Capybara Markets delivers complete coverage of finance, <strong>#crypto</strong>, and the world.
+ </h2>
+</section>
+
+<style>
+ section {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ }
+
+ h1 {
+ width: 60%;
+ }
+
+ .welcome {
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 0;
+ padding: 0 0 calc(100% * 495 / 2048) 0;
+ }
+
+ .welcome img {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ display: block;
+ }
+</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..c7e3099
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,35 @@
+<svelte:head>
+ <title>About | Capybara Markets</title>
+ <meta name="description" content="About Capybara Markets" />
+</svelte:head>
+
+<div class="content">
+ <h1>About Capybara Markets</h1>
+
+ <p>
+ Welcome to <a href="https://capybara.markets">Capybara Markets</a>. You can expect us to cover
+ finance, <strong>#crypto</strong>, and world news in the near future.
+ </p>
+
+ <p>
+ Capybara Markets is under active development. If you'd like to stay up to date, follow us on
+ Twitter.
+ </p>
+
+ <a href="https://twitter.com/CapybaraMarkets" target="_blank">
+ <pre>twitter.com/@CapybaraMarkets</pre>
+ </a>
+
+ <p>
+ Our goal is to construct a complete, trusted, and collaberative platform where readers from all
+ around the world can tune in.
+ </p>
+</div>
+
+<style>
+ .content {
+ width: 100%;
+ max-width: var(--column-width);
+ margin: var(--column-margin-top) auto 0 auto;
+ }
+</style>
diff --git a/src/routes/about/+page.ts b/src/routes/about/+page.ts
new file mode 100644
index 0000000..3e13462
--- /dev/null
+++ b/src/routes/about/+page.ts
@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement...
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in prod
+export const prerender = true;
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 12:07:48 +0000