Tweak login form styling
This commit is contained in:
Sage Vaillancourt
parent
5975f5ddf1
commit
3c02ce279e
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,22 +35,26 @@
|
|||
{% block content %}
|
||||
{% if username %}
|
||||
<div class="user logged-in">
|
||||
<p style="margin: 0 1em 0 0;">You are logged in as {{ username }}</p>
|
||||
<p style="margin: 0 1em 0 0;">{{ username }}</p>
|
||||
<form action="/logout">
|
||||
<input class="black-white-button" type="submit" value="Logout">
|
||||
<input class="black-white-button" style="margin: 0;" type="submit" value="Logout">
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="user logged-out">
|
||||
<p>You are here as a guest.</p>
|
||||
<p>You are working as a <strong>Guest</strong>.</p>
|
||||
<form action="/login" method="post">
|
||||
<label for="login">Email: </label>
|
||||
<input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
|
||||
<div>
|
||||
<input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="email">
|
||||
<input id="password" maxlength="32" minlength="4" name="password" type="password" placeholder="password">
|
||||
</div>
|
||||
|
||||
<label for="password">Password: </label>
|
||||
<input id="password" maxlength="32" minlength="4" name="password" type="password">
|
||||
|
||||
<input class="black-white-button" type="submit" value="Login">
|
||||
<div>
|
||||
<input class="white-black-button login-button" type="submit" value="Login">
|
||||
<!--
|
||||
<input class="black-white-button" type="submit" value="Create Account" formaction="/create_account">
|
||||
-->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue