diff --git a/site/src/components/file/script.js b/site/src/components/file/script.js index 44e6064..f824fb6 100644 --- a/site/src/components/file/script.js +++ b/site/src/components/file/script.js @@ -1,6 +1,7 @@ import Versions from '@/components/versions' import Viewer from '@/components/viewer' import Tooltip from '@/components/tooltip' +import Illustration from '@/components/illustration' import copyToClipboard from 'copy-to-clipboard' export default @@ -11,7 +12,8 @@ export default { Versions, Viewer, - Tooltip + Tooltip, + Illustration }, computed: diff --git a/site/src/components/file/style.styl b/site/src/components/file/style.styl index 6aa3901..3fc8b8d 100644 --- a/site/src/components/file/style.styl +++ b/site/src/components/file/style.styl @@ -134,4 +134,30 @@ header img max-width 100% - max-height 100% \ No newline at end of file + max-height 100% + +.cant-read + display flex + align-items center + justify-content center + flex-direction column + position absolute + top 0 + right 0 + left 0 + height 100% + + .text + text-align center + margin-bottom 35px + line-height 1.4em + color #9696a4 + font-size 20px + font-weight 300 + font-family 'DINNextRoundedLTPro' + + .download + color #fff + + &:hover + color #4bd1c5 \ No newline at end of file diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html index 69ba95d..3fa11a0 100644 --- a/site/src/components/file/template.html +++ b/site/src/components/file/template.html @@ -15,8 +15,11 @@
-
Sorry, I can't read this file. -
But you can download it + +
+ Sorry, I can't read this file. +
But you can download it. +
diff --git a/site/src/components/illustration/index.vue b/site/src/components/illustration/index.vue new file mode 100644 index 0000000..246515d --- /dev/null +++ b/site/src/components/illustration/index.vue @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/site/src/components/illustration/script.js b/site/src/components/illustration/script.js new file mode 100644 index 0000000..015041a --- /dev/null +++ b/site/src/components/illustration/script.js @@ -0,0 +1,28 @@ +export default +{ + name: 'illustration', + + props: + { + name: { type: String, default: '' } + }, + + data() + { + return { + stars: [] + } + }, + + created() + { + for(let i = 0; i < 20; i++) + { + this.stars.push([ + Math.round(Math.random() * 200 - 50) + '%', + Math.round(Math.random() * 200 - 50) + '%', + Math.random() * 4 + 's' + ]) + } + } +} \ No newline at end of file diff --git a/site/src/components/illustration/style.styl b/site/src/components/illustration/style.styl new file mode 100644 index 0000000..0405ab8 --- /dev/null +++ b/site/src/components/illustration/style.styl @@ -0,0 +1,83 @@ + +.illustration + position relative + width 300px + height 275px + margin-bottom 30px + user-select none + + .element + position absolute + + &.star + top 0 + left 0 + width 8px + height 8px + opacity 0 + animation illustration-star 4.5s ease-in-out 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 + + &.cloud + top 0 + left 0 + + &.astronaut + top 60px + left 70px + animation illustration-astronaut 6s ease-in-out 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 ease-in-out infinite alternate + will-change transform + + @keyframes illustration-book + 0% + transform translateX(4px) translateY(-8px) translateZ(0) + 100% + transform translateX(-4px) translateY(8px) translateZ(0) + + &.sad-robot + top 60px + left 80px + width 130px + animation illustration-sad-robot 6s ease-in-out infinite alternate + will-change transform + + @keyframes illustration-sad-robot + 0% + transform translateX(-10px) translateY(-5px) translateZ(0) + 100% + transform translateX(10px) translateY(5px) translateZ(0) diff --git a/site/src/components/illustration/template.html b/site/src/components/illustration/template.html new file mode 100644 index 0000000..eafefa3 --- /dev/null +++ b/site/src/components/illustration/template.html @@ -0,0 +1,19 @@ +
+ +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
\ No newline at end of file diff --git a/site/src/components/landing/script.js b/site/src/components/landing/script.js index 1a0f638..29503e8 100644 --- a/site/src/components/landing/script.js +++ b/site/src/components/landing/script.js @@ -1,5 +1,6 @@ import quotes from './quotes' import Fireworks from '@/components/fireworks' +import Illustration from '@/components/illustration' export default { @@ -7,15 +8,15 @@ export default components: { - Fireworks + Fireworks, + Illustration }, data() { return { focus: false, - fireworksRunning: false, - stars: [] + fireworksRunning: false } }, @@ -33,18 +34,6 @@ export default } }, - created() - { - for(let i = 0; i < 20; i++) - { - this.stars.push([ - Math.round(Math.random() * 200 - 50) + '%', - Math.round(Math.random() * 200 - 50) + '%', - Math.random() * 4 + 's' - ]) - } - }, - methods: { onFocusChange(value) diff --git a/site/src/components/landing/style.styl b/site/src/components/landing/style.styl index d410665..9ba085e 100644 --- a/site/src/components/landing/style.styl +++ b/site/src/components/landing/style.styl @@ -13,7 +13,6 @@ .landing display flex - position fixed align-items center justify-content center flex-direction column @@ -25,78 +24,8 @@ background #2D2D49 font-family 'DINNextRoundedLTPro' -.illustration - position relative - width 300px - height 275px - margin-bottom 30px - user-select none - - .element - position absolute - - &.cloud - top 0 - left 0 - - &.astronaut - top 60px - left 70px - animation illustration-astronaut 6s ease-in-out 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 ease-in-out 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 ease-in-out 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 + margin-bottom 12px color #fff font-size 35px diff --git a/site/src/components/landing/template.html b/site/src/components/landing/template.html index 7324457..07772d8 100644 --- a/site/src/components/landing/template.html +++ b/site/src/components/landing/template.html @@ -4,15 +4,7 @@ {{ url }} -
-
- - -
- - - -
+
Welcome to keppler! diff --git a/site/static/svg/landing-astronaut.svg b/site/static/svg/illustration-astronaut.svg similarity index 100% rename from site/static/svg/landing-astronaut.svg rename to site/static/svg/illustration-astronaut.svg diff --git a/site/static/svg/landing-book.svg b/site/static/svg/illustration-book.svg similarity index 100% rename from site/static/svg/landing-book.svg rename to site/static/svg/illustration-book.svg diff --git a/site/static/svg/landing-cloud.svg b/site/static/svg/illustration-cloud.svg similarity index 100% rename from site/static/svg/landing-cloud.svg rename to site/static/svg/illustration-cloud.svg diff --git a/site/static/svg/illustration-sad-robot.svg b/site/static/svg/illustration-sad-robot.svg new file mode 100644 index 0000000..3532a72 --- /dev/null +++ b/site/static/svg/illustration-sad-robot.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +