From 19224d592a5b957089352aea4b0757421f5092a3 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Mon, 6 Jul 2020 12:45:09 +0200
Subject: [PATCH] Add optional icon only menu layout

---
 assets/sass/layout.scss | 42 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index e91200e..9aad28f 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -64,6 +64,7 @@ header {
 				list-style: none;
 
 				a, span {
+					position: relative;
 					display: flex;
 					flex-direction: row;
 					align-items: center;
@@ -72,7 +73,15 @@ header {
 
 					.feather {
 						--icon-size: 24px;
-						margin-right: 10px;
+					}
+
+					&:hover {
+						.tip {
+							visibility: visible;
+							opacity: 1;
+							transition: opacity ease-out 100ms;
+							transition-delay: 150ms;
+						}
 					}
 				}
 
@@ -129,9 +138,40 @@ header {
 				&.open {
 					transform: translateX(0%);
 				}
+
+				li a {
+					.tip {
+						display: block;
+						margin-left: 8px;
+					}
+				}
 			}
 		}
 	}
+
+	@media (min-width: $menuLayoutSwitchTreshold) {
+		nav ul li a .tip {
+			visibility: hidden;
+			position: absolute;
+			display: block;
+			width: max-content;
+			height: 30px;
+			padding: 4px 8px;
+			line-height: 22px;
+			top: calc(100% + 8px);
+			left: 50%;
+			transform: translateX(-50%);
+
+			text-align: center;
+			font-size: 18px;
+			color: $defaultTextColor;
+			opacity: 0;
+			transition: opacity ease-out 100ms, visibility step-end 150ms;
+			transition-delay: 0ms;
+			background-color: #000;
+			border-radius: 5px;
+		}
+	}
 }
 
 footer {