From 03e42f52847e71b926d6157c51f15b8b176a9c6f Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 29 Jan 2020 23:43:13 +0100
Subject: [PATCH] single page fixes

---
 pages/_includes/cards/forgot-password.html |  9 ++++-----
 pages/_includes/cards/sign-in.html         |  6 +++---
 pages/_includes/cards/sign-up.html         | 10 +++++-----
 pages/_includes/forms/form-elements-2.html |  8 ++++----
 pages/_includes/ui/empty.html              |  2 +-
 pages/_includes/ui/form/input-group.html   |  2 +-
 pages/_layouts/error.html                  | 12 +++++++-----
 pages/_layouts/single.html                 |  6 +++---
 pages/tmp-dark.html                        |  2 +-
 pages/welcome.html                         |  2 +-
 scss/_variables.scss                       |  2 +-
 scss/ui/typo/_hr.scss                      |  2 +-
 12 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/pages/_includes/cards/forgot-password.html b/pages/_includes/cards/forgot-password.html
index dc13d1f56..68818c330 100644
--- a/pages/_includes/cards/forgot-password.html
+++ b/pages/_includes/cards/forgot-password.html
@@ -1,11 +1,10 @@
-<form class="card" action="#" method="post">
-
-	<div class="card-body p-5">
-		<div class="card-title">Forgot password</div>
+<form class="card card-md" action="{{ site.base }}" method="get">
+	<div class="card-body">
+		<h2 class="mb-5 text-center">Forgot password</h2>
 
 		<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
 
-		<div class="mb-2">
+		<div class="mb-3">
 			<label class="form-label">Email address</label>
 			<input type="email" class="form-control" placeholder="Enter email">
 		</div>
diff --git a/pages/_includes/cards/sign-in.html b/pages/_includes/cards/sign-in.html
index 2fa8aee3f..9044b0407 100644
--- a/pages/_includes/cards/sign-in.html
+++ b/pages/_includes/cards/sign-in.html
@@ -1,6 +1,6 @@
-<form class="card card-md" action="#" method="get">
+<form class="card card-md" action="{{ site.base }}" method="get">
 	<div class="card-body">
-		<div class="card-title">Login to your account</div>
+		<h2 class="mb-5 text-center">Login to your account</h2>
 
 		<div class="mb-3">
 			<label class="form-label">Email address</label>
@@ -13,7 +13,7 @@
 					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
 				</span>
 			</label>
-			<input type="password" class="form-control" placeholder="Password" autocomplete="off">
+			{% 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">
diff --git a/pages/_includes/cards/sign-up.html b/pages/_includes/cards/sign-up.html
index 83c07f6a6..79db8c585 100644
--- a/pages/_includes/cards/sign-up.html
+++ b/pages/_includes/cards/sign-up.html
@@ -1,6 +1,6 @@
-<form class="card" action="#" method="post">
-	<div class="card-body p-5">
-		<div class="card-title">Create new account</div>
+<form class="card card-md" action="{{ site.base }}" method="get">
+	<div class="card-body">
+		<h2 class="mb-5 text-center">Create new account</h2>
 
 		<div class="mb-3">
 			<label class="form-label">Name</label>
@@ -12,12 +12,12 @@
 		</div>
 		<div class="mb-3">
 			<label class="form-label">Password</label>
-			<input type="password" class="form-control" placeholder="Password">
+			{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
 		</div>
 		<div class="mb-3">
 			<label class="form-check">
 				<input type="checkbox" class="form-check-input"/>
-				<span class="form-check-label">Agree the <a href="#" tabindex="-1">terms and policy</a>.</span>
+				<span class="form-check-label">Agree the <a href="{{ site.base }}" tabindex="-1">terms and policy</a>.</span>
 			</label>
 		</div>
 
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index 25eb47754..e1885cbff 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -24,20 +24,20 @@
 
 <div class="mb-3">
    <label class="form-label">Input with prepended text</label>
-   {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" value="yourfancyusername" %}
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Input with appended text</label>
-   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" value="yourfancydomain" %}
+   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Input with appended link</label>
-	{% include ui/form/input-group.html append-link="Show password" class="input-group-flat" type="password" value="ultrastrongpassword" %}
+	{% include ui/form/input-group.html append-link="Show password" flat=true type="password" value="ultrastrongpassword" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Input with appended icon links</label>
-	{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" class="input-group-flat" %}
+	{% include ui/form/input-group.html append-button="x:Clear search,sliders:Search settings,bell:Add notification" flat=true %}
 </div>
diff --git a/pages/_includes/ui/empty.html b/pages/_includes/ui/empty.html
index 70bd5fb4a..751dd26b2 100644
--- a/pages/_includes/ui/empty.html
+++ b/pages/_includes/ui/empty.html
@@ -18,6 +18,6 @@
    <div class="empty-action">
       {% assign button-text = include.button-text | default: "Search again" %}
       {% assign button-icon = include.button-icon | default: "search" %}
-      {% include ui/button.html text=button-text color="primary" icon=button-icon href="index.html" %}
+      {% include ui/button.html text=button-text color="primary" icon=button-icon href="." %}
    </div>
 </div>
diff --git a/pages/_includes/ui/form/input-group.html b/pages/_includes/ui/form/input-group.html
index 26e2ebb5a..c5de24603 100644
--- a/pages/_includes/ui/form/input-group.html
+++ b/pages/_includes/ui/form/input-group.html
@@ -1,4 +1,4 @@
-<div class="input-group{% if include.class %} {{ include.class }}{% endif %}">
+<div class="input-group{% if include.flat %} input-group-flat{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.prepend %}
 	<div class="input-group-prepend">
 		<span class="input-group-text">
diff --git a/pages/_layouts/error.html b/pages/_layouts/error.html
index 5b55bafe0..d342542ec 100644
--- a/pages/_layouts/error.html
+++ b/pages/_layouts/error.html
@@ -1,10 +1,12 @@
 ---
 layout: base
-body-class: border-top-wide border-primary
+body-class: border-top-wide border-primary d-flex flex-column
 ---
 
-<div class="d-flex align-items-center justify-content-center min-vh-100">
-	{% assign error = site.data.errors[page.error] %}
-	{% assign header = error.header | default: 'Oops… You just found an error page' %}
-	{% include ui/empty.html icon="settings" illustration=error.illustration icon-text=error.title title=header subtitle=error.description button-icon="arrow-left" button-text="Take me home" %}
+<div class="flex-fill d-flex align-items-center justify-content-center">
+	<div class="container-tight py-6">
+		{% assign error = site.data.errors[page.error] %}
+		{% assign header = error.header | default: 'Oops… You just found an error page' %}
+		{% include ui/empty.html icon="settings" illustration=error.illustration icon-text=error.title title=header subtitle=error.description button-icon="arrow-left" button-text="Take me home" %}
+	</div>
 </div>
diff --git a/pages/_layouts/single.html b/pages/_layouts/single.html
index ab5cdf926..aa79f5a81 100644
--- a/pages/_layouts/single.html
+++ b/pages/_layouts/single.html
@@ -1,10 +1,10 @@
 ---
 layout: base
-body-class: border-top-wide border-primary
+body-class: border-top-wide border-primary d-flex flex-column
 ---
 
-<div class="min-h-full d-flex flex-column justify-content-center">
-	<div class="container-narrow py-6">
+<div class="flex-fill d-flex flex-column justify-content-center">
+	<div class="container-tight py-6">
 		<div class="text-center mb-4">
 			<img src="{{ site.base }}/static/logo.svg" height="36" alt="">
 		</div>
diff --git a/pages/tmp-dark.html b/pages/tmp-dark.html
index da1b49342..813ab51bb 100644
--- a/pages/tmp-dark.html
+++ b/pages/tmp-dark.html
@@ -37,7 +37,7 @@ page-title: Dark
 
 					<div class="mb-3">
 						<label class="form-label">Input with appended text</label>
-						{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
+						{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true %}
 					</div>
 
 					<div class="mb-3">
diff --git a/pages/welcome.html b/pages/welcome.html
index f31c31a4d..818669486 100644
--- a/pages/welcome.html
+++ b/pages/welcome.html
@@ -16,7 +16,7 @@ layout: single
 			<div class="mb-3">
 				<label class="form-label">Create your Tabler URL</label>
 				<div class="form-hint">Choose a URL that describes you or your business in a concise way. Make it short and easy to remember so you can share links with ease.</div>
-				{% include ui/form/input-group.html prepend="https://tabler.io/" input-class="pl-1" class="input-group-flat" %}
+				{% include ui/form/input-group.html prepend="https://tabler.io/" input-class="pl-1" flat=true %}
 			</div>
 
 			<div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cae281fa0..ab5ae6c95 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -196,7 +196,7 @@ $container-max-widths: (
 
 $container-variations: (
   tight: 30rem,
-  narrow: 32.5rem,
+  narrow: 45rem,
 ) !default;
 
 $embed-responsive-aspect-ratios: (
diff --git a/scss/ui/typo/_hr.scss b/scss/ui/typo/_hr.scss
index d6f428192..3c1f34352 100644
--- a/scss/ui/typo/_hr.scss
+++ b/scss/ui/typo/_hr.scss
@@ -14,7 +14,7 @@ Hr text
   align-items: center;
   margin: $hr-margin-y 0;
   @include subheader;
-  line-height: 1rem;
+  height: 1px;
 
   &:after,
   &:before {