Added custom branding

package.json

@@ -12,9 +12,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@fontsource-variable/noto-sans": "^5.0.5",
-		"@fontsource-variable/noto-sans-mono": "^5.0.20",
-		"@fontsource-variable/noto-serif": "^5.0.6",
+		"@fontsource-variable/readex-pro": "^5.0.13",
 		"@fontsource/noto-color-emoji": "^5.0.27",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",

src/app.json

@@ -1,24 +1,39 @@
 {
-	"name": "Your Website Name",
+	"name": "Acridotheres",
 	"nav": [
-		{
-			"title": "Home",
-			"url": "/"
-		},
 		{
 			"title": "About",
 			"url": "/about"
 		},
 		{
-			"title": "Contact",
-			"url": "/contact"
+			"title": "Features",
+			"url": "/features"
+		},
+		{
+			"title": "Acridotheres+",
+			"url": "/plus"
+		},
+		{
+			"title": "Donate",
+			"url": "/donate"
+		}
+	],
+	"buttons": [
+		{
+			"title": "Download",
+			"url": "/download",
+			"highlight": true
+		},
+		{
+			"title": "Source Code",
+			"url": "/source"
 		}
 	],
 	"footer": {
 		"copyright": {
-			"owner": "Your Name",
+			"owner": "Leonard Lesinski",
 			"since": 2024,
-			"url": "https://example.com/"
+			"url": "https://leox.dev/"
 		}
 	}
 }

src/pages/plus_.md

@@ -0,0 +1,9 @@
+---
+
+title: Acridotheres+
+
+---
+
+# Acridotheres+
+
+- [Pricing](/plus/pricing)

src/pages/plus_pricing.md

@@ -0,0 +1,35 @@
+---
+title: Acridotheres+ pricing
+---
+
+# Acridotheres+ pricing
+
+**Note:** Acridotheres+ is currently not available for purchase yet.
+
+There are three pricing tiers for Acridotheres+:
+
+| Feature                         |      Plus       |       Pro       |       Enterprise       |
+| ------------------------------- | :-------------: | :-------------: | :--------------------: |
+| Price (per month)               |       1 €       |       5 €       | [Contact us](/contact) |
+| Price (per year)                | 10 € (-16% off) | 45 € (-25% off) | [Contact us](/contact) |
+| WebAuth tokens\* / month        |       250       |      2000       |         5000+          |
+| Max. active WebAuth entries\*\* |       75        |       750       |         2000+          |
+| Upload storage                  |      32 GB      |     128 GB      |         2 TB+          |
+| Backups                         |       Yes       |       Yes       |          Yes           |
+| 2FA                             |       Yes       |       Yes       |          Yes           |
+| Is 2FA optional?                |       Yes       |       Yes       |           No           |
+| Early access to new features    |       No        |       Yes       |          Yes           |
+| Statistics                      |       No        |       Yes       |          Yes           |
+| Custom subdomain\*\*\*          |       No        |       Yes       |          Yes           |
+| Custom branding                 |       No        |       No        |          Yes           |
+| Priority support                |       No        |       No        |          Yes           |
+| Team management                 |       No        |       No        |          Yes           |
+| Advanced API access\*\*\*\*     |       No        |       No        |          Yes           |
+
+\* Different authentication methods can use different amounts of tokens.
+
+\*\* If the limit is reached, no new entries can be added until old ones are deleted.
+
+\*\*\* Custom subdomains can be chosen for [webauth.cc](/plus/webauth), [getarchive.cc](/plus/sharing) and [filedata.cc](/plus/backups).
+
+\*\*\*\* Advanced API access includes the ability to create and manage WebAuth entries, team management and all features that aren't available through the [public API](https://developers.acridotheres.com/api/public).

src/routes/+layout.svelte

@@ -10,35 +10,47 @@
 	<title>Untitled | {app.name}</title>
 </svelte:head>
 
+<div class="w-full h-12 bg-black"></div>
+
 <!-- TODO: add navigation for mobile -->
-<nav class="fixed left-0 top-0 flex h-12 w-full bg-teal-800 text-white">
+<nav class="fixed left-0 top-0 flex h-12 w-full bg-transparent text-white backdrop-blur-lg border-b-neutral-500 border-b">
 	<a href="/" class="flex">
 		<header class="flex w-fit items-center gap-2 px-2 py-2">
 			<img src="/favicon.png" alt="{app.name} logo" class="size-8" />
-			<h1 class="translate-y-[-0.05rem] text-xl font-medium">{app.name}</h1>
+			<h1 class="text-xl font-medium">{app.name}</h1>
 		</header>
 	</a>
-	<div class="grow" />
-	<ul class="mr-3 flex translate-y-[-0.05rem] items-center gap-2">
+	<ul class="mr-3 flex grow items-center justify-center gap-2">
 		{#each app.nav as { title, url }, i}
 			<li
 				class="flex h-6 items-center pl-1 {i + 1 == app.nav.length
 					? ''
-					: 'border-r-2 border-r-teal-600 pr-3'}"
+					: 'border-r-2 border-r-neutral-500 pr-3'}"
 			>
 				<a href={url} class="underline decoration-transparent transition hover:decoration-teal-600"
 					>{title}</a
 				>
 			</li>
 		{/each}
 	</ul>
+	<ul class="mr-2 flex items-center gap-2">
+		{#each app.buttons as { title, url, highlight }}
+			<li
+				class="flex h-6 items-center"
+			>
+				<a href={url} class="transition border-white border-2 px-2 py-1 rounded-lg font-bold {highlight ? 'bg-white text-black hover:text-white hover:bg-teal-600 hover:border-teal-600' : 'hover:bg-white hover:text-black'}"
+					>{title}</a
+				>
+			</li>
+		{/each}
+	</ul>
 </nav>
-<main class="mt-12 min-h-[calc(100vh-3rem)] w-full bg-teal-700 p-2 text-white">
+<main class="min-h-[calc(100vh-3rem)] w-full bg-black p-2 text-white">
 	<div class="prose prose-slate prose-invert mx-auto my-6 h-fit w-full max-w-[50rem]">
 		<slot />
 	</div>
 </main>
-<footer class="border-t-2 border-t-teal-600 bg-teal-700 text-white">
+<footer class="border-t border-t-neutral-500 bg-black text-white">
 	<p class="p-1 text-center text-sm font-medium">
 		&copy; {oneYear
 			? app.footer.copyright.since

src/routes/[...path]/+page.ts

@@ -2,17 +2,8 @@ import { error } from '@sveltejs/kit';
 
 export async function load({ params }) {
 	try {
-    /*
-    weird vite/sveltekit bug here:
-    - path has to be declared outside of the import
-    - path may not contain the $pages alias
-    otherwise the import will fail for no reason
-    but only if the path param contains a slash
-    otherwise it works just fine, very strange
-    */
-    const path = `../../pages/${params.path.length > 0 ? params.path.split('.')[0] : 'index'}.md`;
-		const post = await import( /* @vite-ignore */
-			path
+		const post = await import(
+			`$pages/${params.path.length > 0 ? params.path.split('.')[0].replaceAll('/', '_') : 'index'}.md`
 		);
 
 		return {
@@ -22,10 +13,7 @@ export async function load({ params }) {
 	} catch (e) {
 		console.error(e);
 		try {
-      const path = `../../pages/${params.path.split('.')[0] + (params.path.endsWith('/') ? '' : '/') + 'index'}.md`;
-			const post = await import( /* @vite-ignore */
-				path
-			);
+			const post = await import(`$pages/${params.path.split('.')[0].replaceAll('/', '_') + (params.path.endsWith('/') ? '' : '_')}.md`);
 
 			return {
 				content: post.default,

src/styles/global.scss

@@ -1,9 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '@fontsource-variable/noto-sans';
-@import '@fontsource-variable/noto-serif';
-@import '@fontsource-variable/noto-sans-mono';
+@import '@fontsource-variable/readex-pro';
 @import '@fontsource/noto-color-emoji';
 
 .prose-invert {

tailwind.config.ts

@@ -8,9 +8,7 @@ export default {
 		extend: {},
 
 		fontFamily: {
-			sans: ['Noto Sans', 'sans-serif', 'Noto Color Emoji'],
-			serif: ['Noto Serif', 'serif', 'Noto Color Emoji'],
-			mono: ['Noto Sans Mono', 'monospace', 'Noto Color Emoji']
+			sans: ['Readex Pro Variable', 'sans-serif', 'Noto Color Emoji'],
 		}
 	},