💄 Site > Landing > Add style

site/src/components/chat/script.js

@@ -204,7 +204,7 @@ export default
 
         scrollToBottom()
         {
-            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight
+            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 10
         },
 
         formatMinutes(time)

site/src/components/landing/quotes.js

@@ -1,39 +1,39 @@
 export default
 [
-    'Keep it simple!',
+    'Keep it simple',
-    'Keep it maintainable!',
+    'Keep it maintainable',
-    'Stick to one naming convention!',
+    'Stick to one naming convention',
-    'Get your code reviewed by someone else!',
+    'Get your code reviewed by someone else',
-    'Get your code reviewed by someone better than you!',
+    'Get your code reviewed by someone better than you',
-    'Consistency is key!',
+    'Consistency is key',
-    'Simplicity is key!',
+    'Simplicity is key',
-    'Use the right tools!',
+    'Use the right tools',
-    'Don\'t repeat yourself!',
+    'Don\'t repeat yourself',
-    'Better refacter sooner than later!',
+    'Better refacter sooner than later',
     'Did you test your code?',
-    'Watch talks!',
+    'Watch talks',
-    'Learn from people better than you!',
+    'Learn from people better than you',
     'Is your code readable?',
-    'The clearer your code, the fewer comments you need!',
+    'The clearer your code, the fewer comments you need',
-    'Update your dependencies!',
+    'Update your dependencies',
-    'Document your code!',
+    'Document your code',
-    'Have clear instructions in your README.md!',
+    'Have clear instructions in your README.md',
-    'Have your software tested by someone else!',
+    'Have your software tested by someone else',
-    'Be consistent in your commit messages!',
+    'Be consistent in your commit messages',
-    'Don\'t invent new standards!',
+    'Don\'t invent new standards',
-    'Choose a styleguide and stick to it!',
+    'Choose a styleguide and stick to it',
-    'CSS can be documented, too!',
+    'CSS can be documented, too',
-    'Don\'t reinvent the wheel!',
+    'Don\'t reinvent the wheel',
-    'Imagine coming back to your code after a year...',
+    'Imagine coming back to your code after a year',
-    'Document your code for your future self!',
+    'Document your code for your future self',
-    'Ask questions!',
+    'Ask questions',
     'Always improve.',
-    'Take a chance!',
+    'Take a chance',
-    'Stay focused!',
+    'Stay focused',
-    'Remove all distractions!',
+    'Remove all distractions',
-    'Make good use of your time!',
+    'Make good use of your time',
-    'Remember your goals!',
+    'Remember your goals',
-    'Know your priorities!',
+    'Know your priorities',
 
     'Comment you code',
     'Don\'t forget to save',
@@ -42,5 +42,7 @@ export default
     'Automates every redundant tasks',
     'Do not forget to thank those who helped you',
     'Choose the coding language that suits the project, not your current knowledge',
-    'Experiment!'
+    'Experiment',
+    'Publish your work',
+    'Finish your work'
 ]

site/src/components/landing/style.styl

@@ -1,7 +1,119 @@
+// Fonts
+@font-face
+    font-family 'DINNextRoundedLTPro'
+    font-weight 300
+    font-style normal
+    src url('../../../static/fonts/DINNextRoundedLTPro-Light.otf')
+
+@font-face
+    font-family 'DINNextRoundedLTPro'
+    font-weight normal
+    font-style normal
+    src url('../../../static/fonts/DINNextRoundedLTPro-Regular.otf')
+
 .landing
+    display flex
+    position fixed
+    align-items center
+    justify-content center
+    flex-direction column
     position absolute
     top 0
     right 0
     width 75%
     height 100%
-    background rgba(0, 255, 0, 0.3)
+    background #2D2D49
+    font-family 'DINNextRoundedLTPro'
+
+.url
+    color #fff
+    font-size 20px
+    margin-bottom 50px
+
+.illustration
+    position relative
+    width 300px
+    height 275px
+    margin-bottom 30px
+
+    .element
+        position absolute
+
+        &.cloud
+            top 0
+            left 0
+
+        &.astronaut
+            top 60px
+            left 70px
+            animation illustration-astronaut 6s infinite alternate
+            will-change transform
+
+            @keyframes illustration-astronaut
+                0%
+                    transform translateX(-10px) translateY(-5px) translateZ(0)
+                100%
+                    transform translateX(10px) translateY(5px) translateZ(0)
+
+        &.book
+            top 170px
+            left 150px
+            animation illustration-book 4.5s infinite alternate
+            will-change transform
+
+            @keyframes illustration-book
+                0%
+                    transform translateX(4px) translateY(-8px) translateZ(0)
+                100%
+                    transform translateX(-4px) translateY(8px) translateZ(0)
+
+        &.star
+            top 0
+            left 0
+            width 8px
+            height 8px
+            opacity 0
+            animation illustration-star 4.5s infinite alternate
+            will-change opacity
+
+            @keyframes illustration-star
+                0%
+                    opacity 0
+                100%
+                    opacity 1
+
+
+            .bar
+                position absolute
+                background #fff
+                border-radius 2px
+
+                &.bar-1
+                    top 0
+                    left 3px
+                    width 2px
+                    height 100%
+
+                &.bar-2
+                    top 3px
+                    left 0
+                    width 100%
+                    height 2px
+
+.title
+    margin-bottom 20px
+    color #fff
+    font-size 35px
+
+.sub-title
+    margin-bottom 35px
+    color #fff
+    font-size 20px
+    opacity 0.5
+    font-weight 300
+
+.quote
+    margin-bottom 35px
+    color #4bd1c5
+    font-size 18px
+

site/src/components/landing/template.html

@@ -1,4 +1,16 @@
 <div class="landing">
+    <div class="url">
+        {{ url }}
+    </div>
+    <div class="illustration">
+        <div class="element star" v-for="index in 20" :style="`left: ${Math.random() * 200 - 50}%;top: ${Math.random() * 200 - 50}%;animation-delay: ${Math.random() * 4}s;`">
+            <span class="bar bar-1"></span>
+            <span class="bar bar-2"></span>
+        </div>
+        <img class="element cloud" src="../../../static/svg/landing-cloud.svg" alt="">
+        <img class="element astronaut" src="../../../static/svg/landing-astronaut.svg" alt="">
+        <img class="element book" src="../../../static/svg/landing-book.svg" alt="">
+    </div>
     <div class="title">
         Welcome to keppler!
     </div>
@@ -6,10 +18,6 @@
         Here you can browse the presenter's code in real time.
     </div>
     <div class="quote">
-        "{{ quote }}"
+        — {{ quote }}
     </div>
-    <div class="url">
-        {{ url }}
-    </div>
-    <img src="../../../static/svg/landing-astronaut.svg" alt="">
 </div>