fix close button

1 files changed, 70 insertions, 64 deletions

diff --git a/index.html b/index.html
index 0eea621..8652805 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,14 @@
 
     <div class="workspace">
 
-      <input class="radio" type="radio" id="home" name="windows_box" value="" checked="true"></input>
-      <input class="radio" type="radio" id="projects" name="windows_box" value=""></input>
+      <input class="radio" type="radio" id="close" name="windows_box" value="">
+      <input class="radio" type="radio" id="home" name="windows_box" value="" checked>
+      <input class="radio" type="radio" id="projects" name="windows_box" value="">
 
-      <input class="radio" type="radio" id="home-info" name="home_menu" checked="true">
+      <input class="radio" type="radio" id="home-info" name="home_menu" checked>
       <input class="radio" type="radio" id="home-contact" name="home_menu">
 
-      <input class="radio" type="radio" id="projects-personal" name="projects_menu" checked="true">
+      <input class="radio" type="radio" id="projects-personal" name="projects_menu" checked>
       <input class="radio" type="radio" id="projects-shards" name="projects_menu">
       <input class="radio" type="radio" id="projects-crystal" name="projects_menu">
       <input class="radio" type="radio" id="projects-vanillaos" name="projects_menu">
@@ -85,7 +86,7 @@
 	  <div class="embedded"></div>
 	</a>
 	<a class="dockelement" title="Milk outside a bag of milk outside a bag of milk" href="https://nikita-kryukov.itch.io/milk-outside-a-bag-of-milk-outside-a-bag-of-milk">
-	  <img class="square" src="./milkoutsideabagofmilk.png" alt="milk chan looking up, surrounded by the text 'milk outside a bag of milk'"/>
+	  <img class="square" src="./milkoutsideabagofmilk.png" alt="milk chan looking up, surrounded by the text 'milk outside a bag of milk'">
 	  <div class="embedded"></div>
 	</a>
 
@@ -96,7 +97,9 @@
         <div class="title-bar">
           <span>ABOUT.rtf — /home/lain</span>
           <div class="controls">
-            <span><a href="#"><img src="./close.svg"  width="18" height="18"/></a></span>
+	    <label for="close">
+	      <img src="./close.svg"  width="18" height="18" alt="close">
+	    </label>
           </div>
         </div>
         <div class="content" id="home-content-info">
@@ -108,10 +111,10 @@
 	    <p>I am currently studying Computer Science and work at Nokia as a software developer.</p>
 	  </div>
 	  <div style="justify-content: center; align-items: center; text-align: center;">
-	    <img src="./firefly.png" width="90%" max-width="400">
+	    <img src="./firefly.png" alt="a firefly resting on a finger">
 	  </div>
 	  <div>
-	    <hr style="justify-content: bottom; border-top:2px solid #A0A0A0; width: 100%">
+	    <hr style="justify-content: center; border-top:2px solid #A0A0A0; width: 100%">
 	    <p>Click the buttons in the left menu to view extra information or the deskapps in the right to open different windows! The window can also be moved around.</p>
 	  </div>
         </div>
@@ -142,7 +145,9 @@
         <div class="title-bar">
           <span>PROJECTS.rtf — /home/lain</span>
           <div class="controls">
-            <span><a href="#"><img src="./close.svg"  width="18" height="18"/></a></span>
+	    <label for="close">
+	      <img src="./close.svg"  width="18" height="18" alt="close">
+	    </label>
           </div>
         </div>
         <div class="content" id="projects-content-personal">
@@ -230,74 +235,75 @@
 	    <img src="https://futile.eu/static/buttons/futile.png" alt="button that says 'futile'">
 	  </a>
 	  <a>
-	    <iframe src="https://increm.net/badge?key=xenia" title="incremnet badge" width="88" height="31" frameborder="0" style="background-color: #d4d0c8"></iframe>
+	    <iframe src="https://increm.net/badge?key=xenia" title="incremnet badge" width="88" height="31" style="background-color: #d4d0c8; border: none;"></iframe>
 	  </a>
 	  <a href="https://nyaa.si/view/964646" target="_blank" rel="noopener noreferrer" title="watch lain now!!">
-	    <img src="lain.gif" alt="lain" width="88px" height="31px">
+	    <img src="lain.gif" alt="lain" width="88" height="31">
 	  </a>
-	  <a><img src="copland88x31.png" alt="copland os now!" width="88px" height="31px"></a>
-	  <a><img src="transrights.png" alt="trans rights now!" width="88px" height="31px"></a>
-	  <a><img src="xeniatransnow.png" alt="use linux now!" width="88px" height="31px"></a>
+	  <a><img src="copland88x31.png" alt="copland os now!" width="88" height="31"></a>
+	  <a><img src="transrights.png" alt="trans rights now!" width="88" height="31"></a>
+	  <a><img src="xeniatransnow.png" alt="use linux now!" width="88" height="31"></a>
 	</div>
       </div>
-      <script>
-	document.querySelectorAll('.window').forEach(windowEl => {
-            const titleBar = windowEl.querySelector('.title-bar');
-            let offsetX = 0, offsetY = 0, isDragging = false;
+    </div>
+    <script>
+      document.querySelectorAll('.window').forEach(windowEl => {
+          const titleBar = windowEl.querySelector('.title-bar');
+          let offsetX = 0, offsetY = 0, isDragging = false;
 
-            titleBar.addEventListener('mousedown', (e) => {
-		isDragging = true;
-		offsetX = e.clientX - windowEl.offsetLeft;
-		offsetY = e.clientY - windowEl.offsetTop;
-		windowEl.style.zIndex = 1000;
-            });
+          titleBar.addEventListener('mousedown', (e) => {
+	      isDragging = true;
+	      offsetX = e.clientX - windowEl.offsetLeft;
+	      offsetY = e.clientY - windowEl.offsetTop;
+	      windowEl.style.zIndex = 1000;
+          });
 
-            document.addEventListener('mousemove', (e) => {
-		if (isDragging) {
-                    windowEl.style.left = `${e.clientX - offsetX}px`;
-                    windowEl.style.top = `${e.clientY - offsetY}px`;
-		}
-            });
+          document.addEventListener('mousemove', (e) => {
+	      if (isDragging) {
+                  windowEl.style.left = `${e.clientX - offsetX}px`;
+                  windowEl.style.top = `${e.clientY - offsetY}px`;
+	      }
+          });
 
-            document.addEventListener('mouseup', () => {
-		isDragging = false;
-            });
-	});
-      </script>
+          document.addEventListener('mouseup', () => {
+	      isDragging = false;
+          });
+      });
+    </script>
 
-      <script>
-	let link = document.querySelectorAll(".menu-button");
+    <script>
+      let link = document.querySelectorAll(".menu-button");
 
-	link.forEach(function(elem) {
-	    elem.addEventListener("mousedown", () => {
-		elem.classList.add("ripple-effect");
-		setTimeout(() => {
-		    elem.classList.remove("ripple-effect");
-		}, 1000);
-	    })
-	});
-      </script>
+      link.forEach(function(elem) {
+	  elem.addEventListener("mousedown", () => {
+	      elem.classList.add("ripple-effect");
+	      setTimeout(() => {
+		  elem.classList.remove("ripple-effect");
+	      }, 1000);
+	  })
+      });
+    </script>
 
-      <script>
-	function updateClockAndCalendar() {
-	    const now = new Date();
-	    const hours = now.getHours();
-	    const minutes = now.getMinutes();
+    <script>
+      function updateClockAndCalendar() {
+	  const now = new Date();
+	  const hours = now.getHours();
+	  const minutes = now.getMinutes();
 
-	    const displayHours = hours < 10 ? `0${hours}` : hours;
-	    const displayMinutes = minutes < 10 ? `0${minutes}` : minutes;
-	    document.getElementById('time').textContent = `${displayHours}:${displayMinutes}`;
-	    
-	    const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
-	    const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
-	    document.getElementById('day').textContent = days[now.getDay()];
-	    document.getElementById('date').textContent = now.getDate();
-	    document.getElementById('month').textContent = months[now.getMonth()];
-	}
+	  const displayHours = hours < 10 ? `0${hours}` : hours;
+	  const displayMinutes = minutes < 10 ? `0${minutes}` : minutes;
+	  document.getElementById('time').textContent = `${displayHours}:${displayMinutes}`;
+	  
+	  const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+	  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+	  document.getElementById('day').textContent = days[now.getDay()];
+	  document.getElementById('date').textContent = now.getDate();
+	  document.getElementById('month').textContent = months[now.getMonth()];
+      }
 
 
-	updateClockAndCalendar();
-	setInterval(updateClockAndCalendar, 1000);
-      </script>
+      updateClockAndCalendar();
+      setInterval(updateClockAndCalendar, 1000);
+    </script>
   </body>
 </html>