use fira code font; fix maximize/minimize; disallow multiple opens; a…

…dd blog articles

src/components/window.ts

@@ -8,11 +8,11 @@ export const window = (
   const base = document.createElement("div");
   base.className =
     `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
-     border-2 border-topology-border rounded-2xl z-10 ` + dimensions;
+     border-2 border-topology-border rounded-2xl z-50 ` + dimensions;
   const base_shadow = document.createElement("div");
   base_shadow.className =
     `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
-     bg-topology-border rounded-2xl ml-2 mt-2 ` + dimensions;
+     bg-topology-border rounded-2xl ml-2 mt-2 z-40 ` + dimensions;
 
   // Header
   const header = document.createElement("div");
@@ -30,7 +30,7 @@ export const window = (
   close.innerHTML =
     "<span class='" +
     genericBtnImgStyle +
-    " text-topology-bg !h-6 !w-6'>X</span>";
+    " text-topology-bg !h-6 !w-6 font-sans'>X</span>";
   close.onclick = () => {
     canvas.removeChild(base);
     canvas.removeChild(base_shadow);
@@ -39,26 +39,29 @@ export const window = (
   const maximize = document.createElement("button");
   maximize.className = genericBtnStyle + " bg-topology-green left-12";
   maximize.innerHTML =
-    "<span class='absolute inset-0 m-auto -mt-2 h-fit w-fit text-topology-bg text-2xl'>+</span>";
+    "<span class='absolute inset-0 m-auto -mt-2 h-fit w-fit text-topology-bg text-2xl font-sans'>+</span>";
   maximize.onclick = () => {
-    base.className = "w-full h-full";
+    base.className = "w-full h-full relative z-50";
     header.className = header.className.replace(" rounded-t-2xl", "");
     contentArea.className = contentArea.className.replace(" rounded-b-2xl", "");
+    canvas.removeChild(base_shadow);
     header.removeChild(maximize);
     header.appendChild(minimize);
   };
 
   const minimize = document.createElement("button");
-  minimize.className = genericBtnStyle + " bg-pastel-green left-12";
-  minimize.innerHTML = "<span class='" + genericBtnImgStyle + "'>-</span>";
+  minimize.className = genericBtnStyle + " bg-topology-green left-12";
+  minimize.innerHTML =
+    "<span class='absolute inset-0 m-auto -mt-2 h-fit w-fit text-topology-bg text-2xl font-sans'>-</span>";
   minimize.onclick = () => {
     base.className =
-      "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-pastel-grey rounded-2xl " +
-      dimensions;
+      `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+       border-2 border-topology-border rounded-2xl z-50 ` + dimensions;
     header.className = header.className + " rounded-t-2xl";
     contentArea.className = contentArea.className + " rounded-b-2xl";
     header.removeChild(minimize);
     header.appendChild(maximize);
+    canvas.appendChild(base_shadow);
   };
 
   const window_title = document.createElement("p");

src/style.css

@@ -4,19 +4,15 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-@layer base {
-    html {
-        font-family: "Poppins" sans-serif;
-        font-weight: 300;
-        font-style: normal;
-    }
-}
-
 * {
     margin: 0;
     padding: 0;
     max-width: 100%;
     overflow: hidden;
+
+    font-family: "Fira Code", sans-serif;
+    font-weight: 300;
+    font-style: normal;
 }
 
 *::-webkit-scrollbar {

src/windows/about_us.ts

@@ -1,8 +1,9 @@
 import { window } from "../components/window";
 
-export const open_about_us: () => HTMLDivElement = () => {
-  const div = document.createElement("div");
+export const open_about_us = () => {
+  if (<HTMLSpanElement>document.getElementById("about_us")) return;
 
+  const div = document.createElement("div");
+  div.id = "about_us";
   window("w-72 h-80 md:w-96 md:h-96", "About Us", div);
-  return div;
 };

src/windows/blog.ts

@@ -14,18 +14,32 @@ const posts = [
 ];
 
 export const open_blog = () => {
+  if (<HTMLSpanElement>document.getElementById("blog")) return;
   const div = document.createElement("div");
+  div.id = "blog";
 
   const initial_text = document.createElement("p");
-  initial_text.innerText = "Read the latest blog posts";
+  initial_text.className =
+    "mt-5 mb-2 text-center font-medium text-topology-border";
+  initial_text.innerText = "Read the latest blog posts".toUpperCase();
 
   const posts_wrapper = document.createElement("div");
 
   for (const post of posts) {
-    const post_element = document.createElement("a");
-    post_element.innerText = `${post.title} (${post.date})`;
-    post_element.href = post.url;
-    post_element.target = "_blank";
+    const post_element = document.createElement("span");
+    post_element.className = `mx-3 mt-4 flex flex-col`;
+    const link = document.createElement("a");
+    link.className = `text-[#f79e88] hover:text-[#fdd4ba]`;
+    link.innerText = post.title;
+    link.href = post.url;
+    link.target = "_blank";
+    const date = document.createElement("span");
+    date.className = `text-xs text-[#866678]`;
+    date.innerText = `${post.date}`;
+
+    post_element.appendChild(link);
+    post_element.appendChild(date);
+
     posts_wrapper.appendChild(post_element);
   }
 

src/windows/mission.ts

@@ -1,8 +1,9 @@
 import { window } from "../components/window";
 
-export const open_mission: () => HTMLDivElement = () => {
+export const open_mission = () => {
+  if (<HTMLSpanElement>document.getElementById("mission")) return;
   const div = document.createElement("div");
+  div.id = "mission";
 
   window("w-72 h-80 md:w-96 md:h-96", "Mission", div);
-  return div;
 };