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 @@
- UniSquat +
+ +
+
+ UniSquat +
+
+
- -
- Start - Stats - Source -
-