Skip to content

Commit 2d4a047

Browse files
ellisonbgellisonbg
committed
Adding jupyter font.
1 parent 39d6844 commit 2d4a047

File tree

7 files changed

+144
-0
lines changed

7 files changed

+144
-0
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<head>
33
<title>Jupyter</title>
44

5+
<link href="jupyter_font/styles/css" rel="stylesheet">
56
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
67
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
78
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

‎jupyter_font/fonts/jupyter.eot

1.61 KB
Binary file not shown.

‎jupyter_font/fonts/jupyter.svg

Lines changed: 12 additions & 0 deletions
Loading

‎jupyter_font/fonts/jupyter.ttf

1.45 KB
Binary file not shown.

‎jupyter_font/fonts/jupyter.woff

1.07 KB
Binary file not shown.

‎jupyter_font/icons-reference.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<title>Font Reference - Jupyter</title>
8+
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css">
9+
<link rel="stylesheet" href="styles.css">
10+
<style type="text/css">
11+
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
12+
body{line-height:1;color:#000;background:#fff}
13+
ol,ul{list-style:none}
14+
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
15+
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
16+
a img{border:none}
17+
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
18+
body{font-family:'Dosis','Tahoma',sans-serif}
19+
.container{margin:15px auto;width:80%}
20+
h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}
21+
h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}
22+
.small{font-size:14px;color:#a5adb4;}
23+
.small a{color:#a5adb4;}
24+
.small a:hover{color:#fb565e}
25+
.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
26+
.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}
27+
.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;}
28+
.glyphs.character-mapping .icon svg{fill:#000}
29+
.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;text-align:center;outline:0;}
30+
.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
31+
.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
32+
.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
33+
.glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
34+
.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}
35+
.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
36+
.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
37+
.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
38+
39+
40+
</style>
41+
</head>
42+
<body>
43+
<div class="container">
44+
<h1>Jupyter</h1>
45+
<p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>
46+
<h2>Character mapping</h2>
47+
<ul class="glyphs character-mapping">
48+
<li>
49+
<div data-icon="a" class="icon"></div>
50+
<input type="text" readonly="readonly" value="a">
51+
</li>
52+
<li>
53+
<div data-icon="b" class="icon"></div>
54+
<input type="text" readonly="readonly" value="b">
55+
</li>
56+
</ul>
57+
<h2>CSS mapping</h2>
58+
<ul class="glyphs css-mapping">
59+
<li>
60+
<div class="icon jupyter-icon-jupiter"></div>
61+
<input type="text" readonly="readonly" value="jupiter">
62+
</li>
63+
<li>
64+
<div class="icon jupyter-icon-moon"></div>
65+
<input type="text" readonly="readonly" value="moon">
66+
</li>
67+
</ul>
68+
</div><script type="text/javascript">
69+
(function() {
70+
var glyphs, _i, _len, _ref;
71+
72+
_ref = document.getElementsByClassName('glyphs');
73+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
74+
glyphs = _ref[_i];
75+
glyphs.addEventListener('click', function(event) {
76+
if (event.target.tagName === 'INPUT') {
77+
return event.target.select();
78+
}
79+
});
80+
}
81+
82+
}).call(this);
83+
</script>
84+
</body>
85+
</html>

‎jupyter_font/styles.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@charset "UTF-8";
2+
3+
@font-face {
4+
font-family: "jupyter";
5+
src:url("fonts/jupyter.eot");
6+
src:url("fonts/jupyter.eot?#iefix") format("embedded-opentype"),
7+
url("fonts/jupyter.woff") format("woff"),
8+
url("fonts/jupyter.ttf") format("truetype"),
9+
url("fonts/jupyter.svg#jupyter") format("svg");
10+
font-weight: normal;
11+
font-style: normal;
12+
13+
}
14+
15+
[data-icon]:before {
16+
font-family: "jupyter" !important;
17+
content: attr(data-icon);
18+
font-style: normal !important;
19+
font-weight: normal !important;
20+
font-variant: normal !important;
21+
text-transform: none !important;
22+
speak: none;
23+
line-height: 1;
24+
-webkit-font-smoothing: antialiased;
25+
-moz-osx-font-smoothing: grayscale;
26+
}
27+
28+
[class^="jupyter-icon-"]:before,
29+
[class*=" jupyter-icon-"]:before {
30+
font-family: "jupyter" !important;
31+
font-style: normal !important;
32+
font-weight: normal !important;
33+
font-variant: normal !important;
34+
text-transform: none !important;
35+
speak: none;
36+
line-height: 1;
37+
-webkit-font-smoothing: antialiased;
38+
-moz-osx-font-smoothing: grayscale;
39+
}
40+
41+
.jupyter-icon-jupiter:before {
42+
content: "a";
43+
}
44+
.jupyter-icon-moon:before {
45+
content: "b";
46+
}

0 commit comments

Comments
 (0)