better styling in dropdown

Author: agarnung

_includes/elements/dropdown.html

@@ -1,6 +1,6 @@
 <span class="dropdown dropup">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="playGameDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-    Play a game!
+    {{ include.label }}
   </button>
   <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="playGameDropdown">
     {% for game in include.source %}

_includes/landing.html

@@ -25,12 +25,16 @@ <h3 class="font-weight-bold">Hi! Welcome to my website</h3>
       I am Alejandro, <span id="age"></span> years old. Here, you can take a look at my (personal) <a href="/projects">projects</a> (I have selected several that are available on my GitHub profile), <a href="/blog">blog</a> (where I document and share insights about computer vision, image processing, math, geometry, engineering, among other topics), <a href="/publications">publications</a> (a mix of informal, formal, and quasi-formal documents I find valuable for anyone interested in my fields), and, if you'd like to know more about me, <a href="/about">additional information</a>.
     </p>
 
-    {% include elements/dropdown.html
-       id="playGameDropdown"
-       label="Play a game!"
-       menu_class="dropdown-menu-dark"
-       source=site.data.games-dropdown-items
-    %}
+	<div class="d-flex justify-content-center align-items-center">
+		<span class="mr-2" style="margin-top: 1.1rem;">Free time?, </span>
+		{% include elements/dropdown.html
+		   id="playGameDropdown"
+		   label="play a game!"
+		   menu_class="dropdown-menu-dark"
+		   source=site.data.games-dropdown-items
+		%}
+	</div>
+
   </div>
 </section>
 

_sass/_dropdown.scss

@@ -53,3 +53,12 @@
   background-color: #5a6268;
 }
 
+.d-flex {
+  display: flex;
+  align-items: center; 
+}
+
+.d-flex > span {
+  margin-right: 10px; 
+}
+