2021-10-29 18:50:33 +02:00
|
|
|
<script lang="ts">
|
2021-11-11 23:37:42 +01:00
|
|
|
import { Router, Route, createHistory } from "svelte-navigator";
|
|
|
|
import createHashSource from "./util/history";
|
|
|
|
import Header from "./layout/Header.svelte";
|
|
|
|
import Home from "./views/Home.svelte";
|
|
|
|
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
|
|
|
|
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
|
|
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
|
|
|
|
import Browse from "./views/Browse.svelte";
|
|
|
|
|
|
|
|
setBasePath("/vendor/shoelace");
|
|
|
|
|
|
|
|
$: document.body.classList.toggle(
|
|
|
|
"sl-theme-dark",
|
|
|
|
window.matchMedia &&
|
|
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
|
|
);
|
|
|
|
|
|
|
|
const history = createHistory(createHashSource());
|
2021-10-29 18:50:33 +02:00
|
|
|
</script>
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
<Router {history} primary={false}>
|
|
|
|
<Header />
|
2021-11-29 22:28:32 +01:00
|
|
|
|
|
|
|
<Route path="/">
|
|
|
|
<Home />
|
|
|
|
</Route>
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
<Route path="/browse/*addresses" let:params>
|
|
|
|
<Browse />
|
|
|
|
</Route>
|
|
|
|
</Router>
|
|
|
|
|
|
|
|
<style global lang="scss">
|
2021-12-01 21:12:13 +01:00
|
|
|
@use "sass:color";
|
|
|
|
|
2021-11-12 16:27:35 +01:00
|
|
|
@use "normalize.css/normalize.css";
|
|
|
|
@use "@shoelace-style/shoelace/dist/themes/light.css";
|
|
|
|
@use "@shoelace-style/shoelace/dist/themes/dark.css";
|
2021-11-11 23:37:42 +01:00
|
|
|
@import url("/assets/fonts/inter.css");
|
|
|
|
|
2021-12-01 21:12:13 +01:00
|
|
|
$primary: #2c3e50;
|
2021-12-11 20:02:47 +01:00
|
|
|
$primary-lighter: #394F66;
|
2021-12-01 21:12:13 +01:00
|
|
|
$background: white;
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
html {
|
|
|
|
--default-font: "Inter", sans-serif;
|
2021-12-06 15:23:48 +01:00
|
|
|
--monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
|
2021-12-01 21:12:13 +01:00
|
|
|
--foreground: #{$primary};
|
2021-12-11 20:02:47 +01:00
|
|
|
--foreground-lighter: #{$primary-lighter};
|
2021-12-01 21:12:13 +01:00
|
|
|
--background: #{$background};
|
|
|
|
--background-emph: #{color.scale($background, $lightness: -3%)};
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
b {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
|
|
html {
|
|
|
|
--default-font: "Inter var", sans-serif;
|
|
|
|
font-feature-settings: "ss02" on;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
html {
|
2021-12-01 21:12:13 +01:00
|
|
|
--foreground: #{$background};
|
|
|
|
--foreground-lighter: #{color.scale($background, $lightness: -50%)};
|
|
|
|
--background: #{$primary};
|
2021-12-11 20:02:47 +01:00
|
|
|
--background-emph: #{$primary-lighter};
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
html,
|
|
|
|
body,
|
|
|
|
#app,
|
|
|
|
#root {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
font-family: var(--default-font);
|
|
|
|
color: var(--foreground);
|
|
|
|
background: var(--background);
|
|
|
|
}
|
|
|
|
|
|
|
|
#root {
|
|
|
|
color: var(--foreground);
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
margin: 1rem 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main {
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main,
|
|
|
|
#header {
|
|
|
|
margin: 0 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#footer {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
background: var(--background);
|
|
|
|
}
|
|
|
|
|
|
|
|
#footer > * {
|
|
|
|
margin: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: var(--foreground);
|
|
|
|
}
|
|
|
|
|
|
|
|
a:visited {
|
|
|
|
color: var(--foreground);
|
|
|
|
}
|
|
|
|
</style>
|