From ffadaef5840cbea0d204dca4e8d70d34a4ce815d Mon Sep 17 00:00:00 2001 From: droak Date: Wed, 22 May 2024 15:33:40 +0100 Subject: [PATCH] use fira code font; fix maximize/minimize; disallow multiple opens; add blog articles --- src/components/window.ts | 21 ++++++++++++--------- src/style.css | 12 ++++-------- src/windows/about_us.ts | 7 ++++--- src/windows/blog.ts | 24 +++++++++++++++++++----- src/windows/mission.ts | 5 +++-- 5 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/components/window.ts b/src/components/window.ts index b97af3c..0cf280c 100644 --- a/src/components/window.ts +++ b/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 = "X"; + " text-topology-bg !h-6 !w-6 font-sans'>X"; 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 = - "+"; + "+"; 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 = "-"; + minimize.className = genericBtnStyle + " bg-topology-green left-12"; + minimize.innerHTML = + "-"; 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"); diff --git a/src/style.css b/src/style.css index 638150a..6339d2b 100644 --- a/src/style.css +++ b/src/style.css @@ -4,19 +4,15 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&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 { diff --git a/src/windows/about_us.ts b/src/windows/about_us.ts index c7bcbbb..46f6d8e 100644 --- a/src/windows/about_us.ts +++ b/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 (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; }; diff --git a/src/windows/blog.ts b/src/windows/blog.ts index 3ede69b..b83464a 100644 --- a/src/windows/blog.ts +++ b/src/windows/blog.ts @@ -14,18 +14,32 @@ const posts = [ ]; export const open_blog = () => { + if (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); } diff --git a/src/windows/mission.ts b/src/windows/mission.ts index b9c8073..e6cbaac 100644 --- a/src/windows/mission.ts +++ b/src/windows/mission.ts @@ -1,8 +1,9 @@ import { window } from "../components/window"; -export const open_mission: () => HTMLDivElement = () => { +export const open_mission = () => { + if (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; };