Merge branch 'develop'

assets/sass/layout.scss

@@ -63,13 +63,28 @@ header {
 			li {
 				list-style: none;
 
-				a, span {
+				a, button {
 					position: relative;
+					height: 64px;
+					margin: 0;
+					padding: 0 24px;
+
 					display: flex;
 					flex-direction: row;
 					align-items: center;
-					height: 64px;
-					padding: 0 24px;
+
+					&:hover, &:active {
+						&:not(button) {
+							background-color: rgba(255, 255, 255, 0.07);
+						}
+
+						.tip {
+							visibility: visible;
+							opacity: 1;
+							transition: opacity ease-out 100ms;
+							transition-delay: 150ms;
+						}
+					}
 
 					.feather {
 						--icon-size: 24px;
@@ -85,8 +100,26 @@ header {
 					}
 				}
 
-				a:hover, a:active {
-					background-color: rgba(255, 255, 255, 0.07);
+				button {
+					margin: 8px;
+					padding: 24px;
+					height: 32px;
+
+					.feather {
+						margin-right: 0;
+					}
+
+					.tip {
+						text-transform: initial;
+						font-weight: initial;
+					}
+				}
+
+				form {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 0;
 				}
 			}
 		}
@@ -139,10 +172,14 @@ header {
 					transform: translateX(0%);
 				}
 
-				li a {
+				li {
+					a, button {
 						.tip {
 							display: block;
 							margin-left: 8px;
+							text-transform: inherit;
+							font-weight: inherit;
+						}
 					}
 				}
 			}
@@ -151,7 +188,8 @@ header {
 
 	@media (min-width: $menuLayoutSwitchTreshold) {
 		nav ul li {
-			a .tip {
+			a, button {
+				.tip {
 					visibility: hidden;
 					position: absolute;
 					display: block;
@@ -172,8 +210,11 @@ header {
 					background-color: #000;
 					border-radius: 5px;
 				}
+			}
 
-			&:last-child a .tip {
+			&:last-child {
+				a, button {
+					.tip {
 						left: unset;
 						right: 4px;
 						transform: none;
@@ -181,6 +222,8 @@ header {
 				}
 			}
 		}
+	}
+}
 
 footer {
 	padding: 8px;

views/layouts/base.njk

@@ -16,7 +16,7 @@
     <nav>
         <button id="menu-button"><i data-feather="menu"></i></button>
         <ul id="main-menu">
-            <li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
+            <li><a href="{{ route('about') }}"><i data-feather="info"></i> <span class="tip">About</span></a></li>
         </ul>
     </nav>
 {% endblock %}