asciibook 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,9 +1,45 @@
1
- (function() {
1
+ function isDesktop() {
2
+ return window.innerWidth > 1280;
3
+ }
4
+
5
+ document.addEventListener('DOMContentLoaded', function() {
6
+ // Drawer
7
+ var drawer = document.querySelector('#drawer');
8
+ var drawerToggle = document.querySelector('#drawer-toggle');
9
+ var drawerBackdrop = drawer.querySelector('.drawer-backdrop');
10
+
11
+ drawerToggle.addEventListener('click', function() {
12
+ drawer.classList.toggle('open');
13
+ if (isDesktop()) {
14
+ localStorage.setItem('drawerOpened', drawer.classList.contains('open'));
15
+ }
16
+ })
17
+
18
+ drawerBackdrop.addEventListener('click', function() {
19
+ drawer.classList.remove('open');
20
+ })
21
+
22
+ // restore drawer state
23
+ if (isDesktop() && localStorage.getItem('drawerOpened') == 'true') {
24
+ drawer.classList.add('open');
25
+ }
26
+
27
+ // store drawer offset
28
+ window.addEventListener('beforeunload', function() {
29
+ localStorage.setItem('drawerScrollTop', drawer.querySelector('.drawer-content').scrollTop);
30
+ });
31
+
32
+ // restore drawer offset
33
+ if (localStorage.getItem('drawerScrollTop')) {
34
+ drawer.querySelector('.drawer-content').scrollTop = parseInt(localStorage.getItem('drawerScrollTop'));
35
+ }
36
+
37
+ // Dropdown
2
38
  document.querySelectorAll('.dropdown-toggle').forEach(function(element){
3
- var dropdown = element.closest('.dropdown')
39
+ var dropdown = element.closest('.dropdown');
4
40
 
5
41
  function openMenu() {
6
- dropdown.classList.add('open')
42
+ dropdown.classList.add('open');
7
43
  document.addEventListener('click', closeMenuOutside);
8
44
  }
9
45
 
@@ -26,4 +62,98 @@
26
62
  }
27
63
  });
28
64
  })
29
- })();
65
+
66
+ // Hot keys
67
+ document.addEventListener('keyup', function(event) {
68
+ switch (event.which) {
69
+ case 37:
70
+ document.querySelector('.paginator-prev').click();
71
+ break;
72
+ case 39:
73
+ document.querySelector('.paginator-next').click();
74
+ break;
75
+ }
76
+ })
77
+
78
+ // Custom style
79
+ document.body.dataset.fontSize = localStorage.getItem('fontSize') || '100';
80
+ document.body.dataset.fontFamily = localStorage.getItem('fontFamily') || 'sans-serif';
81
+ document.body.dataset.background = localStorage.getItem('background') || 'white';
82
+
83
+ function updataFonsSizeText() {
84
+ document.querySelector('#font-size-text').textContent = document.body.dataset.fontSize + '%';
85
+ }
86
+ updataFonsSizeText();
87
+
88
+ function updateFontFamilyButton() {
89
+ document.querySelectorAll('.font-family-options .button').forEach(function(button){
90
+ if (button.dataset.value == document.body.dataset.fontFamily) {
91
+ button.classList.add('active')
92
+ } else {
93
+ button.classList.remove('active')
94
+ }
95
+ });
96
+ }
97
+ updateFontFamilyButton();
98
+
99
+ function updateBackgroundButton() {
100
+ document.querySelectorAll('.background-options .button').forEach(function(button){
101
+ if (button.dataset.value == document.body.dataset.background) {
102
+ button.classList.add('active')
103
+ } else {
104
+ button.classList.remove('active')
105
+ }
106
+ });
107
+ }
108
+ updateBackgroundButton();
109
+
110
+ function updateStyle(key, value) {
111
+ localStorage.setItem(key, value);
112
+ document.body.dataset[key] = value;
113
+ }
114
+
115
+ var fontSizeList = [50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200];
116
+ document.querySelectorAll('.font-size-options .button').forEach(function(element){
117
+ element.addEventListener('click', function() {
118
+ var index = fontSizeList.indexOf(parseInt(document.body.dataset.fontSize));
119
+
120
+ if (index == -1) {
121
+ index = 5;
122
+ }
123
+
124
+ switch (this.dataset.action) {
125
+ case 'add':
126
+ index += 1
127
+ break;
128
+ case 'reduce':
129
+ index -= 1
130
+ break;
131
+ default:
132
+ }
133
+
134
+ if (value = fontSizeList[index]) {
135
+ updateStyle('fontSize', value);
136
+ updataFonsSizeText();
137
+ }
138
+ });
139
+ });
140
+
141
+ document.querySelectorAll('.font-family-options .button').forEach(function(element) {
142
+ element.addEventListener('click', function() {
143
+ updateStyle('fontFamily', this.dataset.value);
144
+ updateFontFamilyButton();
145
+ });
146
+ });
147
+
148
+ document.querySelectorAll('.background-options .button').forEach(function(element) {
149
+ element.addEventListener('click', function() {
150
+ updateStyle('background', this.dataset.value);
151
+ updateBackgroundButton();
152
+ });
153
+ });
154
+
155
+ // set default scroll element
156
+ document.querySelector('.main-content').focus();
157
+
158
+ document.body.classList.remove('preload');
159
+ });
Binary file
@@ -1,60 +1,159 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
3
  <head>
4
- <meta charset="utf-8">
4
+ <meta charset="utf-8" />
5
5
  <title>{{ page.title }} - {{ book.title }}</title>
6
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
+ <link rel="icon" href="icon.png" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8
+
9
+ {% if book.attributes.base-url %}
10
+ <meta name="twitter:card" content="summary" />
11
+ <meta property="og:type" content="website" />
12
+ <meta property="og:url" content="{{ book.attributes.base-url }}{{ page.path }}" />
13
+ <meta property="og:title" content="{{ page.title }} - {{ book.title }}" />
14
+ <meta property="og:description" content="{{ page.description }}" />
15
+ {% if page.image_url %}
16
+ {% if page.image_url contains 'http://' or page.image_url contains 'https://' %}
17
+ <meta property="og:image" content="{{ page.image_url }}" />
18
+ {% else %}
19
+ <meta property="og:image" content="{{ book.attributes.base-url }}{{ page.image_url }}" />
20
+ {% endif %}
21
+ {% endif %}
22
+ {% endif %}
23
+
7
24
  <link rel="stylesheet" href="normalize.css" />
8
25
  <link rel="stylesheet" href="default.css" />
9
26
  <link rel="stylesheet" href="highlight.css" />
10
27
  <link rel="stylesheet" href="html.css" />
11
- <script src="html.js" defer></script>
28
+ <script src="html.js"></script>
12
29
  </head>
13
- <body>
14
- <div class="toolbar">
15
- <div class="toolbar-title">
16
- <a href="index.html">
17
- {{ book.title }}
18
- </a>
30
+ <body class="preload">
31
+ <div id="drawer" class="drawer">
32
+ <div class="drawer-content">
33
+ <div class="drawer-menu">
34
+ {% if book.outline.size > 0 %}
35
+ <ol>
36
+ {% for item in book.outline %}
37
+ <li>
38
+ <a class="drawer-menu-item {% if item.path == page.path %} active {% endif %}" href="{{ item.path }}">{{ item.title }}</a>
39
+ {% if item.items.size > 0 %}
40
+ <ol>
41
+ {% for subitem in item.items %}
42
+ <li>
43
+ <a class="drawer-menu-item {% if subitem.path == page.path %} active {% endif %}" href="{{ subitem.path }}">{{ subitem.title }}</a>
44
+ </li>
45
+ {% endfor %}
46
+ </ol>
47
+ {% endif %}
48
+ </li>
49
+ {% endfor %}
50
+ </ol>
51
+ {% endif %}
52
+ </div>
53
+ </div>
54
+ <div class="drawer-backdrop">
19
55
  </div>
20
- <div class="toolbar-action">
21
- <div class="dropdown">
22
- <button id="drawer-button" type="button" class="dropdown-toggle button button-icon">
23
- <i class="fas fa-bars"></i>
56
+ </div>
57
+ <div class="main">
58
+ <div class="toolbar">
59
+ <div class="toolbar-action">
60
+ <button id="drawer-toggle" type="button" class="button button-icon">
61
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>
24
62
  </button>
25
- <div id="toolbar-toc" class="dropdown-menu">
26
- {% if book.toc[0] %}
27
- <ol>
28
- {% for item in book.toc %}
29
- <li>
30
- <a class="dropdown-menu-item" href="{{ item.path }}">{{ item.title }}</a>
31
- {% if item.items %}
32
- <ol>
33
- {% for subitem in item.items %}
34
- <li>
35
- <a class="dropdown-menu-item" href="{{ subitem.path }}">{{ subitem.title }}</a>
36
- </li>
37
- {% endfor %}
38
- </ol>
39
- {% endif %}
40
- </li>
41
- {% endfor %}
42
- </ol>
43
- {% endif %}
63
+ </div>
64
+ <div class="toolbar-title">
65
+ <a href="index.html">
66
+ {{ book.title }}
67
+ </a>
68
+ </div>
69
+
70
+ <div class="toolbar-action">
71
+ <div class="dropdown">
72
+ <button type="button" class="button button-icon dropdown-toggle">
73
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 5.5c0 .83.67 1.5 1.5 1.5H14v10.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V7h3.5c.83 0 1.5-.67 1.5-1.5S21.33 4 20.5 4h-10C9.67 4 9 4.67 9 5.5zM4.5 12H6v5.5c0 .83.67 1.5 1.5 1.5S9 18.33 9 17.5V12h1.5c.83 0 1.5-.67 1.5-1.5S11.33 9 10.5 9h-6C3.67 9 3 9.67 3 10.5S3.67 12 4.5 12z"/></svg>
74
+ </button>
75
+ <div class="dropdown-menu">
76
+ <div class="dropdown-group">
77
+ <label>Font Size</label>
78
+ <div class="dropdown-options font-size-options">
79
+ <button type="button" class="button button-icon" data-action="reduce">
80
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z"/></svg>
81
+ </button>
82
+ <div id="font-size-text">
83
+ 100%
84
+ </div>
85
+ <button type="button" class="button button-icon" data-action="add">
86
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"/></svg>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ <div class="dropdown-group">
91
+ <label>Font Family</label>
92
+ <div class="dropdown-options font-family-options">
93
+ <button type="button" class="button button-text" data-value="serif">Serif</button>
94
+ <button type="button" class="button button-text" data-value="sans-serif">Sans</button>
95
+ </div>
96
+ </div>
97
+ <div class="dropdown-group">
98
+ <label>Background</label>
99
+ <div class="dropdown-options background-options">
100
+ <button type="button" class="button button-icon active" data-value="white">
101
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"/></svg>
102
+ </button>
103
+ <button type="button" class="button button-icon" data-value="warm">
104
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"/></svg>
105
+ </button>
106
+ <button type="button" class="button button-icon" data-value="dim">
107
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"/></svg>
108
+ </button>
109
+ <button type="button" class="button button-icon" data-value="black">
110
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L5.53 12.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L9 16.17z"/></svg>
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="toolbar-action">
119
+ <div class="dropdown">
120
+ <button type="button" class="button button-icon dropdown-toggle" {% if page.outline.size == 0 %} disabled {% endif %}>
121
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M4 9h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm15 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/></svg>
122
+ </button>
123
+ <div class="dropdown-menu">
124
+ {% if page.outline.size > 0 %}
125
+ <ol>
126
+ {% for item in page.outline %}
127
+ <li>
128
+ <a class="dropdown-menu-item" href="{{ item.path }}">{{ item.title }}</a>
129
+ {% if item.items.size > 0 %}
130
+ <ol>
131
+ {% for subitem in item.items %}
132
+ <li>
133
+ <a class="dropdown-menu-item" href="{{ subitem.path }}">{{ subitem.title }}</a>
134
+ </li>
135
+ {% endfor %}
136
+ </ol>
137
+ {% endif %}
138
+ </li>
139
+ {% endfor %}
140
+ </ol>
141
+ {% endif %}
142
+ </div>
44
143
  </div>
45
144
  </div>
46
145
  </div>
47
- </div>
48
- <div class="main">
49
- <div class="content">
50
- {{ page.content }}
146
+ <div class="main-content" tabindex="-1">
147
+ <div class="container">
148
+ {{ page.content }}
149
+ </div>
51
150
  </div>
52
151
  <div class="paginator">
53
152
  <a href="{{ page.prev_page.path }}" class="paginator-prev {% if page.prev_page == nil %} disabled {% endif %}">
54
- <i class="fas fa-chevron-left"></i>
153
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M16.62 2.99c-.49-.49-1.28-.49-1.77 0L6.54 11.3c-.39.39-.39 1.02 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"/></svg>
55
154
  </a>
56
155
  <a href="{{ page.next_page.path }}" class="paginator-next {% if page.next_page == nil %} disabled {% endif %}">
57
- <i class="fas fa-chevron-right"></i>
156
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31c.39-.39.39-1.02 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"/></svg>
58
157
  </a>
59
158
  </div>
60
159
  </div>
@@ -3,6 +3,7 @@ body {
3
3
  }
4
4
 
5
5
  div,
6
- figure {
6
+ figure,
7
+ blockquote {
7
8
  page-break-inside: avoid;
8
9
  }
@@ -1,12 +1,10 @@
1
- @import "fontawesome/fontawesome.css";
2
- @import "fontawesome/solid.css";
3
-
4
1
  html {
5
2
  }
6
3
 
7
4
  body {
8
5
  line-height: 1.5;
9
6
  font-size: 1em;
7
+ font-family: sans-serif;
10
8
  color: #333;
11
9
  }
12
10
 
@@ -51,11 +49,16 @@ img {
51
49
  pre {
52
50
  line-height: 1.2;
53
51
  margin: 1em 0;
54
- background-color: #f8f8f8;
52
+ background: #f8f8f8;
55
53
  padding: 1em;
56
54
  white-space: pre-wrap;
57
55
  }
58
56
 
57
+ *:not(pre) code {
58
+ background: #f8f8f8;
59
+ padding: 0 4px;
60
+ }
61
+
59
62
  .toc ol {
60
63
  list-style: none;
61
64
  padding: 0;
@@ -105,6 +108,10 @@ figcaption {
105
108
  font-style: italic;
106
109
  }
107
110
 
111
+ figure pre {
112
+ margin: 0;
113
+ }
114
+
108
115
  .example {
109
116
  margin: 1em 0;
110
117
  padding: 1em;
@@ -189,21 +196,14 @@ footer {
189
196
  .admonition-icon {
190
197
  -ms-flex-negative: 0;
191
198
  flex-shrink: 0;
192
- -moz-osx-font-smoothing: grayscale;
193
- -webkit-font-smoothing: antialiased;
194
- display: inline-block;
195
- font-style: normal;
196
- font-variant: normal;
197
- text-rendering: auto;
198
199
  line-height: 1;
199
- font-family: 'Font Awesome 5 Free';
200
200
  padding: 0.5em;
201
- font-size: 2em;
202
- width: 1em;
203
- text-align: center;
204
201
  }
205
202
 
206
203
  .admonition-content {
204
+ -webkit-box-flex: 1;
205
+ -ms-flex-positive: 1;
206
+ flex-grow: 1;
207
207
  padding: 0.5em 0 0.5em 1em;
208
208
  border-left: 1px solid #ccc;
209
209
  }
@@ -216,29 +216,23 @@ footer {
216
216
  margin-bottom: 0;
217
217
  }
218
218
 
219
+ .admonition-note .admonition-icon {
220
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40" fill="%231976d2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/></svg>');
219
221
 
220
- .admonition-important .admonition-icon::before {
221
- content: "\f06a";
222
- color: #bf0000;
223
222
  }
224
223
 
225
- .admonition-note .admonition-icon::before {
226
- content: "\f05a";
227
- color: #19407c;
224
+ .admonition-tip .admonition-icon {
225
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40" fill="%23fbc02d"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4.25 19.79c.39.39 1.02.39 1.41 0l.39-.39c.39-.39.38-1.02 0-1.4l-.01-.01c-.39-.39-1.02-.39-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41zM11.99 23H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zM3.01 11.05H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.55 0 .99-.44.99-.99v-.01c.01-.55-.43-.99-.98-.99zM15 6.86V3.05c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v3.81c-2.04 1.18-3.32 3.52-2.93 6.13.4 2.61 2.56 4.7 5.18 5.02 3.64.44 6.75-2.4 6.75-5.95 0-2.23-1.21-4.16-3-5.2zm5 5.18v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zm-2.06 7.37l.39.39c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-.39-.39c-.39-.39-1.02-.38-1.4 0-.4.4-.4 1.02-.01 1.41z"/></svg>');
228
226
  }
229
227
 
230
- .admonition-tip .admonition-icon::before {
231
- content: "\f0eb";
232
- text-shadow: 1px 1px 2px rgba(155,155,0,.8);
233
- color: #111;
228
+ .admonition-important .admonition-icon {
229
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40" fill="%23d32f2f"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>');
234
230
  }
235
231
 
236
- .admonition-caution .admonition-icon::before {
237
- content: "\f06d";
238
- color: #bf3400;
232
+ .admonition-warning .admonition-icon {
233
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40" fill="%23ffa000"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>');
239
234
  }
240
235
 
241
- .admonition-warning .admonition-icon::before {
242
- content: "\f071";
243
- color: #bf6900;
236
+ .admonition-caution .admonition-icon {
237
+ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40" fill="%23d32f2f"><path d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/></svg>');
244
238
  }