Improve accessibility

content/art/stats/_index.md

@@ -1,12 +1,12 @@
 ---
 title: Stats
 layout: art-stats
-total: 186
+total: 185
 years:
 - year: 2019
   num: 60
 - year: 2022
-  num: 46
+  num: 45
 - year: 2020
   num: 30
 - year: 2021

scripts/gen_art.py

@@ -123,6 +123,9 @@ for filename in os.listdir(art_data_directory):
     if os.path.isfile(f):
         filename_without_ext = os.path.splitext(filename)[0]
 
+        if filename_without_ext == ".DS_Store":
+            continue
+
         with open(f, "r") as file:
             year, characters, tags = parse_art_json(art_output_directory, filename_without_ext, file)
 

themes/red/assets/css/site.css

@@ -101,18 +101,18 @@ body {
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --primary-accent: #ce4545;
+        --primary-accent: #a3c3ff;
         --secondary-accent: #c99192;
         --background-primary: #34313a;
         --background-secondary: #3c3a44;
         --background-tertiary: #2e2c34;
         --border-color: #515860;
         --text-color: #fbeded;
-        --link-visited: #ad1616;
+        --link-visited: #75A6FF;
         --extra-color: #504e5a;
     }
 
-    .ext-link {
+    .external-link {
         filter: invert(100%);
     }
 }

themes/red/layouts/_default/art-detail.html

@@ -16,7 +16,7 @@
                     </video>
                 </div>
             {{ else }}
-                <img class="article-img" style="display: block; max-height: 1000px; margin-left: auto; margin-right: auto;" alt="{{ $.Params.alt_text }}" title="{{ $.Params.alt_text }}" src="{{ .RelPermalink }}"/>
+                <img style="display: block; max-height: 1000px; margin-left: auto; margin-right: auto; width: auto" alt="{{ $.Params.alt_text }}" title="{{ $.Params.alt_text }}" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" />
             {{ end }}
         {{ end }}
     {{ end }}

themes/red/layouts/_default/art.html

@@ -8,10 +8,10 @@
     {{ if eq $paginator.PageNumber 1}}
         {{ $alertimg := resources.Get "alert.png" }}
         {{ with $.Params.new_banner }}
-        <div class="new-banner"><img width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/><b>{{ . }}</b><img width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/></div>
+        <div class="new-banner"><img alt="Alert Icon" width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/><b>{{ . }}</b><img alt="Alert Icon" width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/></div>
         {{ end }}
 
-        <div class="new-banner"><img width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/><b>Contains risque art, so you should probably not view this on a work computer.</b><img width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/></div>
+        <div class="new-banner"><img alt="Alert Icon" width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/><b>Contains risque art, so you should probably not view this on a work computer.</b><img alt="Alert Icon" width="16" height="16" id="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"/></div>
 
         <p>Welcome to my art gallery! I have saved my art since 2016, and this site contains the most complete archive of my work.</p>
 

themes/red/layouts/partials/head.html

@@ -10,7 +10,12 @@
         <title>{{.Site.Title}}</title>
     {{ else }}
         <title>{{.Site.Title}} / {{ .Title }}</title>
+
+        {{ if .Summary }}
         <meta name="description" content="{{ .Summary }}">
+        {{ else }}
+        <meta name="description" content="{{ .Title }}">
+        {{ end }}
     {{ end }}
 
     <link href="/blog/index.xml" rel="alternate" type="application/rss+xml" title="{{ $.Site.Author.name }}'s blog">

themes/red/layouts/partials/header.html

@@ -1,4 +1,4 @@
 {{ with resources.Get .Site.Params.profile_picture }}
-	<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"/>
+	<img alt="Profile Picture" title="Profile Picture" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"/>
 {{ end }}
 <h1>{{ .Site.Title }}</h1>

themes/red/layouts/partials/render-art.html

@@ -21,7 +21,7 @@
                 {{ $year = index $split 3 }}
         {{ end }}
 
-        <a class="no-decoration grid-item" href="{{ .Permalink }}">
+        <a aria-label="Gallery Item" class="no-decoration grid-item" href="{{ .Permalink }}">
 
         {{ $path := printf "/%s/%d/%.2d/%s" $base (int $year) (int $month) $filename_without_ext}}
                 {{ $title := .Params.title }}
@@ -43,7 +43,7 @@
                                         <img alt="Viewable Animation" title="Viewable Animation" style="z-index: 1; position: absolute; left: 10px; top: 10px" src="{{ .Permalink }}" />
                                 {{ end }}
                         {{ end }}
-                        
+
                         <img  width="{{ .Width }}" height="{{ .Height }}" alt="{{ $title }}" title="{{ $title }}" src="{{ .Permalink }}">
                 {{ else }}
                         <p>Thumbnail not found!</p>

themes/red/layouts/shortcodes/recent-posts.html

@@ -1,10 +1,12 @@
 <h3>Recent Blog Posts</h3>
 
 <div class="generic-con">
+    <ul style="padding: 0">
     {{ range first 3 (where .Site.Pages "Type" "blog").ByDate.Reverse }}
         <li style="margin-left: 10px; list-style-type: square;">
             <a href="{{ .Permalink }}">{{ .Title }}</a>
             <p><i>{{ .Summary }}</i></p>
         </li>
     {{ end }}
+    </ul>
 </div>