madness 1.2.5 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -1
  3. data/app/public/css/main.css +652 -401
  4. data/app/public/css/main.css.map +17 -19
  5. data/app/public/js/theme.js +81 -0
  6. data/app/public/js/vendor/mermaid.min.js +1509 -915
  7. data/app/styles/_anchor.scss +11 -3
  8. data/app/styles/_breadcrumbs.scss +8 -1
  9. data/app/styles/_code.scss +26 -8
  10. data/app/styles/_footnotes.scss +29 -0
  11. data/app/styles/_general.scss +6 -3
  12. data/app/styles/_image.scss +18 -0
  13. data/app/styles/_keyboard.scss +6 -4
  14. data/app/styles/_manifest.scss +1 -2
  15. data/app/styles/_nav.scss +200 -16
  16. data/app/styles/_pandoc_code.scss +55 -51
  17. data/app/styles/_rouge.scss +57 -211
  18. data/app/styles/_scrollbar.scss +17 -3
  19. data/app/styles/_search.scss +20 -8
  20. data/app/styles/_table.scss +6 -5
  21. data/app/styles/_typography.scss +44 -16
  22. data/app/styles/_variables.scss +216 -35
  23. data/app/views/_icon.slim +23 -0
  24. data/app/views/_mobile_search.slim +1 -1
  25. data/app/views/_nav.slim +18 -8
  26. data/app/views/_nav_tree.slim +13 -0
  27. data/app/views/layout.slim +26 -1
  28. data/lib/madness/directory.rb +7 -0
  29. data/lib/madness/item.rb +1 -0
  30. data/lib/madness/navigation.rb +24 -0
  31. data/lib/madness/rendering/pandoc.rb +2 -1
  32. data/lib/madness/rendering/redcarpet_custom.rb +6 -1
  33. data/lib/madness/settings.rb +1 -0
  34. data/lib/madness/templates/madness.yml +5 -0
  35. data/lib/madness/version.rb +1 -1
  36. metadata +5 -8
  37. data/app/public/font/fontello.eot +0 -0
  38. data/app/public/font/fontello.svg +0 -16
  39. data/app/public/font/fontello.ttf +0 -0
  40. data/app/public/font/fontello.woff +0 -0
  41. data/app/public/font/fontello.woff2 +0 -0
  42. data/app/styles/_fontello.scss +0 -59
@@ -1,213 +1,59 @@
1
- .highlight table td { padding: 5px; }
2
- .highlight table pre { margin: 0; }
3
- .highlight .cm {
4
- color: #999988;
5
- font-style: italic;
6
- }
7
- .highlight .cp {
8
- color: #999999;
9
- font-weight: bold;
10
- }
11
- .highlight .c1 {
12
- color: #999988;
13
- font-style: italic;
14
- }
15
- .highlight .cs {
16
- color: #999999;
17
- font-weight: bold;
18
- font-style: italic;
19
- }
20
- .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
21
- color: #999988;
22
- font-style: italic;
23
- }
24
- .highlight .err {
25
- color: #a61717;
26
- background-color: #e3d2d2;
27
- }
28
- .highlight .gd {
29
- color: #000000;
30
- background-color: #ffdddd;
31
- }
32
- .highlight .ge {
33
- color: #000000;
34
- font-style: italic;
35
- }
36
- .highlight .gr {
37
- color: #aa0000;
38
- }
39
- .highlight .gh {
40
- color: #999999;
41
- }
42
- .highlight .gi {
43
- color: #000000;
44
- background-color: #ddffdd;
45
- }
46
- .highlight .go {
47
- color: #888888;
48
- }
49
- .highlight .gp {
50
- color: #555555;
51
- }
52
- .highlight .gs {
53
- font-weight: bold;
54
- }
55
- .highlight .gu {
56
- color: #aaaaaa;
57
- }
58
- .highlight .gt {
59
- color: #aa0000;
60
- }
61
- .highlight .kc {
62
- color: #000000;
63
- font-weight: bold;
64
- }
65
- .highlight .kd {
66
- color: #000000;
67
- font-weight: bold;
68
- }
69
- .highlight .kn {
70
- color: #000000;
71
- font-weight: bold;
72
- }
73
- .highlight .kp {
74
- color: #000000;
75
- font-weight: bold;
76
- }
77
- .highlight .kr {
78
- color: #000000;
79
- font-weight: bold;
80
- }
81
- .highlight .kt {
82
- color: #445588;
83
- font-weight: bold;
84
- }
85
- .highlight .k, .highlight .kv {
86
- color: #000000;
87
- font-weight: bold;
88
- }
89
- .highlight .mf {
90
- color: #009999;
91
- }
92
- .highlight .mh {
93
- color: #009999;
94
- }
95
- .highlight .il {
96
- color: #009999;
97
- }
98
- .highlight .mi {
99
- color: #009999;
100
- }
101
- .highlight .mo {
102
- color: #009999;
103
- }
104
- .highlight .m, .highlight .mb, .highlight .mx {
105
- color: #009999;
106
- }
107
- .highlight .sa {
108
- color: #000000;
109
- font-weight: bold;
110
- }
111
- .highlight .sb {
112
- color: #d14;
113
- }
114
- .highlight .sc {
115
- color: #d14;
116
- }
117
- .highlight .sd {
118
- color: #d14;
119
- }
120
- .highlight .s2 {
121
- color: #d14;
122
- }
123
- .highlight .se {
124
- color: #d14;
125
- }
126
- .highlight .sh {
127
- color: #d14;
128
- }
129
- .highlight .si {
130
- color: #d14;
131
- }
132
- .highlight .sx {
133
- color: #d14;
134
- }
135
- .highlight .sr {
136
- color: #009926;
137
- }
138
- .highlight .s1 {
139
- color: #d14;
140
- }
141
- .highlight .ss {
142
- color: #990073;
143
- }
144
- .highlight .s, .highlight .dl {
145
- color: #d14;
146
- }
147
- .highlight .na {
148
- color: #008080;
149
- }
150
- .highlight .bp {
151
- color: #999999;
152
- }
153
- .highlight .nb {
154
- color: #0086B3;
155
- }
156
- .highlight .nc {
157
- color: #445588;
158
- font-weight: bold;
159
- }
160
- .highlight .no {
161
- color: #008080;
162
- }
163
- .highlight .nd {
164
- color: #3c5d5d;
165
- font-weight: bold;
166
- }
167
- .highlight .ni {
168
- color: #800080;
169
- }
170
- .highlight .ne {
171
- color: #990000;
172
- font-weight: bold;
173
- }
174
- .highlight .nf, .highlight .fm {
175
- color: #990000;
176
- font-weight: bold;
177
- }
178
- .highlight .nl {
179
- color: #990000;
180
- font-weight: bold;
181
- }
182
- .highlight .nn {
183
- color: #555555;
184
- }
185
- .highlight .nt {
186
- color: #000080;
187
- }
188
- .highlight .vc {
189
- color: #008080;
190
- }
191
- .highlight .vg {
192
- color: #008080;
193
- }
194
- .highlight .vi {
195
- color: #008080;
196
- }
197
- .highlight .nv, .highlight .vm {
198
- color: #008080;
199
- }
200
- .highlight .ow {
201
- color: #000000;
202
- font-weight: bold;
203
- }
204
- .highlight .o {
205
- color: #000000;
206
- font-weight: bold;
207
- }
208
- .highlight .w {
209
- color: #bbbbbb;
210
- }
1
+ // Rouge syntax highlighting.
2
+ //
3
+ // Use `bundle exec run css rouge` to generate update reference CSS.
4
+
211
5
  .highlight {
212
- background-color: #f8f8f8;
6
+ background: var(--rouge-bg);
7
+ color: var(--rouge-fg);
8
+
9
+ table td { padding: 5px; }
10
+ table pre { margin: 0; }
11
+
12
+ .lineno { color: var(--rouge-line-number); }
13
+
14
+ .c, .cd, .cm, .c1, .cs, .cp { color: var(--rouge-comment); font-style: italic; }
15
+ .cs { font-weight: bold; }
16
+
17
+ .err { color: var(--rouge-error-fg); background-color: var(--rouge-error-bg); }
18
+ .gd { color: var(--rouge-generic-deleted-fg); background-color: var(--rouge-generic-deleted-bg); }
19
+ .gd .x { color: var(--rouge-generic-deleted-fg); background-color: var(--rouge-generic-deleted-bg); }
20
+ .ge { font-style: italic; }
21
+ .gr { color: var(--rouge-error-fg); }
22
+ .gh { color: var(--rouge-generic-heading); }
23
+ .gi { color: var(--rouge-generic-inserted-fg); background-color: var(--rouge-generic-inserted-bg); }
24
+ .gi .x { color: var(--rouge-generic-inserted-fg); background-color: var(--rouge-generic-inserted-bg); }
25
+ .go { color: var(--rouge-comment); }
26
+ .gp { color: var(--rouge-comment); }
27
+ .gs { font-weight: bold; }
28
+ .gu { color: var(--rouge-generic-subheading); }
29
+ .gt { color: var(--rouge-error-fg); }
30
+
31
+ .k, .kc, .kd, .kp, .kr { color: var(--rouge-keyword); font-weight: bold; }
32
+ .kt { color: var(--rouge-name-class); font-weight: bold; }
33
+
34
+ .o, .ow { color: var(--rouge-operator); font-weight: bold; }
35
+
36
+ .m, .mf, .mh, .mi, .mo, .il { color: var(--rouge-literal-number); }
37
+
38
+ .s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1, .ss { color: var(--rouge-literal-string); }
39
+ .sr { color: var(--rouge-literal-regex); }
40
+
41
+ .n { color: var(--rouge-name); }
42
+ .na { color: var(--rouge-name-attribute); }
43
+ .nb { color: var(--rouge-name-builtin); }
44
+ .nc { color: var(--rouge-name-class); font-weight: bold; }
45
+ .no { color: var(--rouge-name-constant); }
46
+ .ni { color: var(--rouge-name-builtin); }
47
+ .ne { color: var(--rouge-name-class); font-weight: bold; }
48
+ .nf { color: var(--rouge-name-function); font-weight: bold; }
49
+ .nn { color: var(--rouge-name-class); }
50
+ .nt { color: var(--rouge-name-tag); }
51
+ .nv { color: var(--rouge-name-variable); }
52
+
53
+ .bp { color: var(--rouge-name-builtin); }
54
+ .vc { color: var(--rouge-name-variable); }
55
+ .vg { color: var(--rouge-name-variable); }
56
+ .vi { color: var(--rouge-name-variable); }
57
+
58
+ .w { color: var(--rouge-line-number); }
213
59
  }
@@ -1,9 +1,23 @@
1
1
  // Scrollbar
2
+ * {
3
+ scrollbar-width: thin;
4
+ scrollbar-color: var(--scrollbar-color) transparent;
5
+ }
6
+
2
7
  ::-webkit-scrollbar {
3
- width: 6px;
4
- height: 6px;
8
+ width: 8px;
9
+ height: 8px;
10
+ }
11
+
12
+ ::-webkit-scrollbar-track {
13
+ background: transparent;
5
14
  }
15
+
6
16
  ::-webkit-scrollbar-thumb {
7
17
  background: var(--scrollbar-color);
8
- -webkit-border-radius: 3px;
18
+ border-radius: 4px;
19
+
20
+ &:hover {
21
+ background: var(--scrollbar-hover-color);
22
+ }
9
23
  }
@@ -9,10 +9,14 @@
9
9
 
10
10
  @include mobile {
11
11
  position: fixed;
12
- font-size: 30px;
13
- top: 0px;
14
- right: 10px;
15
- opacity: 0.5;
12
+ font-size: 26px;
13
+ top: 6px;
14
+ right: 12px;
15
+ opacity: 0.7;
16
+ color: var(--font-color);
17
+ transition: opacity 120ms ease;
18
+
19
+ &:hover { opacity: 1; }
16
20
  }
17
21
  }
18
22
 
@@ -22,16 +26,24 @@
22
26
  }
23
27
 
24
28
  .search-field {
29
+ background-color: var(--search-field-bg-color);
30
+ color: var(--font-color);
25
31
  border: 1px solid var(--search-field-border-color);
26
- border-radius: 3px;
27
-
32
+ border-radius: 8px;
28
33
  outline: none;
29
- padding: 8px 12px;
30
- font-size: 1.5em;
34
+ padding: 10px 14px;
35
+ font-size: 1.25em;
36
+ font-family: var(--font-family);
31
37
  width: 100%;
32
38
  min-width: 200px;
39
+ transition: box-shadow 120ms ease;
40
+
41
+ &::placeholder {
42
+ color: var(--quiet-color);
43
+ }
33
44
 
34
45
  &:focus {
35
46
  border-color: var(--search-field-focused-border-color);
47
+ box-shadow: 0 0 0 3px var(--search-field-shadow-color);
36
48
  }
37
49
  }
@@ -7,9 +7,10 @@ table {
7
7
  overflow: auto;
8
8
  word-break: normal;
9
9
  word-break: keep-all;
10
-
10
+ font-size: 0.95em;
11
+
11
12
  th, td {
12
- padding: 6px 13px;
13
+ padding: 8px 14px;
13
14
  border: 1px solid var(--table-border-color);
14
15
  }
15
16
 
@@ -18,16 +19,16 @@ table {
18
19
  }
19
20
 
20
21
  th {
21
- font-weight: bold;
22
+ font-weight: 600;
23
+ text-align: left;
22
24
  background-color: var(--table-header-bg-color);
23
25
  }
24
26
 
25
-
26
27
  tr {
27
28
  background-color: var(--table-row-bg-color);
28
29
  }
29
30
 
30
- tr:nth-child(2n) {
31
+ tr:nth-child(2n) td {
31
32
  background-color: var(--table-alt-row-bg-color);
32
33
  }
33
34
  }
@@ -1,50 +1,74 @@
1
1
  body {
2
2
  -ms-text-size-adjust: 100%;
3
3
  -webkit-text-size-adjust: 100%;
4
+ -webkit-font-smoothing: antialiased;
5
+ -moz-osx-font-smoothing: grayscale;
4
6
  color: var(--font-color);
5
7
  font-family: var(--font-family);
6
8
  font-size: 16px;
7
- line-height: 1.6;
9
+ line-height: 1.7;
10
+ font-feature-settings: "cv02", "cv03", "cv04", "cv11";
8
11
  word-wrap: break-word;
9
12
  }
10
13
 
14
+ ::selection {
15
+ background-color: var(--selection-bg-color);
16
+ color: var(--selection-color);
17
+ }
18
+
11
19
  strong, .strong {
12
- font-weight: bolder;
20
+ font-weight: 600;
13
21
  }
14
22
 
15
23
  h1, h2, h3, h4, h5, h6 {
16
- margin-top: 1em;
17
- margin-bottom: 16px;
18
- font-weight: bold;
19
- line-height: 1.4;
24
+ margin-top: 1.6em;
25
+ margin-bottom: 0.6em;
26
+ font-weight: 600;
27
+ line-height: 1.3;
28
+ letter-spacing: -0.011em;
29
+
30
+ &:first-child {
31
+ margin-top: 0.5em;
32
+ }
20
33
  }
21
34
 
22
35
  h1 {
23
36
  color: var(--h1-color);
24
37
  border-bottom: 1px solid var(--h1-border-color);
25
- margin: 0.67em 0;
38
+ margin: 0.4em 0 0.6em;
26
39
  padding-bottom: 0.3em;
27
40
  font-size: 2.25em;
41
+ font-weight: 700;
28
42
  line-height: 1.2;
43
+ letter-spacing: -0.022em;
44
+ }
45
+
46
+ // Only the page-title H1 (first heading in the document) gets the underline.
47
+ // Subsequent H1s (e.g. inside the Markdown Sample's "Headings" demo) drop it
48
+ // so they don't read as duplicate page titles.
49
+ .main h1 ~ h1 {
50
+ border-bottom: none;
51
+ padding-bottom: 0;
29
52
  }
30
53
 
31
54
  h2 {
32
55
  color: var(--h2-color);
33
56
  border-bottom: 1px solid var(--h2-border-color);
34
57
  padding-bottom: 0.3em;
35
- font-size: 1.75em;
36
- line-height: 1.225;
58
+ font-size: 1.6em;
59
+ line-height: 1.3;
60
+ letter-spacing: -0.017em;
37
61
  }
38
62
 
39
63
  h3 {
40
64
  color: var(--h3-color);
41
- font-size: 1.5em;
42
- line-height: 1.43;
65
+ font-size: 1.3em;
66
+ line-height: 1.4;
43
67
  }
44
68
 
45
69
  h4 {
46
70
  color: var(--h4-color);
47
- font-size: 1.25em;
71
+ font-size: 1.1em;
48
72
  }
49
73
 
50
74
  h5 {
@@ -54,10 +78,14 @@ h5 {
54
78
 
55
79
  h6 {
56
80
  color: var(--h6-color);
57
- font-size: 1em;
81
+ font-size: 0.9em;
82
+ text-transform: uppercase;
83
+ letter-spacing: 0.04em;
58
84
  }
59
85
 
60
- code, pre, kbd {
61
- font-family: var(--font-family-monospace);
86
+ @media (prefers-reduced-motion: reduce) {
87
+ html, body, * {
88
+ transition: none !important;
89
+ animation: none !important;
90
+ }
62
91
  }
63
-