- slight manual styling adjustments

- update timeline and add some fitting milestones
- add background pattern from https://www.toptal.com/designers/subtlepatterns/crossword/

Author: TobiasMue91

img/crossword_pattern.png

@@ -21,7 +21,7 @@
             --shadow:0 2px 6px rgba(0,0,0,0.08); --radius:8px; --transition:all 0.2s ease;
         }
         * {margin:0; padding:0; box-sizing:border-box;}
-        body {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.5;}
+        body {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.5;background-image: url('img/crossword_pattern.png');}
         .container {width:100%; max-width:1280px; margin:0 auto; padding:0 1rem;}
         header {background:var(--card); box-shadow:var(--shadow); position:sticky; top:0; z-index:100;}
         .header-content {height:70px; display:flex; align-items:center; justify-content:space-between;}
@@ -49,7 +49,7 @@
         .view-all {color:var(--primary); text-decoration:none; font-weight:500;}
         .grid-view {display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.25rem; margin-bottom:3rem;}
         .list-view {display:flex; flex-direction:column; gap:1rem; margin-bottom:3rem;}
-        .card {background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); height:100%; display:flex; flex-direction:column; position:relative;}
+        .card {cursor: pointer; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); height:100%; display:flex; flex-direction:column; position:relative;}
         .card:hover {box-shadow:0 8px 16px rgba(0,0,0,0.1); transform:translateY(-4px);}
         .card::before {content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; z-index:1;}
         .card:hover::before {transform:scaleX(1);}
@@ -68,7 +68,7 @@
         .card-title {font-size:1rem; font-weight:600; margin-bottom:0.5rem; color:var(--dark); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
         .card-desc {font-size:0.875rem; color:#495057; line-height:1.4; flex-grow:1;}
         .card-desc.truncated {overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
-        .read-more {color:var(--primary); background:none; border:none; font-size:0.8rem; cursor:pointer; padding:0; margin-bottom:1rem; align-self:flex-start; transition:var(--transition);}
+        .read-more {color:var(--primary); background:none; border:none; font-size:0.8rem; cursor:pointer; padding:2rem; margin:-2rem -2rem -1rem -2rem; align-self:flex-start; transition:var(--transition);}
         .read-more:hover {color:var(--primary-hover); text-decoration:underline;}
         .card-btn {display:inline-block; padding:0.5rem 1rem; border-radius:var(--radius); text-decoration:none; font-weight:500; text-align:center; transition:var(--transition); margin-top:auto; border:none;}
         .card-btn.game {background:var(--primary); color:white;}
@@ -398,6 +398,16 @@ <h3 class="card-title" title="${item.title}">${item.title}</h3>
                 this.textContent = descContainer.classList.contains('truncated') ? 'Read more' : 'Read less';
             });
         });
+
+        // make full card clickable
+        document.querySelectorAll('.card').forEach(card => {
+            card.addEventListener('click', e => {
+                if (!e.target.closest('.read-more')) {
+                    console.log(e.currentTarget);
+                    card.querySelector('a').click();
+                }
+            });
+        })
     }
 
     // Sort items