feat: Add SVG logo with progressive enhancement to Jekyll pages

This commit is contained in:
Paul Gauthier (aider) 2025-03-20 08:11:48 -07:00
parent 674379fe30
commit b62840c347

View file

@ -21,6 +21,12 @@
text-decoration: none;
letter-spacing: 0.5px;
}
/* For SVG logo inside site-title */
.site-title img {
height: 1.8rem;
vertical-align: middle;
}
/* Sidebar gradient styling to match hero section */
.side-bar {
@ -31,6 +37,34 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Logo Progressive Enhancement for Jekyll pages -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const siteTitle = document.querySelector('.site-title');
if (siteTitle) {
const textContent = siteTitle.textContent; // Save the text for fallback
// Create new image element
const logoImg = new Image();
logoImg.src = '/assets/logo.svg';
logoImg.alt = 'Aider Logo';
logoImg.style.height = '1.8rem';
logoImg.style.verticalAlign = 'middle';
// Only replace if image loads successfully
logoImg.onload = function() {
siteTitle.textContent = ''; // Clear text
siteTitle.appendChild(logoImg);
};
// If image fails to load, do nothing (keep the text)
logoImg.onerror = function() {
console.log('SVG logo failed to load, keeping text fallback');
};
}
});
</script>
<meta name="theme-color" content="#157878">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/icons/favicon-32x32.png' | relative_url }}">