Edits to improve site accessibility

README.md

@@ -17,9 +17,9 @@ A copy of this repository will be made in your own github account.
 
 In "myname/dreuprojecttemplate", click on "Settings" near the top right hand of the window. Change the repository name from "dreuprojecttemplate" to to "myname.github.io". ("myname" must match your GitHub user name exactly.)
 
-Scroll down til you see "GitHub pages" and choose "Master" instead of "None".
+Scroll down until you see "GitHub pages" and choose "master" instead of "None".
 
-If you already have a GitHub site, then you can make this a project site rather than your personal site.
+If you already have a GitHub site, then you can make this a project site rather than your personal site. If you do, you may need to rename "master" to "gh-pages" to trigger deployment.
 
 ### Step 4) Customize and view your site
 

_config.yml

@@ -6,10 +6,11 @@
 name: Your Name
 
 # Short bio or description (displayed in the header)
-description: Summer 2020 DREU Project
+description: Summer 2023 DREU Project
 
 # URL of your avatar or profile pic (you could use your GitHub profile pic)
 avatar: https://raw.githubusercontent.com/barryclark/jekyll-now/master/images/jekyll-logo.png
+avatar_alt_text: describe_your_avatar_here # don't redundantly say it's an image. See more tips here: https://www.a11yproject.com/posts/alt-text/ 
 
 #
 # Flags below are optional
@@ -18,7 +19,7 @@ avatar: https://raw.githubusercontent.com/barryclark/jekyll-now/master/images/je
 # Includes an icon in the footer for each username you enter
 footer-links:
   dribbble:
-  email: yourmail@mail.com
+  email: your.mail@mail.com
   facebook:
   flickr:
   rss: # just type anything here for a working RSS icon

_includes/svg-icons.html

@@ -1,13 +1,13 @@
-{% if site.footer-links.dribbble %}<a href="https://dribbble.com/{{ site.footer-links.dribbble }}"><i class="svg-icon dribbble"></i></a>{% endif %}
-{% if site.footer-links.email %}<a href="mailto:{{ site.footer-links.email }}"><i class="svg-icon email"></i></a>{% endif %}
-{% if site.footer-links.facebook %}<a href="https://www.facebook.com/{{ site.footer-links.facebook }}"><i class="svg-icon facebook"></i></a>{% endif %}
-{% if site.footer-links.flickr %}<a href="https://www.flickr.com/{{ site.footer-links.flickr }}"><i class="svg-icon flickr"></i></a>{% endif %}
-{% if site.footer-links.github %}<a href="https://github.com/{{ site.footer-links.github }}"><i class="svg-icon github"></i></a>{% endif %}
-{% if site.footer-links.instagram %}<a href="https://instagram.com/{{ site.footer-links.instagram }}"><i class="svg-icon instagram"></i></a>{% endif %}
-{% if site.footer-links.linkedin %}<a href="https://www.linkedin.com/in/{{ site.footer-links.linkedin }}"><i class="svg-icon linkedin"></i></a>{% endif %}
-{% if site.footer-links.pinterest %}<a href="https://www.pinterest.com/{{ site.footer-links.pinterest }}"><i class="svg-icon pinterest"></i></a>{% endif %}
-{% if site.footer-links.rss %}<a href="{{ site.baseurl }}/feed.xml"><i class="svg-icon rss"></i></a>{% endif %}
-{% if site.footer-links.twitter %}<a href="https://www.twitter.com/{{ site.footer-links.twitter }}"><i class="svg-icon twitter"></i></a>{% endif %}
-{% if site.footer-links.stackoverflow %}<a href="http://stackoverflow.com/{{ site.footer-links.stackoverflow }}"><i class="svg-icon stackoverflow"></i></a>{% endif %}
-{% if site.footer-links.youtube %}<a href="https://youtube.com/{{ site.footer-links.youtube }}"><i class="svg-icon youtube"></i></a>{% endif %}
-{% if site.footer-links.googleplus %}<a href="https://plus.google.com/{{ site.footer-links.googleplus }}"><i class="svg-icon googleplus"></i></a>{% endif %}
+{% if site.footer-links.dribbble %}<a href="https://dribbble.com/{{ site.footer-links.dribbble }}" title="Dribbble"><i class="svg-icon dribbble"></i></a>{% endif %}
+{% if site.footer-links.email %}<a href="mailto:{{ site.footer-links.email }}" title="Email"><i class="svg-icon email"></i></a>{% endif %}
+{% if site.footer-links.facebook %}<a href="https://www.facebook.com/{{ site.footer-links.facebook }}" title="Facebook"><i class="svg-icon facebook"></i></a>{% endif %}
+{% if site.footer-links.flickr %}<a href="https://www.flickr.com/{{ site.footer-links.flickr }}" title="Flickr"><i class="svg-icon flickr"></i></a>{% endif %}
+{% if site.footer-links.github %}<a href="https://github.com/{{ site.footer-links.github }}" title="GitHub"><i class="svg-icon github"></i></a>{% endif %}
+{% if site.footer-links.instagram %}<a href="https://instagram.com/{{ site.footer-links.instagram }}" title="Instagram"><i class="svg-icon instagram"></i></a>{% endif %}
+{% if site.footer-links.linkedin %}<a href="https://www.linkedin.com/in/{{ site.footer-links.linkedin }}" title="LinkedIn"><i class="svg-icon linkedin"></i></a>{% endif %}
+{% if site.footer-links.pinterest %}<a href="https://www.pinterest.com/{{ site.footer-links.pinterest }}" title="Pinterest"><i class="svg-icon pinterest"></i></a>{% endif %}
+{% if site.footer-links.rss %}<a href="{{ site.baseurl }}/feed.xml" title="RSS"><i class="svg-icon rss"></i></a>{% endif %}
+{% if site.footer-links.twitter %}<a href="https://www.twitter.com/{{ site.footer-links.twitter }}" title="Twitter"><i class="svg-icon twitter"></i></a>{% endif %}
+{% if site.footer-links.stackoverflow %}<a href="http://stackoverflow.com/{{ site.footer-links.stackoverflow }}" title="StackOverflow"><i class="svg-icon stackoverflow"></i></a>{% endif %}
+{% if site.footer-links.youtube %}<a href="https://youtube.com/{{ site.footer-links.youtube }}" title="YouTube"><i class="svg-icon youtube"></i></a>{% endif %}
+{% if site.footer-links.googleplus %}<a href="https://plus.google.com/{{ site.footer-links.googleplus }}" title="Google Plus"><i class="svg-icon googleplus"></i></a>{% endif %}

_layouts/default.html

@@ -13,19 +13,35 @@
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
 
     <!-- Created with Jekyll Now - http://github.com/barryclark/jekyll-now -->
+
+     <!-- jQuery for skipping to main content -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script>
+        $(document).ready(function () {
+            $("#skipper").click(function () {
+                $('#mainContent').attr('tabIndex', -1).focus();
+            });
+        });
+    </script>
   </head>
 
   <body>
+    <a href="#main" id="skipper" class="skip-to-main-content-link">Skip to main content</a>
+
     <div class="wrapper-masthead">
       <div class="container">
         <header class="masthead clearfix">
-          <a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>
+          <img src="{{ site.avatar }}" class="site-avatar" alt="{{ site.avatar_alt_text }}"/>
 
           <div class="site-info">
             <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
             <p class="site-description">{{ site.description }}</p>
           </div>
 
+          <nav>
+            <a href="{{ site.baseurl }}/">Home</a>
+            <a href="{{ site.baseurl }}/blog/">Blog</a>
+          </nav>
         </header>
       </div>
     </div>

_layouts/post.html

@@ -13,4 +13,6 @@ <h1>{{ page.title }}</h1>
     Written on {{ page.date | date: "%B %e, %Y" }}
   </div>
 
+  <a href="{{ site.baseurl }}/blog">Return to blog</a>
+
 </article>

_posts/2023-06-01-week1.md

@@ -0,0 +1,8 @@
+---
+layout: post
+title: Week 1
+description: Description here!
+date: 2023-06-01T10:20:00Z
+---
+
+Text here!

blog.html

@@ -4,15 +4,17 @@
 
 <div class="posts">
   {% for post in site.posts %}
-    <article class="post">
+  <a href="{{ site.baseurl }}{{ post.url }}">
+    <article class="post-entry">
+      <header class="entry-header">
+        <h1>{{ post.title }}</h1>
+      </header>
 
-      <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
-
-      <div class="entry">
-        {{ post.excerpt }}
+      <div class="entry-description">
+        {{ post.description }}
+        <!-- {{ post.excerpt }} -->
       </div>
-
-      <a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
     </article>
+  </a>
   {% endfor %}
 </div>

index.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Summer 2020 DREU Project Site
+title: Summer 2023 DREU Project Site
 ---
 
 * TOC
@@ -18,8 +18,4 @@ Mentor info goes here.
 
 Project description goes here.
 
-[My Final Report](files/finalreport.pdf)
-
-## My Blog
-
-[My Blog](blog.html)
+[My Final Report](files/finalreport.pdf)

style.scss

@@ -142,6 +142,14 @@ img {
     clear: both;
 }
 
+/* Variables (used for post-entry) */
+:root {
+  --gap: 24px;
+  --radius: 8px;
+  --entry: rgb(255, 255, 255);
+  --border: rgb(170, 170, 170);
+}
+
 /*********************/
 /* LAYOUT / SECTIONS */
 /*********************/
@@ -156,7 +164,7 @@ img {
 
 .masthead {
   padding: 20px 0;
-  border-bottom: 1px solid $lightGray;
+  border-bottom: 1px solid var(--border);
 
   @include mobile {
     text-align: center;
@@ -210,6 +218,22 @@ img {
   }
 }
 
+.skip-to-main-content-link {
+  position: absolute;
+  left: -9999px;
+  z-index: 999;
+  padding: 1em;
+  background-color: black;
+  color: white;
+  opacity: 0;
+}
+
+.skip-to-main-content-link:focus {
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 1;
+}
+
 nav {
   float: right;
   margin-top: 23px; // @TODO: Vertically middle align
@@ -225,10 +249,11 @@ nav {
 
   a {
     margin-left: 20px;
-    color: $darkGray;
+    color: $blue;
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
+    padding: 1em;
 
     @include mobile {
       margin: 0 10px;
@@ -271,6 +296,38 @@ nav {
   }
 }
 
+// post-entry and associated variables, html from the PaperMod Jekyll Theme
+
+.post-entry:hover .entry-header h1 {
+  color: $blue;
+}
+
+.post-entry:hover header.entry-header {
+  color: $blue;
+}
+
+.post-entry:active {
+  transform: scale(.96)
+}
+
+.post-entry {
+  position: relative;
+  margin-bottom: var(--gap);
+  padding: var(--gap);
+  background: var(--entry);
+  border-radius: var(--radius);
+  transition: transform .1s;
+  border: 1px solid var(--border);
+}
+
+.entry-header h1 {
+    color: $blue;
+}
+
+.entry-description {
+    color: black;
+}
+
 .wrapper-footer {
   margin-top: 50px;
   border-top: 1px solid #ddd;