Bugfix/ascii art breaking on android

.prettierrc

@@ -12,5 +12,5 @@
 			}
 		}
 	],
-	"tailwindStylesheet": "./src/lib/styles/app.css"
+	"tailwindStylesheet": "./src/app.css"
 }

package.json

@@ -61,6 +61,7 @@
 		"wrangler": "^4.76.0"
 	},
 	"dependencies": {
+		"@fontsource/courier-prime": "^5.2.8",
 		"fast-xml-parser": "^5.5.8",
 		"isomorphic-dompurify": "^3.4.0",
 		"js-yaml": "^4.1.1",

src/lib/styles/app.css → src/app.css

@@ -1,6 +1,15 @@
 @import 'https://www.nerdfonts.com/assets/css/webfont.css';
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+.ascii {
+	font-family: 'Courier Prime', monospace;
+}
+
+/*----------------------------------------------------------------------*/
+/* daisyui themes                                                       */
+/*----------------------------------------------------------------------*/
+
 @plugin 'daisyui' {
 	logs: false;
 

src/lib/assets/brand.txt

@@ -0,0 +1,7 @@
+  ▄▄▄▄   ▄▄▄▄         ▄▄▄▄▄▄▄                                    
+▄█████ ▄██████▄       ███▀▀███▄       ▀▀                         
+   ███ ███  ███ ██ ██ ███▄▄███▀ ████▄ ██ ██ ██  ▀▀█▄ ▄████ ██ ██ 
+   ███ ███▄▄███  ███  ███▀▀▀▀   ██ ▀▀ ██ ██▄██ ▄█▀██ ██    ██▄██ 
+   ███  ▀████▀  ██ ██ ███       ██    ██▄ ▀█▀  ▀█▄██ ▀████  ▀██▀ 
+                                                             ██  
+                                                           ▀▀▀   

src/lib/components/brand.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import brand from '$lib/assets/brand.txt?raw';
+	import { cn } from '$lib/utils/cn';
+
+	export let brandVariants = {
+		base: 'ascii whitespace-pre text-primary leading-none',
+		size: {
+			lg: 'text-[6px] sm:text-xs md:text-sm  ',
+			default: 'text-xs',
+			xs: 'text-[4px] '
+		}
+	} as const;
+
+	type BrandProps = HTMLAttributes<HTMLPreElement> & {
+		size?: keyof typeof brandVariants.size;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, size = 'default', ...props }: BrandProps = $props();
+</script>
+
+<div>
+	<pre
+		class={cn(brandVariants.base, brandVariants.size[size], className)}
+		aria-disabled="true"
+		{...props}>{brand}</pre>
+	<span class="sr-only">10xPrivacy</span>
+</div>

src/lib/components/navbar.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
+	import Brand from './brand.svelte';
+
 	import { resolve } from '$app/paths';
 	import { Link } from '$lib/components/text';
 	import ThemeChange from '$lib/components/theme-change.svelte';
-	import { LOGO } from '$lib/configs';
 </script>
 
 <nav class="navbar flex-col justify-center gap-y-2 bg-base-100 px-4 shadow-sm">
 	<div class="flex w-full items-center">
 		<!-- logo -->
 		<div class="flex-none">
 			<a class=" text-xl font-bold text-primary" href={resolve('/')}>
-				<pre unselectable="on" class="font-mono text-[2px] leading-none whitespace-pre">
-          {LOGO}
-            <span class="sr-only">10xPrivacy</span>
-        </pre>
+				<Brand size="xs" />
 			</a>
 		</div>
 

src/lib/components/navbar.test.ts

@@ -7,14 +7,6 @@ vi.mock('theme-change');
 
 describe('Navbar component', () => {
 	describe('URLs', () => {
-		it('home link has correct href', () => {
-			render(Navbar);
-
-			const homeLink = screen.getByRole('link', { name: /10xPrivacy/i });
-
-			expect(homeLink.getAttribute('href')).toBe('/');
-		});
-
 		it('Privacy News link has correct href', () => {
 			render(Navbar);
 			const links = screen.getAllByRole('link', { name: /Privacy News/i });

src/lib/configs.ts

@@ -6,17 +6,3 @@ export const FEATURED_CATEGORIES = Object.freeze([
 	'Operating Systems',
 	'Productivity'
 ]);
-
-export const LOGO = `
- ████     █████                ███████████             ███                                           
-▒▒███   ███▒▒▒███             ▒▒███▒▒▒▒▒███           ▒▒▒                                            
- ▒███  ███   ▒▒███ █████ █████ ▒███    ▒███ ████████  ████  █████ █████  ██████    ██████  █████ ████
- ▒███ ▒███    ▒███▒▒███ ▒▒███  ▒██████████ ▒▒███▒▒███▒▒███ ▒▒███ ▒▒███  ▒▒▒▒▒███  ███▒▒███▒▒███ ▒███ 
- ▒███ ▒███    ▒███ ▒▒▒█████▒   ▒███▒▒▒▒▒▒   ▒███ ▒▒▒  ▒███  ▒███  ▒███   ███████ ▒███ ▒▒▒  ▒███ ▒███ 
- ▒███ ▒▒███   ███   ███▒▒▒███  ▒███         ▒███      ▒███  ▒▒███ ███   ███▒▒███ ▒███  ███ ▒███ ▒███ 
- █████ ▒▒▒█████▒   █████ █████ █████        █████     █████  ▒▒█████   ▒▒████████▒▒██████  ▒▒███████ 
-▒▒▒▒▒    ▒▒▒▒▒▒   ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒        ▒▒▒▒▒     ▒▒▒▒▒    ▒▒▒▒▒     ▒▒▒▒▒▒▒▒  ▒▒▒▒▒▒    ▒▒▒▒▒███ 
-                                                                                            ███ ▒███ 
-                                                                                           ▒▒██████  
-                                                                                            ▒▒▒▒▒▒   
-`;

src/routes/+layout.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import '@fontsource/courier-prime';
 	import favicon from '$lib/assets/favicon.png';
 	import Footer from '$lib/components/footer.svelte';
 	import LlmTermsOfServiceLink from '$lib/components/llm-terms-of-service-link.svelte';
 	import Navbar from '$lib/components/navbar.svelte';
-	import '$lib/styles/app.css';
+	import '../app.css';
 
 	let { children } = $props();
 </script>

src/routes/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import About from '$lib/components/about.svelte';
-	import { LOGO } from '$lib/configs';
+	import Brand from '$lib/components/brand.svelte';
 </script>
 
 <main class="m-auto flex max-w-3xl flex-col items-center px-4 py-8">
-	<pre
-		class="font-mono text-[5px] leading-none whitespace-pre text-primary sm:text-[10px] md:text-xs">
-		{LOGO}
-	</pre>
+	<Brand size="lg" />
 
 	<div class="mx-auto mt-6 flex flex-col items-center gap-4 sm:mt-20 sm:flex-row">
 		<a class="btn btn-primary" href={resolve('/privacy-news')}> Privacy News </a>