Hello

I wonder why you have made the Read and Unread link colours almost identically. It is very hard to see the difference.

I consulted the development tools of my browser to enhance the distinction of unvisited and visited links in the list of latest entries. To change the font-colour is a big task because of the many similar places to change, as I stated before. My idea was to set and change the background of the whole link and therefore I need to set the class read for the correct element type.

I spotted the fact, that the span inside the link, that contains the subject line, is marked as read instead the link itself (for registered users). The code is at least seven years old (present at least since version 2.2).

Does anything speaks against moving the class read from the span to the a?

actual HTML:

<ul id="latest-postings-container">
 <li>
  <a href="index.php?id=10350" title="Auge, 17.10.2017, 13:28 (Technics)">
   <span class="read">@Tommy: please test the development branch</span>
   <br />vor 20 Minuten
  </a>
 </li>
 <!-- further list items -->
</ul>

actual CSS:

#latest-postings li a {
  font-size:0.82em;
  line-height:1.5em;
  color:#808080;
  text-decoration:none;
  display:block;
  margin:0;
  padding:3px 5px 3px 5px;
}
#latest-postings li a:hover {
  background:#efefef;
  text-decoration:none;
}
#latest-postings li a span {
  font-size:1.2em;
  line-height:1.5em;
  color:#0000cc;
}
#latest-postings li a:visited span {
  color:#000077;
}
#latest-postings li a:focus span, #latest-postings li a:hover span {
  text-decoration:underline;
}
 

proposed HTML:

<ul id="latest-postings-container">
 <li>
  <a href="index.php?id=10350" title="Auge, 17.10.2017, 13:28 (Technics)" class="read">
   <span class="entry-title">@Tommy: please test the development branch</span>
   <br /><span class="time-ago">vor 20 Minuten</span>
  </a>
 </li>
 <!-- further list items -->
</ul>

proposed CSS:

#latest-postings li a {
  line-height: 1.5em;
  text-decoration: none;
  display: block;
  margin: 0;
  padding: 3px 5px;
}
#latest-postings li a:visited .entry-title, #latest-postings li a.read .entry-title {
  color: #007;
  background: #800; /* random chosen colour */
}
#latest-postings li a:hover {
  background: #efefef;
  text-decoration: none;
}
#latest-postings li a .entry-title {
  font-size: 1.2em;
  line-height: 1.5em;
  color: #00c;
}
#latest-postings li a:focus .entry-title, #latest-postings li a:hover .entry-title {
  text-decoration: underline;
}
#latest-postings li a .time-ago, #latest-postings li a.read .time-ago {
  font-size: 0.82em;
  color: #808080;
}

This is a bit more code, but it IMHO offers a better control over the parts of the links.

Tschö, Auge