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