changed some more styling, and responsiveness

httpdocs/project.html

@@ -13,9 +13,10 @@
     <div id="main">
         <div id="container" onload="loadData()">
             <h1 id="title"></h1>
-            <button id="editProjectName" onclick="editProjectName()">Edit Name</button>
-            <button id="exportProject" onclick="exportProject()">Export Project</button>
-            <h2 id="description"></h2><br>
+            <div id="projectButtons">
+                <button id="editProjectName" onclick="editProjectName()">Edit Name</button>
+                <button id="exportProject" onclick="exportProject()">Export Project</button>
+            </div>
             <h3 id="section-title">Commands:</h3>
             <div id="grid" class="bot-list"> 
                 

scripts/project.js

@@ -204,7 +204,6 @@ function loadData() {
             let jsonResponse = JSON.parse(xhr.responseText);
             if (jsonResponse != {}){
                 document.querySelector("#title").innerHTML = jsonResponse.projectName.toUpperCase();
-                document.querySelector("#description").innerHTML = "Project Id: "+jsonResponse.projectId;
             }
         } else {
             console.error('Request failed. Status: ' + xhr.status);

styles/project.css

@@ -60,12 +60,19 @@
     font-size: large;
 }
 
-#editProjectName,
-#exportProject {
-    color: black !important;
+#projectButtons {
+    display: flex;
+    justify-content: space-around;
+    height: 80px;
+    width: 80%;
 }
 
-
+#projectButtons > button {
+    width: 35% !important;
+    background: var(--dark-steel);
+    border: 1px solid var(--discord-blue);
+    border-radius: 10px;
+}
 
 @media only screen and (max-width: 768px) {
     #main {
@@ -94,11 +101,25 @@
         grid-auto-rows: 200px;
         gap:10px !important;
     }
+    #grid:last-child {
+        margin-bottom: 30px;
+    }
 
     .grid-btn {
         width: 100% !important;
         height: 100% !important;
     }
+
+    #projectButtons {
+        flex-direction: column;
+        align-items: center;
+        height: 200px !important;
+        row-gap: 5px;
+    }
+    #projectButtons > button {
+        width: 40% !important;
+        height: 80px;
+    }
 }
 
 @media only screen and (max-width: 768px) and (min-width: 500px) {