Layouts and css for /login and /login/mastodon

public/css/custom.css

@@ -15,6 +15,84 @@
 /* Larger than Desktop HD */
 @media (min-width: 1200px) {}
 
+.center { display: flex }
+.center > * { margin: auto }
+.right { text-align: right }
+
+.bg-mastodon { background: #3088d4 !important }
+
+/* Public
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+header {
+  display: flex;
+  padding: .6em .8em;
+  max-width: 60em;
+  margin: auto;
+}
+
+header div.icon {
+  display: flex;
+}
+
+header div.nav {
+  text-align: right;
+  width: 100%;
+}
+
+header div.nav > span.brand {
+  position: relative;
+  top: .25em;
+}
+
+main {
+  display: flex;
+  background: linear-gradient(#d2d2d2, #eee);
+  padding: 1em 2em;
+}
+
+main > div.content {
+  margin: auto;
+}
+
+/* Login
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.login-buttons > ._ {
+  min-width: 80%;
+}
+.login-buttons a.button {
+  display: flex;
+  border: none;
+  box-shadow: 0px 0px .5em #0000003d;
+  text-align: left;
+  padding-left: 4px;
+}
+
+.login-buttons a.button > div {
+  display: flex;
+}
+
+.login-buttons a.button > div > img {
+  width: 2em;
+  height: 2em;
+  margin: auto;
+  margin-right: 2em;
+  background: #fff;
+  border-radius: 50%;
+  padding: .2em;
+  border: 2px solid #5b5b5b;
+}
+
+.login-buttons sub {
+  position: relative;
+  bottom: -.5em;
+  left: 1em;
+  line-height: 1.4em;
+}
+
+#login h4 {
+  text-align: center;
+}
 
 /* Shared
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

public/css/skeleton.css

@@ -158,7 +158,7 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #1EAEDB; }
+  color: #0058CA; }
 a:hover {
   color: #0FA0CE; }
 
@@ -198,7 +198,6 @@ input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus {
   color: #333;
-  border-color: #888;
   outline: 0; }
 .button.button-primary,
 button.button-primary,
@@ -206,8 +205,7 @@ input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
+  background-color: #33C3F0; }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -219,9 +217,8 @@ input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
   color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
-
+  filter: brightness(110%) }
+.button-primary { border: none !important }
 
 /* Forms
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

public/login/index.php

@@ -54,10 +54,42 @@ if ($function === 'oauth') {
 <?php require '/src/views/head.php' ?>
 <?php require '/src/views/public/head.php' ?>
 
-<main>
-LOGIN: <?php echo $login_method ?>
-<br>
-FUNCTION: <?php echo $function ?>
+<main id="login">
+	<div class="content">
+	<br>
+	<?php if ($function === 'view'): ?>
+		<?php if ($login_method === null): ?>
+
+		<h4><?php l('login.login_with_fediverse', 'Log In using your Fediverse account') ?></h4>
+		<div class="center login-buttons">
+			<div class="_">
+				<a href="/login/mastodon" class="button button-primary bg-mastodon">
+					<div><img src="https://masto.nobigtech.es/favicon.ico"/>
+						<?php l('login.login_mastodon', 'I use Mastodon') ?>
+					</div>
+				</a>
+				<sub><?php l('login.dont_have_mastodon', 'Don\'t have Mastodon?') ?>
+					<a href="https://joinmastodon.org/communities/general"><?php l('login.choose_community', 'choose a community') ?></a></sub>
+				<br><br>
+			</div>
+		</div>
+
+		<?php elseif ($login_method === 'mastodon'): ?>
+
+		<h4><?php l('login.login_with_mastodon', 'Log In using Mastodon') ?></h4>
+		<div class="columns">
+			<label for="instanceURL"><?php l('login.select_instance', 'Select your instance') ?></label>
+			<input class="u-full-width" type="text" placeholder="example.org" id="instanceURL" />
+			<div class="right">
+				<input onclick="API.mastodon.registerInstance(null)" class="button-primary u-full-width bg-mastodon"
+					type="submit" value="<?php l('all.continue', 'Continue') ?> &gt;&gt;" />
+			</div>
+		</div>
+
+		<?php endif ?>
+	<?php endif ?>
+	<br>
+	</div>
 </main>
 
 <?php require '/src/js/api.php' ?>

src/views/public/head.php

@@ -1,2 +1,10 @@
-<?php
-
+<header>
+	<div class="icon">
+		<a href="/">
+			<img width="30" height="30" src="/img/favicon_tmp.png"/>
+		</a>
+	</div>
+	<div class="nav">
+		<span class="brand"><?php l('all.app_name') ?></span>
+	</div>
+</header>