feat: Page now uses max height + new logo

client/scss/base/base.scss

@@ -1,6 +1,7 @@
 html {
   box-sizing: border-box;
   font-family: $core-font-standard;
+  height: 100%;
 }
 *, *:before, *:after {
   box-sizing: inherit;
@@ -10,12 +11,19 @@ html {
   display: none;
 }
 
+#root {
+  padding-bottom: 67px;
+  position: relative;
+  min-height: 100%;
+}
+
 body {
-	background-color: mc('blue-grey','100');
+	background-color: lighten(mc('blue-grey','50'), 5%);
+  height: 100%;
 }
 
 main {
-	background-color: #FFF;
+	background-color: lighten(mc('blue-grey','50'), 5%);
 }
 
 a {

client/scss/components/footer.scss

@@ -1,13 +1,17 @@
 .footer {
 	background-color: mc('blue-grey','50');
-	border-bottom: 5px solid mc('blue-grey','100');
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 25px;
+	padding: 0 25px;
+  height: 70px;
 	font-size: 13px;
 	font-weight: 500;
 	color: mc('blue-grey','500');
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
 	ul {
 		padding: 0;

client/scss/components/panel.scss

@@ -32,8 +32,8 @@
     &.is-featured {
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
-      background-color: mc('indigo', '300');
-      border-bottom-color: mc('indigo', '400');
+      background-color: mc($primary, '400');
+      border-bottom-color: mc($primary, '500');
       color: #FFF;
 
       > i::before {

client/scss/components/sidebar.scss

@@ -4,7 +4,7 @@
 	color: mc('blue-grey', '50');
 	width: 250px;
 	max-width: 250px;
-	min-height: 80vh;
+	min-height: calc(100vh - 120px);
 
 	aside {
     padding: 1px 0 15px 0;

client/scss/configure.scss

@@ -22,13 +22,9 @@ $primary: 'indigo';
 
 .welcome {
 	text-align: center;
-	padding: 25px 0 0;
+	padding: 50px 0 15px 0;
 	color: mc('grey', '700');
 
-	h1 {
-		margin-top: 5px;
-	}
-
 	h2 {
 		margin: 0;
 	}

views/configure/index.pug

@@ -26,10 +26,9 @@ html(data-logic='configure')
       main
         .container
           transition(name='tst-welcome')
-            .welcome(style={'padding-bottom': '5px'}, v-if='state === "welcome" || state === "restart"')
-              img(src='/favicons/android-icon-96x96.png', alt='Wiki.js')
-              h1 Welcome to Wiki.js!
-              h2(style={'margin-bottom': 0}) A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
+            .welcome(v-if='state === "welcome" || state === "restart"')
+              img(src='/images/logo.png', alt='Wiki.js')
+              h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
           .content(v-cloak)
 
             //- ==============================================
@@ -39,14 +38,14 @@ html(data-logic='configure')
             template(v-if='state === "welcome"')
               .panel
                 h2.panel-title.is-featured
-                  span Introduction
+                  span Welcome!
                   i(v-if='loading')
                 .panel-content.is-text
                   p This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
                   p Detailed information about installation and usage can be found on the #[a(href='https://docs.wiki.requarks.io/') official documentation site]. #[br] Should you have any question or would like to report something that doesn't look right, feel free to create a new issue on the #[a(href='https://github.com/Requarks/wiki/issues') GitHub project].
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start
+                  button.button.is-light-blue(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start
 
             //- ==============================================
             //- SYSTEM CHECK
@@ -68,9 +67,9 @@ html(data-logic='configure')
                   p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] Error: {{ syscheck.error }}
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
                   button.button.is-teal(v-on:click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
-                  button.button.is-indigo(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue
+                  button.button.is-light-blue(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue
 
             //- ==============================================
             //- GENERAL
@@ -111,8 +110,8 @@ html(data-logic='configure')
                       span.desc Should the site be accessible (read only) without login.
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back
-                  button.button.is-indigo(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back
+                  button.button.is-light-blue(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue
 
             //- ==============================================
             //- CONSIDERATIONS
@@ -142,8 +141,8 @@ html(data-logic='configure')
                     p The host URL you specified is localhost. Unless you are a developer running Wiki.js locally on your machine, this is not recommended!
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
-                  button.button.is-indigo(v-on:click='proceedToDb', v-bind:disabled='loading') Continue
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
+                  button.button.is-light-blue(v-on:click='proceedToDb', v-bind:disabled='loading') Continue
 
             //- ==============================================
             //- DATABASE
@@ -164,8 +163,8 @@ html(data-logic='configure')
                       span.desc The connection string to your MongoDB server. Leave the default localhost value if MongoDB is installed on the same server.<br />You can also specify an environment variable as the connection string (e.g. $MONGO_URI).
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToConsiderations', v-bind:disabled='loading') Back
-                  button.button.is-indigo(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToConsiderations', v-bind:disabled='loading') Back
+                  button.button.is-light-blue(v-on:click='proceedToDbcheck', v-bind:disabled='loading || errors.any("db")') Connect
 
             //- ==============================================
             //- DATABASE CHECK
@@ -184,9 +183,9 @@ html(data-logic='configure')
                   p(v-if='!loading && !dbcheck.ok') #[i.icon-square-cross] Error: {{ dbcheck.error }}
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
                   button.button.is-teal(v-on:click='proceedToDbcheck', v-if='!loading && !dbcheck.ok') Try Again
-                  button.button.is-indigo(v-on:click='proceedToPaths', v-if='loading || dbcheck.ok', v-bind:disabled='loading') Continue
+                  button.button.is-light-blue(v-on:click='proceedToPaths', v-if='loading || dbcheck.ok', v-bind:disabled='loading') Continue
 
             //- ==============================================
             //- PATHS
@@ -212,8 +211,8 @@ html(data-logic='configure')
                       span.desc The path where the local git repository will be created, used to store content in markdown files and uploads.
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
-                  button.button.is-indigo(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToDb', v-bind:disabled='loading') Back
+                  button.button.is-light-blue(v-on:click='proceedToGit', v-bind:disabled='loading || errors.any("paths")') Continue
 
             //- ==============================================
             //- GIT
@@ -277,9 +276,9 @@ html(data-logic='configure')
                         span.desc The email to use when pushing commits to the git repository.
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToPaths', v-bind:disabled='loading') Back
-                  button.button.is-indigo.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step
-                  button.button.is-indigo(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToPaths', v-bind:disabled='loading') Back
+                  button.button.is-light-blue.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step
+                  button.button.is-light-blue(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue
             
             //- ==============================================
             //- GIT CHECK
@@ -301,9 +300,9 @@ html(data-logic='configure')
                   p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }}
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
                   button.button.is-teal(v-on:click='proceedToGitCheck', v-if='!loading && !gitcheck.ok') Try Again
-                  button.button.is-indigo(v-on:click='proceedToAdmin', v-if='loading || gitcheck.ok', v-bind:disabled='loading') Continue
+                  button.button.is-light-blue(v-on:click='proceedToAdmin', v-if='loading || gitcheck.ok', v-bind:disabled='loading') Continue
 
             //- ==============================================
             //- ADMINISTRATOR ACCOUNT
@@ -335,8 +334,8 @@ html(data-logic='configure')
                         span.desc Verify your password again.
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
-                  button.button.is-indigo(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
+                  button.button.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue
 
             //- ==============================================
             //- FINAL
@@ -357,7 +356,7 @@ html(data-logic='configure')
                   p(v-if='!loading && !final.ok') #[i.icon-square-cross] Error: {{ final.error }}
                 .panel-footer
                   .progress-bar: div(v-bind:style='{width: currentProgress}')
-                  button.button.is-indigo.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back
+                  button.button.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back
                   button.button.is-teal(v-on:click='proceedToFinal', v-if='!loading && !final.ok') Try Again
                   button.button.is-green(v-on:click='finish', v-if='loading || final.ok', v-bind:disabled='loading') Start
 

views/pages/view.pug

@@ -28,7 +28,7 @@ block rootNavRight
 
 block content
 
-  #page-type-view(data-entrypath=pageData.meta.path)
+  #page-type-view.page-type-container(data-entrypath=pageData.meta.path)
     .container.is-fluid.has-mkcontent
       .columns.is-gapless
 

views/pages/welcome.pug

@@ -10,7 +10,7 @@ block content
   #page-type-welcome
     .container
       .welcome
-        img(src='/favicons/android-icon-144x144.png', alt='Wiki.js')
-        h1 Welcome to your Wiki.js!
+        img(src='/images/logo.png', alt='Wiki.js')
+        h1 Welcome to your wiki!
         h2 Let's get started and create the home page.
         a.button.is-indigo(href='/create/home') Create Home Page