alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

feat(ui): update branding assets and switch logo to webp format

Browse Source 
- Add new webp logo and favicon assets
- Replace svg logo references with webp across layouts and pages
- Add favicon.ico and favicon.webp for browser compatibility
- Update BaseLayout to include favicon link

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2026-03-21 23:08:04 +00:00
parent c8b43a3f8f
commit d980671266
6 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/computing-box-logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/images/favicon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

3
src/layouts/BaseLayout.astro
View File

@@ -33,12 +33,13 @@ const { title = "Computing:Box" } = Astro.props;
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
</head> </head>
<body> <body>
<header class="siteNav"> <header class="siteNav">
<div class="navInner"> <div class="navInner">
<a class="brand" href="/"> <a class="brand" href="/">
<img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo" /> <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo" />
<span class="brandName">Computing:Box</span> <span class="brandName">Computing:Box</span>
</a> </a>

2
src/pages/about.astro
View File

@@ -6,7 +6,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
<article style="max-width: 1100px; margin: 0 auto; width: 100%;"> <article style="max-width: 1100px; margin: 0 auto; width: 100%;">
<div style="text-align: center; margin-bottom: 60px;"> <div style="text-align: center; margin-bottom: 60px;">
<img src="/images/computing-box-logo.svg" alt="Computing:Box Logo" style="width: 250px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);" /> <img src="/images/computing-box-logo.webp" alt="Computing:Box Logo" style="width: 250px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);" />
<h1 class="brandName" style="font-size: 42px; margin-top: 20px; color: var(--text);">The New Computing:Box Experience</h1> <h1 class="brandName" style="font-size: 42px; margin-top: 20px; color: var(--text);">The New Computing:Box Experience</h1>
</div> </div>

2
src/pages/index.astro
View File

@@ -17,7 +17,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
</div> </div>
<div style="flex: 1; text-align: right;"> <div style="flex: 1; text-align: right;">
<img src="/images/computing-box-logo.svg" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));" /> <img src="/images/computing-box-logo.webp" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));" />
</div> </div>
</div> </div>
</BaseLayout> </BaseLayout>