Skip to content

Commit

Permalink
feat: continued website rework (especially the hacker news demo)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonasgeiler
jonasgeiler committed Apr 22, 2024
1 parent 3fbad07 commit 360223f
Show file tree
Hide file tree
Showing 10 changed files with 326 additions and 192 deletions.
132 changes: 132 additions & 0 deletions src/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
body {
--primary: #b42900 !important;
--on-primary: #ffffff !important;
--primary-container: #ffdad2 !important;
--on-primary-container: #3c0700 !important;
--secondary: #77574f !important;
--on-secondary: #ffffff !important;
--secondary-container: #ffdad2 !important;
--on-secondary-container: #2c1510 !important;
--tertiary: #6d5d2e !important;
--on-tertiary: #ffffff !important;
--tertiary-container: #f7e1a6 !important;
--on-tertiary-container: #231a00 !important;
--error: #ba1a1a !important;
--on-error: #ffffff !important;
--error-container: #ffdad6 !important;
--on-error-container: #410002 !important;
--background: #fffbff !important;
--on-background: #201a19 !important;
--surface: #fff8f6 !important;
--on-surface: #201a19 !important;
--surface-variant: #f5ddd8 !important;
--on-surface-variant: #534340 !important;
--outline: #85736f !important;
--outline-variant: #d8c2bd !important;
--shadow: #000000 !important;
--scrim: #000000 !important;
--inverse-surface: #362f2d !important;
--inverse-on-surface: #fbeeeb !important;
--inverse-primary: #ffb4a2 !important;
--surface-dim: #e4d7d4 !important;
--surface-bright: #fff8f6 !important;
--surface-container-lowest: #ffffff !important;
--surface-container-low: #fef1ee !important;
--surface-container: #f8ebe8 !important;
--surface-container-high: #f3e5e2 !important;
--surface-container-highest: #ede0dd !important;
}

body.dark {
--primary: #ffb4a2 !important;
--on-primary: #611200 !important;
--primary-container: #891d00 !important;
--on-primary-container: #ffdad2 !important;
--secondary: #e7bdb3 !important;
--on-secondary: #442a23 !important;
--secondary-container: #5d4038 !important;
--on-secondary-container: #ffdad2 !important;
--tertiary: #dac58d !important;
--on-tertiary: #3c2f04 !important;
--tertiary-container: #544519 !important;
--on-tertiary-container: #f7e1a6 !important;
--error: #ffb4ab !important;
--on-error: #690005 !important;
--error-container: #93000a !important;
--on-error-container: #ffb4ab !important;
--background: #201a19 !important;
--on-background: #ede0dd !important;
--surface: #181211 !important;
--on-surface: #ede0dd !important;
--surface-variant: #534340 !important;
--on-surface-variant: #d8c2bd !important;
--outline: #a08c88 !important;
--outline-variant: #534340 !important;
--shadow: #000000 !important;
--scrim: #000000 !important;
--inverse-surface: #ede0dd !important;
--inverse-on-surface: #362f2d !important;
--inverse-primary: #b42900 !important;
--surface-dim: #181211 !important;
--surface-bright: #3f3736 !important;
--surface-container-lowest: #120d0c !important;
--surface-container-low: #201a19 !important;
--surface-container: #251e1d !important;
--surface-container-high: #2f2827 !important;
--surface-container-highest: #3b3331 !important;
}

/* Fix for elements inside <article> elements that inherit border radius */
article * {
border-radius: 0;
}

/* Like field but for range inputs */
.range-field {
margin-top: 1rem;
margin-bottom: 2rem;
}

/* Helper class to use inline display */
.inline {
display: inline;
}

/* Helper class to use flex display */
.flex {
display: flex;
}

/* Helper class to set flex direction to column */
.flex-column {
flex-direction: column;
}

/* Helper class to make an element fill the available flex space */
.flex-1 {
flex: 1;
}

/* Outer padding for some pages */
.docs-page,
.example-page {
padding: 2rem;
}

/* Center content of virtual list items on example pages */
.example-page .virtual-list-row,
.example-page .virtual-list-col {
display: flex;
align-items: center;
justify-content: center;
}

/* Add bottom borders to virtual list rows on example pages */
.example-page .virtual-list-row:not(:last-child) {
border-bottom: 0.0625rem solid var(--outline);
}

/* Add right borders to virtual list columns on example pages */
.example-page .virtual-list-col:not(:last-child) {
border-right: 0.0625rem solid var(--outline);
}
106 changes: 35 additions & 71 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,38 @@
import 'beercss';
import { base } from '$app/paths';
import { page } from '$app/stores';
import { browser } from '$app/environment';
let darkMode = true;
function handleSwitchDarkMode() {
darkMode = !darkMode;
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
}
if (browser) {
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.body.classList.add('dark');
darkMode = true;
} else {
document.body.classList.remove('dark');
darkMode = false;
}
}
</script>

<nav class="left drawer">
<header class="fixed">
<nav>
<img
src="{base}/logo.svg"
srcset="{base}/logo.svg 2x"
aria-hidden="true"
alt="Logo"
height="24"
width="24"
/>
<i>
<img src="{base}/logo.svg" srcset="{base}/logo.svg 2x" aria-hidden="true" alt="Logo" />
</i>
<h6>svelte-tiny-virtual-list</h6>
</nav>
</header>
Expand All @@ -36,7 +55,6 @@
<a href="https://npmjs.com/package/svelte-tiny-virtual-list" target="_blank">
<i aria-hidden="true">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>npm</title>
<path
d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
/>
Expand Down Expand Up @@ -83,71 +101,17 @@
<i aria-hidden="true">newspaper</i>
<div>Hacker News</div>
</a>

<div class="max"></div>
<button class="circle border" on:click={handleSwitchDarkMode}>
<i aria-hidden="true">{darkMode ? 'light_mode' : 'dark_mode'}</i>
</button>
</nav>

<main id="content" class="responsive">
<main id="content" class="responsive flex flex-column">
<slot />
</main>

<style>
:global(body) {
--primary: #ffb5a0 !important;
--on-primary: #5f1500 !important;
--primary-container: #862200 !important;
--on-primary-container: #ffdbd1 !important;
--secondary: #e7bdb2 !important;
--on-secondary: #442a22 !important;
--secondary-container: #5d4037 !important;
--on-secondary-container: #ffdbd1 !important;
--tertiary: #d8c58d !important;
--on-tertiary: #3b2f05 !important;
--tertiary-container: #534619 !important;
--on-tertiary-container: #f5e1a7 !important;
--error: #ffb4ab !important;
--on-error: #690005 !important;
--error-container: #93000a !important;
--on-error-container: #ffb4ab !important;
--background: #201a18 !important;
--on-background: #ede0dc !important;
--surface: #181210 !important;
--on-surface: #ede0dc !important;
--surface-variant: #53433f !important;
--on-surface-variant: #d8c2bc !important;
--outline: #a08c87 !important;
--outline-variant: #53433f !important;
--shadow: #000000 !important;
--scrim: #000000 !important;
--inverse-surface: #ede0dc !important;
--inverse-on-surface: #362f2d !important;
--inverse-primary: #b02f00 !important;
--surface-dim: #181210 !important;
--surface-bright: #3f3735 !important;
--surface-container-lowest: #120d0b !important;
--surface-container-low: #201a18 !important;
--surface-container: #251e1c !important;
--surface-container-high: #2f2827 !important;
--surface-container-highest: #3b3331 !important;
}
:global(#content > *) {
padding: 2rem;
}
:global(.range-field) {
margin-top: 1rem;
margin-bottom: 2rem;
}
:global(article .virtual-list-inner .row),
:global(article .virtual-list-inner .col) {
padding: 1rem;
}
:global(article .virtual-list-inner .row:not(:last-child)) {
border-bottom: 0.0625rem solid var(--outline);
}
:global(article .virtual-list-inner .col:not(:last-child)) {
border-right: 0.0625rem solid var(--outline);
}
<style global>
@import '../app.css';
</style>
2 changes: 1 addition & 1 deletion src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<title>svelte-tiny-virtual-list</title>
</svelte:head>

<div id="readme" class="markdown-body">
<div id="readme" class="docs-page markdown-body">
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html readmeHtml}
</div>
Expand Down
Loading

0 comments on commit 360223f

Please sign in to comment.