Skip to content

Commit 89c1e5a

Browse files
committed
Lots of small tweaks to improve accessibility and consistency
1 parent ea0b1f4 commit 89c1e5a

File tree

9 files changed

+34
-28
lines changed

9 files changed

+34
-28
lines changed

src/globals/site.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
"email": "javascriptmn@gmail.com"
1010
},
1111
"navigation": [
12+
{
13+
"path": "/",
14+
"text": "Home"
15+
},
1216
{
1317
"path": "/sponsors/",
1418
"text": "Sponsors"

src/globals/sponsors.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
33
"showOnHome": true,
4-
"section": "Host 🌎",
4+
"section": "Host <span role=\"img\" aria-label=\"earth\">🌎</span>",
55
"sponsors": [
66
{
77
"imgSrc": "/sponsors/logo-wework.svg",
@@ -12,7 +12,7 @@
1212
},
1313
{
1414
"showOnHome": true,
15-
"section": "Diamond 💎",
15+
"section": "Diamond <span role=\"img\" aria-label=\"diamond\">💎</span>",
1616
"sponsors": [
1717
{
1818
"imgSrc": "/sponsors/logo-twilio.svg",
@@ -38,12 +38,12 @@
3838
},
3939
{
4040
"showOnHome": false,
41-
"section": "Gold 🥇",
41+
"section": "Gold <span role=\"img\" aria-label=\"gold medal\">🥇</span>",
4242
"sponsors": []
4343
},
4444
{
4545
"showOnHome": false,
46-
"section": "Silver 🥈",
46+
"section": "Silver <span role=\"img\" aria-label=\"silver medal\">🥈</span>",
4747
"sponsors": []
4848
}
4949
]

src/includes/footer.njk

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
class="flex justify-center items-start space-x-16 divide-x-2 divide-gray-100 divide"
55
>
66
<div class="px-2">
7-
<h5
7+
<p
88
class="uppercase inline-block bg-black text-white font-bold px-4 mb-2 transform -rotate-1"
9+
id="footer-meetup"
910
>
1011
Meetup
11-
</h5>
12-
<ul>
12+
</p>
13+
<ul aria-describedby="footer-meetup">
1314
{% for link in site.navigation %}
1415
<li>
1516
<a class="hover:underline" href="{{ link.path | url }}"
@@ -20,12 +21,13 @@
2021
</ul>
2122
</div>
2223
<div class="px-2">
23-
<h5
24+
<p
2425
class="uppercase inline-block bg-black text-white font-bold px-4 mb-2 transform rotate-1"
26+
id="footer-connect"
2527
>
2628
Connect
27-
</h5>
28-
<ul>
29+
</p>
30+
<ul aria-describedby="footer-connect">
2931
{% for link in site.connect %}
3032
<li>
3133
<a class="hover:underline" href="{{ link.href }}"

src/includes/header.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div
4646
class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-between"
4747
>
48-
<div class="flex-shrink-0">
48+
<div class="flex-shrink-0 self-center">
4949
<a href="{{ '/' | url }}" class="flex sm:hidden w-auto">
5050
<img
5151
class="h-8"

src/includes/layouts/prose.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
layout: base
33
---
44

5-
<div class="container mx-auto mt-10 p-2">
5+
<div class="container mx-auto mt-8 p-2">
66
<div class="prose mx-auto">{{ content | safe }}</div>
77
</div>

src/includes/nextEvent.njk

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% set event = events | rejectattr('hidden') | first %}
22

3-
<div class="mb-16">
3+
<div class="mb-20">
44
<h2
55
class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
66
>
@@ -25,13 +25,13 @@
2525
{{ event.location }}
2626
</p>
2727
<p>
28-
<a href="{{ event.link }}" class="text-lg font-bold underline">Details &amp; RSVP</a>
28+
<a href="{{ event.link }}" class="text-lg font-bold hover:underline">Details &amp; RSVP</a>
2929
</p>
3030
</div>
3131
{# fallback #}
3232
<div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
3333
id="upcoming-event-fallback">
34-
<a href="https://www.meetup.com/javascriptmn/" class="underline">Check
34+
<a href="https://www.meetup.com/javascriptmn/" class="hover:underline">Check
3535
Meetup.com for updates</a>
3636
</div>
3737
</div>

src/index.njk

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ changeFreq: daily
101101
<h2
102102
class="inline-block bg-black text-white text-2xl font-bold px-4 transform -rotate-1"
103103
>
104-
Speaking
104+
Speak
105105
</h2>
106106
</div>
107107
<div
@@ -142,15 +142,15 @@ changeFreq: daily
142142
{% for section in sponsors %}
143143
{% if section.showOnHome === true %}
144144
<div class="w-2/3 mx-auto mb-4">
145-
<h3 class="font-bold text-2xl">{{ section.section }}</h3>
145+
<h3 class="font-bold text-2xl">{{ section.section | safe }}</h3>
146146
<div class="grid sm:grid-cols-4 sm:gap-2 grid-cols-none space-y-4 sm:space-y-0">
147147
{% for sponsor in section.sponsors %}
148148
<div class="flex justify-center items-center">
149149
<a
150150
href="{{ sponsor.href }}"
151151
target="_blank"
152152
rel="noopener noreferrer"
153-
class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4"
153+
class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-600 w-full p-4"
154154
>
155155
<img
156156
src="{{ sponsor.imgSrc | url }}"

src/sponsors.njk

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: base
33
title: Sponsors
44
---
55

6-
<div class="container mx-auto px-2 my-8">
6+
<div class="container mx-auto p-2 my-8">
77
<div class="x-h-screen flex justify-center items-center">
88
<div class="w-full">
99
<div class="mb-8">
@@ -22,15 +22,15 @@ title: Sponsors
2222
<div class="border-jsmn-yellow border-4 p-4 divide-y divide-gray-200">
2323
{% for section in sponsors %}
2424
<div class="py-4">
25-
<h2 class="text-3xl font-bold">{{ section.section }}</h2>
25+
<h2 class="text-3xl font-bold">{{ section.section | safe }}</h2>
2626
<ul class="grid sm:grid-cols-3 sm:gap-2 grid-cols-none">
2727
{% for sponsor in section.sponsors %}
2828
<li class="flex justify-center items-center">
2929
<a
3030
href="{{ sponsor.href }}"
3131
target="_blank"
3232
rel="noopener noreferrer"
33-
class="flex justify-center items-center shadow transition-all border border-gray-200 hover:border-gray-400 w-full p-4 m-2"
33+
class="flex justify-center items-center shadow border border-gray-200 hover:border-gray-600 w-full p-4 m-2"
3434
>
3535
<img
3636
src="{{ sponsor.imgSrc | url }}"
@@ -42,10 +42,10 @@ title: Sponsors
4242
</li>
4343
{% else %}
4444
<li
45-
class="flex justify-center items-center p-4 m-2 border border-gray-200 shadow"
45+
class="flex justify-center items-center p-4 m-2 border border-gray-200 hover:border-gray-600 shadow"
4646
>
4747
<a
48-
class="transition-all transform hover:scale-110 h-32 w-full flex justify-center items-center"
48+
class="transition-all transform h-32 w-full flex justify-center items-center"
4949
href="{{ '/sponsorship-opportunities/' | url }}"
5050
>
5151
<span class="text-lg font-bold">Become a sponsor →</span>

src/sponsorship-opportunities.njk

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ title: Sponsorship Opportunities
33
layout: base
44
---
55

6-
<div class="container mx-auto p-2">
6+
<div class="container mx-auto mt-8 p-2">
77
<div class="text-center">
8-
<h1 class="text-3xl">Sponsorship Opportunities</h1>
8+
<h1 class="text-3xl font-bold">Sponsorship Opportunities</h1>
99
<p class="text-xl">
1010
Choose any of our our opportunities and join our community
1111
</p>
@@ -27,7 +27,7 @@ layout: base
2727
<section class="w-full sm:w-1/3">
2828
<div class="border-4 border-jsmn-yellow shadow-lg">
2929
<div class="px-2 text-center my-4">
30-
<p role="presentation" class="text-8xl">🥈</p>
30+
<p role="img" aria-label="silver medal" class="text-8xl">🥈</p>
3131
<h2 class="text-3xl">Silver</h2>
3232
<p class="text-xl">$250 / year</p>
3333
</div>
@@ -54,7 +54,7 @@ layout: base
5454
<section class="w-full sm:w-1/3">
5555
<div class="border-4 border-jsmn-yellow shadow-lg">
5656
<div class="px-2 text-center my-4">
57-
<p role="presentation" class="text-8xl">🥇</p>
57+
<p role="img" aria-label="gold medal" class="text-8xl">🥇</p>
5858
<h2 class="text-3xl">Gold</h2>
5959
<p class="text-xl">$1,000 / year</p>
6060
</div>
@@ -95,7 +95,7 @@ layout: base
9595
</div>
9696
</div>
9797
<div class="px-2 text-center my-4">
98-
<p role="presentation" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
98+
<p role="img" aria-label="diamond" class="text-8xl transform duration-200 hover:-rotate-25">💎</p>
9999
<h2 class="text-3xl">Diamond</h2>
100100
<p class="text-xl">$2,500 / year</p>
101101
</div>

0 commit comments

Comments
 (0)