commit 4344303939442384941f6b8d84a40e03b200367d parent eb9ac98982fafada622d81511fe981c4bf21a3ad Author: Jacob R. Edwards <jacob@jacobedwards.org> Date: Thu, 21 Mar 2024 14:40:10 -0700 Style the <nav> as a banner I don't love doing this much in pure CSS, I'd rather merely suppliment HTML with it, but for now this is the how it is. Diffstat:
| M | css/main.css | | | 36 | ++++++++++++++++++++++++++++++++++++ |
1 file changed, 36 insertions(+), 0 deletions(-)
diff --git a/css/main.css b/css/main.css @@ -5,3 +5,39 @@ form { body { padding: 2rem; } + +nav { + top: 0; + left: 0; + position: absolute; + margin: 0; + padding: 0; + width: 100%; + height: 2rem; + background-color: lightblue; +} + +nav > ul { + margin: 0; + padding: 0; +} + +nav > ul > li { + /* not quite needed */ + display: inline-block; + float: left; +} + +nav > ul > li > a { + display: block; + padding: .5rem; + height: 1rem; +} + +nav > ul > li > a.active { + background-color: #8AC7DB; +} + +nav > ul > li > a:hover, nav > ul > li a:focus { + background-color: #C4E3ED; +}