diff --git a/undercover/static/styles.css b/undercover/static/styles.css index 71499df..0a47db5 100644 --- a/undercover/static/styles.css +++ b/undercover/static/styles.css @@ -57,64 +57,6 @@ input, textarea { font-family: sans-serif; } -/* Small screens */ -@media only screen and (max-width: 1080px) { - body { - width: 85vw; - } - h1 { - font-size: 300%; - } - h2 { - line-height: 100%; - } - input { - font-size: 200%; - width: 100%; - } - .letter-form { - width: 100%; - } - dd { - margin-bottom: 2em; - margin-left: 0; - } - textarea { - width: 80vw; - font-size: 120%; - } - .bigtext { - min-height: 40vh; - } -} - -/* Big screens */ -@media only screen and (min-width: 1081px) { - body { - min-height: 98%; - width: 40vw; - } - h1 { - font-size: 300%; - } - input, textarea { - margin-bottom: 0.5em; - font-size: 105%; - } - dd { - margin-left: 0.5em; - } - dt { - margin-top: 0.5em; - } - dl { - margin-top: 0; - } - #closingText { - width: 50%; - } -} - .letter-form { display: flex; flex-grow: 1; @@ -123,23 +65,46 @@ input, textarea { div.user { line-height: 125%; + margin-bottom: 2em; } div.user form { display: flex; - flex-direction: row; + flex-direction: column; font-size: 70%; } +div.user form div { + display: flex; + flex-direction: row; +} + div.user form input, label { border-radius: 0; } div.user form input { - font-size: 100%; + font-size: 120%; border-style: solid; border-width: 1px; border-color: #ddd; + padding: 0.3em; +} + +.white-black-button { + font-weight: bold; + border-radius: 0; + border-style: none; + color: black; + background-color: white; + transition-property: color, background-color; + transition-duration: 300ms; + transition-timing-function: ease-in; +} + +.white-black-button:hover { + color: white; + background-color: black; } .black-white-button { @@ -161,6 +126,8 @@ div.user form input { .logged-in { display: flex; flex-direction: row; + justify-content: end; + align-items: center; } dl { @@ -237,3 +204,75 @@ textarea { bottom: 0; height: 100%; } + +/* Small screens */ +@media only screen and (max-width: 1080px) { + body { + width: 85vw; + } + h1 { + font-size: 300%; + } + h2 { + line-height: 100%; + } + input { + font-size: 200%; + width: 100%; + } + .letter-form { + width: 100%; + } + dd { + margin-bottom: 2em; + margin-left: 0; + } + textarea { + width: 80vw; + font-size: 120%; + } + .bigtext { + min-height: 40vh; + } + .login-button { + padding: 0.75em; + } +} + +/* Big screens */ +@media only screen and (min-width: 1081px) { + body { + min-height: 98%; + width: 40vw; + } + h1 { + font-size: 300%; + } + input, textarea { + margin-bottom: 0.5em; + font-size: 105%; + } + dd { + margin-left: 0.5em; + } + dt { + margin-top: 0.5em; + } + dl { + margin-top: 0; + } + #closingText { + width: 50%; + } + div.user form { + flex-direction: row; + } + div.user form input { + font-size: 110%; + padding: 0.5em; + height: min-content; + } + .login-button { + padding: 0; + } +} diff --git a/undercover/templates/writing.jinja2 b/undercover/templates/writing.jinja2 index b30e8d3..90afc87 100644 --- a/undercover/templates/writing.jinja2 +++ b/undercover/templates/writing.jinja2 @@ -35,22 +35,26 @@ {% block content %} {% if username %}
-

You are logged in as {{ username }}

+

{{ username }}

- +
{% else %}
-

You are here as a guest.

+

You are working as a Guest.

- - +
+ + +
- - - - +
+ + +
{% endif %}