pgp better

src/components/pgp.astro

@@ -1,18 +1,12 @@
-<div
-	id="pgp"
-	class="window"
-	style="position: absolute; left: 15%; top: 22%; display: none;"
->
-	<div id="pgpheader" class="title-bar">
-		<div class="title-bar-text"> 
-            <a style="font-size: 15px;" href="https://pgp.simo.ng">https://pgp.simo.ng</a>
+<div id="pgp" class="window" style="position: absolute; display: none;">
+	<div class="title-bar">
+		<div class="title-bar-text">
+			<a style="font-size: 15px;" href="https://pgp.simo.ng"
+				>https://pgp.simo.ng</a
+			>
 		</div>
 		<div class="title-bar-controls">
-			<button
-				class="close"
-				aria-label="Minimize"
-				style="background-color: silver;"></button>
-			<button class="close" aria-label="Close" style="background-color: silver;"
+			<button id="minimize" aria-label="Close" style="background-color: silver;"
 			></button>
 		</div>
 	</div>
@@ -68,22 +62,33 @@ NQ==
 	</div>
 </div>
 
+<script>
+	document.querySelector("#minimize").addEventListener("click", () => {
+		let window = document.getElementById("pgp");
+
+		window.classList.remove("fullscreen");
+
+		window.style.display = "none";
+
+});
+</script>
+
 <style>
 	/* Default style for mobile and smaller devices */
 	#pgp {
-		width: 50%;
-		height: 700px;
+		/* transition: all 0.4s linear; */
+		height: 100%;
+		width: 100%;
+
+		animation: createBox 0.25s;
 	}
 
-	Style for tablets, desktops, and larger devices
-	@media (max-width: 540px) {
-		#pgp {
-			width: 80%;
+	@keyframes createBox {
+		from {
+			transform: scale(0);
 		}
-	}
-	@media (max-width: 1080px) and (min-width: 540px) {
-		#pgp {
-			width: 60%;
+		to {
+			transform: scale(1);
 		}
 	}
 </style>

src/pages/index.astro

@@ -188,6 +188,7 @@ let apps: app[] = [
 		row: 2,
 		onclick: () => {
 			raiseUpSpec("pgp");
+			document.getElementById("pgp").classList.add("fullscreen");
 			document.getElementById("pgp").style.display = "block";
 		},
 	},
@@ -228,29 +229,36 @@ apps = apps.map((item) => {
 ---
 
 <Layout title="Simo">
-	<div style="display: flex;">
-		<div style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;">
-			{row1Items.map((item) => <App {item} />)}
+	<div style="width: 100%; height: calc(100vh - 3.5rem); ">
+		<Pgp />
+
+		<div style="display: flex;">
+			<div
+				style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;"
+			>
+				{row1Items.map((item) => <App {item} />)}
+			</div>
+
+			<div
+				style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;"
+			>
+				{row2Items.map((item) => <App {item} />)}
+			</div>
 		</div>
 
-		<div style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;">
-			{row2Items.map((item) => <App {item} />)}
-		</div>
-	</div>
-</Layout>
 
-<Aboutme />
-<Redirect />
-<Contact />
-<Taskbar />
-<Pgp />
 
-<Projects projects={projectsArr} />
-
-<!-- Projects -->
-<Summize />
-<Notion />
+		<Aboutme />
+		<Redirect />
+		<Contact />
+		<Projects projects={projectsArr} />
+		<Summize />
+		<Notion />
 
+		
+	</div>
+	<Taskbar />
+</Layout>
 <script define:vars={{ apps, projectsArr, clientFunctions }}>
 	for (func in clientFunctions) {
 		eval(clientFunctions[func]);
@@ -321,7 +329,7 @@ apps = apps.map((item) => {
 	apps.forEach((app) => {
 		let itemName = app.name.replace(" ", "");
 
-		// console.info(document.getElementById(app.name));
+		console.log(itemName)
 
 		if (app.onclick == "undefined") {
 			return;

src/styles/global.css

@@ -3,7 +3,18 @@
 @tailwind utilities;
 
 @layer base {
-  * {
-    @apply font-sans;
-  }
-}
+	* {
+		@apply font-sans;
+	}
+}
+
+
+
+.fullscreen {
+	z-index: 9999 !important;
+	width: 100% !important;
+	height: calc(100vh - 3.5rem) !important;
+	top: 0px !important;
+	left: 0px !important;
+  
+}