rubjo/victor-mono
1
1
Fork 0
mirror of https://github.com/rubjo/victor-mono.git synced 2024-08-17 02:10:34 +03:00
Code Issues Projects Releases Wiki Activity

Web site: some small upgrades and UX fixes

Browse Source
This commit is contained in:
rubjo 2020-10-13 14:29:20 +02:00
parent bce720cb39
commit 764f5b1518
8 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
package-lock.json generated
View File

@ -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
View File

@ -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
View File

@ -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,

4
src/components/CodeView.vue
View File

@ -111,6 +111,10 @@ export default {
height: 80vh;
}
::v-deep .CodeMirror {
background: transparent;
}
.code {
height: calc(100% - 34px);
font-size: calc(14px + 0.5vw);

15
src/components/Compare.vue
View File

@ -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;
}

3
src/components/Faq.vue
View File

@ -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;
}
}

14
src/styles/globals.scss
View File

@ -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 {

5
src/utils/lazy-load-component.js
View File

@ -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)) {