aboutsummaryrefslogtreecommitdiffhomepage
path: root/web
diff options
context:
space:
mode:
authorjohannst <johannst@users.noreply.github.com>2024-02-15 23:29:57 +0000
committerjohannst <johannst@users.noreply.github.com>2024-02-15 23:29:57 +0000
commitbac8a5d2822835cf47175d1162030653fadd5c09 (patch)
tree28f312a114cf95ac799daac2a2caec4b8612d84d /web
parentbfc5ce4bc01e5eb28969eefcc01ecfefa2601fdf (diff)
downloadnotes-bac8a5d2822835cf47175d1162030653fadd5c09.tar.gz
notes-bac8a5d2822835cf47175d1162030653fadd5c09.zip
deploy: 4485708c972815bbb6df7f5a228683aa855d553d
Diffstat (limited to 'web')
-rw-r--r--web/chartjs.html12
-rw-r--r--web/css.html18
-rw-r--r--web/html.html52
3 files changed, 41 insertions, 41 deletions
diff --git a/web/chartjs.html b/web/chartjs.html
index a30e67b..53ef44d 100644
--- a/web/chartjs.html
+++ b/web/chartjs.html
@@ -179,7 +179,7 @@
<h1 id="chartjs"><a class="header" href="#chartjs">Chart.js</a></h1>
<h2 id="minimal-example-with-external-tooltips"><a class="header" href="#minimal-example-with-external-tooltips">Minimal example with <em>external</em> tooltips</a></h2>
<p><a href="src/chartjs-ext-tooltip.html">Rendered html</a></p>
-<pre><code class="language-html">&lt;canvas id=&quot;myChart&quot; style=&quot;margin:5em;&quot;&gt;&lt;/canvas&gt;
+<pre><code class="language-html">&lt;canvas id="myChart" style="margin:5em;"&gt;&lt;/canvas&gt;
&lt;script&gt;
const get_or_create_tooltip = (id) =&gt; {
@@ -215,12 +215,12 @@ const render_tooltip = (context) =&gt; {
// -- Format new tooltip.
const link = document.createElement('a');
- link.href = &quot;https://github.com/johannst&quot;;
- link.innerHTML = &quot;X:&quot; + x + &quot; Y:&quot; + y;
+ link.href = "https://github.com/johannst";
+ link.innerHTML = "X:" + x + " Y:" + y;
// -- Remove previous child element and add new one.
const table = tooltip_elem.querySelector('table');
- table.innerHTML = &quot;&quot;;
+ table.innerHTML = "";
table.appendChild(link);
// -- Get absolute X/Y position of the top left corner of the canvas.
@@ -232,9 +232,9 @@ const render_tooltip = (context) =&gt; {
tooltip_elem.style.font = tooltip.options.bodyFont.string;
// -- Place the tooltip (I) left or (II) right of the data point.
- if (tooltip.xAlign === &quot;right&quot;) {
+ if (tooltip.xAlign === "right") {
tooltip_elem.style.transform = 'translate(-100%, 0)'; // (I)
- } else if (tooltip.xAlign === &quot;left&quot;) {
+ } else if (tooltip.xAlign === "left") {
tooltip_elem.style.transform = 'translate(0%, 0)'; // (II)
}
}
diff --git a/web/css.html b/web/css.html
index 6f63a1f..d7e2a84 100644
--- a/web/css.html
+++ b/web/css.html
@@ -179,26 +179,26 @@
<h1 id="css"><a class="header" href="#css">css</a></h1>
<h2 id="selector"><a class="header" href="#selector">selector</a></h2>
<p><code>.moose</code> element with class</p>
-<pre><code class="language-html">&lt;div class = &quot;moose&quot;&gt;&lt;/div&gt; // selected
-&lt;div class = &quot;bar&quot;&gt;&lt;/div&gt; // NOT selected
+<pre><code class="language-html">&lt;div class = "moose"&gt;&lt;/div&gt; // selected
+&lt;div class = "bar"&gt;&lt;/div&gt; // NOT selected
</code></pre>
<p><code>.moose.bar</code> element with multiple classes</p>
-<pre><code class="language-html">&lt;div class = &quot;moose bar&quot;&gt;&lt;/div&gt; // selected
-&lt;div class = &quot;bar&quot;&gt;&lt;/div&gt; // NOT selected
+<pre><code class="language-html">&lt;div class = "moose bar"&gt;&lt;/div&gt; // selected
+&lt;div class = "bar"&gt;&lt;/div&gt; // NOT selected
</code></pre>
<p><code>.moose .bar</code> descendant element with classes</p>
-<pre><code class="language-html">&lt;div class = &quot;moose&quot;&gt;
- &lt;div class = &quot;bar&quot;&gt;&lt;/div&gt; // selected
+<pre><code class="language-html">&lt;div class = "moose"&gt;
+ &lt;div class = "bar"&gt;&lt;/div&gt; // selected
&lt;/div&gt;
-&lt;div class = &quot;bar&quot;&gt;&lt;/div&gt; // NOT selected
+&lt;div class = "bar"&gt;&lt;/div&gt; // NOT selected
</code></pre>
<p><code>p</code> specific element</p>
<pre><code class="language-html">&lt;p&gt;&lt;/p&gt; // selected
&lt;div&gt;&lt;/div&gt; // NOT selected
</code></pre>
<p><code>p.bar</code> specific element with class</p>
-<pre><code class="language-html">&lt;p class = &quot;bar&quot;&gt;&lt;/p&gt; // selected
-&lt;p class = &quot;foo&quot;&gt;&lt;/p&gt; // NOT selected
+<pre><code class="language-html">&lt;p class = "bar"&gt;&lt;/p&gt; // selected
+&lt;p class = "foo"&gt;&lt;/p&gt; // NOT selected
</code></pre>
<p><code>p,div</code> any element</p>
<pre><code class="language-html">&lt;p&gt;&lt;/p&gt; // selected
diff --git a/web/html.html b/web/html.html
index 8893bfc..0bc7cb4 100644
--- a/web/html.html
+++ b/web/html.html
@@ -206,11 +206,11 @@
padding-left: 1em;
}
&lt;/style&gt;
-&lt;div class=&quot;grid-2col&quot;&gt;
- &lt;div class=&quot;col1&quot;&gt;
+&lt;div class="grid-2col"&gt;
+ &lt;div class="col1"&gt;
&lt;p&gt;Some text in the first column.&lt;/p&gt;
&lt;/div&gt;
- &lt;div class=&quot;col2&quot;&gt;
+ &lt;div class="col2"&gt;
&lt;p&gt;Some text in the second column.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
@@ -222,9 +222,9 @@
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
- &quot;h h&quot;
- &quot;s m&quot;
- &quot;f f&quot;;
+ "h h"
+ "s m"
+ "f f";
gap: 1em;
}
.gh {
@@ -253,21 +253,21 @@ p {
margin: 1em;
}
&lt;/style&gt;
-&lt;div class=&quot;page-grid&quot;&gt;
- &lt;div class=&quot;gh&quot;&gt;
- &lt;ul class=&quot;nav-items&quot;&gt;
- &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;aa&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;bb&lt;/a&gt;&lt;/li&gt;
- &lt;li class=&quot;nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;cc&lt;/a&gt;&lt;/li&gt;
+&lt;div class="page-grid"&gt;
+ &lt;div class="gh"&gt;
+ &lt;ul class="nav-items"&gt;
+ &lt;li class="nav-item"&gt;&lt;a href=""&gt;aa&lt;/a&gt;&lt;/li&gt;
+ &lt;li class="nav-item"&gt;&lt;a href=""&gt;bb&lt;/a&gt;&lt;/li&gt;
+ &lt;li class="nav-item"&gt;&lt;a href=""&gt;cc&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
- &lt;div class=&quot;gs&quot;&gt;
+ &lt;div class="gs"&gt;
&lt;p&gt;Some text in the second column.&lt;/p&gt;
&lt;/div&gt;
- &lt;div class=&quot;gm&quot;&gt;
+ &lt;div class="gm"&gt;
&lt;p&gt;Some text in the second column.&lt;/p&gt;
&lt;/div&gt;
- &lt;div class=&quot;gf&quot;&gt;
+ &lt;div class="gf"&gt;
&lt;p&gt;Some text in the second column.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
@@ -277,32 +277,32 @@ p {
<p><a href="src/tabs.html">Rendered html</a></p>
<pre><code class="language-html">&lt;script&gt;
const showTab = (E, T) =&gt; {
- const TABS = Array.from(document.getElementsByClassName(&quot;content&quot;));
+ const TABS = Array.from(document.getElementsByClassName("content"));
TABS.forEach(T =&gt; {
- T.style.display = &quot;none&quot;;
+ T.style.display = "none";
});
- document.getElementById(T).style.display = &quot;block&quot;;
+ document.getElementById(T).style.display = "block";
};
window.onload = () =&gt; {
- document.getElementById(&quot;bTab1&quot;).onclick = (E) =&gt; {
- showTab(E, &quot;tTab1&quot;);
+ document.getElementById("bTab1").onclick = (E) =&gt; {
+ showTab(E, "tTab1");
};
- document.getElementById(&quot;bTab2&quot;).onclick = (E) =&gt; {
- showTab(E, &quot;tTab2&quot;);
+ document.getElementById("bTab2").onclick = (E) =&gt; {
+ showTab(E, "tTab2");
};
}
&lt;/script&gt;
-&lt;button type=&quot;button&quot; id=&quot;bTab1&quot;&gt;Tab1&lt;/button&gt;
-&lt;button type=&quot;button&quot; id=&quot;bTab2&quot;&gt;Tab2&lt;/button&gt;
+&lt;button type="button" id="bTab1"&gt;Tab1&lt;/button&gt;
+&lt;button type="button" id="bTab2"&gt;Tab2&lt;/button&gt;
-&lt;div id=&quot;tTab1&quot; class=&quot;content&quot; style=&quot;display: block;&quot;&gt;
+&lt;div id="tTab1" class="content" style="display: block;"&gt;
&lt;p&gt;Some content goes here ...&lt;/p&gt;
&lt;/div&gt;
-&lt;div id=&quot;tTab2&quot; class=&quot;content&quot; style=&quot;display: none;&quot;&gt;
+&lt;div id="tTab2" class="content" style="display: none;"&gt;
&lt;p&gt;... and there.&lt;/p&gt;
&lt;/div&gt;
</code></pre>