From 5ff24130cf12131f190048360a6db54dffeafac7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Mon, 12 Sep 2022 13:18:52 +0200
Subject: [PATCH] Sign in with cover (#1247)

---
 src/pages/_data/menu.yml               |  3 +++
 src/pages/_includes/cards/sign-in.html | 30 ++++----------------------
 src/pages/_includes/forms/sign-in.html | 25 +++++++++++++++++++++
 src/pages/sign-in-cover.html           | 28 ++++++++++++++++++++++++
 src/pages/sign-in-illustration.html    |  3 +--
 5 files changed, 61 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/_includes/forms/sign-in.html
 create mode 100644 src/pages/sign-in-cover.html

diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index 46b07fe32..377b15b64 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -122,6 +122,9 @@ base:
         sign-in-illustration:
           title: Sign in with illustration
           url: sign-in-illustration.html
+        sign-in-cover:
+          title: Sign in with cover
+          url: sign-in-cover.html
         sign-up:
           title: Sign up
           url: sign-up.html
diff --git a/src/pages/_includes/cards/sign-in.html b/src/pages/_includes/cards/sign-in.html
index 46e87a221..c995ef6fa 100644
--- a/src/pages/_includes/cards/sign-in.html
+++ b/src/pages/_includes/cards/sign-in.html
@@ -1,30 +1,8 @@
-<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+<div class="card card-md">
 	<div class="card-body">
-		<h2 class="card-title text-center mb-4">Login to your account</h2>
+		<h2 class="h2 text-center mb-4">Login to your account</h2>
 
-		<div class="mb-3">
-			<label class="form-label">Email address</label>
-			<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
-		</div>
-		<div class="mb-2">
-			<label class="form-label">
-				Password
-				<span class="form-label-description">
-					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
-				</span>
-			</label>
-			{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
-		</div>
-		<div class="mb-2">
-			<label class="form-check">
-				<input type="checkbox" class="form-check-input"/>
-				<span class="form-check-label">Remember me on this device</span>
-			</label>
-		</div>
-
-		<div class="form-footer">
-			<button type="submit" class="btn btn-primary w-100">Sign in</button>
-		</div>
+		{% include forms/sign-in.html %}
 	</div>
 
 	{% include ui/hr.html text="or" %}
@@ -35,7 +13,7 @@
 			<div class="col">{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
 		</div>
 	</div>
-</form>
+</div>
 
 <div class="text-center text-muted mt-3">
 	Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
diff --git a/src/pages/_includes/forms/sign-in.html b/src/pages/_includes/forms/sign-in.html
new file mode 100644
index 000000000..8b8d4ec7f
--- /dev/null
+++ b/src/pages/_includes/forms/sign-in.html
@@ -0,0 +1,25 @@
+<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+	<div class="mb-3">
+		<label class="form-label">Email address</label>
+		<input type="email" class="form-control" placeholder="your@email.com" autocomplete="off">
+	</div>
+	<div class="mb-2">
+		<label class="form-label">
+			Password
+			<span class="form-label-description">
+					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
+				</span>
+		</label>
+		{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Your password" %}
+	</div>
+	<div class="mb-2">
+		<label class="form-check">
+			<input type="checkbox" class="form-check-input"/>
+			<span class="form-check-label">Remember me on this device</span>
+		</label>
+	</div>
+
+	<div class="form-footer">
+		<button type="submit" class="btn btn-primary w-100">Sign in</button>
+	</div>
+</form>
\ No newline at end of file
diff --git a/src/pages/sign-in-cover.html b/src/pages/sign-in-cover.html
new file mode 100644
index 000000000..058d35902
--- /dev/null
+++ b/src/pages/sign-in-cover.html
@@ -0,0 +1,28 @@
+---
+layout: base
+title: Sign in with cover
+body-class: d-flex flex-column bg-white
+---
+
+<div class="row g-0 flex-fill">
+	<div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
+		<div class="container container-tight my-5 px-lg-5">
+			<div class="text-center mb-4">
+				<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
+			</div>
+
+			<h2 class="h3 text-center mb-3">
+				Login to your account
+			</h2>
+
+			{% include forms/sign-in.html %}
+
+			<div class="text-center text-muted mt-3">
+				Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
+			</div>
+		</div>
+	</div>
+	<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+		<div class="bg-cover h-100 min-vh-100" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file}})"></div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/pages/sign-in-illustration.html b/src/pages/sign-in-illustration.html
index e15820ee7..5793c20fe 100644
--- a/src/pages/sign-in-illustration.html
+++ b/src/pages/sign-in-illustration.html
@@ -1,11 +1,10 @@
 ---
 layout: single
-title: Sign in
+title: Sign in with illustration
 container-size: normal
 hide-logo: true
 ---
 
-
 <div class="row align-items-center g-4">
 	<div class="col-lg">
 		<div class="container-tight">