suzanne.soy/Iosevka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

r1.0-beta4

Browse Source
This commit is contained in:
be5invis 2015-11-07 02:12:08 +08:00
parent 3e477851e5
commit 18c71c19d7
27 changed files with 836 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
homepage.css Normal file
View File

@ -0,0 +1,190 @@
html {
font-size: 16px;
}
@font-face {
font-family: IosevkaWEB;
src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
src: url('iosevka-italic.woff') format('woff'), url('iosevka-italic.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-weight: bold;
src: url('iosevka-bold.woff') format('woff'), url('iosevka-bold.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
font-weight: bold;
src: url('iosevka-bolditalic.woff') format('woff'), url('iosevka-bolditalic.ttf') format('truetype');
}
a {
color: black;
background-image: linear-gradient(white 50%, #888 50%);
background-position: 0px 1.075em;
background-repeat: repeat-x;
background-size: 2px 2px;
text-decoration: none;
text-shadow: white -1px 0px 0px, white 1px 0px 0px;
}
a:hover {
background-image: linear-gradient(white 50%, black 50%);
}
html, body, pre, code {
font-family: "IosevkaWEB", monospace;
}
body {
margin: 0;
padding: 0;
line-height: 1.5;
-moz-font-feature-settings: "locl";
-ms-font-feature-settings: "locl";
-webkit-font-feature-settings: "locl";
font-feature-settings: "locl";
}
p {
margin: 1rem 0;
}
section {
max-width: 50rem;
padding: 4rem 1rem;
margin: 0 auto;
}
section#introduction h1 {
text-align: center;
font-size: 10rem;
}
section#introduction #downlinks {
display: flex;
justify-content: center;
}
section#introduction #downlinks a {
display: block;
flex: none;
width: 10em;
margin: 0.5em;
padding: 0.5em 0.5em 0.5em 3em;
background: black;
text-shadow: none;
text-align: left;
color: white;
position: relative;
line-height: 1em;
}
section#introduction #downlinks a:hover {
background: #333;
}
section#introduction #downlinks a icon {
position: absolute;
display: block;
font-size: 1.5em;
top: 50%;
margin-top: -0.5em;
left: 0.5em;
}
section#introduction #downlinks a span {
display: block;
font-size: 60%;
}
section + section:before {
content: ' ';
display: block;
height: 1px;
background: #eee;
position: absolute;
left: 0;
right: 0;
margin-top: -4rem;
}
section#descriptions {
display: flex;
justify-content: space-between;
}
section#descriptions h2 {
margin: 3rem 0 0.5rem;
}
section#descriptions h2 + p {
margin-top: 0.5rem;
}
section#descriptions ul.col {
list-style: none;
padding: 0;
margin: 0;
flex: none;
width: calc((100% - 2rem) / 2);
}
section#preview {
max-width: none;
text-align: center;
transition: background 1.2s ease;
font-size: smaller;
}
section#preview pre {
display: inline-block;
text-align: left;
}
span.options a {
margin-right: 0.5em;
background-position: 0px 11.075em;
}
span.options a.active, span.options a:hover {
background-position: 0px 1.075em;
}
/* hljs */
section.light {
background-color: hsl(39, 6%, 95%);
color: #333;
}
.light .hljs-keyword, .light .hljs-class, .light .hljs-tag, .light .hljs-pseudo, .light .hljs-attr_selector, .light .hljs-constant, .light .xml .hljs-title {
color: #446fbd;
}
.light .hljs-comment {
color: hsl(0, 0%, 62%);
}
.light .hljs-title, .light .hljs-attribute, .light .hljs-params {
color: #8757ad;
}
.light .hljs-variable {
color: #535353;
}
.light .hljs-string, .light .hljs-pi, .light .language-less .hljs-keyword, .light .xml .hljs-value {
color: #e88501;
}
.light .hljs-number, .light .xml .hljs-attribute {
color: #6d8600;
}
section.dark {
background-color: hsl(39, 6%, 12%);
color: #dddddd;
}
.dark .hljs-keyword, .dark .hljs-class, .dark .hljs-tag, .dark .hljs-pseudo, .dark .hljs-attr_selector, .dark .hljs-constant, .dark .xml .hljs-title {
color: #6c9ef8;
}
.dark .hljs-comment {
color: #767676;
}
.dark .hljs-title, .dark .hljs-attribute, .dark .hljs-params {
color: #b77fdb;
}
.dark .hljs-variable {
color: #dddddd;
}
.dark .hljs-string, .dark .hljs-pi, .dark .language-less .hljs-keyword, .dark .xml .hljs-value {
color: #D89333;
}
.dark .hljs-number, .dark .xml .hljs-attribute {
color: #85a300;
}

641
index.html
View File

@ -1,291 +1,374 @@
<!DOCTYPE html> <!DOCTYPE html><html>
<html> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Iosevka</title> <title>Iosevka</title>
<style> <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.2.3/css/simple-line-icons.min.css" rel="stylesheet">
html { <style> @import url(homepage.css); </style>
font-size: 16px;
}
@font-face {
font-family: IosevkaWEB;
src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
src: url('iosevka-italic.woff') format('woff'), url('iosevka-italic.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-weight: bold;
src: url('iosevka-bold.woff') format('woff'), url('iosevka-bold.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
font-weight: bold;
src: url('iosevka-bolditalic.woff') format('woff'), url('iosevka-bolditalic.ttf') format('truetype');
}
a {
color: black;
background-image: linear-gradient(white 50%, #888 50%);
background-position: 0px 1.075em;
background-repeat: repeat-x;
background-size: 2px 2px;
text-decoration: none;
text-shadow: white -1px 0px 0px, white 1px 0px 0px;
}
a:hover {
background-image: linear-gradient(white 50%, black 50%);
}
body {
width: 68rem;
margin: 0 auto;
padding: 6rem 0;
}
p, pre, .show, .show samp, #links {
font-family: "IosevkaWEB", monospace;
line-height: 1.5;
-moz-font-feature-settings: "locl";
-ms-font-feature-settings: "locl";
-webkit-font-feature-settings: "locl";
font-feature-settings: "locl";
}
.cc { font-family: "IosevkaCCWeb", monospace!important }
p {
margin: 0.5rem 0;
}
div.show {
font-size: 2rem;
width: 68rem;
border-bottom: 1px dotted #ccc;
}
div.show.bold { font-weight: bold }
div.show.italic { font-style: italic }
div.block {
display: flex;
width: 68rem;
flex-wrap: wrap;
margin-bottom: -1px;
}
.show div.block span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
padding: 1rem;
flex: none;
text-align: center;
position: relative;
cursor: default;
}
.show div.block span.indicator {
font-size: 1rem;
}
.show div.block span.missing {
opacity: 0.1
}
.show div.block span.present:before {
display: none;
content: attr(alt);
position: absolute;
font-size: 0.33em;
top: -2em;
left: -5em;
right: -5em;
text-align: center;
font-weight: normal;
font-style: normal;
text-shadow: white 0 0 0.4em;
}
.show div.block span.present:hover {
background: #eee;
}
.show div.block span.present:hover:before {
display: block;
}
.show div.block span > s {
text-decoration: none;
position: relative;
}
.show div.block span > s > d {
position: absolute;
z-index: 2;
color: #ddd;
text-shadow: 0 0 2px white;
}
.show div.block span.present:hover s:before {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 0.2em;
border-right: 1px solid rgba(255, 0, 0, 0.1);
border-top: 1px solid rgba(255, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 0, 0, 0.1);
}
.show div.block span.present:hover s:after {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 0.2em;
border-left: 1px solid rgba(255, 0, 0, 0.1);
border-top: 1px solid rgba(255, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 0, 0, 0.1);
}
.show .smp {
font-size: 1rem;
margin: 1rem 0;
}
.show samp {
display: flex;
font-size: 1rem;
white-space: pre;
}
.show samp > span.langname {
display: inline-block;
background: #eee;
padding: 0.5em;
flex: none;
font-weight: normal;
font-style: normal;
min-width: 12em;
text-align: right;
}
.show samp > span.sentence {
flex: 1;
padding: 0.5em;
}
#links {
margin-top: 6rem;
width: 68rem;
display: flex;
border-bottom: 2px solid black;
background: white;
}
#links a {
display: block;
flex: 1;
padding: 1rem 0;
text-align: center;
text-decoration: none;
color: black;
background: none;
text-shadow: none;
}
#links a.active {
background: black;
color: white;
}
</style>
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script> <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script> <script>if (!window.Zepto) document.write('<script src="zepto.min.js">\x3C/script>')</script>
if (!window.Zepto) document.write('<script src="zepto.min.js">\x3C/script>') </head>
</script>
</html>
<body> <body>
<p>Iosevka is a monospace coding typeface inspired by <a href="http://www.fsd.it/fonts/pragmatapro.htm">Pragmata Pro</a>, <a href="http://mplus-fonts.osdn.jp/">M+</a> and <a href="http://www.parachute.gr/typefaces/allfonts/din-mono-pro">PF DIN Mono</a>. It is designed to have a narrow shape to be space efficient and compatible to CJK characters.</p> <section id="introduction">
<p>The current release is <strong><a href="https://github.com/be5invis/Iosevka/releases/tag/v1.0-beta3">v1.0-beta3 “Agui”</a></strong>. You can find all releases <a href="https://github.com/be5invis/Iosevka/releases/">here</a>.</p> <h1>Iosevka</h1>
<p>By the way it is completely generated by <a href="http://github.com/be5invis/Iosevka">code</a>.</p> <div id="downlinks">
<div id="links"></div> <a href="https://github.com/be5invis/Iosevka/releases/latest"><icon class="icon-cloud-download"></icon>Download Iosevka<span>1.0-beta4 “Yamanashi”</span></a>
<script> <a href="specimen.html"><icon class="icon-book-open"></icon>View Specimen<span>All characters & styles</span></a>
function padzero(s, n){ </div>
while(s.length < n) s = '0' + s; </section>
return s;
}
var BLOCKSIZE = 16 * 4;
var fonts = [
{name: 'iosevka-regular', cls: '', display: 'Regular'},
{name: 'iosevka-bold', cls: 'bold', display: 'Bold'},
{name: 'iosevka-italic', cls:'italic', display: 'Italic'},
{name: 'iosevka-bolditalic', cls:'bold italic', display: 'Bolditalic'}
];
var sampleSentences = [
{code: 'en', lang: 'English', sample: 'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'},
{lang: 'Powerline', sample: '<span style="background:black;color:white"> NORMAL </span><span style="background:#ccc;color:black;font-style:normal">\uE0B0</span><span style="background:#ccc;color:black"> <span style="font-style:normal">\uE0A0</span> master <span style="font-style:normal">\uE0B1</span> glyphs/powerline.patel </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B0</span><span style="background:#eee;color:#555"> dos <span style="font-style:normal">\uE0B3</span> utf-8 <span style="font-style:normal">\uE0B3</span> PatEL </span><span style="background:#eee;color:#ccc;font-style:normal">\uE0B2</span><span style="background:#ccc"> 2% </span><span style="background:#ccc;color:black;font-style:normal">\uE0B2</span><span style="color:white;background:black"> \uE0A1 1:1 </span>'},
{lang: 'IPA', sample: '[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'},
{code: 'bg', lang: 'Bulgarian', sample: 'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'},
{code: 'cs', lang: 'Czech', sample: 'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'},
{code: 'fi', lang: 'Finnish', sample: 'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'},
{code: 'fr', lang: 'French', sample: 'Voix ambiguë d\'un cœur qui au zéphyr préfère les jattes de kiwi.'},
{code: 'de', lang: 'German', sample: 'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'},
{code: 'el', lang: 'Greek (monotonic)', sample: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'},
{code: 'el', lang: 'Greek (polytonic)', sample: 'Ἄδμηθ\', ὁρᾷς γὰρ τἀμὰ πράγμαθ\' ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '},
{code: 'hu', lang: 'Hungarian', sample: 'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'},
{code: 'is', lang: 'Icelandic', sample: 'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'},
{code: 'ga', lang: 'Irish', sample: 'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'},
{code: 'lv', lang: 'Latvian', sample: 'Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku.'},
{code: 'lt', lang: 'Lithuanian', sample: 'Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą.'},
{code: 'mk', lang: 'Macedonian', sample: 'Ѕидарски пејзаж: шугав билмез со чудење џвака ќофте и кељ на туѓ цех.'},
{code: 'nb', lang: 'Norwegian', sample: 'Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz'},
{code: 'pl', lang: 'Polish', sample: 'Pchnąć w tę łódź jeża lub ośm skrzyń fig.'},
{code: 'pt', lang: 'Portuguese', sample: 'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'},
{code: 'ro', lang: 'Romanian', sample: 'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'},
{code: 'ru', lang: 'Russian', sample: 'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'},
{code: 'sr', lang: 'Serbian', sample: 'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'},
{code: 'es', lang: 'Spainish', sample: 'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'},
{code: 'tr', lang: 'Turkish', sample: 'Pijamalı hasta yağız şoföre çabucak güvendi.'},
{code: 'uk', lang: 'Ukranian', sample: 'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'}
]
var links = []; <section id="descriptions">
function Click(j, c){ <ul class="col">
return function(){ <li><h2>Concept</h2>
for(var k = 0; k < links.length; k++) if(k === j) { <p>Iosevka is a slender monospace typeface inspired by <a href="http://www.fsd.it/fonts/pragmatapro.htm">Pragmata Pro</a>, <a href="http://mplus-fonts.osdn.jp/">M+</a> and <a href="http://www.parachute.gr/typefaces/allfonts/din-mono-pro">PF DIN Mono</a>, designed to be the ideal font for programming.</p>
links[k].addClass('active') </li>
} else { <li><h2>Features</h2>
links[k].removeClass('active') <p>Slender and distinguishable glyphs with serious geometry. Powerful world language support. Fully hinted for screen display.</p>
} </li>
sampDiv[0].className = coverageDiv[0].className = 'show ' + c <li><h2>Open Source</h2>
return false; <p>Iosevka is completely generated from its <a href="https://github.com/be5invis/Iosevka">source code</a>. You can build your own variant by adjusting its <a href="https://github.com/be5invis/Iosevka/blob/master/parameters.toml">parameters</a>.</p>
} </li>
} </ul>
var sampDiv = $('<div>').addClass('show'); <ul class="col">
sampleSentences.forEach(function(record){ <li><h2>Support</h2>
var sample = $('<samp>').attr('lang', record.code || '').attr('xml:lang', record.code || '').append('<span class="langname">' + record.lang + '</span><span class="sentence">' + record.sample + '</span>'); <p>Iosevka comes in regular, bold, italic and bold-italic with over 2000 latin, greek, cyrillic, phonetic and PowerLine glyphs. A IosevkaCC variant is also provided, with several symbols enwiden, to be compatible with most CJK typefaces.</p>
sampDiv.append(sample); </li>
}); <li><h2>Readme</h2>
var coverageDiv = $('<div>').addClass('show'); <p>The instructions, building procedure, and other informations can be found in <a href="https://github.com/be5invis/Iosevka/blob/master/README.md">its readme</a>.</p>
$.getJSON(fonts[0].name + '.charmap', function(data){ </li>
var uhash = []; <li><h2>Preview</h2>
var whash = []; <p><span id="themes-holder" class="options"></span>| <span id="samples-holder" class="options"></span></p>
for(var j = 0; j < data.length; j++) { </li>
var unicodes = data[j][1]; </ul>
if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){ </section>
uhash[unicodes[k]] = data[j][0].trim()
whash[unicodes[k]] = data[j][2] <section id="preview">
} <pre id="javascript"><code class="javascript hljs"><span class="hljs-keyword">var</span> languages = [
} {lang: <span class="hljs-string">'English'</span>, sample: <span class="hljs-string">'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
for(var block = 0; block < (65536 / BLOCKSIZE); block++) { {lang: <span class="hljs-string">'IPA'</span>, sample: <span class="hljs-string">'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
var blockdiv = $('<div>').addClass('block'); {lang: <span class="hljs-string">'Bulgarian'</span>, sample: <span class="hljs-string">'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'</span>},
var hasGlyphInThisBlock = false; {lang: <span class="hljs-string">'Czech'</span>, sample: <span class="hljs-string">'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'</span>},
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){ {lang: <span class="hljs-string">'Finnish'</span>, sample: <span class="hljs-string">'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'</span>},
hasGlyphInThisBlock = true; {lang: <span class="hljs-string">'French'</span>, sample: <span class="hljs-string">'Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi.'</span>},
} {lang: <span class="hljs-string">'German'</span>, sample: <span class="hljs-string">'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'</span>},
if(hasGlyphInThisBlock) { {lang: <span class="hljs-string">'Greek'</span>, sample: <span class="hljs-string">'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'</span>},
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) { {lang: <span class="hljs-string">'Ancient Greek'</span>, sample: <span class="hljs-string">'Ἄδμηθ’, ὁρᾷς γὰρ τἀμὰ πράγμαθ’ ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '</span>},
if(j % 16 === 0) blockdiv.append('<span class="indicator">' + padzero(j.toString(16).toUpperCase(), 4) + '</span>') {lang: <span class="hljs-string">'Hungarian'</span>, sample: <span class="hljs-string">'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'</span>},
blockdiv.append('<span class="' + (uhash[j] ? 'present' : 'missing') + '" alt="' + (uhash[j] || '') + '"><s>' + (whash[j] ? '<d>\u25CC</d>\u25CC': '') + String.fromCharCode(j) + '</s></span>') {lang: <span class="hljs-string">'Icelandic'</span>, sample: <span class="hljs-string">'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'</span>},
} {lang: <span class="hljs-string">'Irish'</span>, sample: <span class="hljs-string">'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'</span>},
coverageDiv.append(blockdiv) {lang: <span class="hljs-string">'Latvian'</span>, sample: <span class="hljs-string">'Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku.'</span>},
{lang: <span class="hljs-string">'Lithuanian'</span>, sample: <span class="hljs-string">'Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą.'</span>},
{lang: <span class="hljs-string">'Macedonian'</span>, sample: <span class="hljs-string">'Ѕидарски пејзаж: шугав билмез со чудење џвака ќофте и кељ на туѓ цех.'</span>},
{lang: <span class="hljs-string">'Norwegian'</span>, sample: <span class="hljs-string">'Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz'</span>},
{lang: <span class="hljs-string">'Polish'</span>, sample: <span class="hljs-string">'Pchnąć w tę łódź jeża lub ośm skrzyń fig.'</span>},
{lang: <span class="hljs-string">'Portuguese'</span>, sample: <span class="hljs-string">'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'</span>},
{lang: <span class="hljs-string">'Romanian'</span>, sample: <span class="hljs-string">'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'</span>},
{lang: <span class="hljs-string">'Russian'</span>, sample: <span class="hljs-string">'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'</span>},
{lang: <span class="hljs-string">'Serbian'</span>, sample: <span class="hljs-string" lang="sr">'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'</span>},
{lang: <span class="hljs-string">'Spanish'</span>, sample: <span class="hljs-string">'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'</span>},
{lang: <span class="hljs-string">'Turkish'</span>, sample: <span class="hljs-string">'Pijamalı hasta yağız şoföre çabucak güvendi.'</span>},
{lang: <span class="hljs-string">'Ukrainian'</span>, sample: <span class="hljs-string">'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'</span>}
]
</code></pre>
<pre id="cpp"><code class="cpp hljs">
<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> <span class="hljs-string">&lt;math.h&gt;</span> // smallpt, a Path Tracer by Kevin Beason, 2008 </span>
<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> <span class="hljs-string">&lt;stdlib.h&gt;</span> // Make : g++ -O3 -fopenmp smallpt.cpp -o smallpt </span>
<span class="hljs-preprocessor">#<span class="hljs-keyword">include</span> <span class="hljs-string">&lt;stdio.h&gt;</span> // </span>
<span class="hljs-keyword">struct</span> Vec { <span class="hljs-comment">// Usage: time ./smallpt 5000 &amp;&amp; xv image.ppm </span>
<span class="hljs-keyword">double</span> x, y, z; <span class="hljs-comment">// position, also color (r,g,b) </span>
Vec(<span class="hljs-keyword">double</span> x_=<span class="hljs-number">0</span>, <span class="hljs-keyword">double</span> y_=<span class="hljs-number">0</span>, <span class="hljs-keyword">double</span> z_=<span class="hljs-number">0</span>){ x=x_; y=y_; z=z_; }
Vec <span class="hljs-keyword">operator</span>+(<span class="hljs-keyword">const</span> Vec &amp;b) <span class="hljs-keyword">const</span> { <span class="hljs-keyword">return</span> Vec(x+b.x,y+b.y,z+b.z); }
Vec <span class="hljs-keyword">operator</span>-(<span class="hljs-keyword">const</span> Vec &amp;b) <span class="hljs-keyword">const</span> { <span class="hljs-keyword">return</span> Vec(x-b.x,y-b.y,z-b.z); }
Vec <span class="hljs-keyword">operator</span>*(<span class="hljs-keyword">double</span> b) <span class="hljs-keyword">const</span> { <span class="hljs-keyword">return</span> Vec(x*b,y*b,z*b); }
<span class="hljs-function">Vec <span class="hljs-title">mult</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Vec &amp;b)</span> <span class="hljs-keyword">const</span> </span>{ <span class="hljs-keyword">return</span> Vec(x*b.x,y*b.y,z*b.z); }
<span class="hljs-function">Vec&amp; <span class="hljs-title">norm</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> *<span class="hljs-keyword">this</span> = *<span class="hljs-keyword">this</span> * (<span class="hljs-number">1</span>/<span class="hljs-built_in">sqrt</span>(x*x+y*y+z*z)); }
<span class="hljs-function"><span class="hljs-keyword">double</span> <span class="hljs-title">dot</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Vec &amp;b)</span> <span class="hljs-keyword">const</span> </span>{ <span class="hljs-keyword">return</span> x*b.x+y*b.y+z*b.z; } <span class="hljs-comment">// cross: </span>
Vec <span class="hljs-keyword">operator</span>%(Vec&amp;b){<span class="hljs-keyword">return</span> Vec(y*b.z-z*b.y,z*b.x-x*b.z,x*b.y-y*b.x);}
};
<span class="hljs-keyword">struct</span> Ray { Vec o, d; Ray(Vec o_, Vec d_) : o(o_), d(d_) {} };
<span class="hljs-keyword">enum</span> Refl_t { DIFF, SPEC, REFR }; <span class="hljs-comment">// material types, used in radiance() </span>
<span class="hljs-keyword">struct</span> Sphere {
<span class="hljs-keyword">double</span> rad; <span class="hljs-comment">// radius </span>
Vec p, e, c; <span class="hljs-comment">// position, emission, color </span>
Refl_t refl; <span class="hljs-comment">// reflection type (DIFFuse, SPECular, REFRactive) </span>
Sphere(<span class="hljs-keyword">double</span> rad_, Vec p_, Vec e_, Vec c_, Refl_t refl_):
rad(rad_), p(p_), e(e_), c(c_), refl(refl_) {}
<span class="hljs-function"><span class="hljs-keyword">double</span> <span class="hljs-title">intersect</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Ray &amp;r)</span> <span class="hljs-keyword">const</span> </span>{ <span class="hljs-comment">// returns distance, 0 if nohit </span>
Vec op = p-r.o; <span class="hljs-comment">// Solve t^2*d.d + 2*t*(o-p).d + (o-p).(o-p)-R^2 = 0 </span>
<span class="hljs-keyword">double</span> t, eps=<span class="hljs-number">1e-4</span>, b=op.dot(r.d), det=b*b-op.dot(op)+rad*rad;
<span class="hljs-keyword">if</span> (det&lt;<span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>; <span class="hljs-keyword">else</span> det=<span class="hljs-built_in">sqrt</span>(det);
<span class="hljs-keyword">return</span> (t=b-det)&gt;eps ? t : ((t=b+det)&gt;eps ? t : <span class="hljs-number">0</span>);
} }
}; };
Sphere spheres[] = {<span class="hljs-comment">//Scene: radius, position, emission, color, material </span>
Sphere(<span class="hljs-number">1e5</span>, Vec( <span class="hljs-number">1e5</span>+<span class="hljs-number">1</span>,<span class="hljs-number">40.8</span>,<span class="hljs-number">81.6</span>), Vec(),Vec(<span class="hljs-number">.75</span>,<span class="hljs-number">.25</span>,<span class="hljs-number">.25</span>),DIFF),<span class="hljs-comment">//Left </span>
Sphere(<span class="hljs-number">1e5</span>, Vec(-<span class="hljs-number">1e5</span>+<span class="hljs-number">99</span>,<span class="hljs-number">40.8</span>,<span class="hljs-number">81.6</span>),Vec(),Vec(<span class="hljs-number">.25</span>,<span class="hljs-number">.25</span>,<span class="hljs-number">.75</span>),DIFF),<span class="hljs-comment">//Rght </span>
Sphere(<span class="hljs-number">1e5</span>, Vec(<span class="hljs-number">50</span>,<span class="hljs-number">40.8</span>, <span class="hljs-number">1e5</span>), Vec(),Vec(<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>),DIFF),<span class="hljs-comment">//Back </span>
Sphere(<span class="hljs-number">1e5</span>, Vec(<span class="hljs-number">50</span>,<span class="hljs-number">40.8</span>,-<span class="hljs-number">1e5</span>+<span class="hljs-number">170</span>), Vec(),Vec(), DIFF),<span class="hljs-comment">//Frnt </span>
Sphere(<span class="hljs-number">1e5</span>, Vec(<span class="hljs-number">50</span>, <span class="hljs-number">1e5</span>, <span class="hljs-number">81.6</span>), Vec(),Vec(<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>),DIFF),<span class="hljs-comment">//Botm </span>
Sphere(<span class="hljs-number">1e5</span>, Vec(<span class="hljs-number">50</span>,-<span class="hljs-number">1e5</span>+<span class="hljs-number">81.6</span>,<span class="hljs-number">81.6</span>),Vec(),Vec(<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>,<span class="hljs-number">.75</span>),DIFF),<span class="hljs-comment">//Top </span>
Sphere(<span class="hljs-number">16.5</span>,Vec(<span class="hljs-number">27</span>,<span class="hljs-number">16.5</span>,<span class="hljs-number">47</span>), Vec(),Vec(<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>)*<span class="hljs-number">.999</span>, SPEC),<span class="hljs-comment">//Mirr </span>
Sphere(<span class="hljs-number">16.5</span>,Vec(<span class="hljs-number">73</span>,<span class="hljs-number">16.5</span>,<span class="hljs-number">78</span>), Vec(),Vec(<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>)*<span class="hljs-number">.999</span>, REFR),<span class="hljs-comment">//Glas </span>
Sphere(<span class="hljs-number">600</span>, Vec(<span class="hljs-number">50</span>,<span class="hljs-number">681.6</span>-<span class="hljs-number">.27</span>,<span class="hljs-number">81.6</span>),Vec(<span class="hljs-number">12</span>,<span class="hljs-number">12</span>,<span class="hljs-number">12</span>), Vec(), DIFF) <span class="hljs-comment">//Lite </span>
};
<span class="hljs-function"><span class="hljs-keyword">inline</span> <span class="hljs-keyword">double</span> <span class="hljs-title">clamp</span><span class="hljs-params">(<span class="hljs-keyword">double</span> x)</span></span>{ <span class="hljs-keyword">return</span> x&lt;<span class="hljs-number">0</span> ? <span class="hljs-number">0</span> : x&gt;<span class="hljs-number">1</span> ? <span class="hljs-number">1</span> : x; }
<span class="hljs-function"><span class="hljs-keyword">inline</span> <span class="hljs-keyword">int</span> <span class="hljs-title">toInt</span><span class="hljs-params">(<span class="hljs-keyword">double</span> x)</span></span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">int</span>(<span class="hljs-built_in">pow</span>(clamp(x),<span class="hljs-number">1</span>/<span class="hljs-number">2.2</span>)*<span class="hljs-number">255</span>+<span class="hljs-number">.5</span>); }
<span class="hljs-function"><span class="hljs-keyword">inline</span> <span class="hljs-keyword">bool</span> <span class="hljs-title">intersect</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Ray &amp;r, <span class="hljs-keyword">double</span> &amp;t, <span class="hljs-keyword">int</span> &amp;id)</span></span>{
<span class="hljs-keyword">double</span> n=<span class="hljs-keyword">sizeof</span>(spheres)/<span class="hljs-keyword">sizeof</span>(Sphere), d, inf=t=<span class="hljs-number">1e20</span>;
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">int</span> i=<span class="hljs-keyword">int</span>(n);i--;) <span class="hljs-keyword">if</span>((d=spheres[i].intersect(r))&amp;&amp;d&lt;t){t=d;id=i;}
<span class="hljs-keyword">return</span> t&lt;inf;
}
<span class="hljs-function">Vec <span class="hljs-title">radiance</span><span class="hljs-params">(<span class="hljs-keyword">const</span> Ray &amp;r, <span class="hljs-keyword">int</span> depth, <span class="hljs-keyword">unsigned</span> <span class="hljs-keyword">short</span> *Xi)</span></span>{
<span class="hljs-keyword">double</span> t; <span class="hljs-comment">// distance to intersection </span>
<span class="hljs-keyword">int</span> id=<span class="hljs-number">0</span>; <span class="hljs-comment">// id of intersected object </span>
<span class="hljs-keyword">if</span> (!intersect(r, t, id)) <span class="hljs-keyword">return</span> Vec(); <span class="hljs-comment">// if miss, return black </span>
<span class="hljs-keyword">const</span> Sphere &amp;obj = spheres[id]; <span class="hljs-comment">// the hit object </span>
Vec x=r.o+r.d*t, n=(x-obj.p).norm(), nl=n.dot(r.d)&lt;<span class="hljs-number">0</span>?n:n*-<span class="hljs-number">1</span>, f=obj.c;
<span class="hljs-keyword">double</span> p = f.x&gt;f.y &amp;&amp; f.x&gt;f.z ? f.x : f.y&gt;f.z ? f.y : f.z; <span class="hljs-comment">// max refl </span>
<span class="hljs-keyword">if</span> (++depth&gt;<span class="hljs-number">5</span>) <span class="hljs-keyword">if</span> (erand48(Xi)&lt;p) f=f*(<span class="hljs-number">1</span>/p); <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> obj.e; <span class="hljs-comment">//R.R. </span>
<span class="hljs-keyword">if</span> (obj.refl == DIFF){ <span class="hljs-comment">// Ideal DIFFUSE reflection </span>
<span class="hljs-keyword">double</span> r1=<span class="hljs-number">2</span>*<span class="hljs-function">M_PI*<span class="hljs-title">erand48</span><span class="hljs-params">(Xi)</span>, r2</span>=erand48(Xi), r2s=<span class="hljs-built_in">sqrt</span>(r2);
Vec w=nl, u=((<span class="hljs-built_in">fabs</span>(w.x)&gt;<span class="hljs-number">.1</span>?Vec(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>):Vec(<span class="hljs-number">1</span>))%w).norm(), v=w%u;
Vec d = (<span class="hljs-function">u*<span class="hljs-title">cos</span><span class="hljs-params">(r1)</span>*r2s + v*<span class="hljs-title">sin</span><span class="hljs-params">(r1)</span>*r2s + w*<span class="hljs-title">sqrt</span><span class="hljs-params">(<span class="hljs-number">1</span>-r2)</span>).<span class="hljs-title">norm</span><span class="hljs-params">()</span></span>;
<span class="hljs-keyword">return</span> obj.e + f.mult(radiance(Ray(x,d),depth,Xi));
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (obj.refl == SPEC) <span class="hljs-comment">// Ideal SPECULAR reflection </span>
<span class="hljs-keyword">return</span> obj.e + f.mult(radiance(Ray(x,r.d-n*<span class="hljs-number">2</span>*n.dot(r.d)),depth,Xi));
<span class="hljs-function">Ray <span class="hljs-title">reflRay</span><span class="hljs-params">(x, r.d-n*<span class="hljs-number">2</span>*n.dot(r.d)</span>)</span>; <span class="hljs-comment">// Ideal dielectric REFRACTION </span>
<span class="hljs-keyword">bool</span> into = n.dot(nl)&gt;<span class="hljs-number">0</span>; <span class="hljs-comment">// Ray from outside going in? </span>
<span class="hljs-keyword">double</span> nc=<span class="hljs-number">1</span>, nt=<span class="hljs-number">1.5</span>, nnt=into?nc/nt:nt/nc, ddn=r.d.dot(nl), cos2t;
<span class="hljs-keyword">if</span> ((cos2t=<span class="hljs-number">1</span>-nnt*nnt*(<span class="hljs-number">1</span>-ddn*ddn))&lt;<span class="hljs-number">0</span>) <span class="hljs-comment">// Total internal reflection </span>
<span class="hljs-keyword">return</span> obj.e + f.mult(radiance(reflRay,depth,Xi));
Vec tdir = (r.d*nnt - n*((into?<span class="hljs-number">1</span>:-<span class="hljs-number">1</span>)*(ddn*nnt+<span class="hljs-built_in">sqrt</span>(cos2t)))).norm();
<span class="hljs-keyword">double</span> a=nt-nc, b=nt+nc, R0=a*a/(b*b), c = <span class="hljs-number">1</span>-(into?-ddn:tdir.dot(n));
<span class="hljs-keyword">double</span> Re=R0+(<span class="hljs-number">1</span>-R0)*c*c*c*c*c,Tr=<span class="hljs-number">1</span>-Re,P=<span class="hljs-number">.25</span>+<span class="hljs-number">.5</span>*Re,RP=Re/P,TP=Tr/(<span class="hljs-number">1</span>-P);
<span class="hljs-keyword">return</span> obj.e + f.mult(depth&gt;<span class="hljs-number">2</span> ? (erand48(Xi)&lt;P ? <span class="hljs-comment">// Russian roulette </span>
radiance(reflRay,depth,Xi)*RP:radiance(Ray(x,tdir),depth,Xi)*TP) :
radiance(reflRay,depth,Xi)*Re+radiance(Ray(x,tdir),depth,Xi)*Tr);
}
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">int</span> argc, <span class="hljs-keyword">char</span> *argv[])</span></span>{
<span class="hljs-keyword">int</span> w=<span class="hljs-number">1024</span>, h=<span class="hljs-number">768</span>, samps = argc==<span class="hljs-number">2</span> ? atoi(argv[<span class="hljs-number">1</span>])/<span class="hljs-number">4</span> : <span class="hljs-number">1</span>; <span class="hljs-comment">// # samples </span>
<span class="hljs-function">Ray <span class="hljs-title">cam</span><span class="hljs-params">(Vec(<span class="hljs-number">50</span>,<span class="hljs-number">52</span>,<span class="hljs-number">295.6</span>)</span>, <span class="hljs-title">Vec</span><span class="hljs-params">(<span class="hljs-number">0</span>,-<span class="hljs-number">0.042612</span>,-<span class="hljs-number">1</span>)</span>.<span class="hljs-title">norm</span><span class="hljs-params">()</span>)</span>; <span class="hljs-comment">// cam pos, dir </span>
Vec cx=Vec(w*<span class="hljs-number">.5135</span>/h), cy=(cx%cam.d).norm()*<span class="hljs-number">.5135</span>, r, *c=<span class="hljs-keyword">new</span> Vec[w*h];
<span class="hljs-preprocessor">#<span class="hljs-keyword">pragma</span> omp parallel for schedule(dynamic, <span class="hljs-number">1</span>) private(r) <span class="hljs-comment">// OpenMP </span></span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> y=<span class="hljs-number">0</span>; y&lt;h; y++){ <span class="hljs-comment">// Loop over image rows </span>
<span class="hljs-built_in">fprintf</span>(<span class="hljs-built_in">stderr</span>,<span class="hljs-string">"\rRendering (%d spp) %5.2f%%"</span>,samps*<span class="hljs-number">4</span>,<span class="hljs-number">100.</span>*y/(h-<span class="hljs-number">1</span>));
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">unsigned</span> <span class="hljs-keyword">short</span> x=<span class="hljs-number">0</span>, Xi[<span class="hljs-number">3</span>]={<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,y*y*y}; x&lt;w; x++) <span class="hljs-comment">// Loop cols </span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> sy=<span class="hljs-number">0</span>, i=(h-y-<span class="hljs-number">1</span>)*w+x; sy&lt;<span class="hljs-number">2</span>; sy++) <span class="hljs-comment">// 2x2 subpixel rows </span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> sx=<span class="hljs-number">0</span>; sx&lt;<span class="hljs-number">2</span>; sx++, r=Vec()){ <span class="hljs-comment">// 2x2 subpixel cols </span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> s=<span class="hljs-number">0</span>; s&lt;samps; s++){
<span class="hljs-keyword">double</span> r1=<span class="hljs-number">2</span>*erand48(Xi), dx=r1&lt;<span class="hljs-number">1</span> ? <span class="hljs-built_in">sqrt</span>(r1)-<span class="hljs-number">1</span>: <span class="hljs-number">1</span>-<span class="hljs-built_in">sqrt</span>(<span class="hljs-number">2</span>-r1);
<span class="hljs-keyword">double</span> r2=<span class="hljs-number">2</span>*erand48(Xi), dy=r2&lt;<span class="hljs-number">1</span> ? <span class="hljs-built_in">sqrt</span>(r2)-<span class="hljs-number">1</span>: <span class="hljs-number">1</span>-<span class="hljs-built_in">sqrt</span>(<span class="hljs-number">2</span>-r2);
Vec d = cx*( ( (sx+<span class="hljs-number">.5</span> + dx)/<span class="hljs-number">2</span> + x)/w - <span class="hljs-number">.5</span>) +
cy*( ( (sy+<span class="hljs-number">.5</span> + dy)/<span class="hljs-number">2</span> + y)/h - <span class="hljs-number">.5</span>) + cam.d;
r = r + radiance(Ray(cam.o+d*<span class="hljs-number">140</span>,d.norm()),<span class="hljs-number">0</span>,Xi)*(<span class="hljs-number">1.</span>/samps);
} <span class="hljs-comment">// Camera rays are pushed ^^^^^ forward to start in interior </span>
c[i] = c[i] + Vec(clamp(r.x),clamp(r.y),clamp(r.z))*<span class="hljs-number">.25</span>;
}
}
FILE *f = fopen(<span class="hljs-string">"image.ppm"</span>, <span class="hljs-string">"w"</span>); <span class="hljs-comment">// Write image to PPM file. </span>
<span class="hljs-built_in">fprintf</span>(f, <span class="hljs-string">"P3\n%d %d\n%d\n"</span>, w, h, <span class="hljs-number">255</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i=<span class="hljs-number">0</span>; i&lt;w*h; i++)
<span class="hljs-built_in">fprintf</span>(f,<span class="hljs-string">"%d %d %d "</span>, toInt(c[i].x), toInt(c[i].y), toInt(c[i].z));
} </code></pre>
<pre id="less"><code class="less hljs"><span class="hljs-comment">// Bootstrap</span>
<span class="hljs-comment">// Buttons</span>
<span class="hljs-comment">// --------------------------------------------------</span>
<span class="hljs-comment">// Base styles</span>
<span class="hljs-comment">// --------------------------------------------------</span>
<span class="hljs-class">.btn</span> {
<span class="hljs-attribute">display</span>: inline-block;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-comment">// For input.btn</span>
<span class="hljs-attribute">font-weight</span>: <span class="hljs-variable">@btn-font-weight</span>;
<span class="hljs-attribute">text-align</span>: center;
<span class="hljs-attribute">vertical-align</span>: middle;
<span class="hljs-attribute">touch-action</span>: manipulation;
<span class="hljs-attribute">cursor</span>: pointer;
<span class="hljs-attribute">background-image</span>: none; <span class="hljs-comment">// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214</span>
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid transparent;
<span class="hljs-attribute">white-space</span>: nowrap;
<span class="hljs-class">.button-size</span>(<span class="hljs-variable">@padding-base-vertical</span>; <span class="hljs-variable">@padding-base-horizontal</span>; <span class="hljs-variable">@font-size-base</span>; <span class="hljs-variable">@line-height-base</span>; <span class="hljs-variable">@border-radius-base</span>);
<span class="hljs-class">.user-select</span>(none);
<span class="hljs-keyword">&amp;</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:active</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.active</span> {
<span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:focus</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.focus</span> {
<span class="hljs-class">.tab-focus</span>();
}
}
<span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:hover</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:focus</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.focus</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-variable">@btn-default-color</span>;
<span class="hljs-attribute">text-decoration</span>: none;
}
<span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:active</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.active</span> {
<span class="hljs-attribute">outline</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">background-image</span>: none;
<span class="hljs-class">.box-shadow</span>(inset <span class="hljs-number">0</span> <span class="hljs-number">3px</span> <span class="hljs-number">5px</span> <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">125</span>));
}
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.disabled</span>,
<span class="hljs-keyword">&amp;</span><span class="hljs-attr_selector">[disabled]</span>,
<span class="hljs-tag">fieldset</span><span class="hljs-attr_selector">[disabled]</span> <span class="hljs-keyword">&amp;</span> {
<span class="hljs-attribute">cursor</span>: <span class="hljs-variable">@cursor-disabled</span>;
<span class="hljs-class">.opacity</span>(.<span class="hljs-number">65</span>);
<span class="hljs-class">.box-shadow</span>(none);
}
<span class="hljs-tag">a</span><span class="hljs-keyword">&amp;</span> {
<span class="hljs-keyword">&amp;</span><span class="hljs-class">.disabled</span>,
<span class="hljs-tag">fieldset</span><span class="hljs-attr_selector">[disabled]</span> <span class="hljs-keyword">&amp;</span> {
<span class="hljs-attribute">pointer-events</span>: none; <span class="hljs-comment">// Future-proof disabling of clicks on `&lt;a&gt;` elements</span>
}
}
}
<span class="hljs-comment">// Alternate buttons</span>
<span class="hljs-comment">// --------------------------------------------------</span>
<span class="hljs-class">.btn-default</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-default-color</span>; <span class="hljs-variable">@btn-default-bg</span>; <span class="hljs-variable">@btn-default-border</span>);
}
<span class="hljs-class">.btn-primary</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-primary-color</span>; <span class="hljs-variable">@btn-primary-bg</span>; <span class="hljs-variable">@btn-primary-border</span>);
}
<span class="hljs-comment">// Success appears as green</span>
<span class="hljs-class">.btn-success</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-success-color</span>; <span class="hljs-variable">@btn-success-bg</span>; <span class="hljs-variable">@btn-success-border</span>);
}
<span class="hljs-comment">// Info appears as blue-green</span>
<span class="hljs-class">.btn-info</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-info-color</span>; <span class="hljs-variable">@btn-info-bg</span>; <span class="hljs-variable">@btn-info-border</span>);
}
<span class="hljs-comment">// Warning appears as orange</span>
<span class="hljs-class">.btn-warning</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-warning-color</span>; <span class="hljs-variable">@btn-warning-bg</span>; <span class="hljs-variable">@btn-warning-border</span>);
}
<span class="hljs-comment">// Danger and error appear as red</span>
<span class="hljs-class">.btn-danger</span> {
<span class="hljs-class">.button-variant</span>(<span class="hljs-variable">@btn-danger-color</span>; <span class="hljs-variable">@btn-danger-bg</span>; <span class="hljs-variable">@btn-danger-border</span>);
}</code></pre>
<pre id="python"><code class="python hljs"><span class="hljs-comment"># Curio, https://github.com/dabeaz/curio/blob/master/curio/network.py</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">open_connection</span><span class="hljs-params">(host, port, *, ssl=None, source_addr=None, server_hostname=None, timeout=None)</span>:</span>
<span class="hljs-string">'''
Create a TCP connection to a given Internet host and port with optional SSL applied to it.
'''</span>
<span class="hljs-keyword">if</span> server_hostname <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> ssl:
<span class="hljs-keyword">raise</span> ValueError(<span class="hljs-string">'server_hostname is only applicable with SSL'</span>)
sock = <span class="hljs-keyword">await</span> socket.create_connection((host,port), timeout, source_addr)
<span class="hljs-keyword">try</span>:
<span class="hljs-comment"># Apply SSL wrapping to the connection, if applicable</span>
<span class="hljs-keyword">if</span> ssl:
sock = <span class="hljs-keyword">await</span> _wrap_ssl_client(sock, ssl, server_hostname)
<span class="hljs-keyword">return</span> sock
<span class="hljs-keyword">except</span> Exception:
sock._socket.close()
<span class="hljs-keyword">raise</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">open_unix_connection</span><span class="hljs-params">(path, *, ssl=None, server_hostname=None)</span>:</span>
<span class="hljs-keyword">if</span> server_hostname <span class="hljs-keyword">and</span> <span class="hljs-keyword">not</span> ssl:
<span class="hljs-keyword">raise</span> ValueError(<span class="hljs-string">'server_hostname is only applicable with SSL'</span>)
sock = socket.socket(socket.AF_UNIX, socket.SOCK_STREAM)
<span class="hljs-keyword">try</span>:
<span class="hljs-keyword">await</span> sock.connect(path)
<span class="hljs-comment"># Apply SSL wrapping to connection, if applicable</span>
<span class="hljs-keyword">if</span> ssl:
sock = <span class="hljs-keyword">await</span> _wrap_ssl_client(sock, ssl, server_hostname)
<span class="hljs-keyword">return</span> sock
<span class="hljs-keyword">except</span> Exception:
sock._socket.close()
<span class="hljs-keyword">raise</span>
</code></pre>
<pre id="elixir"><code class="elixiar hljs ruby"><span class="hljs-comment"># Phoenix, https://github.com/phoenixframework/phoenix/blob/master/lib/phoenix.ex</span>
defmodule <span class="hljs-constant">Phoenix</span> <span class="hljs-keyword">do</span>
<span class="hljs-variable">@moduledoc</span> <span class="hljs-string">""</span><span class="hljs-string">"
This is documentation for the Phoenix project.
By default, Phoenix applications depend on other packages besides
Phoenix itself. Below we provide a short explanation with links to
their documentation for each of those projects:
* [Ecto](http://hexdocs.pm/ecto) - a language integrated query and
database wrapper
* [Phoenix](http://hexdocs.pm/phoenix) - the Phoenix web framework
(these docs)
* [Phoenix HTML](http://hexdocs.pm/phoenix_html) - conveniences for
working with HTML in Phoenix
* [Plug](http://hexdocs.pm/plug) - a specification and conveniences
for composable modules in between web applications
There are also optional packages depending on your configuration:
* [Phoenix PubSub Redis](http://hexdocs.pm/phoenix_pubsub_redis) - use
Redis to power Phoenix PubSub system
"</span><span class="hljs-string">""</span>
use <span class="hljs-constant">Application</span>
<span class="hljs-variable">@doc</span> <span class="hljs-keyword">false</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">start</span><span class="hljs-params">(_type, _args)</span> <span class="hljs-title">do</span></span>
<span class="hljs-comment"># Warm up caches</span>
<span class="hljs-number">_</span> = <span class="hljs-constant">Phoenix</span>.<span class="hljs-constant">Template</span>.engines
<span class="hljs-number">_</span> = <span class="hljs-constant">Phoenix</span>.<span class="hljs-constant">Template</span>.format_encoder(<span class="hljs-string">"index.html"</span>)
<span class="hljs-comment"># Configure proper system flags from Phoenix only</span>
<span class="hljs-keyword">if</span> stacktrace_depth = <span class="hljs-constant">Application</span>.get_env(<span class="hljs-symbol">:phoenix</span>, <span class="hljs-symbol">:stacktrace_depth</span>) <span class="hljs-keyword">do</span>
<span class="hljs-symbol">:erlang</span>.system_flag(<span class="hljs-symbol">:backtrace_depth</span>, stacktrace_depth)
<span class="hljs-keyword">end</span>
<span class="hljs-comment"># Start the supervision tree</span>
<span class="hljs-constant">Phoenix</span>.<span class="hljs-constant">Supervisor</span>.start_link
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
</code></pre>
</section>
<script>
var blocks = $('pre');
var fn;
blocks.forEach(function(b){
var name = b.id;
var a = $('<a>');
a.html(name);
a.attr('href', '#');
var handler = function(){
blocks.hide();
$(b).show();
$('#samples-holder > a').removeClass('active');
a.addClass('active');
return false;
}
if(!fn) fn = handler;
a.on('click', handler);
$('#samples-holder').append(a);
}); });
$('body').append(sampDiv, coverageDiv); fn();
fonts.forEach(function(font, fontindex){
var a = $('<a>').attr('href', '#').append(font.display); var ft;
a.on('click', Click(fontindex, font.cls)); ['dark', 'light'].forEach(function(theme){
links.push(a) var a = $('<a>');
$('#links').append(a); a.html(theme);
a.attr('href', '#');
var handler = function(){
$('section#preview').attr('class', theme);
$('#themes-holder > a').removeClass('active');
a.addClass('active');
return false;
}
if(!ft) ft = handler;
a.on('click', handler);
$('#themes-holder').append(a);
}); });
Click(0)(); ft();
</script> </script>
</body> </body>
</html>

2
iosevka-bold.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-bold.ttf
View File

Binary file not shown.

BIN
iosevka-bold.woff
View File

Binary file not shown.

2
iosevka-bolditalic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-bolditalic.ttf
View File

Binary file not shown.

BIN
iosevka-bolditalic.woff
View File

Binary file not shown.

2
iosevka-italic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-italic.ttf
View File

Binary file not shown.

BIN
iosevka-italic.woff
View File

Binary file not shown.

2
iosevka-regular.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevka-regular.ttf
View File

Binary file not shown.

BIN
iosevka-regular.woff
View File

Binary file not shown.

2
iosevkacc-bold.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-bold.ttf
View File

Binary file not shown.

BIN
iosevkacc-bold.woff
View File

Binary file not shown.

2
iosevkacc-bolditalic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-bolditalic.ttf
View File

Binary file not shown.

BIN
iosevkacc-bolditalic.woff
View File

Binary file not shown.

2
iosevkacc-italic.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-italic.ttf
View File

Binary file not shown.

BIN
iosevkacc-italic.woff
View File

Binary file not shown.

2
iosevkacc-regular.charmap
View File

File diff suppressed because one or more lines are too long

BIN
iosevkacc-regular.ttf
View File

Binary file not shown.

BIN
iosevkacc-regular.woff
View File

Binary file not shown.

276
specimen.html Normal file
View File

@ -0,0 +1,276 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Iosevka Specimen</title>
<style>
html {
font-size: 14px;
}
@font-face {
font-family: IosevkaWEB;
src: url('iosevka-regular.woff') format('woff'), url('iosevka-regular.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
src: url('iosevka-italic.woff') format('woff'), url('iosevka-italic.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-weight: bold;
src: url('iosevka-bold.woff') format('woff'), url('iosevka-bold.ttf') format('truetype');
}
@font-face {
font-family: IosevkaWEB;
font-style: italic;
font-weight: bold;
src: url('iosevka-bolditalic.woff') format('woff'), url('iosevka-bolditalic.ttf') format('truetype');
}
@font-face {
font-family: IosevkaCCWEB;
src: url('iosevkacc-regular.woff') format('woff'), url('iosevkacc-regular.ttf') format('truetype');
}
@font-face {
font-family: IosevkaCCWEB;
font-style: italic;
src: url('iosevkacc-italic.woff') format('woff'), url('iosevkacc-italic.ttf') format('truetype');
}
@font-face {
font-family: IosevkaCCWEB;
font-weight: bold;
src: url('iosevkacc-bold.woff') format('woff'), url('iosevkacc-bold.ttf') format('truetype');
}
@font-face {
font-family: IosevkaCCWEB;
font-style: italic;
font-weight: bold;
src: url('iosevkacc-bolditalic.woff') format('woff'), url('iosevkacc-bolditalic.ttf') format('truetype');
}
a {
color: black;
background-image: linear-gradient(white 50%, #888 50%);
background-position: 0px 1.075em;
background-repeat: repeat-x;
background-size: 2px 2px;
text-decoration: none;
text-shadow: white -1px 0px 0px, white 1px 0px 0px;
}
a:hover {
background-image: linear-gradient(white 50%, black 50%);
}
body {
width: 68rem;
margin: 0 auto;
padding: 4rem 0;
}
p, pre, .show, .show samp, #links {
font-family: "IosevkaWEB", monospace;
line-height: 1.5;
-moz-font-feature-settings: "locl";
-ms-font-feature-settings: "locl";
-webkit-font-feature-settings: "locl";
font-feature-settings: "locl";
}
.cc { font-family: "IosevkaCCWeb", monospace!important }
p {
margin: 0.5rem 0;
}
div.show {
font-size: 2rem;
width: 68rem;
}
div.show.bold { font-weight: bold }
div.show.italic { font-style: italic }
div.block {
display: flex;
width: 68rem;
flex-wrap: wrap;
border-top: 1px dotted #ccc;
margin-bottom: -1px;
}
.show div.block span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
padding: 1rem;
flex: none;
text-align: center;
position: relative;
cursor: default;
}
.show div.block span.indicator {
font-size: 1rem;
}
.show div.block span.missing {
opacity: 0.1
}
.show div.block span.present:before {
display: block;
content: attr(title);
position: absolute;
font-size: 0.33em;
top: -1em;
left: 0.125em;
right: 0.125em;
text-align: center;
font-weight: normal;
font-style: normal;
text-shadow: white 0 0 0.4em;
overflow: hidden;
text-overflow: ellipsis;
z-index: -1;
}
.show div.block span > s {
display: block;
text-decoration: none;
position: relative;
}
.show div.block span > s > t {
display: inline-block;
width: 1em;
margin-left: -0.25em;
margin-right: -0.25em;
white-space: nowrap;
}
.show div.block span > s > d {
position: absolute;
z-index: 2;
color: #ddd;
text-shadow: 0 0 2px white;
}
.show div.block span.present s:before {
display: inline-block;
content: '';
position: relative;
top: -1px;
left: -0.75em;
width: 2em;
height: calc(0.52em - 2px);
margin-right: -2em;
border-top: 1px solid rgba(0, 0, 255, 0.1);
border-bottom: 1px solid rgba(255, 0, 0, 0.1);
}
.show .smp {
font-size: 1rem;
margin: 1rem 0;
}
.show samp {
display: flex;
font-size: 1rem;
white-space: pre;
}
.show samp > span.langname {
display: inline-block;
background: #eee;
padding: 0.5em;
flex: none;
font-weight: normal;
font-style: normal;
min-width: 12em;
text-align: right;
}
.show samp > span.sentence {
flex: 1;
padding: 0.5em;
}
#links {
position: fixed;
z-index: 99;
top: 0;
width: 68rem;
display: flex;
border-bottom: 2px solid black;
background: white;
}
#links a {
display: block;
flex: 1;
padding: 1rem 0;
text-align: center;
text-decoration: none;
color: black;
background: none;
text-shadow: none;
}
#links a.active {
background: black;
color: white;
}
</style>
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script>
if (!window.Zepto) document.write('<script src="zepto.min.js">\x3C/script>')
</script>
</html>
<body>
<div id="links"></div>
<script>
function padzero(s, n){
while(s.length < n) s = '0' + s;
return s;
}
var BLOCKSIZE = 16 * 4;
var fonts = [
{name: 'iosevka-regular', cls: '', display: 'Regular'},
{name: 'iosevka-bold', cls: 'bold', display: 'Bold'},
{name: 'iosevka-italic', cls:'italic', display: 'Italic'},
{name: 'iosevka-bolditalic', cls:'bold italic', display: 'Bolditalic'},
{name: 'iosevkacc-regular', cls: 'cc', display: 'CC-Regular'},
{name: 'iosevkacc-bold', cls: 'cc bold', display: 'CC-Bold'},
{name: 'iosevkacc-italic', cls:'cc italic', display: 'CC-Italic'},
{name: 'iosevkacc-bolditalic', cls:'cc bold italic', display: 'CC-Bolditalic'}
];
var links = [];
function Click(j, c){
return function(){
for(var k = 0; k < links.length; k++) if(k === j) {
links[k].addClass('active')
} else {
links[k].removeClass('active')
}
div[0].className = 'show ' + c;
return false;
}
}
var div = $('<div>').addClass('show');
$.getJSON(fonts[0].name + '.charmap', function(data){
var uhash = [];
var whash = [];
for(var j = 0; j < data.length; j++) {
var unicodes = data[j][1];
if(unicodes && unicodes.length) for(var k = 0; k < unicodes.length; k++){
uhash[unicodes[k]] = data[j][0].trim()
whash[unicodes[k]] = data[j][2]
}
}
for(var block = 0; block < (65536 / BLOCKSIZE); block++) {
var blockdiv = $('<div>').addClass('block');
var hasGlyphInThisBlock = false;
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) if(uhash[j]){
hasGlyphInThisBlock = true;
}
if(hasGlyphInThisBlock) {
for(j = block * BLOCKSIZE; j < (block + 1) * BLOCKSIZE; j++) {
if(j % 16 === 0) blockdiv.append('<span class="indicator">' + padzero(j.toString(16).toUpperCase(), 4) + '</span>')
blockdiv.append('<span class="' + (uhash[j] ? 'present' : 'missing') + '" title="' + (uhash[j] || '') + '"><s>' + (whash[j] ? '<d>\u25CC</d><t>\u25CC': '<t>') + String.fromCharCode(j) + '</t></s></span>')
}
div.append(blockdiv)
}
};
});
$('body').append(div);
fonts.forEach(function(font, fontindex){
var a = $('<a>').attr('href', '#').append(font.display);
a.on('click', Click(fontindex, font.cls));
links.push(a)
$('#links').append(a);
});
Click(0)();
</script>
</body>