diff --git a/static/style.css b/static/style.css
index 8684fbb..a209d46 100644
--- a/static/style.css
+++ b/static/style.css
@@ -24,10 +24,7 @@ header {
}
header a {
- padding-left: 40px;
- padding-right: 40px;
- padding-top: 5px;
- padding-bottom: 5px;
+ padding: 5px;
color: var(--fg);
transition: color 0.1s;
}
@@ -72,6 +69,57 @@ main p {
flex-direction: column;
}
+/* Style The Dropdown Button */
+.dropbtn {
+ color: var(--fg);
+ background-color: var(--hl);
+ padding: 16px;
+ font-size: 16px;
+ height:100%;
+ width:100%;
+ border: none;
+ cursor: pointer;
+}
+
+.dropbtn:hover {
+ background-color: var(--hl);
+}
+
+/* The container
- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+ width:100%;
+ height:100%;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: var(--hl);
+ width: 100%;
+ z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ color: var(--fg);
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+/* Change color of links on hover */
+.dropdown-content a:hover {
+ color: var(--bg);
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
h1, h2, h3, h4 {
font-weight: lighter;
border-left: solid;
diff --git a/templates/base.html b/templates/base.html
index da82f64..42b72bb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,12 +1,19 @@