removed most tailwind

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^4.0.0",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/tailwind": "^5.1.0",
     "astro": "^3.0.2",
     "svelte": "^4.2.0",
     "tailwindcss": "^3.3.3",

pnpm-lock.yaml

@@ -1,11 +1,15 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@astrojs/svelte':
     specifier: ^4.0.0
     version: 4.0.4(astro@3.6.4)(svelte@4.2.8)(typescript@5.3.3)(vite@5.0.11)
   '@astrojs/tailwind':
-    specifier: ^5.0.0
+    specifier: ^5.1.0
     version: 5.1.0(astro@3.6.4)(tailwindcss@3.4.1)
   astro:
     specifier: ^3.0.2
@@ -115,7 +119,7 @@ packages:
       tailwindcss: ^3.0.24
     dependencies:
       astro: 3.6.4(typescript@5.3.3)
-      autoprefixer: 10.4.16(postcss@8.4.33)
+      autoprefixer: 10.4.19(postcss@8.4.33)
       postcss: 8.4.33
       postcss-load-config: 4.0.2(postcss@8.4.33)
       tailwindcss: 3.4.1
@@ -1237,15 +1241,15 @@ packages:
       - typescript
     dev: false
 
-  /autoprefixer@10.4.16(postcss@8.4.33):
-    resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
+  /autoprefixer@10.4.19(postcss@8.4.33):
+    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.22.2
-      caniuse-lite: 1.0.30001577
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001612
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1330,12 +1334,23 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001577
+      caniuse-lite: 1.0.30001612
       electron-to-chromium: 1.4.632
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
     dev: false
 
+  /browserslist@4.23.0:
+    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001612
+      electron-to-chromium: 1.4.749
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+    dev: false
+
   /buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
     dependencies:
@@ -1361,8 +1376,8 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
-  /caniuse-lite@1.0.30001577:
-    resolution: {integrity: sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==}
+  /caniuse-lite@1.0.30001612:
+    resolution: {integrity: sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==}
     dev: false
 
   /ccount@2.0.1:
@@ -1648,6 +1663,10 @@ packages:
     resolution: {integrity: sha512-JGmudTwg7yxMYvR/gWbalqqQiyu7WTFv2Xu3vw4cJHXPFxNgAk0oy8UHaer8nLF4lZJa+rNoj6GsrKIVJTV6Tw==}
     dev: false
 
+  /electron-to-chromium@1.4.749:
+    resolution: {integrity: sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q==}
+    dev: false
+
   /emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
     dev: false
@@ -4144,6 +4163,17 @@ packages:
       picocolors: 1.0.0
     dev: false
 
+  /update-browserslist-db@1.0.13(browserslist@4.23.0):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.23.0
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -4393,7 +4423,3 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

src/components/aboutme.astro

@@ -3,28 +3,27 @@
   class="window"
   style="width: 70%; height: auto; position: absolute; left: 15%; top: 22%; display: none;"
 >
-  <div id="aboutmeheader" class="title-bar">
-    <div class="title-bar-text">About Me</div>
+  <div id="aboutmeheader" class="title-bar" style="background-color: #0078d7; color: #fff; display: flex; justify-content: space-between; align-items: center;">
+    <div class="title-bar-text" style="font-weight: bold;">About Me</div>
     <div class="title-bar-controls">
-      <button class="close" aria-label="Minimize"></button>
-      <button class="close" aria-label="Close"></button>
+      <button class="close" aria-label="Minimize" style="background-color: silver;"></button>
+      <button class="close" aria-label="Close" style="background-color: silver;"></button>
     </div>
   </div>
-  <div class="window-body">
+  <div class="window-body" >
     <div class="field-row-stacked">
       <!-- prettier-ignore -->
       <textarea
         readonly
         id="text20"
-        style="font-size: 22px; resize: none; padding: 10px; height: 25vh; font-"
-        >I'm Simon, a self taught programmer 
-        
-My programming skills include proficiency in Javascript, Typescript, Html, and CSS 
+        style="font-size: 22px; resize: none; padding: 10px; height: 25vh; font-family: inherit; width: 100%; background-color: #fff; border: 1px solid #ccc;  box-sizing: border-box;"
+        >I'm Simon, a self taught programmer
 
-My Web Framework knowlage includes Sveltekit, React, Astro 
+My programming skills include proficiency in Javascript, Typescript, Html, and CSS
 
-Although not entirely proficient, I also write in Python and Golang from time to time
-      </textarea>
+My Web Framework knowlage includes Sveltekit, React, Astro
+
+Although not entirely proficient, I also write in Python and Golang from time to time</textarea>
     </div>
   </div>
 </div>

src/components/contact.astro

@@ -6,8 +6,8 @@
 	<div id="contactheader" class="title-bar">
 		<div class="title-bar-text">Contact</div>
 		<div class="title-bar-controls">
-			<button class="close" aria-label="Minimize"></button>
-			<button class="close" aria-label="Close"></button>
+			<button class="close" aria-label="Minimize" style="background-color: silver;"></button>
+			<button class="close" aria-label="Close" style="background-color: silver;"></button>
 		</div>
 	</div>
 	<div class="window-body">

src/components/redirect.astro

@@ -1,48 +1,36 @@
 <div
-	id="redirect"
-	class="window"
-	style="position: absolute; left: 12%; top: 22%; display: none;"
-	data-redirectUrl="test"
+    id="redirect"
+    class="window"
+    style="position: absolute; left: 12%; top: 22%; display: none; width: 30%;"
+    data-redirectUrl="test"
 >
-	<div id="redirectheader" class="title-bar">
-		<div class="title-bar-text">Redirect</div>
-		<div class="title-bar-controls">
-			<button class="close" aria-label="Minimize"></button>
-			<button class="close" aria-label="Close"></button>
-		</div>
-	</div>
-	<div class="window-body">
-		<!-- prettier-ignore -->
-		<h2>You are about to be redirected to</h2>
-		<section class="field-row" style="justify-content: flex-end">
-			<button id="okButton">OK</button>
-			<button class="close">Cancel</button>
-		</section>
-	</div>
+    <div id="redirectheader" class="title-bar">
+        <div class="title-bar-text">Redirect</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>
+        </div>
+    </div>
+    <div class="window-body">
+        <!-- prettier-ignore -->
+        <h2 style="margin-bottom: 10px; font-size: 22px;">You are about to be redirected to</h2>
+        <section class="field-row" style="justify-content: flex-end">
+            <button id="okButton" style="margin-top: 0;">OK</button>
+            <button class="close" style="margin-top: 0;">Cancel</button>
+        </section>
+    </div>
 </div>
 
 <style>
-	#redirect {
-		width: 30%;
-	}
+    @media (max-width: 540px) {
+        #redirect {
+            width: 80% !important;	
+        }
+    }
 
-	/* Style for tablets, desktops, and larger devices */
-	@media (max-width: 540px) {
-		#redirect {
-			width: 80%;
-		}
-	}
-	@media (max-width: 1080px) and (min-width: 540px) {
-		#redirect {
-			width: 60%;
-		}
-	}
-	button {
-		margin-top: 0;
-	}
-
-	h2 {
-		margin-bottom: 10px;
-		font-size: 22px;
-	}
-</style>
+    @media (max-width: 1080px) and (min-width: 540px) {
+        #redirect {
+            width: 60% !important;
+        }
+    }
+</style>

src/components/taskbar.astro

@@ -3,9 +3,9 @@
 ---
 
 <div
-  class="bg-gray-300 h-14 w-full absolute bottom-0 flex px-4 py-2 justify-between shadow-[0_-2px_#fffdfc,0_-4px_#cce9eb] z-0"
+    style="background-color: #D4D0C8; height: 3.5rem; width: 100%; position: absolute; bottom: 0; display: flex; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; justify-content: space-between; box-shadow: 0 -2px #fffdfc, 0 -4px #cce9eb; z-index: 0;"
 >
-  <button >
+  <button>
     <!-- <img class="h-full w-full" src={start.src} alt="start" /> -->
     <h1 id="start-button"></h1>
   </button>

src/pages/index.astro

@@ -217,12 +217,12 @@ apps = apps.map((item) => {
 ---
 
 <Layout title="Simo">
-	<div class="flex">
-		<div class="h-80 flex flex-col items-start">
+	<div style="display: flex;">
+		<div style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;">
 			{row1Items.map((item) => <App {item} />)}
 		</div>
 
-		<div class="h-80 flex flex-col items-start">
+		<div style="height: 20rem; display: flex; flex-direction: column; align-items: flex-start;">
 			{row2Items.map((item) => <App {item} />)}
 		</div>
 	</div>