Update CSS global stylesheet.

Now looks a lot more like the official OCaml website!

1 files changed, 32 insertions, 8 deletions

diff --git a/lib/static/styles.css b/lib/static/styles.css
index cd87fc1..de2c3db 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -1,6 +1,8 @@
+@import url("fonts/Inter-4.1/web/inter.css");
+
 body {
-    font-family: sans-serif;
-    max-width: 60em;
+    font-family: Inter, sans-serif;
+    max-width: 50em;
     margin: auto;
     padding: 0 1em;
     background-color: #181818;
@@ -9,6 +11,7 @@ body {
 
 nav#top {
     background-color: black;
+    border-radius: 0.25rem;
 }
 
 nav#top ul {
@@ -20,6 +23,7 @@ nav#top ul {
 
 nav#top ul li {
     padding: 0.5em 0;
+    border-radius: 0.25rem;
 }
 
 nav#top ul li a {
@@ -31,17 +35,37 @@ nav#top ul li a {
 nav#top ul li a:hover {
     background-color: white;
     color: black;
-    text-decoration: revert;
 }
 
-ul {
-    padding-left: 1em;
+nav#top ul li#active {
+    border-radius: 0.25rem;
+    background-color: rgb(194, 79, 30);
+}
+
+nav#top ul li#active a:hover {
+    border-radius: 0.25rem;
+    background-color: rgb(132, 40, 0);
+    color: white;
+}
+
+div#main ul {
+    padding-left: 0;
+    list-style: none;
 }
 
-li {
-    line-height: 1.5;
+div#main ul li {
+    border: 1px solid #303030;
 }
 
-a {
+div#main ul li a {
+    display: block;
     color: white;
+    text-decoration: none;
+    padding: 0.5em;
+}
+
+div#main a:hover {
+    background-color: white;
+    color: black;
+    text-decoration: revert;
 }