Improved responsive design

project.js

@@ -19,19 +19,20 @@ async function getProjectDescription(obj, id = projectID) {
 async function loadProject(id = projectID, objTitle, objSubtitle, objAuthor, objDescription, objLogo, objDownloadLink, changeColor, changeBackground) {
   try {
     const jsonData = await getProjectJSON(id);
-
+    document.title = `${jsonData.project.author}:${id}@neoBeta`
+    
     if (objTitle) objTitle.innerText = jsonData.project.title;
     if (objSubtitle) objSubtitle.innerText = jsonData.project.subtitle;
     if (objAuthor) objAuthor.innerText = `by ${jsonData.project.author}`;
     
     if (objDescription) await getProjectDescription(objDescription, id);
-
+    
     if (jsonData.project.downloadLink) {
       if (objDownloadLink) objDownloadLink.href = jsonData.project.downloadLink;
     } else {
       if (objDownloadLink) objDownloadLink.innerText = "Download unavailable";
     }
-
+    
     if (jsonData.project.displayLogo == true) {
       if (objLogo) objLogo.src = `projects/${id}/logo.png`;
     } else {

projects/ghostsandstuff/project.json

@@ -2,6 +2,7 @@
     "project": {
       "author": "tenkuma",
       "title": "Ghosts 'n Stuff",
+      "downloadLink": "https://modrinth.com/plugin/ghosts/versions",
       "subtitle": "Adds a simple way to add custom commands with custom responses to your server.",
       "backgroundImage": "projects/ghostsandstuff/ghosts.jpg",
       "backgroundImageSize": "cover",

styles.css

@@ -102,7 +102,7 @@ code {
 
 .featuredProject {
     transition: .2s;
-    height: auto;
+    height: fit-content;
     width: 15%;
     font-size: smaller;
     padding: 4px;
@@ -121,7 +121,7 @@ code {
 .featuredProject p {
     margin-right: auto;
     margin-left: auto;
-    text-overflow: ellipsis;
+    text-overflow:clip;
 }
 
 #featured h2 {
@@ -132,6 +132,7 @@ code {
 
 #featuredHelper {
     gap: 10px;
+    flex-wrap: wrap;
 }
 
 #projectTitleSubtitle {
@@ -218,19 +219,27 @@ code {
         margin-right: auto;
     }
 
-    #projectAuthor {
-        margin-left: 10px;
-    }
-
-    #projectTitle {
-        margin-right: 0;
-    }
-
     #projectHeader img {
         width: 10vh;
         height: 10vh;
     }
 
+    #projectTitleAuthor {
+        flex-direction: column;
+    }
+
+    /* #featuredHelper {
+        flex-direction: column;
+    } */
+
+    #featuredHelper * {
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    header {
+        text-align: center;
+    }
 }
 
 @media only screen and (max-width: 300px) {
@@ -239,10 +248,6 @@ code {
         max-width: 90%;
     }
 
-    #projectTitleAuthor {
-        flex-direction: column;
-    }
-
     #projectAuthor {
         margin: 0;
     }