diff options
author | Benji Dial <benji@benjidial.net> | 2024-02-07 19:04:23 -0500 |
---|---|---|
committer | Benji Dial <benji@benjidial.net> | 2024-02-07 19:04:23 -0500 |
commit | 7b89b4cd703ee1123f01e3ddba0ae24911baf410 (patch) | |
tree | af4614d64b195b62b445591d020beb9391d644b9 /static/style.css | |
download | voting-site-7b89b4cd703ee1123f01e3ddba0ae24911baf410.tar.gz |
first commit
Diffstat (limited to 'static/style.css')
-rw-r--r-- | static/style.css | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..d96635a --- /dev/null +++ b/static/style.css @@ -0,0 +1,97 @@ +:root { + --main-bg: white; + --nav-bg: lightgray; + --main-fg: black; + --links: #3271e7; +} + +@font-face { + font-family: 'Crimson Pro'; + src: url(/static/CrimsonPro-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'Crimson Pro'; + font-weight: bold; + src: url(/static/CrimsonPro-Bold.woff2) format('woff2'); +} + +body { + background-color: var(--main-bg); + margin: 0px; + color: var(--main-fg); +} + +.header-outer { + height: 80px; + position: fixed; + top: 0px; +} + +.footer-outer { + height: 60px; + position: fixed; + bottom: 0px; +} + +.header-outer, .footer-outer { + background-color: var(--nav-bg); + width: 100%; +} + +.header-inner, .footer-inner { + max-width: 800px; + margin: auto; + padding-top: 20px; + padding-bottom: 20px; + display: flex; +} + +.header-inner { + justify-content: space-between; +} + +.footer-inner { + justify-content: flex-start; + gap: 20px; +} + +.header-inner h1, .header-inner p, .footer-inner p { + margin: 0px; +} + +.header-inner h1 a { + color: var(--main-fg); +} + +.header-inner .login-info { + text-align: right; +} + +.content { + padding-top: 80px; + padding-bottom: 60px; + max-width: 800px; + margin: auto; +} + +h1, h2, p, label, input { + font-family: 'Crimson Pro'; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 27px; +} + +p, label, input { + font-size: 18px; +} + +a { + text-decoration: none; + color: var(--links); +} |