dynamic style from html and button was too big in scss

Author: agarnung

_includes/elements/dropdown.html

@@ -1,13 +1,12 @@
-<span class="dropdown dropup">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="playGameDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+<span class="{{ include.menu_class }}">  
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="{{ include.id }}" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 0.125rem 0.3rem;">
     {{ include.label }}
   </button>
-  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="playGameDropdown">
+  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="{{ include.id }}">
     {% for game in include.source %}
       <li>
         <a class="dropdown-item" href="{{ game.url }}" target="_blank">{{ game.name }}</a>
       </li>
     {% endfor %}
   </ul>
 </span>
-

_includes/landing.html

@@ -28,10 +28,10 @@ <h3 class="font-weight-bold">Hi! Welcome to my website</h3>
 	<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
+			 id="playGameDropdown"
+			 label="play a game!"
+			 menu_class="dropdown dropup"
+			 source=site.data.games-dropdown-items
 		%}
 	</div>
 

_sass/_dropdown.scss

@@ -10,7 +10,7 @@
   padding: 0.5rem;
   background-color: #343a40;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
   border: none;
   margin-top: 0.25rem;
   position: absolute;
@@ -62,3 +62,4 @@
   margin-right: 10px; 
 }
 
+