-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathslider.html
80 lines (72 loc) · 5.97 KB
/
slider.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pavanam Web Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/grid.css">
<link rel="stylesheet" href="assets/css/font.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<p class="heading">பவனம் - Pavanam<p>
</div>
<div class="col-md-8 yellow">
<p>Pavanam typeface is currently under heavy development. Please feel free to send me bug reports, feature enhancements or glyph requests, using <a href="https://github.com/enathu/pavanam/issues">this project's Github Issue Tracker.</a></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-2">
<p>Interactive font size</p>
</div>
<div class="col-md-4">
<p><input type="range" min="10" max="100"></p>
</div>
</div>
<section>
<div class="row">
<div class="row">
<div class="col-md-12">
<span class="yellowbg">18px</span>
</div>
</div>
<div id="white" class="col-md-6" contenteditable="true"> <p>சற்று ஆழ அவதானித்தால், எல்லாமே தோற்ற மயக்கங்களாகும் என்றே சொல்ல வேண்டிவரும். Time is a concept, and it's an illusion. நாம் இயல்பு வாழ்க்கையில் காண்கின்ற, காட்சித் தாமத நிலைகளைப் புறந்தள்ளிவிட மூளை துணையாகி நின்று, இந்தக் கணத்தில் வாழ்கின்ற தோற்ற மயக்கத்தை தோற்றுவிக்கிறது.</p>
</div>
<div id="gray" class="col-md-6" contenteditable="true"> <p>சற்று ஆழ அவதானித்தால், எல்லாமே தோற்ற மயக்கங்களாகும் என்றே சொல்ல வேண்டிவரும். Time is a concept, and it's an illusion. நாம் இயல்பு வாழ்க்கையில் காண்கின்ற, காட்சித் தாமத நிலைகளைப் புறந்தள்ளிவிட மூளை துணையாகி நின்று, இந்தக் கணத்தில் வாழ்கின்ற தோற்ற மயக்கத்தை தோற்றுவிக்கிறது.</p>
</div>
</div>
</section>
<hr>
<div class="row">
<div class="row">
<div class="col-md-12">
<p class="yellowbg">Lettering - All Glyphs</p>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 lettering">
<p>அ ஆ இ ஈ உ ஊ எ ஏ ஐ ஒ ஓ ஔ ஃ
க் ச் ட் த் ப் ற் ஞ் ங் ந் ன் ண் ம் ய் ர் ழ் வ் ள் ல்
ஶ் ஜ் ஷ் ஸ் ஹ் க்ஷ் க கா கி கீ கு கூ கெ கே கை கொ கோ கௌ ங ஙா ஙி ஙீ ஙு ஙூ ஙெ ஙே ஙை ஙொ ஙோ ஙௌ ச சா சி சீ சு சூ செ சே சை சொ சோ சௌ ஞ ஞா ஞி ஞீ ஞு ஞூ ஞெ ஞே ஞை ஞொ ஞோ ஞௌ ட டா டி டீ டு டூ டெ டே டை டொ டோ டௌ ண ணா ணி ணீ ணு ணூ ணெ ணே ணை ணொ ணோ ணௌ த தா தி தீ து தூ தெ தே தை தொ தோ தௌ ந நா நி நீ நு நூ நெ நே நை நொ நோ நௌ ப பா பி பீ பு பூ பெ பே பை பொ போ பௌ ம மா மி மீ மு மூ மெ மே மை மொ மோ மௌ ய யா யி யீ யு யூ யெ யே யை யொ யோ யௌ ர ரா ரி ரீ ரு ரூ ரெ ரே ரை ரொ ரோ ரௌ ல லா லி லீ லு லூ லெ லே லை லொ லோ லௌ வ வா வி வீ வு வூ வெ வே வை வொ வோ வௌ ழ ழா ழி ழீ ழு ழூ ழெ ழே ழை ழொ ழோ ழௌ ள ளா ளி ளீ ளு ளூ ளெ ளே ளை ளொ ளோ ளௌ ற றா றி றீ று றூ றெ றே றை றொ றோ றௌ ன னா னி னீ னு னூ னெ னே னை னொ னோ னௌ ஶ ஶா ஶி ஶீ ஶு ஶூ ஶெ ஶே ஶை ஶொ ஶோ ஶௌ ஜ ஜா ஜி ஜீ ஜு ஜூ ஜெ ஜே ஜை ஜொ ஜோ ஜௌ ஷ ஷா ஷி ஷீ ஷு ஷூ ஷெ ஷே ஷை ஷொ ஷோ ஷௌ ஸ ஸா ஸி ஸீ ஸு ஸூ ஸெ ஸே ஸை ஸொ ஸோ ஸௌ ஹ ஹா ஹி ஹீ ஹு ஹூ ஹெ ஹே ஹை ஹொ ஹோ ஹௌ க்ஷ க்ஷா க்ஷி க்ஷீ க்ஷு க்ஷூ க்ஷெ க்ஷே க்ஷை க்ஷொ க்ஷோ க்ஷௌ ௦ ௧ ௨ ௩ ௪ ௫ ௬ ௭ ௮ ௯ ௰ ௱ ௲ ௳ ௴ ௵ ௶ ௷ ௸ ௹ ௺ ஸ்ரீ
</p>
</div>
</div>
</div>
<hr>
<div class="row pt14">
<div class="col-md-6"><p>Source, and test docs are available at <a href="https://github.com/enathu/pavanam">Github</a></p></div>
<div class="col-md-6"><p>Tamil typeface designed by <a href="http://thariqueazeez.com">Tharique Azeez</a> - Latin counterpart is derived from Vernon Adam's <a href="https://www.google.com/fonts/specimen/Pontano+Sans">Pontano Sans</a>, and slightly modified to match with the Tamil typeface metrics.</p></div>
</div>
</div>
<script>
$('input').on('change', function () {
var v = $(this).val();
$('section').css('font-size', v + 'px')
$('span').html(v);
});</script>
</body>
</html>