Compare commits

..

No commits in common. "main" and "post/series" have entirely different histories.

7 changed files with 35 additions and 119 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "chrysoblog",
"version": "0.0.4",
"version": "0.0.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "chrysoblog",
"version": "0.0.4",
"version": "0.0.2",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^0.21.13",

View File

@ -1,6 +1,6 @@
{
"name": "chrysoblog",
"version": "0.0.4",
"version": "0.0.2",
"private": true,
"scripts": {
"dev": "vite dev",

View File

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<meta name="theme-color" content="#028760" />
</head>
<body data-sveltekit-preload-data="hover" class="font-serif">
<div style="display: contents">%sveltekit.body%</div>

View File

@ -1,4 +1,4 @@
import { writable, get } from 'svelte/store'
import { writable } from 'svelte/store'
import { browser } from "$app/environment"
type Theme = 'tokiwa' | 'star'
@ -11,11 +11,3 @@ export const theme = writable(userTheme ?? 'tokiwa')
export function setTheme(newTheme: Theme) {
theme.set(newTheme)
}
export function getThemeObject(key: string, obj: { [key in Theme]: string } | string) {
if (typeof obj === 'object') {
return obj[key];
} else {
return obj;
}
}

View File

@ -1,7 +1,6 @@
<script lang="ts">
import '../app.css';
import { page } from '$app/stores';
import { name } from '$content/metadata.json';
import Footer from "./Footer.svelte";
import Navbar from "./Navbar.svelte";
import PageTransition from "./PageTransition.svelte";
@ -12,8 +11,7 @@
<!-- Homepage has its own navbar with animations -->
{#if $page.url.pathname != "/"}
<div id="layout">
<div id="nav">
<p id="bio-name">{name}</p>
<div id="navbar">
<Navbar />
<slot name="header" />
</div>
@ -33,12 +31,6 @@
{/if}
<style>
#bio-name {
font-family: serif;
font-size: 3rem;
font-weight: normal;
color: var(--name);
}
#layout {
max-width: max(80vw, 100vh);
margin-left: auto;
@ -66,7 +58,7 @@
width: min(100vw, max(50vw, 100vh));
grid-area: content;
}
#nav {
#navbar {
align-self: right;
padding-left: 10px;
grid-area: nav;

View File

@ -1,8 +1,6 @@
<script lang="ts">
import { derived } from 'svelte/store'
import { routes } from "$lib/sitemap.ts"
import { Separator } from "$lib/components/ui/separator/index.js";
import { theme, getThemeObject } from '$lib/theme'
import { Rss } from "lucide-svelte";
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
let scrollPosition: number = .5;
@ -40,11 +38,6 @@
};
const iconLinks: [string, string][] = Object.entries(metadata.links).map(
([key, link]) => [iconMap[key], link]);
const frontCover = derived(
theme,
($theme) => getThemeObject($theme, metadata.frontCover)
)
</script>
<svelte:head>
@ -53,7 +46,7 @@
<div
id="background"
style="opacity: {1 - progress}; background-image: url('{$frontCover}')"
style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
>
</div>
@ -115,17 +108,18 @@
<style>
#background {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -10;
position: absolute;
min-width: 100svw;
height: 100svh;
position: fixed;
min-width: 100%;
min-height: 100%;
overscroll-behaviour: none;
}
#front {
height: 100svh;
height: 100vh;
display: flex;
flex-direction: column;
overscroll-behavior: none;

View File

@ -1,95 +1,43 @@
<script lang="ts">
import { page } from '$app/stores';
import { routes } from "$lib/sitemap.ts"
import { name } from '$content/metadata.json';
import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
import { Rss, Menu } from "lucide-svelte";
import { Rss } from "lucide-svelte";
function isCurrentLink(pathname, route) {
return route != "/" && pathname.startsWith(route)
|| route == "/post" && pathname.startsWith("/page");
}
import { onMount } from 'svelte';
let showDropdown = false;
function onDropdownToggle(event) {
showDropdown = !showDropdown;
}
function onKeyDown(event) {
if (event.key == "Escape") {
showDropdown = !showDropdown;
}
}
</script>
<nav
id="navbar"
class="h-5 space-x-4"
class:dropdown-opened={showDropdown}>
<div
class="link-container"
role="button"
tabindex={0}
on:keydown={onKeyDown}
on:click={() => { showDropdown = false; }}
>
{#each routes as item}
<a
class="nav-link"
class:disabled-link={item.disabled}
class:current-link={isCurrentLink($page.url.pathname, item.route)}
on:click={() => { showDropdown = false; }}
href={item.route}>
{item.name}
</a>
{/each}
<a class="nav-link icon" href="/rss.xml"><Rss /></a>
<div><ThemeSwitch /></div>
</div>
<button
id="dropdown-toggle"
aria-hidden="true"
on:click={onDropdownToggle}>
<Menu />
</button>
</nav>
<svelte:window on:keydown={onKeyDown} />
<div id="navbar" class="h-5 space-x-4">
<p id="bio-name">{name}</p>
{#each routes as item}
<a
class="nav-link"
class:disabled-link={item.disabled}
class:current-link={isCurrentLink($page.url.pathname, item.route)}
href={item.route}>{item.name}</a>
{/each}
<a class="nav-link icon" href="/rss.xml"><Rss /></a>
<div><ThemeSwitch /></div>
</div>
<style>
.link-container {
#bio-name {
font-family: serif;
font-size: 3rem;
font-weight: normal;
color: var(--name);
}
#navbar {
display: flex;
flex-direction: column;
align-items: flex-end;
position: sticky;
top: 0;
justify-content: between;
}
#dropdown-toggle {
display: none;
}
/* mobile mode */
@media (max-width: 768px) {
.link-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
justify-content: center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
background: hsl(var(--background) / .8);
/* Initial hidden state */
opacity: 0;
transform: translateY(-100%);
transition: transform 0.2s, opacity 0.2s;
}
@media (max-width: 700px) {
#navbar {
display: inline-block;
white-space: pre-wrap;
@ -97,14 +45,5 @@
#navbar .nav-link {
display: inline-block;
}
#dropdown-toggle {
display: initial;
z-index: 5;
}
.dropdown-opened > .link-container {
opacity: 1;
z-index: 1;
transform: translateY(0);
}
}
</style>