# Files changed · PR \#134 · flambo/atlantis

[View on GitCafe](https://git.cafe/flambo/atlantis/pull/134/diffs)

Repository: [flambo/atlantis](https://git.cafe/flambo/atlantis)

Visibility: public

[feat\(brand\): add original ATLANTIS logo and brand assets](https://git.cafe/flambo/atlantis/pull/134.md)

Version: 0

Head commit: f75e6899d148b4f318c7c654876cf58cedb1450e

Base commit: c8222023a3dee70187b8f5625726609facf9cf67

Comparison base: c8222023a3dee70187b8f5625726609facf9cf67

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/landing/public/apple-touch-icon.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/favicon.ico

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/favicon.png

Status: deleted; +0; −0

Binary file; no text patch.

## apps/landing/public/favicon.svg

Status: added; +1; −0

```diff
@@ -1,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" color="#2563eb"><title>ATLANTIS</title><g id="mark"><path d="M16 28V6M16 21C9 21 6 17 6 11V9M16 21C23 21 26 17 26 11V9" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 10 4-6 4 6Zm10-3 4-6 4 6Zm10 3 4-6 4 6Z" fill="currentColor"/></g></svg>
```

## apps/landing/public/icon-192.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/icon-512.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/icon-maskable-192.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/icon-maskable-512.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/public/logo-lockup.svg

Status: added; +1; −0

```diff
@@ -1,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 32" color="#2563eb"><title>ATLANTIS</title><path d="M16 28V6M16 21C9 21 6 17 6 11V9M16 21C23 21 26 17 26 11V9" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 10 4-6 4 6Zm10-3 4-6 4 6Zm10 3 4-6 4 6Z" fill="currentColor"/><path d="M44 26 51 6l7 20m-11-7h8M62 6h14m-7 0v20M82 6v20h12M100 26l7-20 7 20m-11-7h8M120 26V6l14 20V6M140 6h14m-7 0v20M160 6h8m-4 0v20m-4 0h8M190 6h-10l-4 4v3l4 3h6l4 3v3l-4 4h-10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"/></svg>
```

## apps/landing/public/logo-mark.svg

Status: added; +1; −0

```diff
@@ -1,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" color="#2563eb"><title>ATLANTIS</title><g id="mark"><path d="M16 28V6M16 21C9 21 6 17 6 11V9M16 21C23 21 26 17 26 11V9" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 10 4-6 4 6Zm10-3 4-6 4 6Zm10 3 4-6 4 6Z" fill="currentColor"/></g></svg>
```

## apps/landing/public/og-image.png

Status: added; +0; −0

Binary file; no text patch.

## apps/landing/src/components/Logo.astro

Status: added; +6; −0

```diff
@@ -1,0 +1,6 @@
+<span class="inline-flex items-center gap-2" role="img" aria-label="ATLANTIS">
+	<svg class="text-brand-blue size-[1em] shrink-0" viewBox="0 0 32 32" aria-hidden="true">
+		<use href="/logo-mark.svg#mark"></use>
+	</svg>
+	<span aria-hidden="true">ATLANTIS</span>
+</span>
```

## apps/landing/src/layouts/BaseLayout.astro

Status: modified; +10; −3

```diff
@@ -10,8 +10,8 @@
 const { title, description, canonicalUrl } = Astro.props;
 
 const canonical =
-	canonicalUrl ??
-	(Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined);
+	canonicalUrl ?? (Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined);
+const socialImage = Astro.site ? new URL("/og-image.png", Astro.site).href : "/og-image.png";
 ---
 
 <!doctype html>
@@ -21,13 +21,20 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="description" content={description} />
 		<meta name="color-scheme" content="dark" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48" href="/favicon.ico" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		{canonical && <link rel="canonical" href={canonical} />}
 		<meta property="og:title" content={title} />
 		<meta property="og:description" content={description} />
 		<meta property="og:type" content="website" />
+		<meta property="og:image" content={socialImage} />
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="630" />
+		<meta property="og:image:alt" content="ATLANTIS network telemetry visualization" />
+		<meta name="twitter:card" content="summary_large_image" />
 		{canonical && <meta property="og:url" content={canonical} />}
 	</head>
 	<body class="antialiased">
```

## apps/landing/src/pages/index.astro

Status: modified; +28; −21

```diff
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import Logo from "../components/Logo.astro";
 
 const title = "ATLANTIS";
 const description =
@@ -15,12 +16,16 @@
 
 const destinations = [
 	{ label: "Demo", href: links.demo, title: "UGR16 Demo deployment" },
+	{
+		label: "ONRG",
+		href: links.onrg,
+		title: "Oregon Networking Research Group"
+	},
-	{ label: "ONRG", href: links.onrg, title: "Oregon Networking Research Group" },
 	{
 		label: "GitHub",
 		href: links.github,
-		title: "Source code, documentation, and issues",
+		title: "Source code, documentation, and issues"
-	},
+	}
 ] as const;
 ---
 
@@ -29,7 +34,7 @@
 		class="fade-in mx-auto flex h-dvh max-h-dvh min-h-0 max-w-lg flex-col justify-center overflow-hidden px-6 py-16 sm:px-8"
 	>
 		<h1 class="font-display text-3xl font-semibold tracking-tight text-gray-100 sm:text-4xl">
+			<Logo />
-			ATLANTIS
 		</h1>
 		<p class="mt-4 text-muted leading-relaxed">
 			Network telemetry visualization
@@ -38,24 +43,26 @@
 		</p>
 		<nav class="mt-12" aria-label="External links">
 			<ul class="space-y-3 text-sm sm:text-base">
+				{
+					destinations.map((item) => (
+						<li>
+							<a
+								href={item.href}
+								class="external-link"
+								target="_blank"
+								rel={externalRel}
+								title={item.title}
+							>
+								{item.label}
+								<span class="ml-1 inline text-brand-blue" aria-hidden="true">
-				{destinations.map((item) => (
-					<li>
-						<a
-							href={item.href}
-							class="external-link"
-							target="_blank"
-							rel={externalRel}
-							title={item.title}
-						>
-							{item.label}
-							<span class="ml-1 inline text-cisco-blue" aria-hidden="true">↗</span>
-						</a>
-					</li>
+									↗
-				))}
+								</span>
+							</a>
+						</li>
+					))
+				}
 			</ul>
 		</nav>
-		<p class="mt-14 max-w-sm text-xs leading-relaxed text-gray-500">
-			Built as part of an NSF REU
+		<p class="mt-14 max-w-sm text-xs leading-relaxed text-gray-500">Built as part of an NSF REU</p>
-		</p>
 	</main>
 </BaseLayout>
```

## apps/landing/src/styles/global.css

Status: modified; +5; −5

```diff
@@ -7,7 +7,7 @@
   --font-display: "Sora", system-ui, sans-serif;
   --font-body: "IBM Plex Sans", system-ui, sans-serif;
 
-  --color-cisco-blue: #009edc;
+  --color-brand-blue: #2563eb;
   --color-dark-bg: #0a0a0a;
   --color-dark-border: #2d2d2d;
   --color-muted: #9ca3af;
@@ -37,7 +37,7 @@
   }
 
   ::selection {
+    background: color-mix(in srgb, var(--color-brand-blue) 35%, transparent);
-    background: color-mix(in srgb, var(--color-cisco-blue) 35%, transparent);
     color: #f9fafb;
   }
 }
@@ -61,7 +61,7 @@
   text-decoration: underline;
   text-decoration-color: color-mix(
     in srgb,
-    var(--color-cisco-blue) 45%,
+    var(--color-brand-blue) 45%,
     transparent
   );
   text-underline-offset: 0.2em;
@@ -72,11 +72,11 @@
 
 .external-link:hover {
   color: #f9fafb;
+  text-decoration-color: var(--color-brand-blue);
-  text-decoration-color: var(--color-cisco-blue);
 }
 
 .external-link:focus-visible {
-  outline: 2px solid var(--color-cisco-blue);
+  outline: 2px solid var(--color-brand-blue);
   outline-offset: 3px;
   border-radius: 2px;
 }
```

## apps/web/src/app.html

Status: modified; +8; −1

```diff
@@ -2,7 +2,14 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+		<link
+			rel="icon"
+			type="image/x-icon"
+			sizes="16x16 32x32 48x48"
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+			href="%sveltekit.assets%/favicon.ico"
+		/>
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="color-scheme" content="light dark" />
 		<script>
```

## apps/web/src/lib/components/Logo.svelte

Status: added; +10; −0

```diff
@@ -1,0 +1,10 @@
+<script lang="ts">
+	import { asset } from '$app/paths';
+</script>
+
+<span class="inline-flex items-center gap-2" role="img" aria-label="ATLANTIS">
+	<svg class="text-primary size-[1em] shrink-0" viewBox="0 0 32 32" aria-hidden="true">
+		<use href={`${asset('logo-mark.svg')}#mark`} />
+	</svg>
+	<span aria-hidden="true">ATLANTIS</span>
+</span>
```

## apps/web/src/routes/\+layout.svelte

Status: modified; +6; −3

```diff
@@ -6,6 +6,7 @@
 	import { Button } from '#lib/components/ui/button/index.ts';
 	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
 	import { theme } from '#lib/stores/theme.svelte.ts';
+	import Logo from '#lib/components/Logo.svelte';
 
 	let { children } = $props();
 
@@ -19,10 +20,12 @@
 	<div class="font-body bg-background text-foreground flex h-dvh flex-col overflow-hidden">
 		<header class="border-border bg-card shrink-0 border-b">
 			<div class="mx-auto max-w-[95vw] px-4 sm:px-2 lg:px-4">
+				<div class="flex items-center justify-between gap-2 py-4">
-				<div class="flex items-center justify-between py-4">
 					<div>
+						<h1
+							class="text-foreground text-xl font-bold hover:underline min-[360px]:text-2xl sm:text-3xl"
-						<h1 class="text-foreground text-3xl font-bold hover:underline">
-							<a href={resolve('/')}>ATLANTIS</a>
+						>
+							<a href={resolve('/')}><Logo /></a>
 						</h1>
 					</div>
 					<div class="flex items-center gap-4">
```

## apps/web/static/apple-touch-icon.png

Status: added; +0; −0

Binary file; no text patch.

## apps/web/static/favicon.ico

Status: added; +0; −0

Binary file; no text patch.

[Next page](https://git.cafe/flambo/atlantis/pull/134/diffs?after=ImFwcHMvd2ViL3N0YXRpYy9mYXZpY29uLmljbyI&expectedVersion=0&format=markdown)
