[feature] Redesigned login page (#76)
Reworked the login page - Simplified some of the HTML and CSS - Removed some `aria-label`s - Added alt text for the logo - Added a label for the input field - Added subtle borders to otherwise flat elements  Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/76 Co-authored-by: Zoë Bijl <code@moiety.me> Co-committed-by: Zoë Bijl <code@moiety.me>
This commit is contained in:
Zoë Bijl
tobi
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
||||
[*.scss]
|
||||
indent_size = 2
|
||||
|
||||
[{
|
||||
tangerine.scss,
|
||||
login.scss,
|
||||
**/tangerine/*.scss
|
||||
}]
|
||||
indent_size = 4
|
||||
@@ -5,88 +5,76 @@
|
||||
@import 'basics';
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
|
||||
a {
|
||||
color: #89caff;
|
||||
}
|
||||
font-family: ui-rounded, 'mastodon-font-sans-serif', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
max-width: 30rem;
|
||||
--login-row-gap: 10px;
|
||||
|
||||
display: grid;
|
||||
row-gap: var(--login-row-gap);
|
||||
margin: 50px auto;
|
||||
padding: 1rem;
|
||||
margin: auto;
|
||||
max-width: 30rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mascot {
|
||||
height: 10rem;
|
||||
img {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
row-gap: var(--login-row-gap);
|
||||
}
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
position: relative;
|
||||
column-gap: 10px;
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.instance {
|
||||
background: #282c37;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
color: #9baec8;
|
||||
display: block;
|
||||
label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 15px;
|
||||
padding-inline-end: 30px;
|
||||
width: 100%;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
font-weight: 500;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
column-gap: .5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #66befe;
|
||||
border: 0 none;
|
||||
form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr min-content;
|
||||
}
|
||||
|
||||
:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 2px solid #66befe;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid lighten(#66befe, 7%);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: #2a2b2f;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
line-height: 22px;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
padding: 7px 10px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
flex-basis: auto;
|
||||
background-color: #66befe;
|
||||
|
||||
&:hover {
|
||||
background-color: #89caff;
|
||||
@@ -98,21 +86,35 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #444b5d;
|
||||
input[type='text'] {
|
||||
display: block;
|
||||
marhing: 0;
|
||||
padding: 15px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
border: 1px solid lighten(#282c37, 7%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: .75rem;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
color: #9baec8;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 18px;
|
||||
background: #282c37;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 15px 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten(#39404f, 7%);
|
||||
color: #fff;
|
||||
background-color: #39404f;
|
||||
}
|
||||
|
||||
.link-footer {
|
||||
padding: 10px;
|
||||
padding-inline: 10px;
|
||||
color: #97a8b4;
|
||||
font-size: 0.875rem;
|
||||
|
||||
p, a {
|
||||
color: #97A8B4;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
await ready();
|
||||
|
||||
const form = document.querySelector('#login')
|
||||
form?.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
auth();
|
||||
});
|
||||
});
|
||||
|
||||
async function ready() {
|
||||
|
||||
@@ -5,35 +5,31 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Login | Masto-FE (🦥 flavour)</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<link rel="stylesheet" media="all" href="/packs/css/core/common.css" />
|
||||
<link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
|
||||
<script src="/auth.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="app-body">
|
||||
<div class="login-container">
|
||||
<header>
|
||||
<img class="mascot" alt src="images/mascot.svg" />
|
||||
<img alt="a friendly smiling sloth" src="images/mascot.svg" />
|
||||
</header>
|
||||
<main>
|
||||
<div class="login">
|
||||
<input class="instance" id="instance" placeholder="Instance URL" aria-label="Instance URL" value="" onkeypress="if (event.keyCode == 13) auth()">
|
||||
<button type="submit" class="button" id="btn" onclick="auth()">
|
||||
<h1>Log into your instance</h1>
|
||||
<form method="post" id="login">
|
||||
<label for="instance">Instance URL</label>
|
||||
<input type="text" id="instance" value="" class="input instance">
|
||||
<button type="submit" class="button" id="btn">
|
||||
<span id="message">Authorize</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
</form>
|
||||
<aside class="content">
|
||||
<p>
|
||||
This is a standalone version of the Mastodon front-end that offers compatibility with GoToSocial instances. It is based
|
||||
on <a href="https://iceshrimp.dev/iceshrimp/masto-fe-standalone" rel="nofollow">Iceshrimp's Masto-FE Standalone</a>,
|
||||
which is itself a fork of <a href="https://github.com/glitch-soc/mastodon" rel="nofollow">Mastodon Glitch Edition</a>,
|
||||
which in turn forks <a href="https://github.com/mastodon/mastodon/" rel="nofollow">Mastodon</a>. Phew!
|
||||
<strong>Note:</strong>
|
||||
this application is completely client-side, meaning everything happens in the browser on your machine.
|
||||
It does not store information anywhere else than your browser's local storage.
|
||||
</p>
|
||||
<p>
|
||||
The application is completely client-side, meaning everything happens in the browser on your machine. It does not store
|
||||
information anywhere else than your browser's local storage.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<footer class="link-footer">
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user