single page fixes

pages/_includes/cards/forgot-password.html

-<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>

pages/_includes/cards/sign-in.html

-<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">

pages/_includes/cards/sign-up.html

-<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>
 

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>

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>

pages/_includes/ui/form/input-group.html

-<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">

pages/_layouts/error.html

 ---
 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>

pages/_layouts/single.html

 ---
 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>

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">

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>

scss/_variables.scss

@@ -196,7 +196,7 @@ $container-max-widths: (
 
 $container-variations: (
   tight: 30rem,
-  narrow: 32.5rem,
+  narrow: 45rem,
 ) !default;
 
 $embed-responsive-aspect-ratios: (

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 {