Sasserisop
/
MATH201
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

base: Sasserisop:4dd82f5c746b180c7d446a3725d0f7e53bfbb3d8
Branches Tags
Sasserisop:master
...
compare: Sasserisop:82b02513e6cfd42b6818575a0285bd542b3b74e8
Branches Tags
Sasserisop:master

6 Commits
4dd82f5c74 ... 82b02513e6

Author SHA1 Message Date
Sasserisop 82b02513e6 Merge branch 'DashCampbell-master' 2024-02-05 20:06:00 -07:00
Sasserisop c15b2386d4 merge branch 'DashCampbell/MATH201/master' into master 2024-02-05 20:05:39 -07:00
DashCampbell fa560a5b29 made edits 2023-12-30 08:50:30 -07:00
DashCampbell d69c9e8e88 Automated Lecture Note link generation in the homepage. 2023-12-29 21:47:03 -07:00
DashCampbell 6a0094f858 Updated UI 2023-12-29 20:05:27 -07:00
DashCampbell 4ddd503616 Updated search menu and toolbar 2023-12-29 16:17:03 -07:00
9 changed files with 756 additions and 400 deletions
Show Stats Expand all files Collapse all files

5
README.md
View File

@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;)
Here's a quick rundown of how to build from source: Here's a quick rundown of how to build from source:
1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201``` 1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201```
2) make sure you have hugo installed 2) make sure you have hugo installed
3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender``` 3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to true.
4) visit your site by opening http://localhost:1313 on your browser. 4) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
5) visit your site by opening http://localhost:1313 on your browser.
Now if you want to host it on a live website, you can run: Now if you want to host it on a live website, you can run:
```hugo``` ```hugo```

26
content/_index.md
View File

@ -2,32 +2,6 @@
These are notes for the [University of Alberta MATH 201 - Differential Equations](https://apps.ualberta.ca/catalogue/course/math/201) course. These are notes for the [University of Alberta MATH 201 - Differential Equations](https://apps.ualberta.ca/catalogue/course/math/201) course.
I have written these notes for myself, I thought it would be cool to share them. These notes may be inaccurate, incomplete, or incoherent. No warranty is expressed or implied. Reader assumes all risk and liabilities. I have written these notes for myself, I thought it would be cool to share them. These notes may be inaccurate, incomplete, or incoherent. No warranty is expressed or implied. Reader assumes all risk and liabilities.
</br> </br>
[Separable equations (lec 1)](separable-equations-lec-1.html)
[Homogenous equations (lec 2)](homogenous-equations-lec-2.html)
[Linear equations (lec 2-3)](linear-equations-lec-2-3.html)
[Bernoulli equations (lec 3)](bernoulli-equations-lec-3.html)
[Linear coefficient equations (lec 4)](linear-coefficient-equations-lec-4.html)
[Exact equations (lec 4-5)](exact-equations-lec-4-5.html)
[Second order homogenous linear equations (lec 5-7)](second-order-homogenous-linear-equations-lec-5-7.html)
[Method of undetermined coefficients (lec 8-9)](method-of-undetermined-coefficients-lec-8-9.html)
[Variation of parameters (lec 9-10)](variation-of-parameters-lec-9-10.html)
[Cauchy-Euler equations (lec 10-11)](cauchy-euler-equations-lec-10-11.html)
[Reduction of order (lec 11)](reduction-of-order-lec-11.html)
[Free vibrations (lec 11-12)](free-vibrations-lec-11-12.html)
[Resonance & AM (lec 13-14)](resonance-am-lec-13-14.html)
[Laplace transform (lec 14-16)](laplace-transform-lec-14-16.html)
[Solving IVP's using Laplace transform (lec 17-18)](solving-ivps-using-laplace-transform-lec-17-18.html)
[(Heaviside) Unit step function (lec 18)](heaviside-unit-step-function-lec-18.html)
[Periodic functions (lec 19)](periodic-functions-lec-19.html)
[Convolution (lec 19-20)](convolution-lec-19-20.html)
[Dirak δ-function (lec 21)](dirak-δ-function-lec-21.html)
[Systems of linear equations (lec 21-22)](systems-of-linear-equations-lec-21-22.html)
[Power series (lec 22-25)](power-series-lec-22-25.html)
[Separation of variables & Eigen value problems (lec 26-28)](separation-of-variables-eigen-value-problems-lec-26-28.html)
[Fourier series (lec 28-29)](fourier-series-lec-28-29.html)
[Heat equation (lec 30-33)](heat-equation-lec-30-33.html)
[Wave equation (lec 33-36)](wave-equation-lec-33-36.html)
</br>
[How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st 2023. Needs revision, but it gives a nice overview.) [How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st 2023. Needs revision, but it gives a nice overview.)
[Big LT table (.png)](drawings/bigLTtable.png) [Big LT table (.png)](drawings/bigLTtable.png)
[Small LT table (.png)](drawings/smallLTtable.png) [Small LT table (.png)](drawings/smallLTtable.png)

177
resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
View File

@ -26,7 +26,87 @@ input[type="submit"] {
Bear base styles Bear base styles
(Retrieved from official app, all credits belong to Bear Team) (Retrieved from official app, all credits belong to Bear Team)
*/ */
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 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,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
html { html {
line-height: 1; } line-height: 1; }
ol, ul { ol,
ul {
list-style: none; } list-style: none; }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } vertical-align: middle; }
q, blockquote { q,
blockquote {
quotes: none; } quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { q:before,
q:after,
blockquote:before,
blockquote:after {
content: ""; content: "";
content: none; } content: none; }
a img { a img {
border: none; } border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; } display: block; }
* { * {
@ -80,7 +179,8 @@ body {
background: var(--background); background: var(--background);
color: var(--text-base-color); color: var(--text-base-color);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: "AvenirNext-Regular"; } font-family: "AvenirNext-Regular";
position: relative; }
a { a {
color: var(--link-text-color); color: var(--link-text-color);
@ -117,10 +217,14 @@ hr {
background-color: #dedede; background-color: #dedede;
margin: -1px auto 1.57143em auto; } margin: -1px auto 1.57143em auto; }
ul, ol { ul,
ol {
margin-bottom: .31429em; } margin-bottom: .31429em; }
ul ul, ul ol, ol ul, ol ol { ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0px; } margin-bottom: 0px; }
ol { ol {
@ -135,11 +239,13 @@ ol li:before {
min-width: 1em; min-width: 1em;
margin-right: 0.5em; } margin-right: 0.5em; }
b, strong { b,
strong {
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-weight: bold; } font-weight: bold; }
i, em { i,
em {
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-style: italic; } font-style: italic; }
@ -151,22 +257,48 @@ code {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted { .sf_code_string,
.sf_code_selector,
.sf_code_attr-name,
.sf_code_char,
.sf_code_builtin,
.sf_code_inserted {
color: #D33905; } color: #D33905; }
.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata { .sf_code_comment,
.sf_code_prolog,
.sf_code_doctype,
.sf_code_cdata {
color: #838383; } color: #838383; }
.sf_code_number, .sf_code_boolean { .sf_code_number,
.sf_code_boolean {
color: #0E73A2; } color: #0E73A2; }
.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation { .sf_code_keyword,
.sf_code_atrule,
.sf_code_rule,
.sf_code_attr-value,
.sf_code_function,
.sf_code_class-name,
.sf_code_class,
.sf_code_regex,
.sf_code_important,
.sf_code_variable,
.sf_code_interpolation {
color: #0E73A2; } color: #0E73A2; }
.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted { .sf_code_property,
.sf_code_tag,
.sf_code_constant,
.sf_code_symbol,
.sf_code_deleted {
color: #1B00CE; } color: #1B00CE; }
.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url { .sf_code_macro,
.sf_code_entity,
.sf_code_operator,
.sf_code_url {
color: #920448; } color: #920448; }
.note-wrapper { .note-wrapper {
@ -367,7 +499,12 @@ svg + ol {
* + h4 { * + h4 {
margin-top: 2.8em; } margin-top: 2.8em; }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
position: relative; } position: relative; }
h1:before, h1:before,
@ -458,3 +595,7 @@ li img {
.turbolinks-progress-bar { .turbolinks-progress-bar {
visibility: hidden; } visibility: hidden; }
@media only screen and (max-width: 460px) {
main .note-wrapper {
padding: 1.57143em 1.1em; } }

221
themes/zettels/assets/css/style.scss
View File

@ -1,4 +1,3 @@
input { input {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -18,20 +17,101 @@ input[type="search"],
input[type="text"], input[type="text"],
input[type="button"], input[type="button"],
input[type="submit"] { input[type="submit"] {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0; border-radius: 0;
} }
// @todo: class // @todo: class
::selection { ::selection {
background: var(--selected-text-background-color); background: var(--selected-text-background-color);
} }
/** /**
Bear base styles Bear base styles
(Retrieved from official app, all credits belong to Bear Team) (Retrieved from official app, all credits belong to Bear Team)
*/ */
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 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,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -44,7 +124,8 @@ html {
line-height: 1 line-height: 1
} }
ol, ul { ol,
ul {
list-style: none list-style: none
} }
@ -53,17 +134,23 @@ table {
border-spacing: 0 border-spacing: 0
} }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle vertical-align: middle
} }
q, blockquote { q,
blockquote {
quotes: none quotes: none
} }
q:before, q:after, blockquote:before, blockquote:after { q:before,
q:after,
blockquote:before,
blockquote:after {
content: ""; content: "";
content: none content: none
} }
@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after {
a img { a img {
border: none border: none
} }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block display: block
} }
@ -97,7 +197,8 @@ body {
// @todo: not working // @todo: not working
color: var(--text-base-color); color: var(--text-base-color);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: "AvenirNext-Regular" font-family: "AvenirNext-Regular";
position: relative;
} }
a { a {
@ -141,11 +242,15 @@ hr {
margin: -1px auto 1.57143em auto margin: -1px auto 1.57143em auto
} }
ul, ol { ul,
ol {
margin-bottom: .31429em; margin-bottom: .31429em;
} }
ul ul, ul ol, ol ul, ol ol { ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0px margin-bottom: 0px
} }
@ -163,13 +268,15 @@ ol li:before {
margin-right: 0.5em margin-right: 0.5em
} }
b, strong { b,
strong {
//font-family: "AvenirNext-Bold"; //font-family: "AvenirNext-Bold";
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-weight: bold; font-weight: bold;
} }
i, em { i,
em {
//font-family: "AvenirNext-Italic"; //font-family: "AvenirNext-Italic";
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-style: italic; font-style: italic;
@ -185,27 +292,53 @@ code {
white-space: nowrap white-space: nowrap
} }
.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted { .sf_code_string,
.sf_code_selector,
.sf_code_attr-name,
.sf_code_char,
.sf_code_builtin,
.sf_code_inserted {
color: #D33905 color: #D33905
} }
.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata { .sf_code_comment,
.sf_code_prolog,
.sf_code_doctype,
.sf_code_cdata {
color: #838383 color: #838383
} }
.sf_code_number, .sf_code_boolean { .sf_code_number,
.sf_code_boolean {
color: #0E73A2 color: #0E73A2
} }
.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation { .sf_code_keyword,
.sf_code_atrule,
.sf_code_rule,
.sf_code_attr-value,
.sf_code_function,
.sf_code_class-name,
.sf_code_class,
.sf_code_regex,
.sf_code_important,
.sf_code_variable,
.sf_code_interpolation {
color: #0E73A2 color: #0E73A2
} }
.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted { .sf_code_property,
.sf_code_tag,
.sf_code_constant,
.sf_code_symbol,
.sf_code_deleted {
color: #1B00CE color: #1B00CE
} }
.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url { .sf_code_macro,
.sf_code_entity,
.sf_code_operator,
.sf_code_url {
color: #920448 color: #920448
} }
@ -221,7 +354,7 @@ code {
u { u {
text-decoration: underline; text-decoration: underline;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,var(--accent-text-color) 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--accent-text-color) 50%);
background-repeat: repeat-x; background-repeat: repeat-x;
background-size: 2px 2px; background-size: 2px 2px;
background-position: 0 1.05em background-position: 0 1.05em
@ -339,7 +472,7 @@ blockquote {
.address a { .address a {
color: #545454; color: #545454;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,#0da35e 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #0da35e 50%);
background-repeat: repeat-x; background-repeat: repeat-x;
background-size: 2px 2px; background-size: 2px 2px;
background-position: 0 1.05em background-position: 0 1.05em
@ -356,7 +489,7 @@ blockquote {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
border: solid 1px rgba(0,0,0,0.3); border: solid 1px rgba(0, 0, 0, 0.3);
border-radius: 50%; border-radius: 50%;
margin-right: 0.1em; margin-right: 0.1em;
position: relative; position: relative;
@ -415,7 +548,7 @@ img {
// Hugo renders footnotes with <p> tags nested inside <li> // Hugo renders footnotes with <p> tags nested inside <li>
// This is need to prevent <p> breaking lines // This is need to prevent <p> breaking lines
li > p { li>p {
display: inline-block; display: inline-block;
margin-left: 16px; margin-left: 16px;
} }
@ -434,25 +567,30 @@ h4 {
margin-bottom: .47143em margin-bottom: .47143em
} }
* + p, *+p,
* + ul, *+ul,
* + ol, *+ol,
* + blockquote { *+blockquote {
/*margin-top: 1.6em;*/ /*margin-top: 1.6em;*/
} }
svg + ul, svg+ul,
svg + ol { svg+ol {
margin-top: 0; margin-top: 0;
} }
* + h2, *+h2,
* + h3, *+h3,
* + h4 { *+h4 {
margin-top: 2.8em; margin-top: 2.8em;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
position: relative; position: relative;
} }
@ -511,9 +649,10 @@ h6:before {
content: "#" content: "#"
} }
* + table { *+table {
margin-top: 12px; margin-top: 12px;
} }
table { table {
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
@ -569,3 +708,11 @@ li img {
.turbolinks-progress-bar { .turbolinks-progress-bar {
visibility: hidden; visibility: hidden;
} }
@media only screen and (max-width: 460px) {
// decrease padding of notes when screen width is < 460px
main .note-wrapper {
padding: 1.57143em 1.1em;
}
}

297
themes/zettels/assets/js/search.js
View File

@ -1,9 +1,14 @@
// On localhost the root url is /MATH201
// On sasserisop the root url is /sasserisop
const localhost = false;
const root = localhost ? "" : "/MATH201";
loadIndex() loadIndex()
// Highlight with jQuery // Highlight with jQuery
// from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js // from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js
// @todo: This is the only use of jQuery. Find a vanila JS way // @todo: This is the only use of jQuery. Find a vanila JS way
jQuery.fn.highlight = function(pat) { jQuery.fn.highlight = function (pat) {
function innerHighlight(node, pat) { function innerHighlight(node, pat) {
@ -15,16 +20,16 @@ jQuery.fn.highlight = function(pat) {
if (pos >= 0) { if (pos >= 0) {
var spannode = document.createElement('span'); var spannode = document.createElement('span');
spannode.className = 'highlighted'; spannode.className = 'highlighted';
var middlebit = node.splitText(pos); var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length); var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true); var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone); spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit); middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1; skip = 1;
} }
@ -41,15 +46,15 @@ jQuery.fn.highlight = function(pat) {
} }
return this.each(function() { return this.each(function () {
innerHighlight(this, pat.toUpperCase()); innerHighlight(this, pat.toUpperCase());
}); });
}; };
jQuery.fn.removeHighlight = function() { jQuery.fn.removeHighlight = function () {
function newNormalize(node) { function newNormalize(node) {
@ -71,7 +76,7 @@ jQuery.fn.removeHighlight = function() {
if (next == null || next.nodeType != 3) { continue; } if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue; var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text); new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child); node.insertBefore(new_node, child);
node.removeChild(child); node.removeChild(child);
@ -83,7 +88,7 @@ jQuery.fn.removeHighlight = function() {
} }
return this.find("span.highlighted").each(function() { return this.find("span.highlighted").each(function () {
var thisParent = this.parentNode; var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this); thisParent.replaceChild(this.firstChild, this);
@ -93,9 +98,9 @@ jQuery.fn.removeHighlight = function() {
}; };
$(function() { $(function () {
$('#search-input').bind('keyup change', function(ev) { $('#search-input').bind('keyup change', function (ev) {
// pull in the new value // pull in the new value
var searchTerm = $(this).val(); var searchTerm = $(this).val();
@ -104,60 +109,105 @@ $(function() {
$('body').removeHighlight(); $('body').removeHighlight();
// disable highlighting if empty // disable highlighting if empty
if ( searchTerm ) { if (searchTerm) {
// highlight the new term // highlight the new term
$('body').highlight( searchTerm ); $('body').highlight(searchTerm);
} }
}); });
}); });
/// ///
var scrollTop = 0 var scrollTop = 0
document.addEventListener("turbolinks:before-render", function() { document.addEventListener("turbolinks:before-render", function () {
var search_index = document.getElementById("search-results"); var search_index = document.getElementById("search-results");
var y = search_index.scrollTop; var y = search_index.scrollTop;
scrollTop = y scrollTop = y
}) })
document.addEventListener("turbolinks:render", function() { document.addEventListener("turbolinks:render", function () {
var search_index = document.getElementById("search-results"); var search_index = document.getElementById("search-results");
search_index.scrollTop = scrollTop search_index.scrollTop = scrollTop
}) })
document.addEventListener("turbolinks:load", function() { document.addEventListener("turbolinks:load", function () {
setNoteWrapperState() setNoteWrapperState()
const current = window.location.href const current = window.location.href
var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
var els = document.getElementsByTagName("a"); if (el.href === current) {
for (var i = 0, l = els.length; i < l; i++) { el.classList.add("selected")
var el = els[i]; } else {
el.classList.remove("selected")
if (el.href === current) { }
el.classList.add("selected") }
} else {
el.classList.remove("selected")
}
}
}) })
function loadIndex() { // load the lecture note links in homepage
fetchJSON(function(response) { function load_lecture_links() {
// check if links have already been generated first
if ($("p.lecture-link").length == 0) {
fetchJSON(function (response) {
const notes = response;
// for homepage lecture links
const lecture_links = new Map();
notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
// Add lecture notes to a dictionary, and then sort them by lecture number.
// second last character of the title may be first digit of lecture number
const d1 = note.title[note.title.length - 2];
// find the lecture number, if there is one
if (/\d/.test(d1)) {
// it has a lecture number
// if the third last character is a digit, then the lecture number is 2 digits
const d2 = note.title[note.title.length - 3];
var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
// some lecture titles have the same last lecture number
if (lecture_links.has(lecture_number)) {
// prevents two lectures from having the same key
lecture_number += 0.5;
}
lecture_links.set(lecture_number, [note.title, note.permalink])
}
});
const sorted_links = new Map([...lecture_links.entries()].sort((a, b) => (a[0] - b[0])));
sorted_links.forEach(val => {
a_tag = document.createElement('a');
a_tag.innerText = val[0]; //title
a_tag.href = val[1]; //permalink
p_tag = document.createElement('p');
p_tag.append(a_tag);
p_tag.className = "lecture-link"
// Add lecture notes before third </br> tag in _index.md
$("#note-wrapper br:nth-of-type(3)").before(p_tag);
});
});
}
}
function loadIndex() {
fetchJSON(function (response) {
const notes = response; const notes = response;
const search_results = document.getElementById('search-results'); const search_results = document.getElementById('search-results');
const tags = document.getElementById('tags'); const tags = document.getElementById('tags');
const current_note = window.location.href; const current_note = window.location.href;
notes.index.forEach(note => {
const title = '<h4>'+ note.title + '</h4>'; // sorted notes by lecture number
const lecture_notes = new Map();
const non_lecture_notes = [];
// Fixed a bug where the search results had unwanted notes.
// The notes are now filtered first.
notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
const title = '<h4>' + note.title + '</h4>';
const summary = '<div>' + note.summary + '</div>'; const summary = '<div>' + note.summary + '</div>';
const permalink = note.permalink const permalink = note.permalink
@ -179,14 +229,41 @@ function loadIndex() {
const tags = '<span style="display:none">' + note.tags + '</span>' const tags = '<span style="display:none">' + note.tags + '</span>'
var list_content; var list_content;
if (current_note === permalink) { if (current_note === permalink) {
list_content = '<a href="/MATH201' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>' list_content = '<a href="' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
} else { } else {
list_content = '<a href="/MATH201' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>' list_content = '<a href="' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
} }
const child = document.createElement("li"); const child = document.createElement("li");
child.innerHTML = list_content; child.innerHTML = list_content;
search_results.append(child)
// Add lecture notes to a dictionary, and then sort them by lecture number.
// second last character of the title may be first digit of lecture number
const d1 = note.title[note.title.length - 2];
// find the lecture number, if there is one
if (/\d/.test(d1)) {
// it has a lecture number
// if the third last character is a digit, then the lecture number is 2 digits
const d2 = note.title[note.title.length - 3];
var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
if (lecture_notes.has(lecture_number)) {
// prevent lectures from having the same key
lecture_number += 0.5;
}
lecture_notes.set(lecture_number, child);
} else {
non_lecture_notes.push(child);
}
});
// sort notes by lecture number
const sorted_notes = new Map([...lecture_notes.entries()].sort((a, b) => (a[0] - b[0])));
// Add sorted notes first
sorted_notes.forEach(val => {
search_results.append(val);
});
non_lecture_notes.forEach(child => {
search_results.append(child);
}); });
// @todo: wip // @todo: wip
@ -196,20 +273,19 @@ function loadIndex() {
// tags.append(child) // tags.append(child)
// }); // });
// //
}); });
} }
function fetchJSON(callback) { function fetchJSON(callback) {
const requestURL = root + '/index.json';
const requestURL = '/MATH201/index.json';
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.open('GET', requestURL, true); request.open('GET', requestURL, true);
request.responseType = 'json'; request.responseType = 'json';
request.onreadystatechange = function() { request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) { if (request.readyState === 4 && request.status === 200) {
callback(request.response); callback(request.response);
} }
}; };
request.send(null); request.send(null);
} }
@ -226,57 +302,57 @@ function performSearchWith(query) {
var filter, ul, li, a, i, txtValue; var filter, ul, li, a, i, txtValue;
filter = query.toLowerCase(); filter = query.toLowerCase();
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
var re = new RegExp(filter, 'g'); var re = new RegExp(filter, 'g');
ul = document.getElementById("search-results"); ul = document.getElementById("search-results");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0]; a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText; txtValue = a.textContent || a.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) { if (txtValue.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "block"; li[i].style.display = "block";
} else { } else {
li[i].style.display = "none"; li[i].style.display = "none";
} }
} }
} }
function performSearch() { function performSearch() {
var input, filter, ul, li, a, i, txtValue; var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search-input'); input = document.getElementById('search-input');
filter = input.value.toLowerCase(); filter = input.value.toLowerCase();
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
var re = new RegExp(filter, 'g'); var re = new RegExp(filter, 'g');
ul = document.getElementById("search-results"); ul = document.getElementById("search-results");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0]; a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText; txtValue = a.textContent || a.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) { if (txtValue.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "block"; li[i].style.display = "block";
} else { } else {
li[i].style.display = "none"; li[i].style.display = "none";
} }
} }
} }
// Keyboard shortcuts // Keyboard shortcuts
document.addEventListener('keydown', function(evt) { document.addEventListener('keydown', function (evt) {
if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) { if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
document.getElementById("search-input").focus(); document.getElementById("search-input").focus();
@ -291,12 +367,7 @@ document.addEventListener('keydown', function(evt) {
var nav_is_visible = false; var nav_is_visible = false;
function handleNavVisibility() { function handleNavVisibility() {
if (!nav_is_visible) { $("#search").toggle("slide");
showNav();
} else {
hideNav()
}
} }
function showNav() { function showNav() {
@ -315,7 +386,7 @@ function hideNav() {
document.getElementById("search-header").style.width = "0"; document.getElementById("search-header").style.width = "0";
document.getElementById("search").style.opacity = 0; document.getElementById("search").style.opacity = 0;
document.getElementById("search-header").style.opacity = 0; document.getElementById("search-header").style.opacity = 0;
document.getElementById("main").style.marginLeft= "0"; document.getElementById("main").style.marginLeft = "0";
pullNoteWrapper() pullNoteWrapper()
nav_is_visible = false; nav_is_visible = false;
@ -344,54 +415,54 @@ const hoverTime = 300
const fetchers = {} const fetchers = {}
const doc = document.implementation.createHTMLDocument('prefetch') const doc = document.implementation.createHTMLDocument('prefetch')
function fetchPage (url, success) { function fetchPage(url, success) {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
xhr.open('GET', url) xhr.open('GET', url)
xhr.setRequestHeader('VND.PREFETCH', 'true') xhr.setRequestHeader('VND.PREFETCH', 'true')
xhr.setRequestHeader('Accept', 'text/html') xhr.setRequestHeader('Accept', 'text/html')
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return if (xhr.readyState !== XMLHttpRequest.DONE) return
if (xhr.status !== 200) return if (xhr.status !== 200) return
success(xhr.responseText) success(xhr.responseText)
} }
xhr.send() xhr.send()
} }
function prefetchTurbolink (url) { function prefetchTurbolink(url) {
fetchPage(url, responseText => { fetchPage(url, responseText => {
doc.open() doc.open()
doc.write(responseText) doc.write(responseText)
doc.close() doc.close()
const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
Turbolinks.controller.cache.put(url, snapshot) Turbolinks.controller.cache.put(url, snapshot)
}) })
} }
function prefetch (url) { function prefetch(url) {
if (prefetched(url)) return if (prefetched(url)) return
prefetchTurbolink(url) prefetchTurbolink(url)
} }
function prefetched (url) { function prefetched(url) {
return location.href === url || Turbolinks.controller.cache.has(url) return location.href === url || Turbolinks.controller.cache.has(url)
} }
function prefetching (url) { function prefetching(url) {
return !!fetchers[url] return !!fetchers[url]
} }
function cleanup (event) { function cleanup(event) {
const element = event.target const element = event.target
clearTimeout(fetchers[element.href]) clearTimeout(fetchers[element.href])
element.removeEventListener('mouseleave', cleanup) element.removeEventListener('mouseleave', cleanup)
} }
document.addEventListener('mouseover', event => { document.addEventListener('mouseover', event => {
if (!event.target.dataset.prefetch) return if (!event.target.dataset.prefetch) return
const url = event.target.href const url = event.target.href
if (prefetched(url)) return if (prefetched(url)) return
if (prefetching(url)) return if (prefetching(url)) return
cleanup(event) cleanup(event)
event.target.addEventListener('mouseleave', cleanup) event.target.addEventListener('mouseleave', cleanup)
fetchers[url] = setTimeout(() => prefetch(url), hoverTime) fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
}) })

29
themes/zettels/assets/js/thumbnails.js
View File

@ -1,19 +1,14 @@
var thumbnail_mode = false // Resize images using an input range.
function imageMode() { function resizeImage() {
const note_wrapper = document.getElementById('note-wrapper') // make p tags wrapping img tags inline, to resize images correctly
const images = note_wrapper.getElementsByTagName('img') $("#main p").has("img").css("display", "inline-block");
if (thumbnail_mode) { // toggle vectical input range
var els = note_wrapper.getElementsByTagName('img') $("#toolbar input[type=range][orient=vertical]").slideToggle();
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.remove('thumbnail'); // resize image
} $("#toolbar input[type=range][orient=vertical]").mouseup(function () {
thumbnail_mode = false $("#main p img").css("width", this.value + "%");
} else { this.title = this.value + "%";
var els = note_wrapper.getElementsByTagName('img') });
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.add('thumbnail');
}
thumbnail_mode = true
}
} }

17
themes/zettels/layouts/index.html
View File

@ -1,8 +1,15 @@
{{ define "main" }} {{ define "main" }}
<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p> <p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
{{ partial "content.html" . }} {{ partial "content.html" . }}
<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br> <p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br>
<p style="text-align: left;">Seeing people use these notes and benefitting from it makes me happy, so thanks for sticking around :) and remember to use what you learn for good! And to lead life with honor and integrity and be ethical engineers. Dr. Minev used to always stress the importance of this in his lectures, and I wholeheartedly agree.</p></br> <p style="text-align: left;">Seeing people use these notes and benefitting from it makes me happy, so thanks for sticking around :) and remember to use what you learn for good! And to lead life with honor and integrity and be ethical engineers. Dr. Minev used to always stress the importance of this in his lectures, and I wholeheartedly agree.</p></br>
<p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository <img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br> <p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository
<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p> <img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br>
<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community
discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p>
<script>
$(function () {
load_lecture_links();
});
</script>
{{ end }} {{ end }}

214
themes/zettels/layouts/partials/search.html
View File

@ -6,130 +6,134 @@
- Focused current note - Focused current note
--> -->
<style> <style>
search-menu { search-menu {
display: block; display: none;
} }
#search { #search {
height: 100%; height: 100%;
width: 0; width: 300px;
position: fixed; position: fixed;
background: var(--background-search); background: var(--background-search);
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
border-right: 1px solid var(--separator-color); border-right: 1px solid var(--separator-color);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
opacity: 0;
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none;
scrollbar-width: none; /* Firefox */ /* IE and Edge */
} scrollbar-width: none;
/* Firefox */
}
#search::-webkit-scrollbar { display: none; } #search::-webkit-scrollbar {
display: none;
}
#search-header { #search-header {
padding: 12px; padding: 12px 0;
position: fixed; margin: 0 auto;
padding-left: 12px; background: var(--background-search);
padding-right: 12px; width: 250px;
background: var(--background-search); opacity: 1;
width: 250px; height: 50px;
opacity: 1; z-index: 2;
height: 50px; border-bottom: 1px solid var(--separator-color);
z-index: 2; }
border-bottom: 1px solid var(--separator-color);
}
#search .input-container { #search .input-container {
position: relative position: relative
} }
#search-input { #search-input {
width: 100%; width: 100%;
height: 24px; height: 24px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
border-radius: 4px; border-radius: 4px;
padding-left: 16px; padding-left: 24px;
background-color: white; background-color: white;
display: inline-block; display: inline-block;
} }
#search-input:focus { #search-input:focus {
border: 1px solid var(--search-field-focused-color); border: 1px solid var(--search-field-focused-color);
} }
#search-header .input-container .search-icon { #search-header .input-container .search-icon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 8px; left: 8px;
fill: darkGray; fill: darkGray;
} }
#search-results img { #search-results img {
width: 122px; width: 122px;
height: 76px; height: 76px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
object-fit: cover; object-fit: cover;
} }
#search-results { #search-results {
margin-top: 50px; overflow: auto;
overflow: auto; height: 100%;
height: 100%; }
}
#search-results a { #search-results a {
width: 100%; width: 100%;
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
display: inline-block; display: inline-block;
color: var(--text-base-color); color: var(--text-base-color);
border-bottom: 1px solid var(--separator-color); border-bottom: 1px solid var(--separator-color);
border-left: 6px solid var(--background-search); border-left: 6px solid var(--background-search);
} }
#search-results a:first-child:hover, a:first-child:focus, .selected { #search-results a:first-child:hover,
outline: 0; a:first-child:focus,
background-color: var(--note-table-cell-selected-color); .selected {
border-left: 6px solid var(--note-table-cell-ribbon-color) !important; outline: 0;
} background-color: var(--note-table-cell-selected-color);
border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
}
// Reseting default styles inside search component scope /* // Reseting default styles inside search component scope */
#search-results li { text-indent: 0; } #search-results li {
#search-results li:before, text-indent: 0;
#search-results h1:before, }
#search-results h2:before,
#search-results h3:before, #search-results li:before,
#search-results h4:before, #search-results h1:before,
#search-results h5:before, #search-results h2:before,
#search-results h6:before { #search-results h3:before,
content: ""; #search-results h4:before,
visibility: hidden; #search-results h5:before,
display: none; #search-results h6:before {
} content: "";
visibility: hidden;
display: none;
}
</style> </style>
<search-menu id="search" data-turbolinks-permanent> <search-menu id="search" data-turbolinks-permanent>
<header id="search-header"> <header id="search-header">
<div class="input-container"> <div class="input-container">
<svg aria-hidden="true" style="" class="search-icon" width="12" height="12" viewBox="0 0 18 18"> <svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
<path d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z"> <path
</path> d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
</svg> </path>
</svg>
<input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0" placeholder="Search note"> <input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0"
placeholder="Search Notes">
</div>
</header>
<ul id="search-results"></ul>
</div>
</header>
<ul id="search-results"></ul>
</search-menu> </search-menu>

70
themes/zettels/layouts/partials/toolbar.html
View File

@ -1,42 +1,58 @@
<script>
</script>
<style> <style>
#toolbar { #toolbar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
width: 60px; width: 60px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
transition: 1s; transition: 1s;
opacity: 0.5; opacity: 0.5;
z-index: 1;
padding: 18px 0px 18px 0px; padding: 18px 0px 18px 0px;
} }
#toolbar:hover { #toolbar:hover {
opacity: 1; opacity: 1;
} }
#close-nav-icon { #close-nav-icon {
display: none; display: none;
} }
#toolbar input[type=range][orient=vertical] {
appearance: slider-vertical;
display: none;
}
</style> </style>
<aside id="toolbar"> <aside id="toolbar">
<span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()"> <span title="Toggle Search Menu" style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg> <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle>
<path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path>
</svg>
</span> </span>
<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;"> <span title="Adjusts Diagram Size" style="cursor:pointer;margin-top:16px;" onclick="resizeImage()">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle cx="16.1" cy="6.1" r="1.1"></circle>
<rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect>
<polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline>
<polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14">
</polyline>
</svg>
</span> </span>
<input title="100%" type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
</aside> </aside>
<script>
</script>