From 384a590b5462883d714bc1682e4d81d6321b2b12 Mon Sep 17 00:00:00 2001 From: Samuel Johnson Date: Mon, 24 Nov 2025 01:36:18 -0500 Subject: Improve page layout, add navbar --- static/app.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) (limited to 'static/app.css') diff --git a/static/app.css b/static/app.css index a52ea8d..0148d24 100644 --- a/static/app.css +++ b/static/app.css @@ -1,3 +1,53 @@ +header { + padding: 0rem 2rem 0rem 2rem; + + display: flex; + flex-direction: row; + align-content: center; +} + +header > h1 { + padding: 0.5rem; +} + +header > nav { + margin-top: auto; + margin-bottom: auto; + margin-left: 2em; +} + +a { + margin: 0.5em; + color: inherit; + position: relative; + display: inline-block; + text-decoration: none; +} + +a::after { + content: ""; + background: white; + height: 1px; + position: absolute; + bottom: 0; + transition: .16s all 0.025s; +} + +a::after { + left: 100%; + right: 0; +} + +a:hover ~ a::after { + left: 0; + right: 100%; +} + +a:hover::after { + left: 0; + right: 0; +} + .pane { margin: auto; padding: 4px 10px; @@ -11,6 +61,42 @@ box-shadow: 0px 0px 15px 2px #410f5e; } +.topline { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; +} + +.topline > p { + margin-top: auto; + margin-bottom: auto; + margin-left: 2em; +} + +.card { + border-top: 1px solid #fff; + + padding-top: 0.5rem; + padding-bottom: 0.75rem; + padding-left: 2rem; + padding-right: 2rem; + + margin: 0.25rem; + margin-bottom: 1rem; + + border-radius: 20px; + transition: box-shadow 0.2s ease-in-out; +} + +.card:hover { + box-shadow: 0px 0px 15px 2px #ecb77d; +} + +.card .header { + text-align: center; +} + #bg-image { position: fixed; -- cgit v1.2.3