Improve menu css

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 1a9ac9e8ba2876d0ffec57972a70d04dc6280552..f9c721bd40a6c6f913b929307ef9a569b2248a6e 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -144,18 +144,16 @@
             <a i18n href="https://joinpeertube.org/faq" i18n-title title="Frequently asked questions about PeerTube" target="_blank" rel="noopener noreferrer">FAQ</a>
             <a i18n routerLink="/about/instance" fragment="statistics">Stats</a>
             <a i18n href="https://docs.joinpeertube.org/api-rest-reference.html" i18n-title title="API documentation" target="_blank" rel="noopener noreferrer">API</a>
-            <a (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Keyboard shortcuts</a>
+            <a role="button" (click)="openHotkeysCheatSheet()" class="c-hand" i18n>Keyboard shortcuts</a>
           </div>
         </div>
 
-        <div class="footer-copyleft">
-          <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
-            <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
+        <div class="footer-copyleft" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
+          <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
 
-            <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
-              <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
-            </a>
-          </small>
+          <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
+            <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
+          </a>
         </div>
       </div>
     </div>

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a548c08cff24c36ef475cad7b19159873a07f18e..e3ec10a8340424edb979d44ae3055e51b2ab903f 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -291,43 +291,46 @@ my-actor-avatar {
 }
 
 .footer {
-  width: $menu-width;
   padding-bottom: 15px;
 }
 
 .footer-bottom {
-  display: flex;
-  flex-direction: column;
   padding: 0 $menu-lateral-padding;
 }
 
 .footer-links {
-  &,
   > div {
     display: flex;
     flex-wrap: wrap;
   }
 
-  a,
-  span[role=button] {
+  a {
     @include margin-right(8px);
+    @include disable-default-a-behaviour;
 
-    display: inline-block;
-    text-decoration: none;
     color: pvar(--menuForegroundColor);
     opacity: $footer-links-base-opacity;
     white-space: nowrap;
     font-size: 0.75rem;
-    font-weight: 500;
     line-height: 1.4rem;
+    font-weight: $font-semibold;
+
+    &:hover {
+      opacity: $footer-links-base-opacity + .2;
+    }
   }
 }
 
-.footer-copyleft small a {
+.footer-copyleft a {
   @include disable-default-a-behaviour;
 
   color: pvar(--menuForegroundColor);
   opacity: $footer-links-base-opacity - .2;
+  font-size: 0.85rem;
+
+  &:hover {
+    opacity: $footer-links-base-opacity;
+  }
 }
 
 .dropdown {