Add logo hover state, enlarge menu toggle icon

Author: antoinem

lib/rdoc/generator/template/rorvswild/_topbar.rhtml

@@ -3,10 +3,10 @@
     <% if defined?(RorVsWildThemeRdoc::Site) %>
       <a href="../.." class="logo" title="RubyRubyRubyRuby">
         <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-          <path d="m8 6h-2l-2-2 4-4 4 4-2 2z"/>
-          <path d="m8 10h2l2 2-4 4-4-4 2-2z"/>
-          <path d="m10 8v-2l2-2 4 4-4 4-2-2z"/>
-          <path d="m6 8v2l-2 2-4-4 4-4 2 2z"/>
+          <path class="path-1" d="m8 6h-2l-2-2 4-4 4 4-2 2z"/>
+          <path class="path-2" d="m8 10h2l2 2-4 4-4-4 2-2z"/>
+          <path class="path-3" d="m10 8v-2l2-2 4 4-4 4-2-2z"/>
+          <path class="path-4" d="m6 8v2l-2 2-4-4 4-4 2 2z"/>
         </svg>
       </a>
     <% end %>

lib/rdoc/generator/template/rorvswild/css/rdoc.css

@@ -356,13 +356,26 @@ main header h3 {
   height: 24px;
   width: 24px;
   fill: currentcolor;
+  overflow: visible;
 }
 
+.topbar .width-limiter > a.logo:hover svg .path-1 { transform: translateY(-1px); }
+.topbar .width-limiter > a.logo:hover svg .path-2 { transform: translateY(1px); }
+.topbar .width-limiter > a.logo:hover svg .path-3 { transform: translateX(1px); }
+.topbar .width-limiter > a.logo:hover svg .path-4 { transform: translateX(-1px); }
+
 #navigation-toggle {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   color: var(--color-topbar-text);
+  font-size: 1.44rem;
 }
 
+#navigation-toggle span { margin-top: -4px; }
+
 nav {
   border-right: 1px solid var(--color-border);
   position: fixed;