Style public pages, add links to login page

client/src/layouts/PublicLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="skillbox public">
-    <logo></logo>
+    <logo class="public__logo"></logo>
     <router-view class="skillbox__content"></router-view>
     <footer class="skillbox__footer">Footer</footer>
   </div>
@@ -23,6 +23,11 @@ import Logo from '@/components/icons/Logo';
   .public {
     max-width: 800px;
     min-width: 320px;
+
+    &__logo {
+      position: relative;
+      left: -10px;
+    }
   }
 
 </style>

client/src/pages/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <h1 class="login__title">Login</h1>
+    <h1 class="login__title">Melden Sie sich jetzt an</h1>
     <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
       <div class="login-form__field sbform-input">
         <label for="email" class="sbform-input__label">E-Mail</label>
@@ -55,7 +55,14 @@
       <div class="sbform-input">
         <small class="sbform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
       </div>
-      <button class="button button--primary change-form__submit" data-cy="login-button">Anmelden</button>
+      <div class="actions">
+        <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
+        <a class="actions__reset text-link" href="/accounts/password_reset/">Passwort vergessen?</a>
+      </div>
+      <div class="registration">
+        <p class="registration__text">Haben Sie noch kein Konto?</p>
+        <a class="registration__link text-link" href="/accounts/password_reset/">Jetzt registrieren</a>
+      </div>
     </form>
   </div>
 </template>
@@ -127,5 +134,36 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
+
+.login {
+  &__title {
+    margin-top: 48px;
+    font-size: 2.75rem; // 44px
+    margin-bottom: 24px;
+    font-weight: 600;
+  }
+}
+
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
+  }
+}
+
+.registration {
+  margin-top: $large-spacing;
+  &__text {
+    font-family: $sans-serif-font-family;
+    margin-bottom: $small-spacing;
+  }
+}
 
 </style>

client/src/styles/_buttons.scss

@@ -23,6 +23,9 @@
     border: 2px solid $color-silver-light;
     background-color: $color-silver-light;
   }
+  &--big {
+    padding: 15px;
+  }
 }
 
 .icon-button {

server/core/static/styles/main.scss

@@ -101,13 +101,17 @@ input[type=text], input[type=password], input[type=email], select {
 .logo {
   width: 250px;
   height: 48px;
+  position: relative;
+  left: -10px;
 }
 
 /* reset forms */
 
 .reset__heading {
-  font-size: 2.125rem;
-  margin-bottom: 52px;
+  line-height: 4.5rem;
+  font-size: 44px;
+  margin-bottom: 24px;
+  margin-top: 52px;
   font-weight: 600;
 }
 
@@ -154,4 +158,7 @@ input[type=text], input[type=password], input[type=email], select {
   max-width: 800px;
   min-width: 320px;
   margin: 0 auto;
+  @media (max-width: 1023px) {
+    margin: 0 30px;
+  }
 }