pacnpal/pacnpal-site
1
0
Fork 0
mirror of https://github.com/pacnpal/pacnpal-site.git synced 2025-12-20 04:21:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

update index.html and styles.css to improve accessibility and enhance visual presentation

Browse Source
This commit is contained in:
pacnpal
2025-02-16 11:55:09 -05:00
parent 1fee683d6d
commit 3c36496c7b
2 changed files with 59 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -1,25 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- saved from url=(0017)https://pacnp.al/ --> <html lang="en">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <title>PacNP.al - PacNPal's Space</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <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> <h1>Welcome to PacNP.al</h1>
<p>Exploring video games, vintage computers, roller coasters, and the web.</p> <p>Exploring video games, vintage computers, roller coasters, and the web.</p>
</header> </header>
<section id="about">
<h2>About PacNPal</h2> <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>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> <p>Find me on <a href="https://bsky.app/profile/pacnp.al" target="_blank" rel="noopener noreferrer">BlueSky</a>.</p>
</section> </section>
<section id="sites">
<h2>My Sites</h2> <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> <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> </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> <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>

34
styles.css
View File

@@ -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 { body {
font-family: 'Courier New', monospace; font-family: 'ChicagoFLF', 'Courier New', monospace;
background: linear-gradient(135deg, #1e1e2f, #1e2f4f); background: linear-gradient(135deg, #1e1e2f, #1e2f4f);
color: #fff; color: #fff;
text-align: center; text-align: center;
@@ -23,10 +41,16 @@ section {
border-radius: 8px; border-radius: 8px;
} }
a { a {
color: #7fccff; color: #99ddff;
text-decoration: none; text-decoration: underline;
transition: color 0.3s ease; transition: color 0.3s ease, text-decoration 0.3s ease;
} }
a:hover { a:hover, a:focus {
color: #ffcc00; color: #ffcc00;
text-decoration: underline;
outline: none;
}
a:focus-visible {
outline: 2px solid #ffcc00;
outline-offset: 2px;
} }