From ee72f68777ed16f29aa66282b45efa98f788f645 Mon Sep 17 00:00:00 2001
From: Landon Curt Noll <github-mail@asthe.com>
Date: Wed, 6 Dec 2023 01:47:32 -0800
Subject: [PATCH] test sidenav and topnav colors

Experiment with active and visited colors.

Added links for testing to content of tmp/test.html
as well.
---
 ioccc.css     | 24 +++++++++++++++++++++---
 tmp/test.html |  6 ++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ioccc.css b/ioccc.css
index 0af6a5c05..aebfc884f 100644
--- a/ioccc.css
+++ b/ioccc.css
@@ -574,12 +574,22 @@ ul.task-list li input[type="checkbox"] {
 }
 
 /* Change topnav link color on hover */
-.topnav a:hover {
+.topnav a:focus, .topnav a:hover {
   background-color: #ddd;
   color: blue;
   text-decoration: underline;
 }
 
+/* Change topnav link after visit */
+.topnav a:visited {
+  color: #cO80c0;
+}
+
+/* Change topnav link when active */
+.topnav a:active {
+  color: red;
+}
+
 /* No padding nor border around topnav images */
 .topnav img {
   border: 0;
@@ -597,7 +607,6 @@ ul.task-list li input[type="checkbox"] {
 .sidenav a {
   float: left;
   display: block;
-  color: blue;
   text-align: left;
   padding: 14px 16px;
   text-decoration: none;
@@ -607,11 +616,20 @@ ul.task-list li input[type="checkbox"] {
 
 /* Change sidenav link color on hover */
 .sidenav a:hover {
-  color: blue;
   background-color: #ccc;
   text-decoration: underline;
 }
 
+/* Change sidenav link after visit */
+.sidenav a:visited {
+  color: purple;
+}
+
+/* Change sidenav link when active */
+.sidenav a:active {
+  color: red;
+}
+
 /* Two unequal columns =========================================================================== */
 
 /* Create two unequal columns that floats next to each other */
diff --git a/tmp/test.html b/tmp/test.html
index 4b9d9091c..7f43d311e 100644
--- a/tmp/test.html
+++ b/tmp/test.html
@@ -96,6 +96,12 @@ uptime
 sudo shutdown -p now
 </pre></code>
 
+    <p><a href="http://www.isthe.com">http://www.isthe.com</a></p>
+
+    <p><a href="http://www.example.org">http://www.example.org</a></p>
+
+    <p><a href="https://www.example.org">https://www.example.org</a></p>
+
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nibh mauris cursus mattis molestie a iaculis at erat pellentesque.
       Faucibus purus in massa tempor nec feugiat.