Fix layout bugs and improve accessibility

codefreezefi · Jan 16, 2020 · fe56d83 · fe56d83
1 parent 06a9717
commit fe56d83
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/_layouts/2018.html b/_layouts/2018.html
@@ -17,7 +17,9 @@
 <body>
     <header id=main-header>
         <section>
-            <img src="{{ site.baseurl }}/logos/snowflake-with-codefreeze.svg" alt="Snowflake" class="snowflake" />
+            <h1 aria-label="{{page.title}}">
+                <img src="{{ site.baseurl }}/logos/snowflake-with-codefreeze.svg" alt="Codefreeze logo" class="snowflake" />
+            </h1>
             <p>
                 <time>{{page.when}}</time>
                 <span class="location">{{page.where}}</span>

diff --git a/index.md b/index.md
@@ -8,8 +8,6 @@ where_link: https://www.kiilopaa.fi/en/
 description: Codefreeze is an unconference with very little structure. Actually, it’s not a conference at all. Codefreeze is a time and place for software craftspeople to meet.
 ---
 
-# {{page.title}}
-
 ## {{page.tagline}}
 
 Codefreeze is an unconference with very little structure. Actually, it’s not a conference at all. Codefreeze is a *time* and *place* for software craftspeople to meet. We would like to have likeminded people to gather in one place and have long conversations about our craft over a drink. And to practice our coding skills.
@@ -237,7 +235,7 @@ For more information about the safaris, including prices, see the brochure here
             <img src="{{ site.baseurl }}/images/user-add.jpg" alt="{{ participant.name }}" />
         </div>
     </a>
-    <h3>You?</h3>
+    <div class="participant-name">You?</div>
   </li>
 
 <!-- {% assign image_host = site.url | append:site.baseurl %} -->
@@ -250,23 +248,23 @@ For more information about the safaris, including prices, see the brochure here
   <li>
     {% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer">{% endif %}
     <div class="photo">
-        <img src="{{ image_url }}" alt="{{ participant.name }}" />
+        <img src="{{ image_url }}" alt="Picture of {{ participant.name }}" />
     </div>
     {% if participant.link != null %}</a>{% endif %}
-    <h3>{{ participant.name }}</h3>
-    <nav>
-    {% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer">
+    <div class="participant-name">{{ participant.name }}</div>
+    <div class="participant-links">
+    {% if participant.link != null %}<a href="{{ participant.link }}" rel="noopener noreferrer" aria-label="Homepage of {{ participant.name }}">
         <i class="fas fa-home"></i>
     </a>{% endif %}
     {% if participant.twitter != null %}
-      <a href="https://twitter.com/{{ participant.twitter }}" rel="noopener noreferrer">
+      <a href="https://twitter.com/{{ participant.twitter }}" rel="noopener noreferrer" aria-label="Twitter profile of {{ participant.name }}">
         <i class="fab fa-twitter"></i></a>
     {% endif %}
     {% if participant.linkedin != null %}
-      <a href="{{ participant.linkedin }}" rel="noopener noreferrer">
+      <a href="{{ participant.linkedin }}" rel="noopener noreferrer" aria-label="LinkedIn profile of {{ participant.name }}">
         <i class="fab fa-linkedin"></i></a>
     {% endif %}
-    </nav>
+    </div>
     {% if participant.content != null %}<div class="description">{{ participant.content }}</div>{% endif %}
   </li>
 {% endfor %}

diff --git a/styles/2018.scss b/styles/2018.scss
@@ -84,12 +84,15 @@ body > header {
   }
 }
 
-body > main {
+#main-header {
+  h1 {
+    margin: 0
+  }
+}
+
+main {
   padding: 0;
   margin: 0;
-  > h1 {
-    display: none;
-  }
   hr {
     border: 0;
     border-bottom: 5px solid $blue;
@@ -191,7 +194,8 @@ section.tweets {
   margin: 2rem 0;
   padding: 2rem;
   @media (min-width: $desktop-width) {
-    padding: 4rem;
+    padding-left: 4rem;
+    padding-right: 4rem;
   }
 
   a {
@@ -248,7 +252,7 @@ section.tweets {
         }
       }
 
-      h3 {
+      .participant-name {
         font-size: 18px;
         font-weight: $thin-weight;
         margin: 0 0 0 0.5rem;
@@ -261,7 +265,7 @@ section.tweets {
         display: none;
       }
 
-      nav a {
+      .participant-links a {
         text-decoration: none;
         font-size: 150%;
         &+a {