Deploying to gh-pages from @ geekifan/chirpy-starter@244d60af9a 🚀
This commit is contained in:
geekifan
104
post/2019-08-08-text-and-typography/index.html
Normal file
104
post/2019-08-08-text-and-typography/index.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=en><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/post/2019-08-08-text-and-typography/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="Text and Typography"><meta property="og:description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta property="og:locale" content="en"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-08T11:33:00+08:00"><meta property="article:modified_time" content="2019-08-08T11:33:00+08:00"><meta property="article:tag" content="Typography"><meta name=twitter:card content="summary"><meta name=twitter:title content="Text and Typography"><meta name=twitter:description content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta itemprop=name content="Text and Typography"><meta itemprop=description content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more."><meta itemprop=datePublished content="2019-08-08T11:33:00+08:00"><meta itemprop=dateModified content="2019-08-08T11:33:00+08:00"><meta itemprop=wordCount content="570"><meta itemprop=keywords content="Typography"><title>Text and Typography |
|
||||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/en.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script><script src=/chirpy-starter/js/mathjax.min.d5a771863485b941b4157c0de2d0426f86b284e264501da1d8d9b2d5973488e0.js defer></script><script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script><script id=MathJax-script src=https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js defer></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||||
<a class="site-title d-block" href=/chirpy-starter/>Chirpy</a><p class="site-subtitle fst-italic mb-0">A text-focused blog theme</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||||
<span>HOME</span></a></li><li class=nav-item><a href=/chirpy-starter/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||||
<span>CATEGORIES</span></a></li><li class=nav-item><a href=/chirpy-starter/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||||
<span>TAGS</span></a></li><li class=nav-item><a href=/chirpy-starter/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||||
<span>ARCHIVES</span></a></li><li class=nav-item><a href=/chirpy-starter/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||||
<span>ABOUT</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/ selected>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||||
<i class="fas fa-adjust"></i>
|
||||
</button>
|
||||
<span class=icon-border></span>
|
||||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||||
</a><a href=https://geekifan.github.io/chirpy-starter/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/>Home</a>
|
||||
</span><span>Text and Typography</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>Text and Typography</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=Search...>
|
||||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>Text and Typography</h1><p class="post-desc fw-light mb-4">Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p><div class="post-meta text-muted"><span>Posted
|
||||
<time data-ts=1565235180 data-df=ll data-bs-toggle=tooltip data-bs-placement=bottom>%b %e, %Y</time></span><div class="mt-3 mb-3"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devices-mockup.png class=preview-img alt="Responsive rendering of Chirpy theme on multiple devices." w=1200 h=630 lqip=data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA><figcaption class="text-center pt-2 pb-2">Responsive rendering of Chirpy theme on multiple devices.</figcaption></div><div class="d-flex justify-content-between"><span>By
|
||||
<em><a href=https://github.com/geekifan>Yifan</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="1587 words"><em>8 min</em> read</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">Text and Typography</span>
|
||||
<button type=button class="toc-trigger btn me-1">
|
||||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||||
<span class="label ps-2 pe-1">Contents</span>
|
||||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||||
</button>
|
||||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Text and Typography</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#headings>Headings</a></li></ul><ul><li><a href=#h2--heading>H2 — heading</a><ul><li><a href=#h3--heading>H3 — heading</a></li></ul></li><li><a href=#paragraph>Paragraph</a></li><li><a href=#lists>Lists</a><ul><li><a href=#ordered-list>Ordered list</a></li><li><a href=#unordered-list>Unordered list</a></li><li><a href=#todo-list>ToDo list</a></li><li><a href=#description-list>Description list</a></li></ul></li><li><a href=#block-quote>Block Quote</a></li><li><a href=#prompts>Prompts</a></li><li><a href=#tables>Tables</a></li><li><a href=#links>Links</a></li><li><a href=#footnote>Footnote</a></li><li><a href=#inline-code>Inline code</a></li><li><a href=#filepath>Filepath</a></li><li><a href=#code-blocks>Code blocks</a><ul><li><a href=#common>Common</a></li><li><a href=#specific-language>Specific Language</a></li><li><a href=#specific-filename>Specific filename</a></li></ul></li><li><a href=#mathematics>Mathematics</a></li><li><a href=#images>Images</a><ul><li><a href=#default-with-caption>Default (with caption)</a></li><li><a href=#left-aligned>Left aligned</a></li><li><a href=#float-to-left>Float to left</a></li><li><a href=#float-to-right>Float to right</a></li><li><a href=#darklight-mode--shadow>Dark/Light mode & Shadow</a></li></ul></li><li><a href=#video>Video</a></li><li><a href=#reverse-footnote>Reverse Footnote</a></li></ul></nav></div></dialog><div class=content><h2 id=headings id=headings><span class=me-2>Headings</span>
|
||||
<a href=#headings class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h1 id=h1--heading class=mt-4 mb-0 data-toc-skip=true id=h1--heading>H1 — heading</h1><h2 id=h2--heading class=mt-4 mb-0 data-toc-skip=true id=h2--heading>H2 — heading</h2><h3 id=h3--heading class=mt-4 mb-0 data-toc-skip=true id=h3--heading>H3 — heading</h3><h4 id=h4--heading class=mt-4 data-toc-skip=true id=h4--heading>H4 — heading</h4><h2 id=paragraph id=paragraph><span class=me-2>Paragraph</span>
|
||||
<a href=#paragraph class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.</p><h2 id=lists id=lists><span class=me-2>Lists</span>
|
||||
<a href=#lists class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=ordered-list id=ordered-list><span class=me-2>Ordered list</span>
|
||||
<a href=#ordered-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ol><li>Firstly</li><li>Secondly</li><li>Thirdly</li></ol><h3 id=unordered-list id=unordered-list><span class=me-2>Unordered list</span>
|
||||
<a href=#unordered-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul><li>Chapter<ul><li>Section<ul><li>Paragraph</li></ul></li></ul></li></ul><h3 id=todo-list id=todo-list><span class=me-2>ToDo list</span>
|
||||
<a href=#todo-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul class=task-list><li class=task-list-item><i class="far fa-circle fa-fw"></i> Job<ul class=task-list><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> Step 1</li><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> Step 2</li><li class=task-list-item><i class="far fa-circle fa-fw"></i> Step 3</li></ul></li></ul><h3 id=description-list id=description-list><span class=me-2>Description list</span>
|
||||
<a href=#description-list class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><dl><dt>Sun</dt><dd>the star around which the earth orbits</dd><dt>Moon</dt><dd>the natural satellite of the earth, visible by reflected light from the sun</dd></dl><h2 id=block-quote id=block-quote><span class=me-2>Block Quote</span>
|
||||
<a href=#block-quote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote><p>This line shows the <em>block quote</em>.</p></blockquote><h2 id=prompts id=prompts><span class=me-2>Prompts</span>
|
||||
<a href=#prompts class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote class=prompt-tip><p>An example showing the <code>tip</code> type prompt.</p></blockquote><blockquote class=prompt-info><p>An example showing the <code>info</code> type prompt.</p></blockquote><blockquote class=prompt-warning><p>An example showing the <code>warning</code> type prompt.</p></blockquote><blockquote class=prompt-danger><p>An example showing the <code>danger</code> type prompt.</p></blockquote><h2 id=tables id=tables><span class=me-2>Tables</span>
|
||||
<a href=#tables class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=table-wrapper><table><thead><tr><th style=text-align:left>Company</th><th style=text-align:left>Contact</th><th style=text-align:right>Country</th></tr></thead><tbody><tr><td style=text-align:left>Alfreds Futterkiste</td><td style=text-align:left>Maria Anders</td><td style=text-align:right>Germany</td></tr><tr><td style=text-align:left>Island Trading</td><td style=text-align:left>Helen Bennett</td><td style=text-align:right>UK</td></tr><tr><td style=text-align:left>Magazzini Alimentari Riuniti</td><td style=text-align:left>Giovanni Rovelli</td><td style=text-align:right>Italy</td></tr></tbody></table></div><h2 id=links id=links><span class=me-2>Links</span>
|
||||
<a href=#links class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p><a href=http://127.0.0.1:4000>http://127.0.0.1:4000</a></p><h2 id=footnote id=footnote><span class=me-2>Footnote</span>
|
||||
<a href=#footnote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Click the hook will locate the footnote<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup>, and here is another footnote<sup id=fnref:2><a href=#fn:2 class=footnote-ref role=doc-noteref>2</a></sup>.</p><h2 id=inline-code id=inline-code><span class=me-2>Inline code</span>
|
||||
<a href=#inline-code class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>This is an example of <code>Inline Code</code>.</p><h2 id=filepath id=filepath><span class=me-2>Filepath</span>
|
||||
<a href=#filepath class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Here is the <code class=filepath>/path/to/the/file.extend</code>.</p><h2 id=code-blocks id=code-blocks><span class=me-2>Code blocks</span>
|
||||
<a href=#code-blocks class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=common id=common><span class=me-2>Common</span>
|
||||
<a href=#common class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Text><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>This is a common code snippet, without syntax highlight and line number.</span></span></code></pre></td></tr></table></div></div></div><h3 id=specific-language id=specific-language><span class=me-2>Specific Language</span>
|
||||
<a href=#specific-language class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Shell><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span><span class=lnt>4
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl><span class=k>if</span> <span class=o>[</span> <span class=nv>$?</span> -ne <span class=m>0</span> <span class=o>]</span><span class=p>;</span> <span class=k>then</span>
|
||||
</span></span><span class=line><span class=cl> <span class=nb>echo</span> <span class=s2>"The command was not successful."</span><span class=p>;</span>
|
||||
</span></span><span class=line><span class=cl> <span class=c1>#do the needful / exit</span>
|
||||
</span></span><span class=line><span class=cl><span class=k>fi</span><span class=p>;</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=specific-filename id=specific-filename><span class=me-2>Specific filename</span>
|
||||
<a href=#specific-filename class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=_sass/jekyll-theme-chirpy.scss><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=_sass/jekyll-theme-chirpy.scss><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||||
</span><span class=lnt>2
|
||||
</span><span class=lnt>3
|
||||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-sass data-lang=sass><span class=line><span class=cl><span class=k>@import</span>
|
||||
</span></span><span class=line><span class=cl> <span class=s2>"colors/light-typography"</span><span class=o>,</span>
|
||||
</span></span><span class=line><span class=cl> <span class=s2>"colors/dark-typography"</span><span class=o>;</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=mathematics id=mathematics><span class=me-2>Mathematics</span>
|
||||
<a href=#mathematics class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>The mathematics powered by <a href=https://www.mathjax.org/><strong>MathJax</strong></a>:</p><p>$$
|
||||
\begin{equation}
|
||||
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
|
||||
\label{eq:series}
|
||||
\end{equation}
|
||||
$$</p><p>We can reference the equation as \eqref{eq:series}.</p><p>When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are</p><p>$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</p><h2 id=images id=images><span class=me-2>Images</span>
|
||||
<a href=#images class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=default-with-caption id=default-with-caption><span class=me-2>Default (with caption)</span>
|
||||
<a href=#default-with-caption class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" caption="Full screen width and center alignment" height=589 width=972>
|
||||
</a><em>Full screen width and center alignment</em><h3 id=left-aligned id=left-aligned><span class=me-2>Left aligned</span>
|
||||
<a href=#left-aligned class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-75 normal"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><h3 id=float-to-left id=float-to-left><span class=me-2>Float to left</span>
|
||||
<a href=#float-to-left class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 left"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><p>Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id=float-to-right id=float-to-right><span class=me-2>Float to right</span>
|
||||
<a href=#float-to-right class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 right"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt="Desktop View" height=589 width=972></a><p>Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.</p><h3 id=darklight-mode--shadow id=darklight-mode--shadow><span class=me-2>Dark/Light mode & Shadow</span>
|
||||
<a href=#darklight-mode--shadow class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>The image below will toggle dark/light mode based on theme preference, notice it has shadows.</p><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png class="popup img-link light w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png alt="light mode only" h=668 w=1212>
|
||||
</a><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png class="popup img-link dark w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png alt="dark mode only" h=668 w=1212></a><h2 id=video id=video><span class=me-2>Video</span>
|
||||
<a href=#video class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><iframe class=embed-video loading=lazy src=https://www.youtube.com/embed/Balreaj8Yqs title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><h2 id=reverse-footnote id=reverse-footnote><span class=me-2>Reverse Footnote</span>
|
||||
<a href=#reverse-footnote class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>The footnote source <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p></li><li id=fn:2><p>The 2nd footnote source <a href=#fnref:2 class=footnote-backref role=doc-backlink>↩︎</a></p></li></ol></div></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<a href=/categories/blogging/>Blogging</a>
|
||||
,
|
||||
<a href=/categories/blogging/demo/>Demo</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||||
<a href=/tags/typography/ class="post-tag no-text-decoration">typography</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>This post is licensed under <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> by the author.</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/>Customize the Favicon</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-09-getting-started/>Getting Started</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/>Writing a New Post</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/post/2019-08-08-text-and-typography/>Text and Typography</a></li></ul></section><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">Contents</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Writing a New Post</h4><div class=text-muted><p>This tutorial will guide you how to write a post in the Chirpy template, and it&rsquo;s worth reading even if you&rsquo;ve used Hugo before, as many features require specific variables to be set. …</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Getting Started</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class=col><a href=/chirpy-starter/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=ll>%b %e, %Y</time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class=text-muted><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><div class="btn btn-outline-primary disabled" aria-label=Older><p>-</p></div><a href=/chirpy-starter/post/2019-08-08-write-a-new-post/ class="btn btn-outline-primary" aria-label=Newer><p>Writing a New Post</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||||
<time>2025</time>
|
||||
<a href=https://github.com/geekifan>Yifan</a>.
|
||||
<span data-bs-toggle=tooltip data-bs-placement=top title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">Some rights reserved.</span></p><p>Using the <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a> theme for <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a>.</p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/favicon/>favicon</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/getting-started/>getting started</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/typography/>typography</a>
|
||||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/tags/writing/>writing</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">Oops! No results found.</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${t}
|
||||
${n}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(e.contents)}</p>
|
||||
</article>
|
||||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html>
|
||||
Reference in New Issue
Block a user