Skip to content

Commit 63e3e86

Browse files
jamesgeorgewilliamsjamesgeorgewilliams
authored
docs(tutorials): update theme (#1924)
1 parent 8e024bc commit 63e3e86

35 files changed

Lines changed: 152 additions & 167 deletions

‎tutorials/advanced.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1411

1512
<!-- Dependencies: -->
1613
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/archive.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1411

1512
<!-- Dependencies: -->
1613
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/connecting-by-dropping.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
14-
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1511

1612
<!-- Dependencies: -->
1713
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/constraint-move-to-circle.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
14-
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1511

1612
<!-- Dependencies: -->
1713
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/content-driven-element.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1411

1512
<!-- Dependencies: -->
1613
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/css/tutorial.css‎

Lines changed: 114 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,115 @@
1+
/*
2+
font-face src url is the url for the custom font on JointJS_Site.
3+
In joint repo the default sans-serif font is used for tutorials.
4+
*/
5+
6+
@font-face {
7+
font-family: 'PPFraktionSans';
8+
font-style: normal;
9+
font-weight: 300;
10+
src: url('../../../../fonts/PPFraktionSans/PPFraktionSans-Regular.woff') format('woff');
11+
}
12+
13+
@font-face {
14+
font-family: 'PPFraktionSans';
15+
font-style: italic;
16+
font-weight: 300;
17+
src: url('../../../../fonts/PPFraktionSans/PPFraktionSans-RegularItalic.woff') format('woff');
18+
}
19+
20+
@font-face {
21+
font-family: 'PPFraktionSans';
22+
font-style: normal;
23+
font-weight: 600;
24+
src: url('../../../../fonts/PPFraktionSans/PPFraktionSans-Bold.woff') format('woff');
25+
}
26+
27+
@font-face {
28+
font-family: 'PPFraktionSans';
29+
font-style: italic;
30+
font-weight: 600;
31+
src: url('../../../../fonts/PPFraktionSans/PPFraktionSans-BoldItalic.woff') format('woff');
32+
}
33+
34+
@font-face {
35+
font-family: 'PPFraktionMono';
36+
font-style: normal;
37+
font-weight: 300;
38+
src: url('../../../../fonts/PPFraktionMono/PPFraktionMono-Regular.woff') format('woff');
39+
}
40+
41+
@font-face {
42+
font-family: 'PPFraktionMono';
43+
font-style: italic;
44+
font-weight: 300;
45+
src: url('../../../../fonts/PPFraktionMono/PPFraktionMono-RegularItalic.woff') format('woff');
46+
}
47+
48+
@font-face {
49+
font-family: 'PPFraktionMono';
50+
font-style: normal;
51+
font-weight: 600;
52+
src: url('../../../../fonts/PPFraktionMono/PPFraktionMono-Bold.woff') format('woff');
53+
}
54+
55+
@font-face {
56+
font-family: 'PPFraktionMono';
57+
font-style: italic;
58+
font-weight: 600;
59+
src: url('../../../../fonts/fonts/PPFraktionMono/PPFraktionMono-BoldItalic.woff') format('woff');
60+
}
61+
62+
:root {
63+
/* Theme */
64+
--primary-red: hsl(355, 85%, 54%);
65+
--primary-blue: hsl(210, 37%, 12%);
66+
67+
/* Text */
68+
--text-color: hsl(210, 20%, 28%);
69+
--text-font-size: 1rem;
70+
--text-font-style: normal;
71+
--text-font-weight: 300;
72+
--text-font-weight-bold: 600;
73+
--text-line-height: 1.6;
74+
--text-letter-spacing: -1px;
75+
}
76+
177
html,
278
body {
79+
background-color: hsl(0, 0%, 100%);
80+
font-family: 'PPFraktionSans', sans-serif;
381
overflow-x: hidden;
482
margin: 0 auto;
583
padding: 0;
6-
color: #6a6c8a;
7-
font-family: 'Helvetica Neue Light', 'Helvetica Neue', 'Source Sans Pro', sans-serif;
884
}
85+
986
html {
1087
box-sizing: border-box;
1188
width: 95%;
1289
}
90+
1391
*,
1492
*:before,
1593
*:after {
1694
box-sizing: inherit;
1795
}
96+
1897
img {
1998
max-width: 100%;
99+
border: 1px solid #3c4260;
20100
}
101+
21102
h1 {
22-
font-family: 'Montserrat', sans-serif;
103+
color: var(--primary-blue);
23104
font-size: 35px;
24-
font-weight: lighter;
25-
color: #3c4260;
105+
font-weight: var(--text-font-weight-bold);
26106
word-spacing: 3.5px;
27107
letter-spacing: 1px;
28108
text-align: center;
29109
text-transform: capitalize;
30110
margin: 49px 0 46px;
31111
}
112+
32113
h2 {
33114
font-size: 24px;
34115
text-align: center;
@@ -37,24 +118,31 @@ h2 {
37118
padding-bottom: 30px;
38119
margin: 32px 0 0;
39120
}
121+
40122
h2,
41123
h3 {
42-
font-weight: bold;
43-
color: #3c4260;
124+
color: var(--primary-blue);
125+
font-weight: var(--text-font-weight-bold);
44126
}
127+
45128
h3 {
46129
font-size: 19px;
47130
}
131+
48132
p {
49-
font-weight: 200;
50-
line-height: 135%;
133+
color: var(--text-color);
134+
font-size: var(--text-font-size);
135+
font-weight: var(--text-font-weight);
136+
line-height: var(--text-line-height);
51137
}
138+
52139
a {
53-
color: #3c4260;
140+
color: var(--primary-blue);
54141
text-decoration: underline;
55142
}
143+
56144
a:hover {
57-
color: #31d0c6;
145+
color: var(--primary-red);
58146
text-decoration: underline;
59147
}
60148

@@ -72,3 +160,18 @@ pre {
72160
#paper-multiple-papers-small {
73161
width: 300px;
74162
}
163+
164+
/* PrismJS Overide */
165+
166+
code[class*="language-"],
167+
pre[class*="language-"] {
168+
font-family : 'PPFraktionMono', monospace !important;
169+
line-height: var(--text-line-height) !important;
170+
}
171+
172+
@media screen and (max-width: 948px) {
173+
174+
.tutorial-page {
175+
padding-top: 60px;
176+
}
177+
}

‎tutorials/custom-attributes.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@
1010
content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use."/>
1111
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts"/>
1212

13-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css"/>
14-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
15-
1613
<link rel="stylesheet" href="css/tutorial.css"/>
17-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
14+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1815

1916
<!-- Dependencies: -->
2017
<link rel="stylesheet" type="text/css" href="../build/joint.min.css" />

‎tutorials/custom-elements.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
14-
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1511

1612
<!-- Dependencies: -->
1713
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/custom-links.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
14-
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1511

1612
<!-- Dependencies: -->
1713
<script src="../node_modules/jquery/dist/jquery.js"></script>

‎tutorials/element-tools.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@
66
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
77
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
88

9-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
10-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
11-
129
<link rel="stylesheet" href="css/tutorial.css" />
13-
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
10+
<link rel="stylesheet" href="../node_modules/prism-themes/themes/prism-one-light.css">
1411

1512
<!-- Dependencies: -->
1613
<script src="../node_modules/jquery/dist/jquery.js"></script>

0 commit comments

Comments
 (0)