Some website updates + compare component
@ -48,7 +48,8 @@
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-faq-accordion": "^1.2.1",
|
||||
"vue-scrollTo": "^2.4.1",
|
||||
"vue-social-sharing": "^2.4.6"
|
||||
"vue-social-sharing": "^2.4.6",
|
||||
"vue-twentytwenty": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
|
97
src/App.vue
@ -23,19 +23,7 @@
|
||||
:xs="22"
|
||||
:sm="18"
|
||||
>
|
||||
<p class="columns">
|
||||
Victor Mono is a free programming font with optional
|
||||
<em>semi-connected cursive italics</em>,
|
||||
symbol ligatures (!=, ->>, =>, ===, <=, >=, ++)
|
||||
and Latin, Cyrillic and Greek characters.
|
||||
<br><br>
|
||||
It was drawn from scratch
|
||||
<a
|
||||
v-scroll-to="'#why'"
|
||||
href="javascript:void(0)"
|
||||
>because there just wasn't any</a>
|
||||
free or paid font that I found both readable, effective and elegant.
|
||||
<br><br>
|
||||
<p class="large">
|
||||
<a
|
||||
v-if="theme === 'dark'"
|
||||
:href="stylesDark"
|
||||
@ -56,27 +44,14 @@
|
||||
class="styles-image light"
|
||||
>
|
||||
</a>
|
||||
Victor Mono is a free programming font with optional
|
||||
<em>semi-connected cursive italics</em>,
|
||||
symbol ligatures (!=, ->>, =>, ===, <=, >=, ++)
|
||||
and Latin, Cyrillic and Greek characters.
|
||||
<br><br>
|
||||
The typeface is clean, crisp and narrow, with a large x-height and clear punctuation,
|
||||
making it legible and ideal for code. It comes in seven weights,
|
||||
and is available in Roman, <em>Italic</em> and <em class="alt">Oblique</em>.
|
||||
<br><br>
|
||||
</p>
|
||||
<p class="centre">
|
||||
<em>
|
||||
If you want to say thanks, any
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="donate"
|
||||
@click="paypal"
|
||||
>PayPal</a>
|
||||
or
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="donate"
|
||||
@click="patreon"
|
||||
>Patreon</a>
|
||||
donation is very welcome.
|
||||
</em>
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -112,25 +87,6 @@
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
type="flex"
|
||||
justify="center"
|
||||
>
|
||||
<el-col
|
||||
:xs="22"
|
||||
>
|
||||
<p class="small centre">
|
||||
<em>Test and compare free programming fonts on
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://app.programmingfonts.org#victor-mono"
|
||||
>
|
||||
app.programmingfonts.org</a>
|
||||
</em>
|
||||
⭐️
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div
|
||||
ref="ligatures"
|
||||
@ -194,6 +150,11 @@
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<HeroImage
|
||||
image="glyphs"
|
||||
:theme="theme"
|
||||
/>
|
||||
|
||||
<div class="content alternate-bg">
|
||||
<div
|
||||
id="why"
|
||||
@ -215,16 +176,13 @@
|
||||
:sm="18"
|
||||
>
|
||||
<p class="columns">
|
||||
When it comes to programming fonts, I prefer something strict, readable and relatively
|
||||
condensed for the code proper, complemented with a more
|
||||
<em>informal, flowing and human style</em>
|
||||
When it comes to programming fonts, I prefer something thin, crisp
|
||||
and relatively condensed for the code proper,
|
||||
complemented with a more <em>informal, flowing and human style</em>
|
||||
for things like comments and reserved keywords.
|
||||
<br><br>
|
||||
I've tried lots of alternatives, each with their strengths (Operator Mono: the pricey
|
||||
and hip original, Dank Mono: the cheaper one with a wide, younger look, Fira
|
||||
Code with the ligatures I use plus a zillion more, compressed and endlessly
|
||||
customisable Pragmata or Monoid - the list goes on). However, I always ended up
|
||||
rejecting the fonts I tried because something didn't look right to me:
|
||||
In the past, I always ended up looking for something else after
|
||||
using a font for a while, because something didn't look right to me:
|
||||
<ul>
|
||||
<li>No cursive italics</li>
|
||||
<li>Regular/Roman style was not to my taste</li>
|
||||
@ -239,8 +197,8 @@
|
||||
<li>Combined two fonts too different in style</li>
|
||||
<li>Very expensive</li>
|
||||
</ul>
|
||||
So eventually, I started making something myself. The resulting typeface, although still
|
||||
a work in progress, feels right to me.
|
||||
So eventually, I started sketching and designing something myself.
|
||||
The resulting typeface, although still a work in progress, feels right to me.
|
||||
<br><br>
|
||||
You might like it as well. That's brilliant! You might not. That's also fine: use a font
|
||||
that works for you. 😛
|
||||
@ -248,11 +206,10 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<HeroImage
|
||||
image="glyphs"
|
||||
:theme="theme"
|
||||
/>
|
||||
<div class="content">
|
||||
|
||||
<Compare :theme="theme"/>
|
||||
|
||||
<div class="content alternate-bg">
|
||||
<div
|
||||
id="download"
|
||||
class="scroll-head"
|
||||
@ -370,7 +327,7 @@
|
||||
id="how"
|
||||
class="scroll-head"
|
||||
/>
|
||||
<div class="content alternate-bg">
|
||||
<div class="content">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1 class="centre">
|
||||
@ -413,7 +370,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content alternate-bg">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1 class="centre">
|
||||
@ -582,6 +539,12 @@ export default {
|
||||
height: '37vw',
|
||||
loading: Loader
|
||||
}),
|
||||
Compare: lazyLoadComponent({
|
||||
componentFactory: () => import('@/components/Compare'),
|
||||
background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
|
||||
height: '37vw',
|
||||
loading: Loader
|
||||
}),
|
||||
Faq,
|
||||
Credits
|
||||
},
|
||||
|
BIN
src/assets/img/comparison/anonymous-pro-dark.png
Normal file
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/img/comparison/anonymous-pro-light.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/img/comparison/cartograph-dark.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
src/assets/img/comparison/cartograph-light.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/cascadia-code-dark.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/cascadia-code-light.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/consolas-dark.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
src/assets/img/comparison/consolas-light.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
src/assets/img/comparison/dank-mono-dark.png
Normal file
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/img/comparison/dank-mono-light.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/img/comparison/droid-sans-dark.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/droid-sans-light.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/img/comparison/fantasque-sans-mono-dark.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/fantasque-sans-mono-light.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/fira-code-dark.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/fira-code-light.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/hack-dark.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/hack-light.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/hasklig-dark.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/img/comparison/hasklig-light.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/img/comparison/inconsolata-dark.png
Normal file
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/img/comparison/inconsolata-light.png
Normal file
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/img/comparison/input-dark.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
src/assets/img/comparison/input-light.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/iosevka-dark.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/img/comparison/iosevka-light.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
src/assets/img/comparison/jetbrains-mono-dark.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/jetbrains-mono-light.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/img/comparison/meslo-dark.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/img/comparison/meslo-light.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/monoid-dark.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/img/comparison/monoid-light.png
Normal file
After Width: | Height: | Size: 75 KiB |
BIN
src/assets/img/comparison/operator-mono-dark.png
Normal file
After Width: | Height: | Size: 77 KiB |
BIN
src/assets/img/comparison/operator-mono-light.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/img/comparison/plex-mono-dark.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/plex-mono-light.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/roboto-mono-dark.png
Normal file
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/img/comparison/roboto-mono-light.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/img/comparison/source-code-pro-dark.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/img/comparison/source-code-pro-light.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/img/comparison/sudo-dark.png
Normal file
After Width: | Height: | Size: 55 KiB |
BIN
src/assets/img/comparison/sudo-light.png
Normal file
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/img/comparison/ubuntu-mono-dark.png
Normal file
After Width: | Height: | Size: 62 KiB |
BIN
src/assets/img/comparison/ubuntu-mono-light.png
Normal file
After Width: | Height: | Size: 61 KiB |
BIN
src/assets/img/comparison/victor-mono-dark.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/img/comparison/victor-mono-light.png
Normal file
After Width: | Height: | Size: 76 KiB |
@ -42,13 +42,9 @@
|
||||
Based on
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/rubjo/ultimate-dark"
|
||||
>Ultimate Dark</a>
|
||||
colour scheme
|
||||
(<a
|
||||
target="_blank"
|
||||
href="https://packagecontrol.io/packages/Ultimate%20Dark"
|
||||
>Sublime Text 3 package</a>)
|
||||
href="https://github.com/voronianski/oceanic-next-color-scheme"
|
||||
>Oceanic Next</a>
|
||||
colour scheme by Dmitri Voronianski
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@ -67,8 +63,9 @@
|
||||
<script>
|
||||
// language
|
||||
import 'codemirror/mode/vue/vue.js'
|
||||
import 'codemirror/mode/javascript/javascript.js'
|
||||
// themes css
|
||||
import '@/styles/ultimate-dark.css'
|
||||
import '@/styles/oceanic-next.css'
|
||||
import '@/styles/base-16-light.css'
|
||||
// active-line.js
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
@ -81,7 +78,7 @@ import 'codemirror/addon/comment/comment.js'
|
||||
// sample code
|
||||
// eslint-disable-next-line
|
||||
import mobileCode from '!raw-loader!@/components/Sample-mobile.vue'
|
||||
import desktopCode from '!raw-loader!@/components/Sample-desktop.vue'
|
||||
import desktopCode from '!raw-loader!@/components/Sample-desktop.js'
|
||||
|
||||
export default {
|
||||
name: 'CodeView',
|
||||
@ -95,20 +92,20 @@ export default {
|
||||
return {
|
||||
code: window.innerWidth <= 768 ? mobileCode : desktopCode,
|
||||
cmOptions: {
|
||||
mode: 'text/x-vue',
|
||||
mode: window.innerWidth <= 768 ? 'text/x-vue' : 'text/javascript',
|
||||
tabSize: 2,
|
||||
styleActiveLine: true,
|
||||
line: true,
|
||||
styleSelectedText: true,
|
||||
matchBrackets: true,
|
||||
showCursorWhenSelecting: true,
|
||||
theme: this.theme === 'dark' ? 'ultimate-dark' : 'base16-light'
|
||||
theme: this.theme === 'dark' ? 'oceanic-next' : 'base16-light'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
theme (newVal, oldVal) {
|
||||
this.cm.setOption('theme', newVal === 'dark' ? 'ultimate-dark' : 'base16-light')
|
||||
this.cm.setOption('theme', newVal === 'dark' ? 'oceanic-next' : 'base16-light')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
241
src/components/Compare.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div
|
||||
id="compare"
|
||||
class="scroll-head"
|
||||
/>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1 class="centre">
|
||||
<em>Compare it to </em>
|
||||
<div class="select-container">
|
||||
<div class="select">
|
||||
<select ref="otherFontSelect">
|
||||
<option
|
||||
v-for="font in fonts"
|
||||
:key="font"
|
||||
:value="font.toLowerCase().split(' ').join('-')"
|
||||
>
|
||||
{{ font }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="container">
|
||||
<TwentyTwenty
|
||||
:before="victorMonoImage"
|
||||
:after="otherFontImage"
|
||||
/>
|
||||
</div>
|
||||
<el-row
|
||||
type="flex"
|
||||
justify="center"
|
||||
>
|
||||
<el-col
|
||||
:xs="22"
|
||||
>
|
||||
<p class="small centre">
|
||||
<em>Test and compare free programming fonts on
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://app.programmingfonts.org#victor-mono"
|
||||
>
|
||||
app.programmingfonts.org</a>
|
||||
</em>
|
||||
⭐️
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TwentyTwenty from 'vue-twentytwenty'
|
||||
|
||||
export default {
|
||||
name: 'Compare',
|
||||
components: {
|
||||
TwentyTwenty
|
||||
},
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
otherFont: '',
|
||||
fonts: [
|
||||
'Anonymous Pro',
|
||||
'Cartograph',
|
||||
'Cascadia Code',
|
||||
'Consolas',
|
||||
'Dank Mono',
|
||||
'Droid Sans',
|
||||
'Fantasque Sans Mono',
|
||||
'Fira Code',
|
||||
'Hack',
|
||||
'Hasklig',
|
||||
'Inconsolata',
|
||||
'Input',
|
||||
'Iosevka',
|
||||
'JetBrains Mono',
|
||||
'Meslo',
|
||||
'Monoid',
|
||||
'Operator Mono',
|
||||
'Plex Mono',
|
||||
'Roboto Mono',
|
||||
'Source Code Pro',
|
||||
'Sudo',
|
||||
'Ubuntu Mono'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
victorMonoImage () {
|
||||
return require(`../assets/img/comparison/victor-mono-${this.theme}.png`)
|
||||
},
|
||||
otherFontImage () {
|
||||
return this.otherFont
|
||||
? require(`../assets/img/comparison/${this.otherFont}-${this.theme}.png`)
|
||||
: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.otherFontSelect.addEventListener('change', e => {
|
||||
this.otherFont = e.target.value
|
||||
})
|
||||
|
||||
this.pickRandom()
|
||||
},
|
||||
methods: {
|
||||
pickRandom () {
|
||||
// this.otherFont = this
|
||||
// .fonts[Math.floor(Math.random() * this.fonts.length)]
|
||||
// .toLowerCase().split(' ').join('-')
|
||||
|
||||
const index = Math.floor(Math.random() * this.fonts.length)
|
||||
this.$refs.otherFontSelect.selectedIndex = index
|
||||
this.$refs.otherFontSelect.dispatchEvent(new Event('change'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-container {
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
// Select styling
|
||||
.select {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
height: 28px;
|
||||
margin-left: 5px;
|
||||
line-height: 0.5em;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
border-color: #fff transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 7px 7px 0 7px;
|
||||
transition: all 1s;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
right: 4px;
|
||||
transition: all 1s;
|
||||
}
|
||||
}
|
||||
select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px 0 8px;
|
||||
font-size: 0.5em;
|
||||
font-style: italic;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: var(--text-color);
|
||||
border-width: 2px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
transition-duration: 1s;
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
border-color: var(--text-color);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
transition: all 1s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// Disable default styling on ff
|
||||
-moz-appearance: none;
|
||||
|
||||
// Disable ugly ass outline on firefox
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
// Disable default styling on webkit browsers
|
||||
-webkit-appearance: none;
|
||||
|
||||
// Disable default arrow on IE 11+
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// IE 9 only
|
||||
@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
|
||||
.select {
|
||||
select {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.twentytwenty-container {
|
||||
z-index: 0;
|
||||
img {
|
||||
z-index: auto;
|
||||
}
|
||||
.twentytwenty-overlay {
|
||||
z-index: auto;
|
||||
}
|
||||
.twentytwenty-handle {
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme=light] {
|
||||
.select {
|
||||
&::after {
|
||||
border-color: #000 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -91,6 +91,20 @@
|
||||
>
|
||||
Igor Randjelovic</a>
|
||||
<br><br>
|
||||
<em>Image comparison component</em>
|
||||
<br>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/mhayes/vue-twentytwenty"
|
||||
>
|
||||
vue-twentytwenty</a>
|
||||
by
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/mhayes"
|
||||
>
|
||||
Mark Hayes</a>
|
||||
<br><br>
|
||||
<em>FAQ component</em>
|
||||
<br>
|
||||
<a
|
||||
@ -127,7 +141,6 @@
|
||||
>
|
||||
Element</a>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<em>Sharing component</em>
|
||||
<br>
|
||||
<a
|
||||
|
@ -147,6 +147,10 @@ export default {
|
||||
button {
|
||||
padding-left: 20px;
|
||||
margin-left: 5vw;
|
||||
&::before,
|
||||
&::after {
|
||||
background: var(--color-text-accented);
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion__value {
|
||||
|
@ -42,29 +42,5 @@ export default {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
background-color: #595959;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
background-image:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(#aaa, 0) 0,
|
||||
rgba(#aaa, 0.2) 20%,
|
||||
rgba(#aaa, 0.5) 60%,
|
||||
rgba(#aaa, 0)
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
22
src/components/Sample-desktop.js
Normal file
@ -0,0 +1,22 @@
|
||||
// Ask for a user name until API returns a valid user
|
||||
async function getUser() {
|
||||
let user
|
||||
while (true) {
|
||||
let name = prompt('Enter a user name', 'rubjo')
|
||||
try {
|
||||
user = await loadJson(`https://my.api.com/users/${name}`)
|
||||
break // No error, exit loop and proceed
|
||||
} catch (err) {
|
||||
if (err.response.status === 404) {
|
||||
// Loop will continue after the alert
|
||||
alert(`User "${name} not found, please reenter.`)
|
||||
} else {
|
||||
// Unknown error, rethrow it
|
||||
throw err
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
alert(`Full name: ${user.name}.`)
|
||||
return user
|
||||
}
|
@ -1,72 +0,0 @@
|
||||
<template> <!-- Go ahead and edit me -->
|
||||
<div id="app" mode="inception">
|
||||
<NavBar ref="navbar" :show="showNav" :show-go-to-top="showGoToTop" />
|
||||
<Header ref="header" :show-text="showHeaderText" :theme="theme" />
|
||||
<div class="content">
|
||||
Victor Mono is a free programming font with <em>semi-connected cursive italics</em>,
|
||||
symbol ligatures (!=, ->>, =>, ===, >=, ++) and Latin, Cyrillic and Greek characters.
|
||||
<!-- [...] -->
|
||||
|
||||
<script> /* eslint-disable */
|
||||
import lotsOfStuff from '@/everywhere'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: { NavBar, Header, CodeView, VueFaqAccordion },
|
||||
data () {
|
||||
return { theme: localStorage.getItem('theme') || 'dark' }
|
||||
},
|
||||
computed: {
|
||||
stylesDarkThumb () { return require('./assets/img/styles-dark-thumb.png') },
|
||||
stylesLightThumb () { return require('./assets/img/styles-light-thumb.png') }
|
||||
},
|
||||
mounted () { this.doLotsOfStuff() },
|
||||
methods: {
|
||||
initScrollWatcher () {
|
||||
function throttle (fn, wait) {
|
||||
let time = Date.now()
|
||||
return function () {
|
||||
if ((time + wait - Date.now()) < 0) {
|
||||
setTimeout(fn, wait)
|
||||
time = Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
['scroll', 'resize'].forEach(event => {
|
||||
window.addEventListener(event, throttle(this.setHeaderHeight, 250))
|
||||
window.addEventListener(event, throttle(this.calculateHeaderText, 250))
|
||||
})
|
||||
},
|
||||
thanks (e) {
|
||||
window.open('https://paypal.me/runbjo')
|
||||
setTimeout(() => {
|
||||
window.addEventListener('focus', this.celebrate(e.target))
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'styles/globals.scss';
|
||||
|
||||
em.alt {
|
||||
font-family: 'VictorMono-Oblique', monospace;
|
||||
}
|
||||
|
||||
.horizontal-large-image {
|
||||
width: 100vw;
|
||||
height: 37vw;
|
||||
margin-top: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 6px;
|
||||
font-style: normal;
|
||||
background: var(--background-color-alternate);
|
||||
border-radius: 6px;
|
||||
transition: background 1s;
|
||||
}
|
||||
</style>
|
@ -20,14 +20,14 @@
|
||||
.cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }
|
||||
|
||||
.cm-s-base16-light span.cm-comment { color: #8f5536; font-style: italic;}
|
||||
.cm-s-base16-light span.cm-atom { color: #aa759f; }
|
||||
.cm-s-base16-light span.cm-atom { color: #aa759f; font-style: italic; }
|
||||
.cm-s-base16-light span.cm-number { color: #aa759f; }
|
||||
|
||||
.cm-s-base16-light span.cm-attribute { color: #90a959; font-style: italic;}
|
||||
.cm-s-base16-light span.cm-keyword { color: #ac4142; font-style: italic;}
|
||||
.cm-s-base16-light span.cm-attribute { color: #90a959;}
|
||||
.cm-s-base16-light span.cm-keyword { color: #ac4142;}
|
||||
.cm-s-base16-light span.cm-string { color: #e4af65; }
|
||||
|
||||
.cm-s-base16-light span.cm-variable, .cm-s-base16-light span.cm-builtin, .cm-s-base16-light span.cm-qualifier { color: #90a959; font-style: italic;}
|
||||
.cm-s-base16-light span.cm-variable, .cm-s-base16-light span.cm-builtin, .cm-s-base16-light span.cm-qualifier { color: #90a959;}
|
||||
.cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
|
||||
.cm-s-base16-light span.cm-def { color: #d28445; }
|
||||
.cm-s-base16-light span.cm-bracket { color: #202020; }
|
||||
|
@ -69,6 +69,10 @@ p {
|
||||
column-gap: 25px;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
font-size: calc(0.9rem + 0.7vw);
|
||||
line-height: calc(1.8rem + 0.9vw);
|
||||
}
|
||||
&.small {
|
||||
font-size: calc(0.8rem + 0.2vw);
|
||||
line-height: calc(1.75rem + 0.2vw);
|
||||
@ -229,6 +233,7 @@ h1 {
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
line-height: 1.6em;
|
||||
.small {
|
||||
font-size: 0.5em;
|
||||
line-height: 1em;
|
||||
@ -272,8 +277,10 @@ em.alt {
|
||||
|
||||
.styles-image {
|
||||
float: right;
|
||||
width: 40%;
|
||||
margin: 0 0 5px 15px;
|
||||
height: 20vw;
|
||||
min-height: 300px;
|
||||
max-height: 400px;
|
||||
margin: 0 0 5px 25px;
|
||||
}
|
||||
|
||||
code {
|
||||
|
35
src/styles/oceanic-next.css
Normal file
@ -0,0 +1,35 @@
|
||||
.cm-s-oceanic-next.CodeMirror { background: #304148; color: #f8f8f2; }
|
||||
.cm-s-oceanic-next div.CodeMirror-selected { background: rgba(101, 115, 126, 0.33); }
|
||||
.cm-s-oceanic-next .CodeMirror-line::selection, .cm-s-oceanic-next .CodeMirror-line > span::selection, .cm-s-oceanic-next .CodeMirror-line > span > span::selection { background: rgba(101, 115, 126, 0.33); }
|
||||
.cm-s-oceanic-next .CodeMirror-line::-moz-selection, .cm-s-oceanic-next .CodeMirror-line > span::-moz-selection, .cm-s-oceanic-next .CodeMirror-line > span > span::-moz-selection { background: rgba(101, 115, 126, 0.33); }
|
||||
.cm-s-oceanic-next .CodeMirror-gutters { background: #304148; border-right: 10px; }
|
||||
.cm-s-oceanic-next .CodeMirror-guttermarker { color: white; }
|
||||
.cm-s-oceanic-next .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
|
||||
.cm-s-oceanic-next .CodeMirror-linenumber { color: #d0d0d0; }
|
||||
.cm-s-oceanic-next .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
|
||||
|
||||
.cm-s-oceanic-next span.cm-comment { font-style: italic; color: #65737E; }
|
||||
.cm-s-oceanic-next span.cm-atom { color: #C594C5; font-style: italic;}
|
||||
.cm-s-oceanic-next span.cm-number { color: #F99157; }
|
||||
|
||||
.cm-s-oceanic-next span.cm-property { color: #99C794; }
|
||||
.cm-s-oceanic-next span.cm-attribute,
|
||||
.cm-s-oceanic-next span.cm-keyword { color: #C594C5; }
|
||||
.cm-s-oceanic-next span.cm-builtin { color: #66d9ef; }
|
||||
.cm-s-oceanic-next span.cm-string, .cm-s-oceanic-next span.cm-string-2 { color: #99C794; }
|
||||
|
||||
.cm-s-oceanic-next span.cm-variable,
|
||||
.cm-s-oceanic-next span.cm-variable-2,
|
||||
.cm-s-oceanic-next span.cm-variable-3 { color: #f8f8f2; }
|
||||
.cm-s-oceanic-next span.cm-def { color: #6699CC; }
|
||||
.cm-s-oceanic-next span.cm-bracket { color: #5FB3B3; }
|
||||
.cm-s-oceanic-next span.cm-tag { color: #C594C5; }
|
||||
.cm-s-oceanic-next span.cm-header { color: #C594C5; }
|
||||
.cm-s-oceanic-next span.cm-link { color: #C594C5; }
|
||||
.cm-s-oceanic-next span.cm-error { background: #C594C5; color: #f8f8f0; }
|
||||
|
||||
.cm-s-oceanic-next .CodeMirror-activeline-background { background: rgba(101, 115, 126, 0.33); }
|
||||
.cm-s-oceanic-next .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|