💄 Site > Landing > Add style
This commit is contained in:
brunosimon
@@ -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)
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
export default
|
||||
[
|
||||
'Keep it simple!',
|
||||
'Keep it maintainable!',
|
||||
'Stick to one naming convention!',
|
||||
'Get your code reviewed by someone else!',
|
||||
'Get your code reviewed by someone better than you!',
|
||||
'Consistency is key!',
|
||||
'Simplicity is key!',
|
||||
'Use the right tools!',
|
||||
'Don\'t repeat yourself!',
|
||||
'Better refacter sooner than later!',
|
||||
'Keep it simple',
|
||||
'Keep it maintainable',
|
||||
'Stick to one naming convention',
|
||||
'Get your code reviewed by someone else',
|
||||
'Get your code reviewed by someone better than you',
|
||||
'Consistency is key',
|
||||
'Simplicity is key',
|
||||
'Use the right tools',
|
||||
'Don\'t repeat yourself',
|
||||
'Better refacter sooner than later',
|
||||
'Did you test your code?',
|
||||
'Watch talks!',
|
||||
'Learn from people better than you!',
|
||||
'Watch talks',
|
||||
'Learn from people better than you',
|
||||
'Is your code readable?',
|
||||
'The clearer your code, the fewer comments you need!',
|
||||
'Update your dependencies!',
|
||||
'Document your code!',
|
||||
'Have clear instructions in your README.md!',
|
||||
'Have your software tested by someone else!',
|
||||
'Be consistent in your commit messages!',
|
||||
'Don\'t invent new standards!',
|
||||
'Choose a styleguide and stick to it!',
|
||||
'CSS can be documented, too!',
|
||||
'Don\'t reinvent the wheel!',
|
||||
'Imagine coming back to your code after a year...',
|
||||
'Document your code for your future self!',
|
||||
'Ask questions!',
|
||||
'The clearer your code, the fewer comments you need',
|
||||
'Update your dependencies',
|
||||
'Document your code',
|
||||
'Have clear instructions in your README.md',
|
||||
'Have your software tested by someone else',
|
||||
'Be consistent in your commit messages',
|
||||
'Don\'t invent new standards',
|
||||
'Choose a styleguide and stick to it',
|
||||
'CSS can be documented, too',
|
||||
'Don\'t reinvent the wheel',
|
||||
'Imagine coming back to your code after a year',
|
||||
'Document your code for your future self',
|
||||
'Ask questions',
|
||||
'Always improve.',
|
||||
'Take a chance!',
|
||||
'Stay focused!',
|
||||
'Remove all distractions!',
|
||||
'Make good use of your time!',
|
||||
'Remember your goals!',
|
||||
'Know your priorities!',
|
||||
'Take a chance',
|
||||
'Stay focused',
|
||||
'Remove all distractions',
|
||||
'Make good use of your time',
|
||||
'Remember your goals',
|
||||
'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'
|
||||
]
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user