From 3c36496c7bd60d6cfe8ccbca11df646f5a52bb6e Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Sun, 16 Feb 2025 11:55:09 -0500
Subject: [PATCH] update index.html and styles.css to improve accessibility and
 enhance visual presentation

---
 index.html | 43 ++++++++++++++++++++++++++++++-------------
 styles.css | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 59 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index 88d1580..01bb087 100644
--- a/index.html
+++ b/index.html
@@ -1,25 +1,42 @@
 <!DOCTYPE html>
-<!-- saved from url=(0017)https://pacnp.al/ -->
-<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="PacNPal's personal space - Exploring retro tech, gaming, and roller coasters. Creator of Steadirect.com for Steam invite links.">
+    <meta name="keywords" content="retro computing, vintage computers, gaming, roller coasters, steam links, pacnpal">
+    <meta property="og:title" content="PacNP.al - PacNPal's Space">
+    <meta property="og:description" content="Exploring video games, vintage computers, roller coasters, and the web.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://pacnp.al">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="PacNP.al">
+    <meta name="twitter:description" content="Exploring video games, vintage computers, roller coasters, and the web.">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link href="https://fonts.cdnfonts.com/css/chicagoflf" rel="stylesheet">
     <title>PacNP.al - PacNPal's Space</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <header>
+    <a href="#main" class="skip-link" style="position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 999999;">Skip to main content</a>
+    
+    <header role="banner">
         <h1>Welcome to PacNP.al</h1>
         <p>Exploring video games, vintage computers, roller coasters, and the web.</p>
     </header>
-    <section id="about">
-        <h2>About PacNPal</h2>
-        <p>A retro tech enthusiast and a gamer, diving deep into coasters and vintage computing.</p>
-        <p>Find me on <a href="https://bsky.app/profile/pacnp.al" target="_blank" rel="noopener noreferrer">BlueSky</a>.</p>
-    </section>
-    <section id="sites">
-        <h2>My Sites</h2>
-        <p><a href="https://steadirect.com" target="_blank" rel="noopener noreferrer">Steadirect.com</a> - Create clickable links for protocol URLs like Steam invites.</p>
-    </section>
+
+    <main id="main" role="main">
+        <section id="about" aria-labelledby="about-heading">
+            <h2 id="about-heading">About PacNPal</h2>
+            <p>A retro tech enthusiast and a gamer, diving deep into coasters and vintage computing.</p>
+            <p>Find me on <a href="https://bsky.app/profile/pacnp.al" target="_blank" rel="noopener noreferrer">BlueSky</a>.</p>
+        </section>
+
+        <section id="sites" aria-labelledby="sites-heading">
+            <h2 id="sites-heading">My Sites</h2>
+            <p><a href="https://steadirect.com" target="_blank" rel="noopener noreferrer">Steadirect.com</a> - Create clickable links for protocol URLs like Steam invites.</p>
+        </section>
+    </main>
 <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;rayId&quot;:&quot;912ee97cdcebeb5e&quot;,&quot;version&quot;:&quot;2025.1.0&quot;,&quot;r&quot;:1,&quot;token&quot;:&quot;1cef99b58ec34b74ae9a46890381b17f&quot;,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfSpeedBrain&quot;:true,&quot;cfCacheStatus&quot;:true}}}" crossorigin="anonymous"></script>
 
 
diff --git a/styles.css b/styles.css
index a82396b..0d701e7 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,23 @@
+.skip-link:focus {
+    position: fixed !important;
+    left: 50% !important;
+    transform: translateX(-50%);
+    top: 10px !important;
+    width: auto !important;
+    height: auto !important;
+    padding: 10px 20px;
+    background: #ffcc00;
+    color: #1e1e2f;
+    font-weight: bold;
+    border-radius: 4px;
+    text-decoration: none;
+    z-index: 999999;
+    overflow: visible !important;
+}
+
+
 body {
-    font-family: 'Courier New', monospace;
+    font-family: 'ChicagoFLF', 'Courier New', monospace;
     background: linear-gradient(135deg, #1e1e2f, #1e2f4f);
     color: #fff;
     text-align: center;
@@ -23,10 +41,16 @@ section {
     border-radius: 8px;
 }
 a {
-    color: #7fccff;
-    text-decoration: none;
-    transition: color 0.3s ease;
+    color: #99ddff;
+    text-decoration: underline;
+    transition: color 0.3s ease, text-decoration 0.3s ease;
 }
-a:hover {
+a:hover, a:focus {
     color: #ffcc00;
+    text-decoration: underline;
+    outline: none;
+}
+a:focus-visible {
+    outline: 2px solid #ffcc00;
+    outline-offset: 2px;
 }
