Improve readability

1 files changed, 16 insertions, 15 deletions

diff --git a/public/main.css b/public/main.css
index 62cae6e..02572aa 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,9 +3,7 @@
 :root {
   --color-brown: #915f2d;
   --color-dark-brown: #6A4115;
-  --color-blue: #515170;
-  --color-light-gray: #EEEEEE;
-  --color-dark-gray: #666666;
+  --color-blue: #1F6F9E;
 
   --size-bee: 0.2rem;
   --size-mouse: 0.5rem;
@@ -35,15 +33,15 @@
 /* Media */
 
 @media screen and (max-width: 500px) {
-  html { font-size: 15px; }
+  html { font-size: 16px; }
 }
 
 @media screen and (min-width: 500px) and (max-width: 900px) {
-  html { font-size: 16px; }
+  html { font-size: 18px; }
 }
 
 @media screen and (min-width: 900px) {
-  html { font-size: 17px; }
+  html { font-size: 20px; }
 }
 
 /* Body */
@@ -113,7 +111,7 @@ ol.sub-sections > li {
 /* Images */
 
 img:not(.icon) {
-  border: solid 1px var(--color-dark-gray);
+  border: solid 1px var(--color-dark-brown);
   border-radius: var(--size-mouse);
   margin-bottom: var(--size-dog);
   width: 100%;
@@ -133,30 +131,32 @@ p {
 /* Title */
 
 h1 {
-  color: var(--color-brown);
-  font-size: var(--size-horse);
-  font-weight: lighter;
-  border-bottom: var(--size-bee) solid var(--color-brown);
+  color: var(--color-dark-brown);
+  font-size: var(--size-bear);
+  font-weight: bold;
+  border-bottom: 0.1rem solid var(--color-dark-brown);
   margin-bottom: var(--size-horse);
   padding-bottom: var(--size-mouse);
 }
 
 h1 a {
-  color: #1F6F9E;
+  color: var(--color-blue);
   text-decoration: none;
+  font-weight: normal;
   font-size: 75%;
 }
 
 h1 a:hover {
-  color: #29A8F3;
+  text-decoration: underline;
 }
 
 h2 {
+  display: inline-block;
   font-size: var(--size-dog);
   margin-top: var(--size-dog);
   margin-bottom: var(--size-lion);
   font-weight: normal;
-  text-decoration: underline;
+  border-bottom: 0.1rem solid var(--color-brown);
   color: var(--color-brown);
 }
 
@@ -194,7 +194,8 @@ ul.technos {
 
 ul.technos > li {
   margin: var(--size-bee) var(--size-cat) var(--size-mouse) 0;
-  background-color: var(--color-light-gray);
+  border: 1px solid var(--color-brown);
+  color: var(--color-dark-brown);
   border-radius: var(--size-bee);
   padding: 0 var(--size-mouse);
   font-size: 80%;