Estilizando el dropdown y haciendo verdaderamente un dropup

Author: agarnung

_includes/elements/dropdown.html

@@ -1,23 +1,13 @@
-{% if site.production %}
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
-{% else %}
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
-{% endif %}
-
-<span class="dropdown">
+<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!
   </button>
   <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="playGameDropdown">
     {% for game in include.source %}
-      <li><a class="dropdown-item" href="{{ game.url }}">{{ game.name }}</a></li>
+      <li>
+        <a class="dropdown-item" href="{{ game.url }}" target="_blank">{{ game.name }}</a>
+      </li>
     {% endfor %}
   </ul>
 </span>
 
-{% if site.production %}
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-{% else %}
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-{% endif %}
-

_includes/scripts.html

@@ -20,3 +20,23 @@
     $('[data-toggle="tooltip"]').tooltip()
 })
 </script>
+
+<!-- If the site is in production, include the Bootstrap CSS from a CDN. 
+     The CDN is used for faster loading as it uses global servers. 
+     If the site is not in production (i.e., in development), the same link is used, 
+     but you could customize this further if needed. -->
+{% if site.production %}
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+{% else %}
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+{% endif %}
+
+
+<!-- Bootstrap JavaScript file (with Popper.js bundled) is required for interactive components like dropdowns, modals, etc. 
+     The script is loaded from a CDN for fast access from global servers. 
+     The production/development conditional allows you to configure different setups if needed. -->
+{% if site.production %}
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+{% else %}
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+{% endif %}

_sass/_dropdown.scss

@@ -6,17 +6,28 @@
 }
 
 .dropdown-menu {
-  max-width: 250px;  
+  max-width: 250px;
   padding: 0.5rem;
   background-color: #343a40;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border: none;
   margin-top: 0.25rem;
+  position: absolute;
+  bottom: 100%; 
+}
+
+.dropdown.dropup .dropdown-menu {
+  margin-bottom:5rem; 
+  margin-top: 0;
+  bottom: 100%; 
 }
 
 .dropdown-item {
+  display: block; 
   color: #f8f9fa;
+  padding: 0.5rem 1rem; 
+  
   &:hover {
     background-color: #495057;
     color: #fff;
@@ -31,7 +42,7 @@
   font-size: 1rem;
   border-radius: 5px;
   cursor: pointer;
-  
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);