From ffe92674e5c3a51ded4ce6fe5c404af0c3a1a313 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Mon, 27 Jul 2020 16:02:33 +0200
Subject: [PATCH] Improve panels design

---
 assets/sass/layout.scss | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 9890bcc..12ae4d8 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -252,15 +252,23 @@ section > h2, .panel > h2 {
 	align-items: center;
 	position: relative;
 	text-align: center;
-	margin-top: 16px;
+	margin-top: 4px;
 
-	&::before, &::after {
+	font-size: 24px;
+	line-height: 1;
+
+	.feather {
+		margin: 0 16px 0 0;
+		opacity: 0.1;
+	}
+
+	&::after {
 		content: "";
 		flex: 1;
-		margin: 0 32px;
+		margin: 0 16px;
 		height: 0;
 		border-bottom: 1px solid $defaultTextColor;
-		opacity: 0.2;
+		opacity: 0.1;
 	}
 }
 
@@ -353,7 +361,7 @@ form {
 
 			& + .feather {
 				position: absolute;
-				z-index: -1;
+				pointer-events: none;
 				right: 8px;
 				bottom: 8px;
 
@@ -557,7 +565,8 @@ button, .button {
 }
 
 .panel {
-	margin: 16px 0;
+	position: relative;
+	margin: 16px 0 48px;
 	padding: 8px;
 	background-color: $panelBackground;
 	border-radius: 5px;
@@ -565,6 +574,14 @@ button, .button {
 	p {
 		margin: 16px 8px;
 	}
+
+	> .feather:first-child {
+		position: absolute;
+		--icon-size: 24px;
+		opacity: 0.1;
+		top: 8px;
+		left: 8px;
+	}
 }
 
 .sub-panel {