master #1
|
|
@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;)
|
|||
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```
|
||||
2) make sure you have hugo installed
|
||||
3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
|
||||
4) visit your site by opening http://localhost:1313 on your browser.
|
||||
3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to true.
|
||||
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:
|
||||
```hugo```
|
||||
|
|
|
|||
|
|
@ -5,32 +5,6 @@ I have written these notes for myself, I thought it would be cool to share them.
|
|||
Good luck on the final! <3
|
||||
If we do bad on the exam, Petar will come after us with the Dirac delta 🤜💥
|
||||
</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, needs revision. But it gives a nice overview.)
|
||||
[Big LT table (.png)](drawings/bigLTtable.png)
|
||||
|
|
|
|||
|
|
@ -26,7 +26,87 @@ input[type="submit"] {
|
|||
Bear base styles
|
||||
(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;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
|
|||
html {
|
||||
line-height: 1; }
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
list-style: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
caption, th, td {
|
||||
caption,
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
q, blockquote {
|
||||
q,
|
||||
blockquote {
|
||||
quotes: none; }
|
||||
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
a img {
|
||||
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; }
|
||||
|
||||
* {
|
||||
|
|
@ -80,7 +179,8 @@ body {
|
|||
background: var(--background);
|
||||
color: var(--text-base-color);
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: "AvenirNext-Regular"; }
|
||||
font-family: "AvenirNext-Regular";
|
||||
position: relative; }
|
||||
|
||||
a {
|
||||
color: var(--link-text-color);
|
||||
|
|
@ -117,10 +217,14 @@ hr {
|
|||
background-color: #dedede;
|
||||
margin: -1px auto 1.57143em auto; }
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: .31429em; }
|
||||
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-bottom: 0px; }
|
||||
|
||||
ol {
|
||||
|
|
@ -135,11 +239,13 @@ ol li:before {
|
|||
min-width: 1em;
|
||||
margin-right: 0.5em; }
|
||||
|
||||
b, strong {
|
||||
b,
|
||||
strong {
|
||||
font-family: "Menlo-Regular";
|
||||
font-weight: bold; }
|
||||
|
||||
i, em {
|
||||
i,
|
||||
em {
|
||||
font-family: "Menlo-Regular";
|
||||
font-style: italic; }
|
||||
|
||||
|
|
@ -151,22 +257,48 @@ code {
|
|||
text-overflow: ellipsis;
|
||||
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; }
|
||||
|
||||
.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; }
|
||||
|
||||
.sf_code_number, .sf_code_boolean {
|
||||
.sf_code_number,
|
||||
.sf_code_boolean {
|
||||
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; }
|
||||
|
||||
.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; }
|
||||
|
||||
.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; }
|
||||
|
||||
.note-wrapper {
|
||||
|
|
@ -367,7 +499,12 @@ svg + ol {
|
|||
* + h4 {
|
||||
margin-top: 2.8em; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
position: relative; }
|
||||
|
||||
h1:before,
|
||||
|
|
@ -458,3 +595,7 @@ li img {
|
|||
|
||||
.turbolinks-progress-bar {
|
||||
visibility: hidden; }
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
main .note-wrapper {
|
||||
padding: 1.57143em 1.1em; } }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -18,20 +17,101 @@ input[type="search"],
|
|||
input[type="text"],
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// @todo: class
|
||||
|
||||
::selection {
|
||||
background: var(--selected-text-background-color);
|
||||
}
|
||||
background: var(--selected-text-background-color);
|
||||
}
|
||||
|
||||
/**
|
||||
Bear base styles
|
||||
(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;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -44,7 +124,8 @@ html {
|
|||
line-height: 1
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
|
|
@ -53,17 +134,23 @@ table {
|
|||
border-spacing: 0
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
caption,
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
q, blockquote {
|
||||
q,
|
||||
blockquote {
|
||||
quotes: none
|
||||
}
|
||||
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
content: none
|
||||
}
|
||||
|
|
@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after {
|
|||
a img {
|
||||
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
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +197,8 @@ body {
|
|||
// @todo: not working
|
||||
color: var(--text-base-color);
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: "AvenirNext-Regular"
|
||||
font-family: "AvenirNext-Regular";
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -141,11 +242,15 @@ hr {
|
|||
margin: -1px auto 1.57143em auto
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: .31429em;
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-bottom: 0px
|
||||
}
|
||||
|
||||
|
|
@ -163,13 +268,15 @@ ol li:before {
|
|||
margin-right: 0.5em
|
||||
}
|
||||
|
||||
b, strong {
|
||||
b,
|
||||
strong {
|
||||
//font-family: "AvenirNext-Bold";
|
||||
font-family: "Menlo-Regular";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i, em {
|
||||
i,
|
||||
em {
|
||||
//font-family: "AvenirNext-Italic";
|
||||
font-family: "Menlo-Regular";
|
||||
font-style: italic;
|
||||
|
|
@ -185,27 +292,53 @@ code {
|
|||
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
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.sf_code_number, .sf_code_boolean {
|
||||
.sf_code_number,
|
||||
.sf_code_boolean {
|
||||
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
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
|
|
@ -221,7 +354,7 @@ code {
|
|||
|
||||
u {
|
||||
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-size: 2px 2px;
|
||||
background-position: 0 1.05em
|
||||
|
|
@ -339,7 +472,7 @@ blockquote {
|
|||
|
||||
.address a {
|
||||
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-size: 2px 2px;
|
||||
background-position: 0 1.05em
|
||||
|
|
@ -356,7 +489,7 @@ blockquote {
|
|||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: solid 1px rgba(0,0,0,0.3);
|
||||
border: solid 1px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
margin-right: 0.1em;
|
||||
position: relative;
|
||||
|
|
@ -415,7 +548,7 @@ img {
|
|||
|
||||
// Hugo renders footnotes with <p> tags nested inside <li>
|
||||
// This is need to prevent <p> breaking lines
|
||||
li > p {
|
||||
li>p {
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
|
@ -434,25 +567,30 @@ h4 {
|
|||
margin-bottom: .47143em
|
||||
}
|
||||
|
||||
* + p,
|
||||
* + ul,
|
||||
* + ol,
|
||||
* + blockquote {
|
||||
*+p,
|
||||
*+ul,
|
||||
*+ol,
|
||||
*+blockquote {
|
||||
/*margin-top: 1.6em;*/
|
||||
}
|
||||
|
||||
svg + ul,
|
||||
svg + ol {
|
||||
svg+ul,
|
||||
svg+ol {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
* + h2,
|
||||
* + h3,
|
||||
* + h4 {
|
||||
*+h2,
|
||||
*+h3,
|
||||
*+h4 {
|
||||
margin-top: 2.8em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -511,9 +649,10 @@ h6:before {
|
|||
content: "#"
|
||||
}
|
||||
|
||||
* + table {
|
||||
*+table {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--separator-color);
|
||||
|
|
@ -569,3 +708,11 @@ li img {
|
|||
.turbolinks-progress-bar {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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()
|
||||
|
||||
// Highlight with jQuery
|
||||
// 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
|
||||
jQuery.fn.highlight = function(pat) {
|
||||
jQuery.fn.highlight = function (pat) {
|
||||
|
||||
function innerHighlight(node, pat) {
|
||||
|
||||
|
|
@ -15,16 +20,16 @@ jQuery.fn.highlight = function(pat) {
|
|||
|
||||
if (pos >= 0) {
|
||||
|
||||
var spannode = document.createElement('span');
|
||||
var spannode = document.createElement('span');
|
||||
spannode.className = 'highlighted';
|
||||
var middlebit = node.splitText(pos);
|
||||
var endbit = middlebit.splitText(pat.length);
|
||||
var middleclone = middlebit.cloneNode(true);
|
||||
var middlebit = node.splitText(pos);
|
||||
var endbit = middlebit.splitText(pat.length);
|
||||
var middleclone = middlebit.cloneNode(true);
|
||||
|
||||
spannode.appendChild(middleclone);
|
||||
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());
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
jQuery.fn.removeHighlight = function() {
|
||||
jQuery.fn.removeHighlight = function () {
|
||||
|
||||
function newNormalize(node) {
|
||||
|
||||
|
|
@ -71,7 +76,7 @@ jQuery.fn.removeHighlight = function() {
|
|||
if (next == null || next.nodeType != 3) { continue; }
|
||||
|
||||
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.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;
|
||||
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
|
||||
var searchTerm = $(this).val();
|
||||
|
|
@ -104,60 +109,105 @@ $(function() {
|
|||
$('body').removeHighlight();
|
||||
|
||||
// disable highlighting if empty
|
||||
if ( searchTerm ) {
|
||||
if (searchTerm) {
|
||||
|
||||
// highlight the new term
|
||||
$('body').highlight( searchTerm );
|
||||
$('body').highlight(searchTerm);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
///
|
||||
|
||||
var scrollTop = 0
|
||||
document.addEventListener("turbolinks:before-render", function() {
|
||||
var search_index = document.getElementById("search-results");
|
||||
var y = search_index.scrollTop;
|
||||
scrollTop = y
|
||||
document.addEventListener("turbolinks:before-render", function () {
|
||||
var search_index = document.getElementById("search-results");
|
||||
var y = search_index.scrollTop;
|
||||
scrollTop = y
|
||||
|
||||
|
||||
})
|
||||
|
||||
document.addEventListener("turbolinks:render", function() {
|
||||
document.addEventListener("turbolinks:render", function () {
|
||||
var search_index = document.getElementById("search-results");
|
||||
search_index.scrollTop = scrollTop
|
||||
})
|
||||
|
||||
document.addEventListener("turbolinks:load", function() {
|
||||
document.addEventListener("turbolinks:load", function () {
|
||||
setNoteWrapperState()
|
||||
|
||||
|
||||
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");
|
||||
for (var i = 0, l = els.length; i < l; i++) {
|
||||
var el = els[i];
|
||||
|
||||
if (el.href === current) {
|
||||
el.classList.add("selected")
|
||||
} else {
|
||||
el.classList.remove("selected")
|
||||
}
|
||||
}
|
||||
if (el.href === current) {
|
||||
el.classList.add("selected")
|
||||
} else {
|
||||
el.classList.remove("selected")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function loadIndex() {
|
||||
fetchJSON(function(response) {
|
||||
// load the lecture note links in homepage
|
||||
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 search_results = document.getElementById('search-results');
|
||||
const tags = document.getElementById('tags');
|
||||
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 permalink = note.permalink
|
||||
|
|
@ -179,14 +229,41 @@ function loadIndex() {
|
|||
const tags = '<span style="display:none">' + note.tags + '</span>'
|
||||
var list_content;
|
||||
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 {
|
||||
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");
|
||||
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
|
||||
|
|
@ -196,20 +273,19 @@ function loadIndex() {
|
|||
// tags.append(child)
|
||||
// });
|
||||
//
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function fetchJSON(callback) {
|
||||
|
||||
const requestURL = '/MATH201/index.json';
|
||||
const requestURL = root + '/index.json';
|
||||
const request = new XMLHttpRequest();
|
||||
request.open('GET', requestURL, true);
|
||||
request.responseType = 'json';
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
callback(request.response);
|
||||
}
|
||||
request.onreadystatechange = function () {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
callback(request.response);
|
||||
}
|
||||
};
|
||||
request.send(null);
|
||||
}
|
||||
|
|
@ -226,57 +302,57 @@ function performSearchWith(query) {
|
|||
|
||||
var filter, ul, li, a, i, txtValue;
|
||||
|
||||
filter = query.toLowerCase();
|
||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||
filter = query.toLowerCase();
|
||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||
|
||||
var re = new RegExp(filter, 'g');
|
||||
var re = new RegExp(filter, 'g');
|
||||
|
||||
ul = document.getElementById("search-results");
|
||||
li = ul.getElementsByTagName('li');
|
||||
ul = document.getElementById("search-results");
|
||||
li = ul.getElementsByTagName('li');
|
||||
|
||||
for (i = 0; i < li.length; i++) {
|
||||
for (i = 0; i < li.length; i++) {
|
||||
a = li[i].getElementsByTagName("a")[0];
|
||||
|
||||
txtValue = a.textContent || a.innerText;
|
||||
if (txtValue.toLowerCase().indexOf(filter) > -1) {
|
||||
|
||||
li[i].style.display = "block";
|
||||
li[i].style.display = "block";
|
||||
|
||||
} else {
|
||||
li[i].style.display = "none";
|
||||
li[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function performSearch() {
|
||||
|
||||
var input, filter, ul, li, a, i, txtValue;
|
||||
input = document.getElementById('search-input');
|
||||
var input, filter, ul, li, a, i, txtValue;
|
||||
input = document.getElementById('search-input');
|
||||
|
||||
filter = input.value.toLowerCase();
|
||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||
filter = input.value.toLowerCase();
|
||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||
|
||||
var re = new RegExp(filter, 'g');
|
||||
var re = new RegExp(filter, 'g');
|
||||
|
||||
ul = document.getElementById("search-results");
|
||||
li = ul.getElementsByTagName('li');
|
||||
ul = document.getElementById("search-results");
|
||||
li = ul.getElementsByTagName('li');
|
||||
|
||||
for (i = 0; i < li.length; i++) {
|
||||
for (i = 0; i < li.length; i++) {
|
||||
a = li[i].getElementsByTagName("a")[0];
|
||||
|
||||
txtValue = a.textContent || a.innerText;
|
||||
if (txtValue.toLowerCase().indexOf(filter) > -1) {
|
||||
|
||||
li[i].style.display = "block";
|
||||
li[i].style.display = "block";
|
||||
|
||||
} else {
|
||||
li[i].style.display = "none";
|
||||
li[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(evt) {
|
||||
document.addEventListener('keydown', function (evt) {
|
||||
|
||||
if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
|
||||
document.getElementById("search-input").focus();
|
||||
|
|
@ -291,12 +367,7 @@ document.addEventListener('keydown', function(evt) {
|
|||
|
||||
var nav_is_visible = false;
|
||||
function handleNavVisibility() {
|
||||
if (!nav_is_visible) {
|
||||
showNav();
|
||||
|
||||
} else {
|
||||
hideNav()
|
||||
}
|
||||
$("#search").toggle("slide");
|
||||
}
|
||||
|
||||
function showNav() {
|
||||
|
|
@ -315,7 +386,7 @@ function hideNav() {
|
|||
document.getElementById("search-header").style.width = "0";
|
||||
document.getElementById("search").style.opacity = 0;
|
||||
document.getElementById("search-header").style.opacity = 0;
|
||||
document.getElementById("main").style.marginLeft= "0";
|
||||
document.getElementById("main").style.marginLeft = "0";
|
||||
pullNoteWrapper()
|
||||
|
||||
nav_is_visible = false;
|
||||
|
|
@ -344,54 +415,54 @@ const hoverTime = 300
|
|||
const fetchers = {}
|
||||
const doc = document.implementation.createHTMLDocument('prefetch')
|
||||
|
||||
function fetchPage (url, success) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', url)
|
||||
xhr.setRequestHeader('VND.PREFETCH', 'true')
|
||||
xhr.setRequestHeader('Accept', 'text/html')
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState !== XMLHttpRequest.DONE) return
|
||||
if (xhr.status !== 200) return
|
||||
success(xhr.responseText)
|
||||
}
|
||||
xhr.send()
|
||||
function fetchPage(url, success) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', url)
|
||||
xhr.setRequestHeader('VND.PREFETCH', 'true')
|
||||
xhr.setRequestHeader('Accept', 'text/html')
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState !== XMLHttpRequest.DONE) return
|
||||
if (xhr.status !== 200) return
|
||||
success(xhr.responseText)
|
||||
}
|
||||
xhr.send()
|
||||
}
|
||||
|
||||
function prefetchTurbolink (url) {
|
||||
fetchPage(url, responseText => {
|
||||
doc.open()
|
||||
doc.write(responseText)
|
||||
doc.close()
|
||||
const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
|
||||
Turbolinks.controller.cache.put(url, snapshot)
|
||||
})
|
||||
function prefetchTurbolink(url) {
|
||||
fetchPage(url, responseText => {
|
||||
doc.open()
|
||||
doc.write(responseText)
|
||||
doc.close()
|
||||
const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
|
||||
Turbolinks.controller.cache.put(url, snapshot)
|
||||
})
|
||||
}
|
||||
|
||||
function prefetch (url) {
|
||||
if (prefetched(url)) return
|
||||
prefetchTurbolink(url)
|
||||
function prefetch(url) {
|
||||
if (prefetched(url)) return
|
||||
prefetchTurbolink(url)
|
||||
}
|
||||
|
||||
function prefetched (url) {
|
||||
return location.href === url || Turbolinks.controller.cache.has(url)
|
||||
function prefetched(url) {
|
||||
return location.href === url || Turbolinks.controller.cache.has(url)
|
||||
}
|
||||
|
||||
function prefetching (url) {
|
||||
return !!fetchers[url]
|
||||
function prefetching(url) {
|
||||
return !!fetchers[url]
|
||||
}
|
||||
|
||||
function cleanup (event) {
|
||||
const element = event.target
|
||||
clearTimeout(fetchers[element.href])
|
||||
element.removeEventListener('mouseleave', cleanup)
|
||||
function cleanup(event) {
|
||||
const element = event.target
|
||||
clearTimeout(fetchers[element.href])
|
||||
element.removeEventListener('mouseleave', cleanup)
|
||||
}
|
||||
|
||||
document.addEventListener('mouseover', event => {
|
||||
if (!event.target.dataset.prefetch) return
|
||||
const url = event.target.href
|
||||
if (prefetched(url)) return
|
||||
if (prefetching(url)) return
|
||||
cleanup(event)
|
||||
event.target.addEventListener('mouseleave', cleanup)
|
||||
fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
|
||||
if (!event.target.dataset.prefetch) return
|
||||
const url = event.target.href
|
||||
if (prefetched(url)) return
|
||||
if (prefetching(url)) return
|
||||
cleanup(event)
|
||||
event.target.addEventListener('mouseleave', cleanup)
|
||||
fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
var thumbnail_mode = false
|
||||
function imageMode() {
|
||||
const note_wrapper = document.getElementById('note-wrapper')
|
||||
const images = note_wrapper.getElementsByTagName('img')
|
||||
// Resize images using an input range.
|
||||
function resizeImage() {
|
||||
// make p tags wrapping img tags inline, to resize images correctly
|
||||
$("#main p").has("img").css("display", "inline-block");
|
||||
|
||||
if (thumbnail_mode) {
|
||||
var els = note_wrapper.getElementsByTagName('img')
|
||||
for(var i = 0, all = els.length; i < all; i++){
|
||||
els[i].classList.remove('thumbnail');
|
||||
}
|
||||
thumbnail_mode = false
|
||||
} else {
|
||||
var els = note_wrapper.getElementsByTagName('img')
|
||||
for(var i = 0, all = els.length; i < all; i++){
|
||||
els[i].classList.add('thumbnail');
|
||||
}
|
||||
thumbnail_mode = true
|
||||
}
|
||||
// toggle vectical input range
|
||||
$("#toolbar input[type=range][orient=vertical]").slideToggle();
|
||||
|
||||
// resize image
|
||||
$("#toolbar input[type=range][orient=vertical]").mouseup(function () {
|
||||
$("#main p img").css("width", this.value + "%");
|
||||
this.title = this.value + "%";
|
||||
});
|
||||
}
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
{{ define "main" }}
|
||||
<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
|
||||
{{ partial "content.html" . }}
|
||||
<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</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://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>
|
||||
<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
|
||||
{{ partial "content.html" . }}
|
||||
<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</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://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 }}
|
||||
|
|
@ -6,130 +6,134 @@
|
|||
- Focused current note
|
||||
-->
|
||||
<style>
|
||||
search-menu {
|
||||
display: block;
|
||||
}
|
||||
search-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
background: var(--background-search);
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: 1px solid var(--separator-color);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
#search {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
background: var(--background-search);
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: 1px solid var(--separator-color);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
#search::-webkit-scrollbar { display: none; }
|
||||
#search::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-header {
|
||||
padding: 12px;
|
||||
position: fixed;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background: var(--background-search);
|
||||
width: 250px;
|
||||
opacity: 1;
|
||||
height: 50px;
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
#search-header {
|
||||
padding: 12px 0;
|
||||
margin: 0 auto;
|
||||
background: var(--background-search);
|
||||
width: 250px;
|
||||
opacity: 1;
|
||||
height: 50px;
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
#search .input-container {
|
||||
position: relative
|
||||
}
|
||||
#search .input-container {
|
||||
position: relative
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: 4px;
|
||||
padding-left: 16px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
}
|
||||
#search-input {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: 4px;
|
||||
padding-left: 24px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
border: 1px solid var(--search-field-focused-color);
|
||||
}
|
||||
#search-input:focus {
|
||||
border: 1px solid var(--search-field-focused-color);
|
||||
}
|
||||
|
||||
#search-header .input-container .search-icon {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
fill: darkGray;
|
||||
}
|
||||
#search-header .input-container .search-icon {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 8px;
|
||||
fill: darkGray;
|
||||
}
|
||||
|
||||
#search-results img {
|
||||
width: 122px;
|
||||
height: 76px;
|
||||
border: 1px solid var(--separator-color);
|
||||
object-fit: cover;
|
||||
}
|
||||
#search-results img {
|
||||
width: 122px;
|
||||
height: 76px;
|
||||
border: 1px solid var(--separator-color);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
margin-top: 50px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
#search-results {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#search-results a {
|
||||
width: 100%;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
display: inline-block;
|
||||
#search-results a {
|
||||
width: 100%;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
display: inline-block;
|
||||
|
||||
color: var(--text-base-color);
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
border-left: 6px solid var(--background-search);
|
||||
color: var(--text-base-color);
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
border-left: 6px solid var(--background-search);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#search-results a:first-child:hover, a:first-child:focus, .selected {
|
||||
outline: 0;
|
||||
background-color: var(--note-table-cell-selected-color);
|
||||
border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
|
||||
}
|
||||
#search-results a:first-child:hover,
|
||||
a:first-child:focus,
|
||||
.selected {
|
||||
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
|
||||
#search-results li { text-indent: 0; }
|
||||
#search-results li:before,
|
||||
#search-results h1:before,
|
||||
#search-results h2:before,
|
||||
#search-results h3:before,
|
||||
#search-results h4:before,
|
||||
#search-results h5:before,
|
||||
#search-results h6:before {
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
/* // Reseting default styles inside search component scope */
|
||||
#search-results li {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
#search-results li:before,
|
||||
#search-results h1:before,
|
||||
#search-results h2:before,
|
||||
#search-results h3:before,
|
||||
#search-results h4:before,
|
||||
#search-results h5:before,
|
||||
#search-results h6:before {
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<search-menu id="search" data-turbolinks-permanent>
|
||||
<header id="search-header">
|
||||
<div class="input-container">
|
||||
<svg aria-hidden="true" style="" 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>
|
||||
</svg>
|
||||
<header id="search-header">
|
||||
<div class="input-container">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<ul id="search-results"></ul>
|
||||
<ul id="search-results"></ul>
|
||||
</search-menu>
|
||||
|
|
@ -1,42 +1,58 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
#toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
transition: 1s;
|
||||
opacity: 0.5;
|
||||
transition: 1s;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
|
||||
padding: 18px 0px 18px 0px;
|
||||
}
|
||||
padding: 18px 0px 18px 0px;
|
||||
}
|
||||
|
||||
#toolbar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#toolbar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#close-nav-icon {
|
||||
display: none;
|
||||
}
|
||||
#close-nav-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toolbar input[type=range][orient=vertical] {
|
||||
appearance: slider-vertical;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<aside id="toolbar">
|
||||
<span 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>
|
||||
<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>
|
||||
</span>
|
||||
|
||||
<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;">
|
||||
<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 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>
|
||||
</span>
|
||||
<input title="100%" type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue