@lexho111/plainblog 0.6.4 → 0.6.6

package/public/scripts.min.js

@@ -1,2 +1,2 @@
-let isLoading=!1;function debounce(t,n=300){let a;return(...e)=>{clearTimeout(a),a=setTimeout(()=>{t.apply(this,e)},n)}}async function handleScroll(){isLoading||document.documentElement.scrollHeight-window.innerHeight-window.scrollY<100&&await loadMore()}async function loadMore(){console.log("load more");var e=document.getElementById("articles"),t=Array.from(e.querySelectorAll("article"));let n=NaN;for(let e=t.length-1;0<=e;e--){var a=t[e].getAttribute("data-date");if(a){a=parseInt(a,10);if(!isNaN(a)){n=a;break}}}if(console.log("lastTimestamp "+n),isNaN(n))window.removeEventListener("scroll",handleScroll);else{var e=n,o=(isLoading=!0,`/api/articles?enddate=${e}&limit=51`);console.log("load more "+o),console.log("endDate: "+new Date(e));try{var l=await fetch(o);if(l.ok){var i=(await l.json()).articles||[];if(0<i.length){let e=0;var r,d=document.createDocumentFragment();for(r of i)fillWithContent(r.title,r.content,r.createdAt,r.id,d)&&e++;document.getElementById("articles").appendChild(d),e<50&&window.removeEventListener("scroll",handleScroll)}else window.removeEventListener("scroll",handleScroll)}}catch(e){console.error("Failed to load articles:",e)}isLoading=!1}}function getFormattedDate(e){return e.getFullYear()+`/${String(e.getMonth()+1).padStart(2,"0")}/${String(e.getDate()).padStart(2,"0")} ${String(e.getHours()).padStart(2,"0")}:`+String(e.getMinutes()).padStart(2,"0")}function fillWithContent(n,a,e,o,t){if(o&&document.querySelector(`#articles > article[data-id='${o}']`))return console.log("article found. not adding it."),console.log(o+` ${n} `+e),!1;let l=document.createElement("article");var i,r,d,c,e=new Date(e),s=(null!=o&&l.setAttribute("data-id",o),l.setAttribute("data-date",e.getTime()),document.createElement("h2")),u=document.createElement("span"),m=document.createElement("p");function g(e){var t;"delete"===e?confirm("Delete this article?")&&fetch("/api/articles?id="+o,{method:"DELETE"}).then(e=>{e.ok?l.remove():alert("Error: "+e.statusText)}):"edit"===e&&(e=prompt("New Title",n),t=prompt("New Content",a),e)&&t&&fetch("/api/articles?id="+o,{method:"PUT",body:JSON.stringify({title:e,content:t})}).then(e=>{e.ok?window.location.reload():alert("Error: "+e.statusText)})}return null!==document.querySelector('a[href="/logout"]')&&(i=document.createElement("div"),r=document.createElement("div"),d=document.createElement("div"),c=document.createElement("div"),i.setAttribute("class","buttons"),r.setAttribute("class","button edit"),d.setAttribute("class","button delete"),c.setAttribute("class","button delete"),r.textContent="edit",d.textContent="delete",c.textContent="something",i.appendChild(r),i.appendChild(d),i.appendChild(c),r.addEventListener("click",()=>g("edit")),d.addEventListener("click",()=>g("delete")),l.appendChild(i)),s.textContent=n,u.textContent=getFormattedDate(e),m.textContent=a,l.appendChild(s),l.appendChild(u),l.appendChild(m),(t||document.getElementById("articles")).appendChild(l),!0}document.addEventListener("DOMContentLoaded",()=>{window.addEventListener("scroll",handleScroll);var e=document.getElementById("search");e&&e.addEventListener("input",debounce(async e=>{e=e.target.value;if(0<e.length){var e=await(await fetch("/api/articles?q="+encodeURIComponent(e))).json(),n=document.getElementById("articles");n.innerHTML="";let t=document.createDocumentFragment();(e.articles?e.articles.slice(0,50):[]).forEach(e=>fillWithContent(e.title,e.content,e.createdAt,e.id,t)),n.appendChild(t)}else window.location.reload()},300))});
-/* source-hash: 913e06cbf98050a2e5c5af66e7322d711048940869b45f472aaff9ce03fc19b2 */
+let isLoading=!1;function debounce(t,n=300){let a;return(...e)=>{clearTimeout(a),a=setTimeout(()=>{t.apply(this,e)},n)}}async function handleScroll(){isLoading||document.documentElement.scrollHeight-window.innerHeight-window.scrollY<100&&await loadMore()}async function loadMore(){console.log("load more");var e=document.getElementById("articles"),t=Array.from(e.querySelectorAll("article"));let n=NaN;for(let e=t.length-1;0<=e;e--){var a=t[e].getAttribute("data-date");if(a){a=parseInt(a,10);if(!isNaN(a)){n=a;break}}}if(console.log("lastTimestamp "+n),isNaN(n))window.removeEventListener("scroll",handleScroll);else{var e=n,l=(isLoading=!0,`/api/articles?enddate=${e}&limit=51`);console.log("load more "+l),console.log("endDate: "+new Date(e));try{var o=await fetch(l);if(o.ok){var i=(await o.json()).articles||[];if(0<i.length){let e=0;var r,d=document.createDocumentFragment();for(r of i)fillWithContent(r.title,r.content,r.createdAt,r.id,d)&&e++;document.getElementById("articles").appendChild(d),e<50&&window.removeEventListener("scroll",handleScroll)}else window.removeEventListener("scroll",handleScroll)}}catch(e){console.error("Failed to load articles:",e)}isLoading=!1}}function getFormattedDate(e){return e.getFullYear()+`/${String(e.getMonth()+1).padStart(2,"0")}/${String(e.getDate()).padStart(2,"0")} ${String(e.getHours()).padStart(2,"0")}:`+String(e.getMinutes()).padStart(2,"0")}async function handleArticleAction(e,t,n,a,l){var o;"delete"===e?confirm("Delete this article?")&&((o=await fetch("/api/articles?id="+t,{method:"DELETE"})).ok?l.remove():alert("Error: "+o.statusText)):"edit"===e&&(l=prompt("New Title",n),o=prompt("New Content",a),l)&&o&&((e=await fetch("/api/articles?id="+t,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({title:l,content:o})})).ok?window.location.reload():alert("Error: "+e.statusText))}function fillWithContent(a,l,e,o,t){if(o&&document.querySelector(`#articles > article[data-id='${o}']`))return console.log("article found. not adding it."),console.log(o+` ${a} `+e),!1;let i=document.createElement("article");var e=new Date(e),n=(null!=o&&i.setAttribute("data-id",o),i.setAttribute("data-date",e.getTime()),document.createElement("h2")),r=document.createElement("span"),d=document.createElement("p");if(null!==document.querySelector('a[href="/logout"]')){let n=document.createElement("div");var c=document.createElement("div"),s=document.createElement("div"),m=document.createElement("div");n.setAttribute("class","buttons"),c.setAttribute("class","btn edit"),s.setAttribute("class","btn delete"),m.setAttribute("class","btn light"),c.textContent="edit",s.textContent="delete",m.textContent="something else",n.appendChild(c),n.appendChild(s),n.appendChild(m),[{label:"edit",type:"edit",class:"btn edit"},{label:"delete",type:"delete",class:"btn delete"},{label:"something else",type:"other",class:"btn light"}].forEach(e=>{var t=document.createElement("div");t.className=e.class,t.textContent=e.label,t.addEventListener("click",()=>handleArticleAction(e.type,o,a,l,i)),n.appendChild(t)}),i.appendChild(n)}return n.textContent=a,r.textContent=getFormattedDate(e),d.textContent=l,i.appendChild(n),i.appendChild(r),i.appendChild(d),(t||document.getElementById("articles")).appendChild(i),!0}document.addEventListener("DOMContentLoaded",()=>{window.addEventListener("scroll",handleScroll);var e=document.getElementById("search");e&&e.addEventListener("input",debounce(async e=>{e=e.target.value;if(0<e.length){var e=await(await fetch("/api/articles?q="+encodeURIComponent(e))).json(),n=document.getElementById("articles");n.innerHTML="";let t=document.createDocumentFragment();(e.articles?e.articles.slice(0,50):[]).forEach(e=>fillWithContent(e.title,e.content,e.createdAt,e.id,t)),n.appendChild(t)}else window.location.reload()},300))});
+/* source-hash: 1fffde3e00f56a4fe51e53474262fcf2482e14e10c8acd05b62e87eee32ce5a3 */

package/public/styles-I55BTQOK.css

@@ -0,0 +1 @@
+:root{--blue: hsl(224, 100%, 41%);--yellow: hsl(53, 100%, 50%);--orange: hsl(44, 100%, 50%);--poisongreen: hsl(88, 100%, 50%);--green: hsl(85, 100%, 40%);--pink: hsl(303, 100%, 40%);--basecolor: var(--orange);--primary: var(--basecolor);--primary-inverted: rgb(from var(--primary) calc(1 - r) calc(1 - g) calc(1 - b) );--header_bg: var(--basecolor);--header_darker: hsl(from var(--primary) h s l / .4);--header_darker_high-contrast: hsl(from var(--primary) h s l);--gray: rgba(255, 255, 255, .3);--darkgray: rgba(54, 54, 54, .5);--white: #fefefe;--white_darker: #eeeeee;--red: hsla(0, 100%, 38%, .7);--black: black;--contrast_text: rgb( from var(--header_darker) clamp(0, (r * .299 + g * .587 + b * .114 - 128) * -1000, 255) clamp(0, (r * .299 + g * .587 + b * .114 - 128) * -1000, 255) clamp(0, (r * .299 + g * .587 + b * .114 - 128) * -1000, 255) );--text-primary: var(--black);--text-secondary: var(--white)}html,body{margin:0}body{color:var(--text-primary);background:var(--white_darker);font-family:Arial,sans-serif}header{background-color:var(--header_darker)}header h1{color:var(--header_darker_high-contrast);text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black}.article-card{background-color:var(--white)}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;box-sizing:border-box}button{padding:.5rem 1rem;cursor:pointer}.btn{background-color:var(--primary);border:none;color:var(--text-secondary);font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;padding:.5rem 1rem;border-radius:4px;width:fit-content;border:1px solid var(--white);box-shadow:3px 2px 2px var(--darkgray)}.btn:hover{color:#000;background-color:#fff;border:2px solid var(--black)}.btn-secondary{background-color:var(--darkgray)}.btn-text{background-color:var(--header_darker)}.btn-text:hover{background-color:var(--white);color:#0034c2b3;border:2px solid black;font-weight:700}.btn-danger{background-color:var(--red)}.btn-danger:hover{background-color:var(--white);color:#c20000b3;border:2px solid var(--black);font-weight:700}.btn-electric{padding:15px 30px;cursor:pointer;overflow:hidden;display:inline-block;font-weight:900;font-size:1.5rem;color:#000;animation:wackel-color 2.5s infinite}@keyframes wackel-color{0%,19.9%,22.1%,24.9%,60.1%,62.9%,to{color:#000;filter:drop-shadow(0 0 0px transparent)}20%,22%,25%,60%,63%{color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}}@keyframes wackel-jitter{0%{transform:translate(0)}25%{transform:translate(-1.5px,.5px)}50%{transform:translate(1.5px,-.5px)}75%{transform:translate(-.5px,-1.5px)}to{transform:translate(0)}}.inverted{background-color:var(--white);color:var(--black);font-weight:700}.inverted:hover{background-color:hsl(from var(--primary) hsl / .2);color:var(--black);font-weight:700;border:2px solid var(--white)}.main-nav{background-color:var(--header_bg)}.nav-brand .brand-link{color:var(--mainfont)}.brand-link:hover{color:var(--primary-inverted)}.form-group{margin-bottom:1rem}.error-message{color:red;font-size:.875rem;margin-top:.25rem}.error{color:red}@media print{.no-print,nav,footer,button{display:none!important}body{font-size:12pt;color:#000;background:#fff}header h1{color:#000}}.glow{text-shadow:0 0 .1em,0 0 .3em}

package/public/styles.min.css

@@ -1,2 +1,2 @@
-body{font-family:Arial,sans-serif}h1{color:#333}body{font-family:Arial;margin:0}nav{margin-top:10px}.box,h1,nav{margin-left:10px}.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:0 solid #ccc;border-radius:4px;min-width:0;overflow-wrap:break-word;padding:.25rem}.grid article h2{color:#353535;margin-bottom:5px}.grid article .datetime{color:#757575;margin:0}.grid article p{margin-bottom:0;margin-top:10px}article a,article a:visited,h1{color:#696969}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}#wrapper{max-width:500px;width:100%}.hide-image{display:none}@media screen and (max-width:1000px){*{font-size:4vw}#wrapper{box-sizing:border-box;max-width:100%;padding:0 10px;width:100%}}h2{margin-top:0}.buttons,h2{border:0 solid #000}.buttons{height:25px;margin-bottom:0;width:100%}.button{border:1px solid #000;cursor:pointer;float:left;height:19px;padding:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100px}.button:focus{outline:2px solid orange}.edit{background-color:blue}.delete{background-color:red}
-/* source-hash: 22048a393d87cbbefd7a61fb300fff916360a30934da974ee2fd45739e446492 */
+body{font-family:Arial,sans-serif}h1{color:#333}:root{--black:#111;--clearwhite:#fefefe;--white:#eee;--darkgray:rgba(54,54,54,.5);--text-primary:var(--black);--text-secondary:var(--clearwhite)}body,html{margin:0}html{font-size:clamp(1rem,1.5vw + .5rem,1.25rem)}body{background:var(--white_darker);color:var(--text-primary);font-family:Arial}nav{margin-top:10px}#header h1,nav{margin-left:25px}form{font-size:clamp(1rem,1.5vw + .5rem,1.25rem)}button,form input,form textarea{font-size:90%}button{width:-moz-fit-content;width:fit-content;field-sizing:content;padding:10px}.form_element{display:block;margin-bottom:10px;padding:4px}.wide{width:100%}.password{width:250px}.new_title{padding:10px}.new_content{height:500px;padding:10px;resize:none}#search{float:right;font-size:100%;margin:5px}.articles{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr;max-width:800px}.articles article{border:2px solid #a9a9a9;border-radius:4px;margin-bottom:10px;min-width:0;overflow-wrap:break-word;padding:.4rem}.articles article h2{color:#353535;margin-bottom:5px}.articles article .datetime{color:#757575;margin:0}.articles article p{margin-bottom:0;margin-top:10px}article a,article a:visited,h1{color:#696969}h2{border:0 solid #000;margin-top:0}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}.loginform{margin-left:25px}#wrapper{margin-left:5px;max-width:1200px;padding:0 20px}#wrapper,.buttons{box-sizing:border-box;width:100%}.buttons{align-items:center;border:0 solid #000;display:flex;gap:5px;height:25px;list-style:none;margin:0 0 16px;padding:15px 15px 15px 0}.box{margin-left:25px}.btn{border:none;border:1px solid var(--text-primary);border-radius:0;box-shadow:3px 2px 2px var(--darkgray);color:var(--text-primary);cursor:pointer;font-size:1rem;font-weight:500;padding:.25rem .5rem;text-decoration:none;width:-moz-fit-content;width:fit-content}.btn:hover{background-color:#fff;border:2px solid var(--black);color:#000}.light{background:var(--clearwhite);color:var(--black)}.light:hover{background:var(--black);color:var(--clearwhite)}.hide-image{display:none}@media screen and (min-width:1000px){#wrapper{font-size:.75rem;margin:0 auto;max-width:1400px;padding:0 40px;width:90%}}.edit{background-color:blue}.delete,.edit{color:var(--clearwhite)}.delete{background-color:red}
+/* source-hash: 4fcd9901ab776e735cba281aaa4865ed96f897dd0aa4eaef774dee803966b720 */

package/src/fetchData.js

@@ -137,6 +137,37 @@ function getFormattedDate(date) {
   const minutes = String(date.getMinutes()).padStart(2, "0");
   return `${year}/${month}/${day} ${hours}:${minutes}`;
 }
+async function handleArticleAction(
+  type,
+  id,
+  currentTitle,
+  currentContent,
+  element,
+) {
+  if (type === "delete") {
+    if (!confirm("Delete this article?")) return;
+
+    const res = await fetch(`/api/articles?id=${id}`, { method: "DELETE" });
+    if (res.ok) {
+      element.remove();
+    } else {
+      alert(`Error: ${res.statusText}`);
+    }
+  } else if (type === "edit") {
+    const title = prompt("New Title", currentTitle);
+    const content = prompt("New Content", currentContent);
+    if (!title || !content) return;
+
+    const res = await fetch(`/api/articles?id=${id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title, content }),
+    });
+
+    if (res.ok) window.location.reload();
+    else alert(`Error: ${res.statusText}`);
+  }
+}
 function fillWithContent(title, content, date, id, targetContainer) {
   if (id) {
     // Check if an article with this ID already exists in the container.
@@ -164,42 +195,35 @@ function fillWithContent(title, content, date, id, targetContainer) {
     const deleteButton = document.createElement("div");
     const somethingButton = document.createElement("div");
     buttons.setAttribute("class", "buttons");
-    editButton.setAttribute("class", "button edit");
-    deleteButton.setAttribute("class", "button delete");
-    somethingButton.setAttribute("class", "button delete");
+    editButton.setAttribute("class", "btn edit");
+    deleteButton.setAttribute("class", "btn delete");
+    somethingButton.setAttribute("class", "btn light");
     editButton.textContent = "edit";
     deleteButton.textContent = "delete";
-    somethingButton.textContent = "something";
+    somethingButton.textContent = "something else";
     buttons.appendChild(editButton);
     buttons.appendChild(deleteButton);
     buttons.appendChild(somethingButton);
 
-    editButton.addEventListener("click", () => handleAction("edit"));
-    deleteButton.addEventListener("click", () => handleAction("delete"));
-    article.appendChild(buttons);
-  }
+    const actions = [
+      { label: "edit", type: "edit", class: "btn edit" },
+      { label: "delete", type: "delete", class: "btn delete" },
+      { label: "something else", type: "other", class: "btn light" },
+    ];
 
-  function handleAction(button) {
-    if (button === "delete") {
-      if (confirm("Delete this article?")) {
-        fetch("/api/articles?id=" + id, { method: "DELETE" }).then((res) => {
-          if (res.ok) article.remove();
-          else alert("Error: " + res.statusText);
-        });
-      }
-    } else if (button === "edit") {
-      const newTitle = prompt("New Title", title);
-      const newContent = prompt("New Content", content);
-      if (newTitle && newContent) {
-        fetch("/api/articles?id=" + id, {
-          method: "PUT",
-          body: JSON.stringify({ title: newTitle, content: newContent }),
-        }).then((res) => {
-          if (res.ok) window.location.reload();
-          else alert("Error: " + res.statusText);
-        });
-      }
-    }
+    actions.forEach((action) => {
+      const btn = document.createElement("div");
+      btn.className = action.class;
+      btn.textContent = action.label;
+
+      // Attach the single summarized handler
+      btn.addEventListener("click", () =>
+        handleArticleAction(action.type, id, title, content, article),
+      );
+
+      buttons.appendChild(btn);
+    });
+    article.appendChild(buttons);
   }
 
   heading.textContent = title;

package/src/styles.css

@@ -1,41 +1,108 @@
+:root {
+  --black: #111;
+  --clearwhite: #fefefe;
+  --white: #eeeeee;
+  --darkgray: rgba(54, 54, 54, 0.5);
+  --text-primary: var(--black);
+  --text-secondary: var(--clearwhite);
+}
+
+html,
 body {
   margin: 0;
+}
+html {
+  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
+}
+body {
+  color: var(--text-primary);
+  background: var(--white_darker);
   font-family: Arial;
 }
 nav {
   margin-top: 10px;
 }
 nav,
-h1 {
-  margin-left: 10px;
+#header h1 {
+  margin-left: 25px;
 }
-.box {
-  margin-left: 10px;
+
+form {
+  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
+}
+
+form input,
+form textarea,
+button {
+  font-size: 90%;
+}
+
+button {
+  width: fit-content;
+  field-sizing: content;
+  padding: 10px;
+}
+
+.form_element {
+  display: block;
+  margin-bottom: 10px;
+  padding: 4px;
+}
+
+.wide {
+  width: 100%;
 }
-.grid {
+
+.password {
+  width: 250px;
+}
+
+.new_title {
+  padding: 10px;
+}
+
+.new_content {
+  height: 500px;
+  resize: none;
+  padding: 10px;
+}
+
+#search {
+  float: right;
+  margin: 5px;
+  font-size: 100%;
+}
+
+hr {
+}
+
+.articles {
   border: 0 solid #000;
   display: grid;
   gap: 0.25rem;
   grid-template-columns: 1fr;
+  max-width: 800px;
 }
-.grid article {
+.articles article {
   border: 0 solid #ccc;
   border-radius: 4px;
   min-width: 0;
   overflow-wrap: break-word;
-  padding: 0.25rem;
+  padding: 0.4rem;
+  margin-bottom: 10px;
+  border: 2px solid darkgray;
 }
-.grid article h2 {
+.articles article h2 {
   color: rgb(53, 53, 53);
   margin-bottom: 5px;
 }
 
-.grid article .datetime {
+.articles article .datetime {
   margin: 0;
   color: rgb(117, 117, 117);
 }
 
-.grid article p {
+.articles article p {
   margin-top: 10px;
   margin-bottom: 0;
 }
@@ -51,63 +118,106 @@ article a:visited {
 h1 {
   color: #696969;
 }
+
+h2 {
+  margin-top: 0;
+  border: 0px solid black;
+}
+
 nav a {
   color: #3b40c1;
   font-size: 20px;
   text-decoration: underline;
 }
+
 nav a:visited {
   color: #3b40c1;
   text-decoration-color: #3b40c1;
 }
 
+.loginform {
+  margin-left: 25px;
+}
+
 #wrapper {
-  max-width: 500px;
+  max-width: 1200px; /* Limits width on big PC screens */
+  /*margin: 0 auto; /* Centers the layout on PC */
+  padding: 0 20px; /* Consistent spacing on edges */
   width: 100%;
+  margin-left: 5px;
+  box-sizing: border-box;
+}
+
+.buttons {
+  box-sizing: border-box; /* This ensures 100% width includes the 15px padding */
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  list-style: none;
+  margin: 0;
+  margin-bottom: 16px;
+  padding: 15px;
+  padding-left: 0px;
+  border: 0px solid black;
+  width: 100%; /* Now 100% will respect the parent's boundaries */
+  height: 25px;
+}
+
+.box {
+  margin-left: 25px;
+}
+
+.btn {
+  border: none;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0px;
+  width: fit-content;
+  border: 1px solid var(--text-primary);
+  box-shadow: 3px 2px 2px var(--darkgray);
+}
+
+.btn:hover {
+  color: black;
+  background-color: white;
+  border: 2px solid var(--black);
+}
+
+.light {
+  color: var(--black);
+  background: var(--clearwhite);
+}
+
+.light:hover {
+  color: var(--clearwhite);
+  background: var(--black);
 }
 
 .hide-image {
   display: none;
 }
 
-/* Mobile Layout (screens smaller than 1000px) */
-@media screen and (max-width: 1000px) {
-  * {
-    font-size: 4vw;
-  }
+/* 2. DESKTOP ADJUSTMENTS (Screens larger than 1000px) */
+@media screen and (min-width: 1000px) {
   #wrapper {
-    max-width: 100%;
-    width: 100%;
-    padding: 0 10px; /* Prevents text from touching the edges */
-    box-sizing: border-box;
+    width: 90%; /* Gives some breathing room on large monitors */
+    max-width: 1400px; /* Prevents it from getting absurdly wide */
+    padding: 0 40px;
+    margin: 0 auto;
+    /*zoom: 0.75; /* Reduces the entire layout to 80% of its current size */
+    font-size: 0.75rem; /* Instead of zoom, use a smaller base font size if you want things "smaller" */
   }
 }
 
-h2 {
-  margin-top: 0;
-  border: 0px solid black;
-}
-.buttons {
-  width: 100%;
-  height: 25px;
-  border: 0px solid black;
-  margin-bottom: 0px;
-}
-.button {
-  border: 1px solid black;
-  width: 100px;
-  height: 19px;
-  float: left;
-  padding: 2px;
-  cursor: pointer;
-  user-select: none; /* Prevents text selection on double-click */
-}
-.button:focus {
-  outline: 2px solid orange; /* Vital for keyboard accessibility */
-}
 .edit {
+  color: var(--clearwhite);
   background-color: blue;
 }
 .delete {
+  color: var(--clearwhite);
   background-color: red;
 }

package/.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}