@lexho111/plainblog 0.6.4 → 0.6.5

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")}function fillWithContent(n,a,e,l,t){if(l&&document.querySelector(`#articles > article[data-id='${l}']`))return console.log("article found. not adding it."),console.log(l+` ${n} `+e),!1;let o=document.createElement("article");var i,r,d,c,e=new Date(e),s=(null!=l&&o.setAttribute("data-id",l),o.setAttribute("data-date",e.getTime()),document.createElement("h2")),m=document.createElement("span"),u=document.createElement("p");function g(e){var t;"delete"===e?confirm("Delete this article?")&&fetch("/api/articles?id="+l,{method:"DELETE"}).then(e=>{e.ok?o.remove():alert("Error: "+e.statusText)}):"edit"===e&&(e=prompt("New Title",n),t=prompt("New Content",a),e)&&t&&fetch("/api/articles?id="+l,{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","btn edit"),d.setAttribute("class","btn delete"),c.setAttribute("class","btn light"),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")),o.appendChild(i)),s.textContent=n,m.textContent=getFormattedDate(e),u.textContent=a,o.appendChild(s),o.appendChild(m),o.appendChild(u),(t||document.getElementById("articles")).appendChild(o),!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: e7678417f28d953daf75ab7eecffc4a7fc43d7fb2932904a992d8edb0ae8f426 */

package/public/styles-OPUTW5UJ.css

@@ -0,0 +1 @@
+html{height:100%;--mat-sys-background: light-dark(#faf9fd, #121316);--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);--mat-sys-error-container: light-dark(#ffdad6, #93000a);--mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);--mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);--mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);--mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);--mat-sys-on-error: light-dark(#ffffff, #690005);--mat-sys-on-error-container: light-dark(#93000a, #ffdad6);--mat-sys-on-primary: light-dark(#ffffff, #002f65);--mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);--mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);--mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);--mat-sys-on-secondary: light-dark(#ffffff, #283041);--mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);--mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);--mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);--mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);--mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);--mat-sys-on-tertiary: light-dark(#ffffff, #0001ac);--mat-sys-on-tertiary-container: light-dark(#0000ef, #e0e0ff);--mat-sys-on-tertiary-fixed: light-dark(#00006e, #00006e);--mat-sys-on-tertiary-fixed-variant: light-dark(#0000ef, #0000ef);--mat-sys-outline: light-dark(#74777f, #8e9099);--mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);--mat-sys-primary: light-dark(#005cbb, #abc7ff);--mat-sys-primary-container: light-dark(#d7e3ff, #00458f);--mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);--mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);--mat-sys-scrim: light-dark(#000000, #000000);--mat-sys-secondary: light-dark(#565e71, #bec6dc);--mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);--mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);--mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);--mat-sys-shadow: light-dark(#000000, #000000);--mat-sys-surface: light-dark(#faf9fd, #121316);--mat-sys-surface-bright: light-dark(#faf9fd, #38393c);--mat-sys-surface-container: light-dark(#efedf0, #1f2022);--mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);--mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);--mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);--mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);--mat-sys-surface-dim: light-dark(#dbd9dd, #121316);--mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);--mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);--mat-sys-tertiary: light-dark(#343dff, #bec2ff);--mat-sys-tertiary-container: light-dark(#e0e0ff, #0000ef);--mat-sys-tertiary-fixed: light-dark(#e0e0ff, #e0e0ff);--mat-sys-tertiary-fixed-dim: light-dark(#bec2ff, #bec2ff);--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto;--mat-sys-display-large-font: Roboto;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;--mat-sys-display-medium-font: Roboto;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;--mat-sys-display-small-font: Roboto;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto;--mat-sys-headline-large-font: Roboto;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;--mat-sys-headline-medium-font: Roboto;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto;--mat-sys-headline-small-font: Roboto;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;--mat-sys-title-large-font: Roboto;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}body{color-scheme:light;background-color:var(--mat-sys-surface);color:var(--mat-sys-on-surface);font:var(--mat-sys-body-medium);margin:0;height:100%}

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}body{background:var(--white_darker);color:var(--text-primary);font-family:Arial}nav{margin-top:10px}#header h1,.box,nav{margin-left:10px}.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:2px solid #a9a9a9;border-radius:4px;margin-bottom:10px;min-width:0;overflow-wrap:break-word;padding:.4rem}.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}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}#wrapper{max-width:500px;width:100%}.buttons{align-items:center;border:2px solid #000;display:flex;gap:5px;list-style:none;margin:0;padding:15px}.btn{border:none;border:1px solid var(--text-primary);border-radius:4px;box-shadow:3px 2px 2px var(--darkgray);color:var(--text-secondary);cursor:pointer;font-size:1rem;font-weight:500;padding:.5rem 1rem;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)}.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%}}.buttons{border:0 solid #000;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: defca3bf20a3a5a58be1bf92a0013577c6aaf2474d28976f2f42bd5480cf41cc */

package/src/fetchData.js

@@ -164,9 +164,9 @@ 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";

package/src/styles.css

@@ -1,12 +1,26 @@
+: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;
+}
+body {
+  color: var(--text-primary);
+  background: var(--white_darker);
   font-family: Arial;
 }
 nav {
   margin-top: 10px;
 }
 nav,
-h1 {
+#header h1 {
   margin-left: 10px;
 }
 .box {
@@ -23,7 +37,9 @@ h1 {
   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 {
   color: rgb(53, 53, 53);
@@ -51,11 +67,18 @@ 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;
@@ -66,6 +89,41 @@ nav a:visited {
   width: 100%;
 }
 
+.buttons {
+  display: flex;
+  align-items: center;
+  gap: 5px; /* This creates uniform space between the items only */
+  list-style: none;
+  margin: 0;
+  padding: 15px;
+  border: 2px solid black;
+}
+
+.btn {
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  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);
+}
+
 .hide-image {
   display: none;
 }
@@ -83,10 +141,6 @@ nav a:visited {
   }
 }
 
-h2 {
-  margin-top: 0;
-  border: 0px solid black;
-}
 .buttons {
   width: 100%;
   height: 25px;