css

index.html

@@ -30,7 +30,7 @@
                     <tr>
                         <th>Sujet</th>
                         <th>Votes</th>
-                        <th>Auteur</th>
+                        <th>Ouvert par</th>
                         <th>Dernier message</th>
                     </tr>
                 </thead>

script.js

@@ -29,14 +29,14 @@ function displayIssues(issues) {
         }        
 
         row.innerHTML = `
-            <td><a href="${issue.web_url}" target="_blank">${issue.title}</a>
+            <td><a class="titre" href="${issue.web_url}" target="_blank">${issue.title}</a>
             <br>
             ${description}
             <br>
             <a class="bouton" href="${issue.web_url}" target="_blank">Lire en entier et répondre</a>            
             </td>
             <td>${issue.upvotes} 👍</td>
-            <td><img class="avatar" src="${issue.author.avatar_url}"> ${issue.author.name}</td>
+            <td class="auteur"><img class="avatar" src="${issue.author.avatar_url}"> ${issue.author.name}</td>
             <td>${new Date(issue.updated_at).toLocaleDateString()}</td>
         `;
         tableBody.appendChild(row);

style.css

@@ -2,11 +2,16 @@
     box-sizing: border-box;
 }
 
+@font-face {
+    font-family: GreatVibesRegular;
+    src: url(polices/GreatVibes-Regular.otf);
+}
+
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: rgb(179, 179, 241);
+    background-color: rgb(220, 220, 242);
     color: #333;
     min-height: 100vh;
     padding-bottom: 60px;
@@ -16,7 +21,7 @@ body {
 
 /* Header styles */
 header {
-    background-color: #6b63ff83;
+    background: linear-gradient(to bottom, #d3adff, transparent);
     color: white;
     padding: 1rem;
     text-align: center;
@@ -25,8 +30,11 @@ header {
 }
 
 header h1 {
-    font-size: 1.8rem;
-    margin: 1rem 0;
+    font-family: GreatVibesRegular;
+    font-size: 4rem;
+    line-height: 4rem;    
+    margin: 0;
+    color: #0a1f4f;
 }
 
 header img {
@@ -122,6 +130,10 @@ table a.bouton {
     transition: background-color 0.3s ease;
 }
 
+table a.titre {
+    font-weight: bold;
+}
+
 table a.bouton:hover {
     background-color: #0056b3;
 }
@@ -132,6 +144,13 @@ th, td {
     border-bottom: 1px solid #ddd;
 }
 
+td.auteur {
+    width: 250px;           /* Limiter la largeur à 250px */
+    white-space: nowrap;    /* Empêcher le texte de passer à la ligne suivante */
+    overflow: hidden;       /* Masquer le texte qui dépasse */
+    text-overflow: ellipsis; /* Ajouter des points de suspension (...) si le texte est trop long */
+}
+
 th {
     background-color: #6c63ff;
     color: white;