improved consistency of wave gradient to make more seamless plus arranged wave height and font color to be more legible while appearing and disappearing with the wave

Author: theodoremoreland

application/static/css/style.css

@@ -41,7 +41,7 @@ h1 {
     padding: 0;
     font-size: 1.2rem;
     font-family: custom-bold;
-    color: rgb(56, 59, 80);
+    color: inherit;
 }
 
 @media screen and (min-width: 760px) {
@@ -68,9 +68,8 @@ ul {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
-        rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
-        rgba(0, 0, 0, 0.07) 0px 16px 16px;
+    border-bottom: 4px solid #0f6c79;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
 }
 
 @media screen and (min-width: 760px) {
@@ -176,7 +175,8 @@ p {
 }
 
 p {
-    font-size: 0.9rem;
+    max-width: 72ch;
+    font-size: 1rem;
     font-family: custom-regular;
     margin: 0;
     padding: 7px 15px;
@@ -185,7 +185,6 @@ p {
 @media screen and (min-width: 760px) {
     p {
         font-size: 1.2rem;
-        width: 75ch;
     }
 }
 
@@ -269,6 +268,7 @@ p {
     overflow: hidden;
     text-align: center;
     line-height: 1.6;
+    color: rgb(255, 253, 250);
     background-color: rgb(255, 253, 250);
 }
 
@@ -291,7 +291,7 @@ p {
 
 a#dynamic-example {
     text-decoration: underline;
-    color: rgb(31, 34, 58);
+    color: rgb(255, 253, 250);
     font-weight: bold;
 }
 

application/static/css/waves.css

@@ -2,15 +2,22 @@
 /* Source code: https://codepen.io/tedmcdo/pen/PqxKXg */
 
 .ocean {
-    height: 5%;
+    height: 5.35rem;
+    max-height: 38%;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
-    background: #005a71;
+    background: #015871;
     opacity: 0.7;
 }
 
+@media screen and (min-width: 760px) {
+    .ocean {
+        height: 13.35rem;
+    }
+}
+
 .wave {
     background: url("../images/wave.svg") repeat-x;
     position: absolute;