[bug#74634] [PATCH shepherd website 2/5] logo: Remove jumpy effect on focus.

[sirgazil--- via Guix-patches via <guix-patches@gnu.org>]

From: Luis Felipe <sirgazil@zoho.com>

The logo is styled so that it displays vertical borders when focused
(e.g. using tab navigation). Since the logo doesn't have borders in
its initial state, focusing caused the image to move 2 pixels sideways
(the width of the border), which was particularly visible in pages
where the logo is displayed in a smaller size. This change adds a
transparent border to the logo in its initial state to avoid the
problem.

* static/css/main.css (#header a.logo img): New rule.
---
 static/css/main.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 0e8d137..c72c87a 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -95,6 +95,12 @@ p + p {
     margin-bottom: 1em;
 }
 
+#header a.logo img {
+    border-color: transparent;
+    border-style: solid;
+    border-width: 2px;
+}
+
 #header a.logo:focus img {
     border-left: 2px dotted #118ab2;
     border-right: 2px dotted #118ab2;
-- 
2.46.0