welcome single page

pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

pages/_includes/ui/hr.html

@@ -1 +1 @@
-<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>
+<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text | default: 'Label' }}</div>

pages/_includes/ui/illustration.html

@@ -1 +1 @@
-<img src="{{ site.base }}/static/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
+<img src="{{ site.base }}/static/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} alt="">

pages/_layouts/base.html

@@ -5,7 +5,6 @@
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-   <meta http-equiv="Content-Language" content="en"/>
 
    <meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
    <meta name="theme-color" content="{{ site.data.colors.blue }}"/>

pages/_layouts/single.html

@@ -3,19 +3,13 @@ layout: base
 body-class: border-top-wide border-primary
 ---
 
-<div class="d-flex h-auto min-h-full justify-content-center">
-    <div class="d-flex align-items-center justify-content-center flex-fill">
-        <div class="container">
-            <div class="row">
-                <div class="col {{ page.col-class | default: 'col-login' }} mx-auto">
-                    <div class="text-center mb-4">
-                        <img src="{{ site.base }}/img/logo.svg" class="h-8" alt="">
-                    </div>
+<div class="min-h-full d-flex flex-column justify-content-center">
+	<div class="container-sm py-6">
+		<div class="text-center mb-4">
+			<img src="{{ site.base }}/static/logo.svg" height="36" alt="">
+		</div>
 
-                    {{ content }}
-                </div>
-            </div>
-        </div>
-    </div>
+		{{ content }}
+	</div>
 </div>
 

pages/welcome.html

@@ -0,0 +1,44 @@
+---
+layout: single
+---
+
+<div style="max-width: 500px; margin: 0 auto">
+	<div class="card">
+		<div class="card-body text-center py-4 p-sm-5">
+			{% include ui/illustration.html image="undraw_work_together_h63l.svg" height="120" class="mb-n2" %}
+			<h1 class="mt-5">Welcome to Tabler!</h1>
+			<p class="text-muted">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
+		</div>
+
+		{% include ui/hr.html text="your data" position="center" class="hr-text-spaceless" %}
+
+		<div class="card-body">
+			<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" %}
+			</div>
+
+			<div>
+				<label class="form-label">Timezone</label>
+				<select class="form-select mb-0">
+					{% for timezone in site.data.timezones %}
+					<option value="{{ timezone.abbr }}"{% if timezone.abbr == 'CEDT' %} selected{% endif %}>{{ timezone.text }}</option>
+					{% endfor %}
+				</select>
+			</div>
+		</div>
+	</div>
+
+	<div class="row align-items-center">
+		<div class="col-3">
+			{% include ui/progress.html value=25 %}
+		</div>
+		<div class="col">
+			<div class="btn-list justify-content-end">
+				{% include ui/button.html text="Set up later" color="link" %}
+				{% include ui/button.html text="Continue" color="primary" %}
+			</div>
+		</div>
+	</div>
+</div>

scss/_dark.scss

@@ -43,6 +43,10 @@
   .input-group-text {
     border-color: $dark-border-color;
   }
+
+  .brand-logo {
+    filter: brightness(0) invert(1);
+  }
 }
 
 @media not print {

scss/_variables.scss

@@ -14,7 +14,7 @@ $icon-fonts: () !default;
 $theme-color-interval: 10% !default;
 
 $light: #f5f7fb !default;
-$dark: #354052 !default;
+$dark: #303645 !default;
 
 $light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
@@ -52,7 +52,7 @@ $body-bg: $light !default;
 $body-color: $dark !default;
 
 $text-muted: mix($body-color, #fff, 64%) !default;
-$border-color: rgba(mix($body-color, #fff, 75%), .24) !default;
+$border-color: rgba(mix($body-color, #fff, 64%), .24) !default;
 
 $hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;
@@ -346,7 +346,7 @@ $yiq-contrasted-threshold: 200 !default;
 
 //progress
 $progress-bg: $light-mix !default;
-$progress-height: .75rem !default;
+$progress-height: .5rem !default;
 
 //ribbons
 $ribbon-margin: .25rem !default;
@@ -377,7 +377,7 @@ $form-check-input-checked-bg-size: .8rem !default;
 
 $form-check-input-checked-border-color: $border-color !default;
 
-$form-select-indicator-color: $border-color !default;
+$form-select-indicator-color: opacify($border-color, .24) !default;
 
 $form-switch-width: 1.75rem !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;

scss/layout/_core.scss

@@ -5,7 +5,7 @@ html {
 }
 
 body {
-  min-height: 100%;
+  height: 100%;
   overflow-y: scroll;
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;

scss/ui/_buttons.scss

@@ -98,10 +98,7 @@
   > .btn,
   > .dropdown {
     margin-bottom: .5rem;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
+    margin-right: .5rem;
   }
 }
 

scss/ui/_forms.scss

@@ -28,11 +28,8 @@ Form hint
 .form-hint {
   font-size: $small-font-size;
   color: $text-muted;
-  margin: 0 0 .5rem;
-
-  .form-label + & {
-    margin-top: -.75rem;
-  }
+  margin: 0 0 .75rem;
+  line-height: $line-height-sm;
 }
 
 /**

scss/ui/_login.scss

@@ -1,3 +1,3 @@
-.col-login {
-  max-width: 24rem;
-}
+//.col-login {
+//  max-width: 24rem;
+//}

scss/ui/typo/_hr.scss

@@ -14,6 +14,7 @@ Hr text
   align-items: center;
   margin: $hr-margin-y 0;
   @include subheader;
+  line-height: 1rem;
 
   &::after,
   &::before {
@@ -64,3 +65,7 @@ Hr text
     }
   }
 }
+
+.hr-text-spaceless {
+  margin: -.5rem 0;
+}