From c11279d68ee8cc7e8d62aa8b580aa7705bae3d57 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 14 Aug 2023 19:54:34 +0200
Subject: [PATCH] Bring Dropdown Styling inline with navbar styling

---
 src/lib/components/DropDown.svelte        | 28 ++++++++++++++++++++++-
 src/lib/components/DropDownElement.svelte |  7 ++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/DropDown.svelte b/src/lib/components/DropDown.svelte
index 8fe6c35..58a2b71 100644
--- a/src/lib/components/DropDown.svelte
+++ b/src/lib/components/DropDown.svelte
@@ -44,14 +44,40 @@
 		background-color: var(--background);
 		color: var(--color-text);
 		border: none;
-		height: var(--height-m);
+		height: 100%;
+		font-weight: 700;
+		font-size: 0.8rem;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		text-transform: uppercase;
+		padding: 0 0.5rem;
+		transition: color 0.2s linear;
 	}
 
+	.dropdown-button::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		bottom: 4px;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--color-text);
+	}
+	
 	.dropdown-button:hover {
 		cursor: pointer;
 		color: var(--color-active-1);
 	}
 
+	.dropdown-button:hover::before {
+		--size: 8px;
+		bottom: 0;
+		border-top: var(--size) solid var(--color-active-1);
+		transition: --size 0.2s linear;
+	}
+
 	.dropdown-container {
 		list-style-type: none;
 		width: max-content;
diff --git a/src/lib/components/DropDownElement.svelte b/src/lib/components/DropDownElement.svelte
index 51f145e..a3fe101 100644
--- a/src/lib/components/DropDownElement.svelte
+++ b/src/lib/components/DropDownElement.svelte
@@ -15,5 +15,12 @@
 		margin: 10% auto;
     margin-left: 0;
 		background: #3f3f3f;
+		height: 100%;
+		font-weight: 700;
+		font-size: 0.8rem;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		text-transform: uppercase;
+		transition: color 0.2s linear;
 	}
 </style>
\ No newline at end of file