rubjo/victor-mono
1
1
Fork 0
mirror of https://github.com/rubjo/victor-mono.git synced 2024-11-26 21:34:47 +03:00
Code Issues Projects Releases Wiki Activity

Tidy up presentation & add crossfade toggling for ligatures

Browse Source
This commit is contained in:
Rune Bjørnerås 2019-10-24 18:09:30 +02:00
parent 437071baf5
commit 09dbadc39e
2 changed files with 75 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/App.vue
View File

@ -124,7 +124,10 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="content"> <div
ref="ligatures"
class="content"
>
<div <div
id="ligatures" id="ligatures"
class="scroll-head" class="scroll-head"
@ -132,7 +135,14 @@
<el-row> <el-row>
<el-col> <el-col>
<h1 class="centre"> <h1 class="centre">
<em>Ligatures</em> <em>Ligatures&nbsp;</em>
<el-button
class="normal"
type=""
@click="toggleLigatures"
>
<em>enabled</em>
</el-button>
</h1> </h1>
</el-col> </el-col>
</el-row> </el-row>
@ -144,13 +154,34 @@
:xs="22" :xs="22"
:sm="18" :sm="18"
> >
<h2> <div class="ligature-samples">
--&gt; -| -&gt; -&gt;&gt; -&lt; -&lt;&lt; -~ .- .= :: := :&gt; :&lt; ;; != !== ?= ## ### #### <h1 class="no-margin centre crossfade visible">
/= /== /&gt; /\ \/ __ && |- |-&gt; |= |=&gt; |&gt; $&gt; ++ +++ +&gt; =:= =!= == === &lt;/ &lt;/&gt; /&gt; ~- -~ ~@
==&gt; =&gt; =&gt;&gt; =&lt;&lt; =/= &gt;- &gt;-&gt; &gt;: &gt;= &gt;=&gt; &gt;&gt;- &gt;&gt;= &lt;- &lt;-- &lt;-&gt; &lt;-&lt; &lt;!-- &lt;~ &lt;~&gt; &lt;~~ ~&gt; ~~ ~~&gt;<br>
&lt;| &lt;|&gt; &lt;$ &lt;$&gt; &lt;+ &lt;+&gt; &lt;= &lt;== &lt;=&gt; &lt;=&lt; &lt;&gt; &lt;&lt;- &lt;&lt;= &lt;~ &lt;~&gt; &lt;~~ &lt;/ &lt;/&gt; ~- &gt;= &lt;= &lt;!-- ## ### #### |- -| |-&gt; |= |=&gt;<br>
~@ ~&gt; ~~ ~~&gt; &gt;- &lt;- &lt;-- --&gt; -&gt; -&lt;
</h2> &gt;-&gt; &gt;&gt;- &lt;&lt;- &lt;-&gt; -&gt;&gt; -&lt;&lt; &lt;-&lt;<br>
==&gt; =&gt; =/= !== != &lt;==
&gt;&gt;= =&gt;&gt; &gt;=&gt; &lt;=&gt; &lt;=&lt; &lt;&lt;= =&lt;&lt;<br>
.- .= =:= =!= == === :: := :&gt; :&lt; &gt;: ;;
&lt;| &lt;|&gt; |&gt; &lt;&gt;<br>
&lt;$ &lt;$&gt; $&gt; &lt;+ &lt;+&gt; +&gt;
?= /= /== /\ \/ __ && ++ +++<br>
</h1>
<h1 class="no-margin centre crossfade hidden no-ligatures">
&lt;/ &lt;/&gt; /&gt; ~- -~ ~@
&lt;~ &lt;~&gt; &lt;~~ ~&gt; ~~ ~~&gt;<br>
&gt;= &lt;= &lt;!-- ## ### #### |- -| |-&gt; |= |=&gt;<br>
&gt;- &lt;- &lt;-- --&gt; -&gt; -&lt;
&gt;-&gt; &gt;&gt;- &lt;&lt;- &lt;-&gt; -&gt;&gt; -&lt;&lt; &lt;-&lt;<br>
==&gt; =&gt; =/= !== != &lt;==
&gt;&gt;= =&gt;&gt; &gt;=&gt; &lt;=&gt; &lt;=&lt; &lt;&lt;= =&lt;&lt;<br>
.- .= =:= =!= == === :: := :&gt; :&lt; &gt;: ;;
&lt;| &lt;|&gt; |&gt; &lt;&gt;<br>
&lt;$ &lt;$&gt; $&gt; &lt;+ &lt;+&gt; +&gt;
?= /= /== /\ \/ __ && ++ +++<br>
</h1>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -631,6 +662,15 @@ export default {
setTimeout(() => { setTimeout(() => {
window.addEventListener('focus', this.celebrate(e.target)) window.addEventListener('focus', this.celebrate(e.target))
}, 1000) }, 1000)
},
toggleLigatures (e) {
e.target.innerText = e.target.innerText === 'enabled'
? 'disabled'
: 'enabled'
this.$refs.ligatures.querySelectorAll('.crossfade').forEach(sample => {
sample.classList.toggle('hidden')
})
} }
} }
} }

26
src/styles/globals.scss
View File

@ -109,6 +109,14 @@ p {
line-height: 0.6em; line-height: 0.6em;
} }
} }
&.normal {
position: relative;
top: -5px;
display: inline;
padding: 0.5em;
font-size: 0.5em;
line-height: 0.5em;
}
} }
[data-theme=light] { [data-theme=light] {
@ -133,6 +141,10 @@ p {
transition: background 1s; transition: background 1s;
} }
.no-ligatures {
font-feature-settings: 'calt' 0;
}
.full-width { .full-width {
width: 100%; width: 100%;
} }
@ -192,6 +204,20 @@ h1 {
font-weight: normal; font-weight: normal;
} }
.ligature-samples {
display: grid;
}
.crossfade {
grid-row: 1;
grid-column: 1;
transition: opacity 0.5s;
}
.hidden {
opacity: 0;
}
.medal { .medal {
width: 100%; width: 100%;
max-width: 150px; max-width: 150px;