diff --git a/app/assets/images/along-with-you-logo.svg b/app/assets/images/along-with-you-logo.svg new file mode 100644 index 0000000..e1e9d45 --- /dev/null +++ b/app/assets/images/along-with-you-logo.svg @@ -0,0 +1,44 @@ + + +Along With You + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 6353bab..e55fc69 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -186,13 +186,23 @@ code, pre { font-family: var(--font-mono); font-size: 0.9375em; } } .site-title { - font-size: 1.0625rem; - font-weight: 650; - letter-spacing: -0.01em; - color: hsl(var(--foreground)); + /* The logo replaced the text wordmark, so this is now a wrapper around an + image. Inline-flex keeps it hugging the logo - a plain block link would + stretch and give the focus ring a long empty tail. */ + display: inline-flex; text-decoration: none; } +.site-logo { + /* Height only. The SVG carries the aspect ratio, so width follows and the + mark never distorts. 30px sits the logo's cap height close to the nav + links beside it; the header's `align-items: baseline` then lands the + logo's bottom edge on their baseline. */ + display: block; + height: 30px; + width: auto; +} + .site-nav { /* Filling the row is what lets the account group's auto margin push it to the far edge, away from the section links. */ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 5d87a3d..890bb9d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -36,7 +36,14 @@
- <%= link_to "Along With You", root_path, class: "site-title" %> + <%# The logo is the site name, so the alt text carries it and the link + needs no extra label - an aria-label here would only override the + alt with the same words. The SVG lifts its deep blue in dark mode + from a media query inside the file itself; see + app/assets/images/along-with-you-logo.svg. %> + <%= link_to root_path, class: "site-title" do %> + <%= image_tag "along-with-you-logo.svg", alt: "Along With You", class: "site-logo" %> + <% end %>