summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authormjfernez <mjf@mjfer.net>2024-07-23 01:04:29 -0400
committermjfernez <mjf@mjfer.net>2024-07-23 01:04:29 -0400
commit863641afa60f46d271bf89dea256b2d42fe18de1 (patch)
treef454feaf663ab10013d5cab84c2d8e2cac2d36c1
parent8bcc5e70f895857281b466ff82c0a55c4cd322fb (diff)
downloadsite-files-863641afa60f46d271bf89dea256b2d42fe18de1.tar.gz
Fix css tags
Diffstat
-rw-r--r--.md/tutorials/www/quick-intro-html-css.md22
-rw-r--r--tutorials/splunk/how-to-debug-a-splunk-app.html30
-rw-r--r--tutorials/www/how-to-use-the-internet.html155
-rw-r--r--tutorials/www/quick-intro-html-css.html88
4 files changed, 240 insertions, 55 deletions
diff --git a/.md/tutorials/www/quick-intro-html-css.md b/.md/tutorials/www/quick-intro-html-css.md
index 9c6733f..33a17a2 100644
--- a/.md/tutorials/www/quick-intro-html-css.md
+++ b/.md/tutorials/www/quick-intro-html-css.md
@@ -379,7 +379,7 @@ For any HTML tag, you can set an attribute that applies everytime it
appears in an HTML document that links to the CSS file. A common
formatting I use for paragraphs is:
-```htmlcss
+```css
p {
margin-top: 1.5%;
margin-bottom: 1.5%;
@@ -388,7 +388,7 @@ p {
And to highlight code, like you've been seeing, I use:
-```htmlcss
+```css
code {
display: inline-block;
font-size: 125%;
@@ -416,7 +416,7 @@ Images get more styles in CSS than I can document in detail, but one
important bit you'll want to probably add to all images is the
following.
-```htmlcss
+```css
img {
max-width: 100%;
height: auto;
@@ -437,7 +437,7 @@ distorted.
In addition to this basic stuff, you can style your images heavily
using the filter option like so:
-```htmlcss
+```css
img.gray {
filter: grayscale(100%)
}
@@ -461,7 +461,7 @@ others. An example on this site, I dim the icons a bit so they can
appear nice on dark theme browsers just as well. But I don't want to dim
*all* images like in the following example:
-```htmlcss
+```css
img {
filter: invert(50%);
}
@@ -477,7 +477,7 @@ src="/static/media/jazzcat.jpg"
Instead, I'd like it to just apply to select elements; I can do so by
extending the tag with a class. On the CSS side:
-```htmlcss
+```css
img.icon {
filter: invert(50%);
}
@@ -485,7 +485,7 @@ img.icon {
And to implement it in HTML:
-```htmlcss
+```css
<img class="icon" src="/static/media/rss.svg" />
```
@@ -499,7 +499,7 @@ wanted to center a heading, a paragraph, and a picture, and constrain
them to only part of the page, so that there's some margins on the left
and right. We can put them all in one content section like this:
-```htmlcss
+```css
.content {
text-align: center;
max-width: 85%;
@@ -511,7 +511,7 @@ usually we use a placeholder tag called "div." You can think of "div"
like a divider for content of similar style. In the present example, we
can use the class we made with a div tag:
-```htmlcss
+```html
<div class="content">
<h1>My cat</h1>
<p>He's a cool cat</p>
@@ -532,7 +532,7 @@ I won't go into as gory details as
[here](https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b),
but for your basic smartphone, you can copy and paste this block:
-```htmlcss
+```css
@media screen and (max-device-width: 480px) {
// override your tags here
body {
@@ -551,7 +551,7 @@ your CSS attributes, so that size is always defined relative to all the
other elements. This makes functions like zoom work a lot better. You
can for example put a pixel value like this:
-```htmlcss
+```css
body {
font-size: 14px;
}
diff --git a/tutorials/splunk/how-to-debug-a-splunk-app.html b/tutorials/splunk/how-to-debug-a-splunk-app.html
new file mode 100644
index 0000000..4ef1fea
--- /dev/null
+++ b/tutorials/splunk/how-to-debug-a-splunk-app.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-debug-a-splunk-app</title>
+<style>
+ code{white-space: pre-wrap;}
+ span.smallcaps{font-variant: small-caps;}
+ div.columns{display: flex; gap: min(4vw, 1.5em);}
+ div.column{flex: auto; overflow-x: auto;}
+ div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+ /* The extra [class] is a hack that increases specificity enough to
+ override a similar rule in reveal.js */
+ ul.task-list[class]{list-style: none;}
+ ul.task-list li input[type="checkbox"] {
+ font-size: inherit;
+ width: 0.8em;
+ margin: 0 0.8em 0.2em -1.6em;
+ vertical-align: middle;
+ }
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+ </style>
+<link href="../../static/main.css" rel="stylesheet"/>
+</head>
+<body>
+</body>
+</html>
+
diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html
new file mode 100644
index 0000000..daabfe7
--- /dev/null
+++ b/tutorials/www/how-to-use-the-internet.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8"/>
+<meta content="pandoc" name="generator"/>
+<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
+<title>how-to-use-the-internet</title>
+<style>
+ code{white-space: pre-wrap;}
+ span.smallcaps{font-variant: small-caps;}
+ div.columns{display: flex; gap: min(4vw, 1.5em);}
+ div.column{flex: auto; overflow-x: auto;}
+ div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+ /* The extra [class] is a hack that increases specificity enough to
+ override a similar rule in reveal.js */
+ ul.task-list[class]{list-style: none;}
+ ul.task-list li input[type="checkbox"] {
+ font-size: inherit;
+ width: 0.8em;
+ margin: 0 0.8em 0.2em -1.6em;
+ vertical-align: middle;
+ }
+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+ </style>
+<link href="../../static/main.css" rel="stylesheet"/>
+</head>
+<body>
+<nav id="TOC" role="doc-toc">
+<h2 id="toc-title">Contents</h2>
+<ul>
+<li><a href="#why" id="toc-why" target="_self">Why?</a></li>
+<li><a href="#how-to-use-a-web-browser" id="toc-how-to-use-a-web-browser" target="_self">How to use a web browser</a></li>
+<li><a href="#how-to-use-a-search-engine" id="toc-how-to-use-a-search-engine" target="_self">How to use a search engine</a>
+<ul>
+<li><a href="#basic-search-syntax" id="toc-basic-search-syntax" target="_self">Basic
+search syntax</a></li>
+</ul></li>
+<li><a href="#how-to-read-and-find-scholarly-articles" id="toc-how-to-read-and-find-scholarly-articles" target="_self">How to read and find
+scholarly articles</a>
+<ul>
+<li><a href="#how-to-use-wikipedia" id="toc-how-to-use-wikipedia" target="_self">How to
+use Wikipedia</a></li>
+<li><a href="#how-to-find-articles-with-google-scholar" id="toc-how-to-find-articles-with-google-scholar" target="_self">How to find articles
+with Google Scholar</a></li>
+</ul></li>
+<li><a href="#advanced-topics" id="toc-advanced-topics" target="_self">Advanced
+Topics</a>
+<ul>
+<li><a href="#how-to-use-tor-to-browse-anonymously" id="toc-how-to-use-tor-to-browse-anonymously" target="_self">How to use tor to browse
+anonymously</a></li>
+</ul></li>
+</ul>
+</nav>
+<h2 id="why">Why?</h2>
+<p>Why <em>would</em> anyone want to use the Internet, really?</p>
+<p>There is actually purpose to connecting all the computers in the
+world with near-instant speed beyond just streaming television, phishing
+scams, pornography, punditry, and Fortnight competitions.</p>
+<p>Unfortunately, almost none of us use the Internet for it's intended
+purpose: finding infomation.</p>
+<p>Writing an angry tweet to a celebrity or posting a picture of your
+cat seems to be second nature for most people, but converting a picture
+from a PDF or looking up a study (or even a word!) you saw in an article
+is something else entirely.</p>
+<p>While that's in part the fault of our laziness, it's equally the
+fault of what the Internet has become.</p>
+<p>For one: there's just so much more <em>stuff</em> now; it's hard to
+know exactly where to start and who to trust. And so much of that stuff
+is now <em>garbage</em>, either in the way it's presented, with
+disruptive ads that don't close correctly, or in the way it's written:
+vague, misleading, or straight incorrect.</p>
+<p>For two: no one really teaches you how to use this thing do they?
+There are no courses on "How to use a search engine" or "How to find
+good posts on a forum," and definitely not on "How to <em>write</em>
+good posts on a forum." But these are exactly the kinds of skills you
+really need if you want to navigate the modern world without getting
+constantly distracted, misled, or totally lost.</p>
+<p>There are of course, countless guides on "netiquette" geared towards
+every possible internet subculture you can find. While many of them have
+influenced this document and give many helpful tips on writing good
+informative posts, none of them really go over what I think is most
+important: what to do with the information you're reading.</p>
+<p>This will probably be an evolving document as new services and
+websites become available (or go down), but much of this material in the
+beginning should be pretty generally applicable no matter what services
+are available.</p>
+<h2 id="how-to-use-a-web-browser">How to use a web browser</h2>
+<p>This is your main vehicle to the information super highway (remember
+when they used to call it that?)</p>
+<p>Almost everyone knows how to use a web browser to click links and get
+to where they need to go, but use only a fraction of the software's
+power. Web browsers at this point are as complicated as operating
+systems. Aside from basic HTML and javascript rendering, most web
+browsers are expected to provide:</p>
+<ul>
+<li>A PDF reader</li>
+<li>An image display</li>
+<li>A history database with tunable settings</li>
+<li>Support for hundreds of languages and emojis</li>
+<li>A password manager</li>
+<li>A video and audio player</li>
+<li>A scripting language for extending functionality</li>
+</ul>
+<p>And that's only what I can think of...</p>
+<h2 id="how-to-use-a-search-engine">How to use a search engine</h2>
+<p>As for which search engine to use: you should use all of them, until
+you get the results you need.</p>
+<p>In my experience, none of the major search engines are particularly
+good and I get inconsistent searches on all of them depending on what
+I'm searching. There is a lot of preaching these days about privacy
+concerns, but I don't really believe any service is more "private" than
+another. These are all privacy nightmares, arguably by design. Your best
+bet is just to search often and as many platforms as you can.</p>
+<h3 id="basic-search-syntax">Basic search syntax</h3>
+<p>Searching for specific pieces of information is rather simple.</p>
+<p>"Who is the prime minister of England?"</p>
+<p>"When did World War 2 start?"</p>
+<p>"How many roads must a man walk down?"</p>
+<p>"Funky Kong talks you through your divorce"</p>
+<p>All of these queries entered as is will get you the result you're
+looking for. But how about something we can't boil down to a single
+question? Like how to do calculus? Or how to learn Python?</p>
+<p>You could try those phrases as a start. But you're not likely to get
+a specific answer out of this.</p>
+<p>...</p>
+<p>What if we wanted to bring up a funny cat meme we saw on a forum
+three weeks ago? Searching for "funny cat meme" is not going to get you
+very far.</p>
+<h2 id="how-to-read-and-find-scholarly-articles">How to read and find
+scholarly articles</h2>
+<h3 id="how-to-use-wikipedia">How to use Wikipedia</h3>
+<p>A common complaint lodged at me whenever I recommend Wikipedia is
+that it's not a source of truth since they found X mistake somewhere, or
+made Y edit when they were a teenager that's still there. No one has
+ever (or should ever) claim Wikipedia is a source of truth on it's own.
+But you can use it to find more sources and maybe get a little
+closer.</p>
+<h3 id="how-to-find-articles-with-google-scholar">How to find articles
+with Google Scholar</h3>
+<h2 id="advanced-topics">Advanced Topics</h2>
+<h3 id="how-to-use-tor-to-browse-anonymously">How to use tor to browse
+anonymously</h3>
+<p>Many in the advertising world will boast about using a VPN for
+anonymity, or using a VPN in conjuction with Tor to "increase privacy."
+This is simply a misunderstanding of terms. A VPN provides
+<em>privacy</em> of the user's connection since it provides
+encryption--only the VPN provider can "see" what is searched. The goal
+of Tor is <em>anonymity</em> not privacy. Anonymity means "no one knows
+who you are" not "no one knows what you're doing." Technically, traffic
+is encrypted between nodes of the Tor service, so some level of privacy
+is provided as well, but this is most effective when using hidden
+services, not using Tor in general.</p>
+</body>
+</html>
+
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 05302d8..1ea2fbf 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -465,18 +465,18 @@ using a CSS file.</p>
<p>For any HTML tag, you can set an attribute that applies everytime it
appears in an HTML document that links to the CSS file. A common
formatting I use for paragraphs is:</p>
-<pre class="htmlcss"><code>p {
- margin-top: 1.5%;
- margin-bottom: 1.5%;
-}</code></pre>
+<div class="sourceCode" id="cb12"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb12-1"><a aria-hidden="true" href="#cb12-1" tabindex="-1"></a>p {</span>
+<span id="cb12-2"><a aria-hidden="true" href="#cb12-2" tabindex="-1"></a> <span class="kw">margin-top</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb12-3"><a aria-hidden="true" href="#cb12-3" tabindex="-1"></a> <span class="kw">margin-bottom</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb12-4"><a aria-hidden="true" href="#cb12-4" tabindex="-1"></a>}</span></code></pre></div>
<p>And to highlight code, like you've been seeing, I use:</p>
-<pre class="htmlcss"><code>code {
- display: inline-block;
- font-size: 125%;
- background-color: #d8d8d8;
- white-space: pre-wrap;
- word-wrap: break-all;
-}</code></pre>
+<div class="sourceCode" id="cb13"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb13-1"><a aria-hidden="true" href="#cb13-1" tabindex="-1"></a>code {</span>
+<span id="cb13-2"><a aria-hidden="true" href="#cb13-2" tabindex="-1"></a> <span class="kw">display</span>: <span class="dv">inline-block</span><span class="op">;</span></span>
+<span id="cb13-3"><a aria-hidden="true" href="#cb13-3" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb13-4"><a aria-hidden="true" href="#cb13-4" tabindex="-1"></a> <span class="kw">background-color</span>: <span class="cn">#d8d8d8</span><span class="op">;</span></span>
+<span id="cb13-5"><a aria-hidden="true" href="#cb13-5" tabindex="-1"></a> <span class="kw">white-space</span>: <span class="dv">pre-wrap</span><span class="op">;</span></span>
+<span id="cb13-6"><a aria-hidden="true" href="#cb13-6" tabindex="-1"></a> <span class="kw">word-wrap</span>: break-all<span class="op">;</span></span>
+<span id="cb13-7"><a aria-hidden="true" href="#cb13-7" tabindex="-1"></a>}</span></code></pre></div>
<p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in
order these lines:</p>
<ul>
@@ -492,11 +492,11 @@ picker</a></li>
<p>Images get more styles in CSS than I can document in detail, but one
important bit you'll want to probably add to all images is the
following.</p>
-<pre class="htmlcss"><code>img {
- max-width: 100%;
- height: auto;
- width: auto;
-}</code></pre>
+<div class="sourceCode" id="cb14"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb14-1"><a aria-hidden="true" href="#cb14-1" tabindex="-1"></a>img {</span>
+<span id="cb14-2"><a aria-hidden="true" href="#cb14-2" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">100</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb14-3"><a aria-hidden="true" href="#cb14-3" tabindex="-1"></a> <span class="kw">height</span>: <span class="bu">auto</span><span class="op">;</span></span>
+<span id="cb14-4"><a aria-hidden="true" href="#cb14-4" tabindex="-1"></a> <span class="kw">width</span>: <span class="bu">auto</span><span class="op">;</span></span>
+<span id="cb14-5"><a aria-hidden="true" href="#cb14-5" tabindex="-1"></a>}</span></code></pre></div>
<p>This does the following:</p>
<ul>
<li>constrains the image so it doesn't stretch the page</li>
@@ -508,9 +508,9 @@ view on mobile, the image scales to fit the screen; it never gets cutoff
or distorted.</p>
<p>In addition to this basic stuff, you can style your images heavily
using the filter option like so:</p>
-<pre class="htmlcss"><code>img.gray {
- filter: grayscale(100%)
-}</code></pre>
+<div class="sourceCode" id="cb15"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb15-1"><a aria-hidden="true" href="#cb15-1" tabindex="-1"></a>img<span class="fu">.gray</span> {</span>
+<span id="cb15-2"><a aria-hidden="true" href="#cb15-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">grayscale(</span><span class="dv">100</span><span class="dt">%</span><span class="fu">)</span></span>
+<span id="cb15-3"><a aria-hidden="true" href="#cb15-3" tabindex="-1"></a>}</span></code></pre></div>
<p>Applied:</p>
<p><img src="/static/media/jazzcat.jpg" style="filter:grayscale(100%)"/></p>
<p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about
@@ -520,19 +520,19 @@ the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp
others. An example on this site, I dim the icons a bit so they can
appear nice on dark theme browsers just as well. But I don't want to dim
<em>all</em> images like in the following example:</p>
-<pre class="htmlcss"><code>img {
- filter: invert(50%);
-}</code></pre>
+<div class="sourceCode" id="cb16"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb16-1"><a aria-hidden="true" href="#cb16-1" tabindex="-1"></a>img {</span>
+<span id="cb16-2"><a aria-hidden="true" href="#cb16-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span>
+<span id="cb16-3"><a aria-hidden="true" href="#cb16-3" tabindex="-1"></a>}</span></code></pre></div>
<p>For one, that will only dim black-and-white images; anything else
will just turn to mush like this:</p>
<p><img class="icon" src="/static/media/jazzcat.jpg"/></p>
<p>Instead, I'd like it to just apply to select elements; I can do so by
extending the tag with a class. On the CSS side:</p>
-<pre class="htmlcss"><code>img.icon {
- filter: invert(50%);
-}</code></pre>
+<div class="sourceCode" id="cb17"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb17-1"><a aria-hidden="true" href="#cb17-1" tabindex="-1"></a>img<span class="fu">.icon</span> {</span>
+<span id="cb17-2"><a aria-hidden="true" href="#cb17-2" tabindex="-1"></a> <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span>
+<span id="cb17-3"><a aria-hidden="true" href="#cb17-3" tabindex="-1"></a>}</span></code></pre></div>
<p>And to implement it in HTML:</p>
-<pre class="htmlcss"><code>&lt;img class="icon" src="/static/media/rss.svg" /&gt;</code></pre>
+<div class="sourceCode" id="cb18"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb18-1"><a aria-hidden="true" href="#cb18-1" tabindex="-1"></a>&lt;img class="icon" src="/static/media/rss<span class="fu">.svg</span>" /<span class="op">&gt;</span></span></code></pre></div>
<p><img class="icon" src="/static/media/rss.svg"/></p>
<h4 id="use-the-div-tag-to-make-sections">Use the div tag to make
sections</h4>
@@ -542,19 +542,19 @@ Let's say you wanted to center a heading, a paragraph, and a picture,
and constrain them to only part of the page, so that there's some
margins on the left and right. We can put them all in one content
section like this:</p>
-<pre class="htmlcss"><code>.content {
- text-align: center;
- max-width: 85%;
-}</code></pre>
+<div class="sourceCode" id="cb19"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb19-1"><a aria-hidden="true" href="#cb19-1" tabindex="-1"></a><span class="fu">.content</span> {</span>
+<span id="cb19-2"><a aria-hidden="true" href="#cb19-2" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
+<span id="cb19-3"><a aria-hidden="true" href="#cb19-3" tabindex="-1"></a> <span class="kw">max-width</span>: <span class="dv">85</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb19-4"><a aria-hidden="true" href="#cb19-4" tabindex="-1"></a>}</span></code></pre></div>
<p>Notice, no leading tag. This can be applied to <em>any</em> element,
but usually we use a placeholder tag called "div." You can think of
"div" like a divider for content of similar style. In the present
example, we can use the class we made with a div tag:</p>
-<pre class="htmlcss"><code>&lt;div class="content"&gt;
-&lt;h1&gt;My cat&lt;/h1&gt;
-&lt;p&gt;He's a cool cat&lt;/p&gt;
-&lt;img src="/cat.jpg" /&gt;
-&lt;/div&gt;</code></pre>
+<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">&gt;</span></span>
+<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My cat<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
+<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>He's a cool cat<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/&gt;</span></span>
+<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">div</span><span class="dt">&gt;</span></span></code></pre></div>
<h3 id="mobile-optimization">Mobile Optimization</h3>
<p>In early development, reading this site on my phone was a painful
experience. Fortunately, in addition to some tricks above like the
@@ -563,12 +563,12 @@ allow you to directly manipulate your website based on properties of the
user's device or web browser.</p>
<p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
but for your basic smartphone, you can copy and paste this block:</p>
-<pre class="htmlcss"><code>@media screen and (max-device-width: 480px) {
- // override your tags here
- body {
- font-size: 125%;
- }
-}</code></pre>
+<div class="sourceCode" id="cb21"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb21-1"><a aria-hidden="true" href="#cb21-1" tabindex="-1"></a><span class="im">@media</span> <span class="dv">screen</span> <span class="kw">and</span> (<span class="kw">max-device-width</span>: <span class="dv">480</span><span class="dt">px</span>) {</span>
+<span id="cb21-2"><a aria-hidden="true" href="#cb21-2" tabindex="-1"></a> <span class="er">// override your tags here</span></span>
+<span id="cb21-3"><a aria-hidden="true" href="#cb21-3" tabindex="-1"></a> body {</span>
+<span id="cb21-4"><a aria-hidden="true" href="#cb21-4" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb21-5"><a aria-hidden="true" href="#cb21-5" tabindex="-1"></a> }</span>
+<span id="cb21-6"><a aria-hidden="true" href="#cb21-6" tabindex="-1"></a>}</span></code></pre></div>
<p>This basic example makes the text slightly bigger on smartphone
screens, but you can change everything you need to. I typically find I
need to adjust the padding or the margins since it seems mobile browsers
@@ -577,9 +577,9 @@ add a little more style than a typical desktop web browser.</p>
your CSS attributes, so that size is always defined relative to all the
other elements. This makes functions like zoom work a lot better. You
can for example put a pixel value like this:</p>
-<pre class="htmlcss"><code>body {
- font-size: 14px;
-}</code></pre>
+<div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a aria-hidden="true" href="#cb22-1" tabindex="-1"></a>body {</span>
+<span id="cb22-2"><a aria-hidden="true" href="#cb22-2" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">14</span><span class="dt">px</span><span class="op">;</span></span>
+<span id="cb22-3"><a aria-hidden="true" href="#cb22-3" tabindex="-1"></a>}</span></code></pre></div>
<p>But this binds the size to 14 pixels which may look great on desktop,
but small on a smart phone.</p>
<h2 id="how-to-look-things-up">How to look things up</h2>