Enhance contrast and readability

- Change link colors
- Experiment with iframe colors
- Experiment with tooltips (inspired by @dvn) but not active
  (the HTML was not changed)

1 files changed, 41 insertions, 4 deletions

diff --git a/main_style-004.css b/main_style-004.css
index b715928..a99df7c 100644
--- a/main_style-004.css
+++ b/main_style-004.css
@@ -98,16 +98,16 @@ body {
 }
 
 :link {
-    color: var(--ocean-green);
+    color: var(--opal2);
 }
 a:active {
-    color: var(--celadon);
+    color: var(--light-gray);
 }
 a:hover, a:focus {
     color: var(--screaming-green);
 }
 a:visited {
-    color: var(--dark-sea-green);
+    color: var(--celadon);
 }
 
 h1, h2, h3, h4 {
@@ -211,6 +211,9 @@ main nav {
 main nav a {
     /*    background-color: var(--vermilion); */
     background-color: var(--orange-soda);
+    color: var(--arctic-lime);
+    font-weight: bold;
+    letter-spacing: 2pt;
     border: none;
     padding: 1rem 2rem;
     text-align: center;
@@ -228,9 +231,35 @@ main nav a {
 main nav a:hover {
     box-shadow: 0 0 1px black;
 }
+main nav a:link,
+main nav a:visited {
+    color: var(--dark-ocean-green);
+}
 #pitch nav a {
     bottom: -1.5rem;
 }
+#pitch nav a span {
+    display:none;
+}
+#pitch nav a:hover span {
+    position: absolute;
+    top: calc(-40vh + 2rem);
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    font-size: 3rem;
+    height: auto;
+    line-height: 40vh;
+    width: calc(100%);
+    border-radius: 4rem;
+    background: url(https://images.unsplash.com/photo-1604542031658-5799ca5d7936?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1vZi10aGUtZGF5fHx8fGVufDB8fHw%3D&auto=format%2Ccompress&fit=crop&w=1000&h=1000) 50% 50%/cover no-repeat;
+    background-opacity: 0.4;
+    color: black;
+    opacity: 0.85;
+    display: block;
+}
 
 nav>ul {
     list-style: none;
@@ -338,9 +367,17 @@ body>footer a:visited {
 .topics-list {
     margin: 0 auto;
 }
+.topics-list section {
+    border-radius: 2rem;
+    padding: 0.25rem 1rem;
+}
+.topics-list h2 a:link,
+.topics-list h2 a:visited {
+    color: var(--english-violet);
+}
 .topics-list iframe {
     width: 96vw; /* good for a single category */
-    height: 55vh; /* with font-size: 1.5em in iframe body */
+    height: auto;
 }
 
 /**