feat: game cover sizing and hover

tothlp · Jun 24, 2024 · f27a3b3 · f27a3b3
1 parent 735a4ff
commit f27a3b3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -13,6 +13,12 @@
     gap: 16px; /* adjust as needed */
 }
 
+@media screen and (max-width: 1230px) {
+    .grid-container {
+        grid-template-columns: repeat(2, 1fr); /* Display 2 items per row on smaller screens */
+    }
+}
+
 .grid-item {
     background-color: #1f1f1f; /* adjust as needed */
     background-size: cover; 
@@ -48,7 +54,9 @@
 }
 
 
-.grid-item:hover .overlay {
+.grid-item:hover .overlay,
+.grid-item:focus .overlay,
+.grid-item:active .overlay {
     opacity: 1;
 }
 

diff --git a/pages/Games.md b/pages/Games.md
@@ -13,7 +13,7 @@ format: list
 
   <div class="grid-container">
 {% for game in year.items %}
-  <div class="grid-item" style="background-image: url('{{'/assets/img/covers/' | append: game.cover | relative_url }}');">
+  <div class="grid-item" style="background-image: url('{{'/assets/img/covers/' | append: game.cover | relative_url }}');" tabindex="0">
     <!-- <img src="{{'/assets/img/covers/' | append: game.cover | relative_url }}" alt="{{game.cover}}"> -->
       <div class="overlay">
           <p class="item-title">{{ game.title }} </p>