mirror of
https://github.com/rubjo/victor-mono.git
synced 2024-10-26 18:11:11 +03:00
Web site: some small upgrades and UX fixes
This commit is contained in:
parent
bce720cb39
commit
764f5b1518
46
package-lock.json
generated
46
package-lock.json
generated
@ -1787,9 +1787,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"animejs": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.0.tgz",
|
||||
"integrity": "sha512-zhtGl5cS0G2f5DfciMO8uwWpnx06nfFnHlXYYXHBazHep1Lyd6kEtBQP+9hpYKE0dBZjIigHp9VpMO95ZfXQJQ=="
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "3.2.4",
|
||||
@ -7232,9 +7232,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.6.3",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.3.tgz",
|
||||
"integrity": "sha512-fiUvdfCaAXoQTHdKMgTvg6IkecXDcVz6V5rlftUTclF9IKBjMizvSdQaCl/z/6TApDeby5NL+axYou3i0mu1Pg==",
|
||||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
|
||||
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
|
||||
"dev": true
|
||||
},
|
||||
"js-levenshtein": {
|
||||
@ -10668,9 +10668,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.26.10",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz",
|
||||
"integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==",
|
||||
"version": "1.27.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.27.0.tgz",
|
||||
"integrity": "sha512-0gcrER56OkzotK/GGwgg4fPrKuiFlPNitO7eUJ18Bs+/NBlofJfMxmxqpqJxjae9vu0Wq8TZzrSyxZal00WDig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
@ -12117,12 +12117,12 @@
|
||||
}
|
||||
},
|
||||
"stylelint-config-recess-order": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.0.4.tgz",
|
||||
"integrity": "sha512-lWCVL5VyEGz4MOFDhPt79ibhv+E3mqerd/8thzOCN7Nuk+rGNR/AebtyHNeKm1xMm5Ri6czHGxWPXwmrSPo3yQ==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.1.0.tgz",
|
||||
"integrity": "sha512-h269OpnCTcOHR6xBRb+dQPrZnQA62zG3Q5yzP+RH71kn/LjWCoPFRmzg4UoajA42+y5WX8L1TFwqlDPIuojP3w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"stylelint-order": "4.0.x"
|
||||
"stylelint-order": "4.1.x"
|
||||
}
|
||||
},
|
||||
"stylelint-config-recommended": {
|
||||
@ -12141,13 +12141,13 @@
|
||||
}
|
||||
},
|
||||
"stylelint-order": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-4.0.0.tgz",
|
||||
"integrity": "sha512-bXV0v+jfB0+JKsqIn3mLglg1Dj2QCYkFHNfL1c+rVMEmruZmW5LUqT/ARBERfBm8SFtCuXpEdatidw/3IkcoiA==",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-4.1.0.tgz",
|
||||
"integrity": "sha512-sVTikaDvMqg2aJjh4r48jsdfmqLT+nqB1MOsaBnvM3OwLx4S+WXcsxsgk5w18h/OZoxZCxuyXMh61iBHcj9Qiw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "^4.17.15",
|
||||
"postcss": "^7.0.26",
|
||||
"postcss": "^7.0.31",
|
||||
"postcss-sorting": "^5.0.1"
|
||||
}
|
||||
},
|
||||
@ -13064,9 +13064,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"vue": {
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
|
||||
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
|
||||
},
|
||||
"vue-cli-plugin-element": {
|
||||
"version": "1.0.1",
|
||||
@ -13175,9 +13175,9 @@
|
||||
}
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
|
||||
"integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
|
||||
"integrity": "sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"de-indent": "^1.0.2",
|
||||
|
20
package.json
20
package.json
@ -38,15 +38,15 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"animejs": "^3.0.1",
|
||||
"animejs": "^3.2.1",
|
||||
"core-js": "^2.6.5",
|
||||
"dom-confetti": "^0.1.1",
|
||||
"element-ui": "^2.12.0",
|
||||
"dom-confetti": "^0.1.2",
|
||||
"element-ui": "^2.13.2",
|
||||
"granim": "^2.0.0",
|
||||
"typed.js": "^2.0.11",
|
||||
"vue": "^2.6.10",
|
||||
"vue": "^2.6.12",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-faq-accordion": "^1.2.1",
|
||||
"vue-faq-accordion": "^1.6.2",
|
||||
"vue-scrollTo": "^2.4.1",
|
||||
"vue-social-sharing": "^2.4.6",
|
||||
"vue-twentytwenty": "^0.6.2"
|
||||
@ -56,18 +56,18 @@
|
||||
"@vue/cli-plugin-eslint": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"node-sass": "^4.9.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"raw-loader": "^2.0.0",
|
||||
"sass": "^1.23.0",
|
||||
"sass": "^1.27.0",
|
||||
"sass-loader": "^7.3.1",
|
||||
"stylelint": "^10.0.1",
|
||||
"stylelint-config-recess-order": "^2.0.2",
|
||||
"stylelint-config-recess-order": "^2.1.0",
|
||||
"stylelint-config-standard": "^18.3.0",
|
||||
"vue-cli-plugin-element": "^1.0.1",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
}
|
||||
}
|
||||
|
16
src/App.vue
16
src/App.vue
@ -22,7 +22,7 @@
|
||||
:xs="22"
|
||||
:sm="18"
|
||||
>
|
||||
<p class="large">
|
||||
<p>
|
||||
<a
|
||||
v-if="theme === 'dark'"
|
||||
:href="stylesDark"
|
||||
@ -634,20 +634,22 @@ export default {
|
||||
Header,
|
||||
CodeView: lazyLoadComponent({
|
||||
componentFactory: () => import('@/components/CodeView'),
|
||||
background: localStorage.getItem('theme') === 'dark' ? '#304148' : '#f2f2f2',
|
||||
height: '70vh',
|
||||
background: localStorage.getItem('theme') === 'light' ? '#f2f2f2' : '#304148',
|
||||
height: '80vh',
|
||||
loading: Loader
|
||||
}),
|
||||
HeroImage: lazyLoadComponent({
|
||||
componentFactory: () => import('@/components/HeroImage'),
|
||||
background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
|
||||
height: '37vw',
|
||||
background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
|
||||
height: '50vw',
|
||||
maxHeight: '350px',
|
||||
loading: Loader
|
||||
}),
|
||||
Compare: lazyLoadComponent({
|
||||
componentFactory: () => import('@/components/Compare'),
|
||||
background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
|
||||
height: '45vw',
|
||||
background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
|
||||
height: '927px',
|
||||
maxHeight: 'calc(100vw + 48px)',
|
||||
loading: Loader
|
||||
}),
|
||||
Faq,
|
||||
|
@ -111,6 +111,10 @@ export default {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
::v-deep .CodeMirror {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.code {
|
||||
height: calc(100% - 34px);
|
||||
font-size: calc(14px + 0.5vw);
|
||||
|
@ -45,6 +45,15 @@
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<svg>
|
||||
<filter id="posterize">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
|
||||
<feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
|
||||
<feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -194,6 +203,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.twentytwenty-container:hover > ::v-deep .twentytwenty-overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// IE 9 only
|
||||
@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
|
||||
.select {
|
||||
@ -213,7 +226,7 @@ export default {
|
||||
}
|
||||
.twentytwenty-container {
|
||||
z-index: 0;
|
||||
height: 45vw;
|
||||
height: 735px;
|
||||
img {
|
||||
z-index: auto;
|
||||
}
|
||||
|
@ -150,7 +150,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.accordion__value {
|
||||
padding: 0 25px 25px 50px;
|
||||
padding: 0 25px 25px 75px;
|
||||
line-height: calc(2rem + 1vw);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
@ -61,8 +61,8 @@ body {
|
||||
|
||||
p {
|
||||
padding-bottom: 20px;
|
||||
font-size: calc(0.9rem + 0.4vw);
|
||||
line-height: calc(2rem + 0.6vw);
|
||||
font-size: calc(1rem + 0.5vw);
|
||||
line-height: calc(2rem + 1vw);
|
||||
&.columns {
|
||||
column-count: 2;
|
||||
column-width: 18em;
|
||||
@ -73,10 +73,6 @@ p {
|
||||
column-gap: 25px;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
font-size: calc(0.9rem + 0.8vw);
|
||||
line-height: calc(1.6rem + 2vw);
|
||||
}
|
||||
&.small {
|
||||
font-size: calc(0.8rem + 0.2vw);
|
||||
line-height: calc(1.75rem + 0.2vw);
|
||||
@ -207,7 +203,7 @@ p {
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0!important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.scroll-head {
|
||||
@ -289,8 +285,8 @@ em.alt {
|
||||
float: right;
|
||||
height: 20vw;
|
||||
min-height: 300px;
|
||||
max-height: 400px;
|
||||
margin: 0 0 5px 25px;
|
||||
max-height: 325px;
|
||||
margin: 0 0 25px 5vw;
|
||||
}
|
||||
|
||||
.code-segment {
|
||||
|
@ -2,6 +2,7 @@ export default function lazyLoadComponent ({
|
||||
componentFactory,
|
||||
background,
|
||||
height,
|
||||
maxHeight,
|
||||
loading,
|
||||
loadingData
|
||||
}) {
|
||||
@ -15,8 +16,10 @@ export default function lazyLoadComponent ({
|
||||
}),
|
||||
loading: {
|
||||
mounted () {
|
||||
this.$el.style.background = background || '#595959'
|
||||
console.log(background)
|
||||
this.$el.style.backgroundColor = background || '#595959'
|
||||
this.$el.style.height = height || 0
|
||||
this.$el.style.maxHeight = maxHeight || 'auto'
|
||||
// We immediately load the component if
|
||||
// `IntersectionObserver` is not supported.
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
|
Loading…
Reference in New Issue
Block a user