From a9e7325b86d7a60f54ec10872210ee13b8a15322 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 3 Jun 2021 13:11:02 +0200
Subject: [PATCH] Style hello page, style mobile

---
 client/src/pages/hello.vue | 70 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index e14a2854..a3d0d361 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -18,6 +18,7 @@
       <p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
       Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
     </div>
+    <logo class="logo" />
     <div class="login-actions">
       <h2
         class="login-actions__title"
@@ -42,6 +43,19 @@
         href="/api/oauth/login/"
         data-cy="oauth-login">Anleitung anschauen</a>
     </div>
+    <div class="links">
+      <ul class="links__list">
+        <li class="links__list-item">
+          <a href="">Lizenz kaufen</a>
+        </li>
+        <li class="links__list-item">
+          <a href="">Support</a>
+        </li>
+        <li class="links__list-item">
+          <a href="">Datenschutz</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -51,13 +65,15 @@
   import pageTitleMixin from '@/mixins/page-title';
   import HepLogo from '@/components/icons/HepLogo';
   import EhbLogo from '@/components/icons/EhbLogo';
+  import Logo from '@/components/icons/Logo';
 
   export default {
     mixins: [pageTitleMixin],
     components: {
       LoadingButton,
       HepLogo,
-      EhbLogo
+      EhbLogo,
+      Logo
     },
 
     data() {
@@ -75,7 +91,25 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
+  $hello-block-margin: 2*$medium-spacing;
+
+  .logo {
+    display: block;
+    width: 300px;
+    margin: $small-spacing auto 0;
+
+    @include desktop {
+      display: none;
+    }
+  }
+
   .about {
+    display: none;
+
+    @include desktop {
+      display: block;
+    }
+
     &__text {
       margin-top: $medium-spacing;
       @include regular-text;
@@ -107,7 +141,7 @@
   .login-actions {
     @include widget-shadow;
 
-    margin-top: $large-spacing;
+    margin-top: $hello-block-margin;
     padding: $medium-spacing;
 
     &__title {
@@ -125,10 +159,40 @@
   }
 
   .information {
-    margin-top: $large-spacing;
+    margin-top: $hello-block-margin;
     > p, a {
       @include regular-text;
     }
   }
 
+  .links {
+    margin-top: $hello-block-margin;
+    display: flex;
+
+    &__list-item {
+
+      color: $color-silver-dark;
+
+      > a {
+        @include regular-text;
+      }
+
+      flex-direction: column;
+      margin-top: $medium-spacing;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      @include desktop {
+        display: inline-block;
+        flex-direction: row;
+
+        &:not(:last-child) {
+          margin-right: 1rem;
+        }
+     }
+    }
+  }
+
 </style>