make website more accessible

drinklilt · Apr 20, 2024 · 1c357a2 · 1c357a2
1 parent fb2bf92
commit 1c357a2
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "bunx @11ty/eleventy",
+    "serve": "bunx @11ty/eleventy --serve",
+    "dev": "bunx @11ty/eleventy --serve --watch"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1"

diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk
@@ -1,23 +1,23 @@
 <footer>
     <div>
-        <span><a rel="me" href="https://hachyderm.io/@lilt" target="_blank">mastodon</a></span>
+        <span><a rel="me" href="https://hachyderm.io/@lilt" >mastodon</a></span>
         <span>|</span>
-        <span><a href="https://github.com/drinklilt" target="_blank">github</a></span>
+        <span><a href="https://github.com/drinklilt" >github</a></span>
         <span>|</span>
-        <span><a href="https://github.com/drinklilt/themorningstar.dev" target="_blank">source</a></span>
+        <span><a href="https://github.com/drinklilt/themorningstar.dev" >source</a></span>
     </div>
     <br>
     <div>
-        <a href="https://cyber.dabamos.de/88x31/" target="_blank"><img src="/img/88x31.gif" alt="88x31 badge"></a>
-        <a href="https://fedoraproject.org/" target="_blank"><img src="/img/fedora.gif" alt="Powered by Fedora badge"></a>
-        <a href="https://mozilla.org/firefox" target="_blank"><img src="/img/fftake.gif" alt="Firefox - Take back the web badge"></a>
-        <a href="https://hachyderm.io/@lilt" target="_blank"><img src="/img/mastodon_gray.gif" alt="Follow me on mastodon button\"></a>
-        <a href="https://github.com/drinklilt" target="_blank"><img src="/img/github-check.gif" alt=""></a>
-        <img src="/img/tohell.gif" alt="Go Straight To Hell !!!">
-        <img src="/img/nonbinary.gif" alt="Non-Binary pride badge">
-        <img src="/img/internetprivacy.gif" alt="">
-        <img src="/img/queerpride.gif" alt="Queer pride badge">
-        <img src="/img/hail_satan.gif" alt="">
-        <img src="/img/button-devils.gif" alt="Meow">
+        <a href="https://cyber.dabamos.de/88x31/"><img src="/img/88x31.gif" alt="88x31 badge"></a>
+        <a href="https://fedoraproject.org/"><img src="/img/fedora.gif" alt="88x31 badge with the text: Powered by Fedora"></a>
+        <a href="https://mozilla.org/firefox"><img src="/img/fftake.gif" alt="88x31 badge with the text: Firefox - Take back the web"></a>
+        <a href="https://hachyderm.io/@lilt"><img src="/img/mastodon_gray.gif" alt="88x31 badge with the text: Follow me on mastodon"></a>
+        <a href="https://github.com/drinklilt"><img src="/img/github-check.gif" alt="88x31 badge with the text: Check out my github"></a>
+        <img src="/img/tohell.gif" alt="88x31 badge - Go Straight To Hell !!!">
+        <img src="/img/nonbinary.gif" alt="88x31 badge for non-binary pride">
+        <img src="/img/internetprivacy.gif" alt="88x31 badge with a spinning globe with the text: internet privacy now">
+        <img src="/img/queerpride.gif" alt="88x31 badge for queer pride">
+        <img src="/img/hail_satan.gif" alt="88x31 badge with a pink background with a black pentagram with text: Hail Satan">
+        <img src="/img/button-devils.gif" alt="88x31 badge with a cat saying meow">
     </div>
 </footer>
diff --git a/src/_includes/components/header.njk b/src/_includes/components/header.njk
@@ -1,4 +1,5 @@
 <header id="site-header">
+    <a href="#content" class="skip">Skip to content</a>
     <h1>{{ site.title }}</h1>
     <nav>
         <span><a href="/">home</a></span>

diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
@@ -6,11 +6,11 @@
     <title>{{ title if title else site.title }}</title>
     <link rel="stylesheet" href="/css/bundle.css">
 </head>
-<body>
+<body style="background-color: #252525;">
     {% include "components/header.njk" %}
-    <div id="content">
+    <main id="content">
         {{ content | safe }}
-    </div>
+    </main>
     {% include "components/footer.njk" %}
 </body>
 </html>
diff --git a/src/index.njk b/src/index.njk
@@ -5,7 +5,7 @@ layout: "layouts/default.njk"
 <p>
     Hey! I'm {{site.author}}<sup>({{site.pronouns}})</sup>; welcome to my website! I do many things, but here you'll find my blog, portfolio, and maybe some demos in the future. 
     By day, I'm a .NET software developer, and by night, I'm still a developer, but I use random technologies that I find interesting.
-    Currently, I am learning functional programming with <a href="https://gleam.run/" target="_blank">gleam</a>, and I'm making this website with <a href="https://www.11ty.dev/" target="_blank">eleventy</a>.
+    Currently, I am learning functional programming with <a href="https://gleam.run/">gleam</a>, and I'm making this website with <a href="https://www.11ty.dev/">eleventy</a>.
     <br>
     If you want to get in touch, check out the <a href="/contact/">contact</a> page.
 </p>
diff --git a/src/projects.njk b/src/projects.njk
@@ -13,7 +13,7 @@ pagination:
     {% for project in projects %}
         <li>
             <h2><a href="{{ project.url }}">{{ project.data.title }}</a></h2>
-            <p>{{ project.data.description }} · <a href="{{ project.data.source}}" target="_blank">source</a></p>
+            <p>{{ project.data.description }} · <a href="{{ project.data.source}}">source</a></p>
         </li>
     {% endfor %}
 </ul>

diff --git a/src/static/css/bundle.css b/src/static/css/bundle.css
@@ -1,13 +1,27 @@
 body {
   font-family: "Georgia", sans-serif;
   font-size: 16px;
-  font-size: 16px;
   line-height: 1.6;
   color: #cccccc;
   /* Set the background to a cool tile */
   background: url("/img/5012.png");
 }
 
+.skip {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skip:focus {
+  position: static;
+  width: auto;
+  height: auto;
+}
+
 #site-header,
 footer {
   text-align: center;
@@ -19,8 +33,8 @@ footer {
 }
 
 footer {
-    border-top: 1px solid #b894ab;
-    padding-top: 5px;
+  border-top: 1px solid #b894ab;
+  padding-top: 5px;
 }
 
 h1,
@@ -51,6 +65,11 @@ a:hover {
   color: #d450a5;
 }
 
+a:focus {
+  color: #d450a5;
+  outline: 1px dotted #d450a5;
+}
+
 @media (max-width: 768px) {
   h1,
   h2,
@@ -67,9 +86,9 @@ a:hover {
 }
 
 #content {
-    max-width:1000px;
-    margin-left:auto;
-    margin-right:auto;
-    padding-top:2em;
-    padding-bottom:2em;
-  }
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}