update opentype feature sample
This commit is contained in:
be5invis
parent
5b01a073cc
commit
64a01a520b
67
index.css
67
index.css
|
|
@ -127,7 +127,7 @@ section#weights > div > span.weightname {
|
|||
margin-right: 2rem;
|
||||
}
|
||||
section#opentype {
|
||||
max-width: 38rem;
|
||||
max-width: 36rem;
|
||||
}
|
||||
section#opentype > h2 {
|
||||
font-weight: 200;
|
||||
|
|
@ -144,34 +144,55 @@ section#opentype > div.hr {
|
|||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
section#opentype > div.sample {
|
||||
section#opentype > div.hr:before, section#opentype > div.hr:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 4em;
|
||||
margin: 0 1em;
|
||||
vertical-align: 0.3em;
|
||||
}
|
||||
section#opentype > div {
|
||||
display: flex;
|
||||
margin-bottom: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
section#opentype > div > span {
|
||||
display: block;
|
||||
line-height: 1.5em;
|
||||
margin: 0.5em 0;
|
||||
height: 4.5em;
|
||||
padding: 0.25em;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
section#opentype > div.sample > span {
|
||||
section#opentype span.normal-example {
|
||||
padding: 0.25em;
|
||||
text-align: right;
|
||||
width: 5rem;
|
||||
}
|
||||
section#opentype span.arrow {
|
||||
line-height: 4.5em;
|
||||
margin: 0 0.5rem 0 0.25em;
|
||||
}
|
||||
section#opentype span.feature-example {
|
||||
border-color: #ccc;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.25em 0.5em;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
section#opentype span.lhs {
|
||||
display: block;
|
||||
font-size: 75%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
section#opentype > div.sample > span.lhs {
|
||||
flex: none;
|
||||
width: 2em;
|
||||
padding-right: 1em;
|
||||
margin-right: 1em;
|
||||
line-height: 3em;
|
||||
position: relative;
|
||||
|
||||
section#opentype span.rhs.sub {
|
||||
color: #989898;
|
||||
}
|
||||
section#opentype > div.sample > span.lhs:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
background: black;
|
||||
margin-top: -0.125em;
|
||||
margin-right: -0.125em;
|
||||
section#opentype span.rhs.sub b {
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
}
|
||||
|
||||
section#preview {
|
||||
|
|
|
|||
17
index.html
17
index.html
|
|
@ -12,7 +12,7 @@
|
|||
<h1>Iosevka</h1>
|
||||
<div id="downlinks">
|
||||
<a href="https://github.com/be5invis/Iosevka/releases/latest"><icon class="icon-cloud-download"></icon>Download Iosevka<span>Version {{version}} “{{codename}}”</span></a>
|
||||
<a href="specimen.html"><icon class="icon-book-open"></icon>View Specimen<span>All characters & styles</span></a>
|
||||
<a href="specimen.html"><icon class="icon-book-open"></icon>View Specimen<span>All characters & styles</span></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -41,12 +41,19 @@
|
|||
</template>
|
||||
</section>
|
||||
|
||||
<!--<section id="opentype">
|
||||
<section id="opentype">
|
||||
<h2>Opentype features</h2>
|
||||
<template v-for="feature in opentypeSamples">
|
||||
<div class="sample"><span class="lhs">{{feature}}</span><span class="rhs" style="-webkit-font-feature-settings:'{{feature}}'; font-feature-settings:'{{feature}}'">volatile int32 *storageMask = ~userInputMask & 0xF000<br><i>volatile int32 *storageMask = ~userInputMask & 0xF000</i></span></div>
|
||||
<template v-for="showcase in opentypeSamples">
|
||||
<template v-if="(typeof showcase === 'string')"><div class="hr">{{showcase}}</div></template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<span class="normal-example"><span class="lhs">default</span><span class="rhs {{(showcase[2])}}">{{{showcase[0]}}}<br><i>{{{showcase[0]}}}</i></span></span>
|
||||
<span class="arrow icon-arrow-right-circle"></span>
|
||||
<span class="feature-example" v-for="feature in (showcase[1])"><span class="lhs">{{feature}}</span><span class="rhs {{(showcase[2])}}" style="-webkit-font-feature-settings:'{{feature}}'; font-feature-settings:'{{feature}}'">{{{showcase[0]}}}<br><i>{{{showcase[0]}}}</i></span></span>
|
||||
</div>
|
||||
</template>
|
||||
</section>-->
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section id="preview" class="{{theme}} {{(isSlab ? 'slab' : '')}} {{(isBold ? 'bold' : '')}} {{(isItalic ? 'italic' : '')}}">
|
||||
<div id="preview-toolbar">
|
||||
|
|
|
|||
24
index.js
24
index.js
|
|
@ -46,7 +46,29 @@ var indexPage = new Vue({
|
|||
snippets: [],
|
||||
snippet: 'javascript',
|
||||
theme: 'color-dark',
|
||||
opentypeSamples: ['cv01','cv02','cv03','cv04','cv05','cv06','cv07','cv08','cv09','cv10'],
|
||||
opentypeSamples: [
|
||||
|
||||
'Stylistic sets',
|
||||
['volatile',['ss01','ss02','ss03'], 'sub', 'il'],
|
||||
['percentage',['ss04','ss05'], 'sub', 'g'],
|
||||
['msk & 0xFF',['ss06','ss07','ss08'], 'sub', '0'],
|
||||
['*ptr=~mask',['ss09','ss10'], 'sub', '*~'],
|
||||
|
||||
'Character Variants',
|
||||
['variable', ['cv01', 'cv02'], 'sub', 'a'],
|
||||
['integer', ['cv03', 'cv04', 'cv05', 'cv06'], 'sub', 'i'],
|
||||
['long',['cv07','cv08','cv09','cv10'], 'sub', 'l'],
|
||||
['git',['cv11','cv12'], 'sub', 'g'],
|
||||
['0x1337F001',['cv13','cv14','cv15'], 'sub', '0'],
|
||||
['~bitsRead',['cv16','cv17'], 'sub', '~'],
|
||||
['*handler',['cv18','cv19'], 'sub', '*']
|
||||
].map(function(item){
|
||||
if(item instanceof Array && item[3]){
|
||||
return [item[0].replace(new RegExp('[' + item[3] + ']', 'g'), '<b>$&</b>'), item[1], item[2]]
|
||||
} else {
|
||||
return item;
|
||||
}
|
||||
}),
|
||||
isSlab: false,
|
||||
isBold: false,
|
||||
isItalic: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user