23 lines
33 KiB
HTML
23 lines
33 KiB
HTML
<!doctype html><html lang="de-DE" data-mode="dark"><head><meta http-equiv="Content-Type" content="text/html; 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 name="generator" content="Jekyll v4.3.4" /><meta property="og:title" content="Text and Typography" /><meta name="author" content="Florian" /><meta property="og:locale" content="de_DE" /><meta name="description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more." /><meta property="og:description" content="Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more." /><link rel="canonical" href="https://pages-test.morlana.net/posts/text-and-typography/" /><meta property="og:url" content="https://pages-test.morlana.net/posts/text-and-typography/" /><meta property="og:site_name" content="Morlana Industries" /><meta property="og:image" content="https://pages-test.morlana.net//commons/devices-mockup.png" /><meta property="og:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." /><meta property="og:type" content="article" /><meta property="article:published_time" content="2019-08-08T05:33:00+02:00" /><meta name="twitter:card" content="summary_large_image" /><meta property="twitter:image" content="https://pages-test.morlana.net//commons/devices-mockup.png" /><meta name="twitter:image:alt" content="Responsive rendering of Chirpy theme on multiple devices." /><meta property="twitter:title" content="Text and Typography" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Florian","url":"https://tree.morlana.link/@Kosmos"},"dateModified":"2019-08-08T05:33:00+02:00","datePublished":"2019-08-08T05:33:00+02:00","description":"Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.","headline":"Text and Typography","image":{"lqip":"data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA","alt":"Responsive rendering of Chirpy theme on multiple devices.","url":"https://pages-test.morlana.net//commons/devices-mockup.png","@type":"imageObject"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://pages-test.morlana.net/posts/text-and-typography/"},"url":"https://pages-test.morlana.net/posts/text-and-typography/"}</script><title>Text and Typography | Morlana Industries</title><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"><link rel="manifest" href="/assets/img/favicons/site.webmanifest"><link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"><meta name="apple-mobile-web-app-title" content="Morlana Industries"><meta name="application-name" content="Morlana Industries"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/assets/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="/assets/css/jekyll-theme-chirpy.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.6.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css"><body><aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end"><header class="profile-wrapper"> <a href="/" id="avatar" class="rounded-circle"><img src="https://robertsspaceindustries.com/media/di49khyfxgs9ir/logo/MORINC-Logo.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a> <a class="site-title d-block" href="/">Morlana Industries</a><p class="site-subtitle fst-italic mb-0">Your Expert in Intergalactic Transport!</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class="nav"><li class="nav-item"> <a href="/" class="nav-link"> <i class="fa-fw fas fa-home"></i> <span>STARTSEITE</span> </a><li class="nav-item"> <a href="/categories/" class="nav-link"> <i class="fa-fw fas fa-stream"></i> <span>KATEGORIEN</span> </a><li class="nav-item"> <a href="/tags/" class="nav-link"> <i class="fa-fw fas fa-tags"></i> <span>TAGS</span> </a><li class="nav-item"> <a href="/archives/" class="nav-link"> <i class="fa-fw fas fa-archive"></i> <span>ARCHIV</span> </a><li class="nav-item"> <a href="/about/" class="nav-link"> <i class="fa-fw fas fa-info-circle"></i> <span>ÜBER</span> </a></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> <a href="https://morlana.link/discord" aria-label="discord" target="_blank" rel="noopener noreferrer" > <i class="fa-brands fa-discord"></i> </a> <a href="javascript:location.href = 'mailto:' + ['contact','morlana.net'].join('@')" aria-label="email" > <i class="fas fa-envelope"></i> </a> <a href="/feed.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" 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="/">Startseite</a> </span> <span>Text and Typography</span></nav><button type="button" id="sidebar-trigger" class="btn btn-link"> <i class="fas fa-bars fa-fw"></i> </button><div id="topbar-title"> Eintrag</div><button type="button" id="search-trigger" class="btn btn-link"> <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="Suche..." > </search> <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Abbrechen</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> Veröffentlicht <time data-ts="1565235180" data-df="DD.MM.YYYY" data-bs-toggle="tooltip" data-bs-placement="bottom" > 08.08.2019 </time> </span><div class="mt-3 mb-3"> <a href="//commons/devices-mockup.png" class="popup img-link preview-img blur"><img data-src="//commons/devices-mockup.png" alt="Responsive rendering of Chirpy theme on multiple devices." width="1200" height="630" data-lqip="true" src="data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA"></a><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> Von <em> <a href="https://tree.morlana.link/@Kosmos">Florian</a> </em> </span><div> <span class="readtime" data-bs-toggle="tooltip" data-bs-placement="bottom" title="592 Wörter" > <em>3 Minuten</em> Lesezeit</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">Inhalt</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"></div></dialog><div class="content"><h2 id="headings"><span class="me-2">Headings</span><a href="#headings" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h1 class="mt-4 mb-0" id="h1--heading">H1 — heading</h1><h2 data-toc-skip="" class="mt-4 mb-0" id="h2--heading">H2 — heading</h2><h3 data-toc-skip="" class="mt-4 mb-0" id="h3--heading">H3 — heading</h3><h4 data-toc-skip="" class="mt-4" id="h4--heading">H4 — heading</h4><h2 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"><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"><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>Secondly<li>Thirdly</ol><h3 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</ul></ul></ul><h3 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 class="task-list-item"><i class="fas fa-check-circle fa-fw checked"></i>Step 2<li class="task-list-item"><i class="far fa-circle fa-fw"></i>Step 3</ul></ul><h3 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<dd>the star around which the earth orbits<dt>Moon<dd>the natural satellite of the earth, visible by reflected light from the sun</dl><h2 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"><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 class="language-plaintext highlighter-rouge">tip</code> type prompt.</p></blockquote><blockquote class="prompt-info"><p>An example showing the <code class="language-plaintext highlighter-rouge">info</code> type prompt.</p></blockquote><blockquote class="prompt-warning"><p>An example showing the <code class="language-plaintext highlighter-rouge">warning</code> type prompt.</p></blockquote><blockquote class="prompt-danger"><p>An example showing the <code class="language-plaintext highlighter-rouge">danger</code> type prompt.</p></blockquote><h2 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 style="text-align: left">Contact<th style="text-align: right">Country<tbody><tr><td style="text-align: left">Alfreds Futterkiste<td style="text-align: left">Maria Anders<td style="text-align: right">Germany<tr><td style="text-align: left">Island Trading<td style="text-align: left">Helen Bennett<td style="text-align: right">UK<tr><td style="text-align: left">Magazzini Alimentari Riuniti<td style="text-align: left">Giovanni Rovelli<td style="text-align: right">Italy</table></div><h2 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"><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:footnote" role="doc-noteref"><a href="#fn:footnote" class="footnote" rel="footnote">1</a></sup>, and here is another footnote<sup id="fnref:fn-nth-2" role="doc-noteref"><a href="#fn:fn-nth-2" class="footnote" rel="footnote">2</a></sup>.</p><h2 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 class="language-plaintext highlighter-rouge">Inline Code</code>.</p><h2 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="language-plaintext filepath highlighter-rouge">/path/to/the/file.extend</code>.</p><h2 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"><span class="me-2">Common</span><a href="#common" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class="language-text highlighter-rouge"><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="Kopiert!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
|
||
</pre><td class="rouge-code"><pre>This is a common code snippet, without syntax highlight and line number.
|
||
</pre></table></code></div></div><h3 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="language-bash highlighter-rouge"><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="Kopiert!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
|
||
2
|
||
3
|
||
4
|
||
</pre><td class="rouge-code"><pre><span class="k">if</span> <span class="o">[</span> <span class="nv">$?</span> <span class="nt">-ne</span> 0 <span class="o">]</span><span class="p">;</span> <span class="k">then
|
||
</span><span class="nb">echo</span> <span class="s2">"The command was not successful."</span><span class="p">;</span>
|
||
<span class="c">#do the needful / exit</span>
|
||
<span class="k">fi</span><span class="p">;</span>
|
||
</pre></table></code></div></div><h3 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 file="_sass/jekyll-theme-chirpy.scss" class="language-sass highlighter-rouge"><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="Kopiert!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
|
||
2
|
||
3
|
||
</pre><td class="rouge-code"><pre><span class="k">@import</span>
|
||
<span class="s2">"colors/light-typography"</span><span class="o">,</span>
|
||
<span class="s2">"colors/dark-typography"</span><span class="o">;</span>
|
||
</pre></table></code></div></div><h2 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>\[\begin{equation} \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]<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>\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]<h2 id="mermaid-svg"><span class="me-2">Mermaid SVG</span><a href="#mermaid-svg" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><pre><code class="language-mermaid"> gantt
|
||
title Adding GANTT diagram functionality to mermaid
|
||
apple :a, 2017-07-20, 1w
|
||
banana :crit, b, 2017-07-23, 1d
|
||
cherry :active, c, after b a, 1d
|
||
</code></pre><h2 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"><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><p><a href="//posts/20190808/mockup.png" class="popup img-link shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> <em>Full screen width and center alignment</em></p><h3 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><p><a href="//posts/20190808/mockup.png" class="popup img-link w-75 normal shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a></p><h3 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><p><a href="//posts/20190808/mockup.png" class="popup img-link w-50 left shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> 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"><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><p><a href="//posts/20190808/mockup.png" class="popup img-link w-50 right shimmer"><img src="//posts/20190808/mockup.png" alt="Desktop View" width="972" height="589" loading="lazy"></a> 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"><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><p><a href="//posts/20190808/devtools-light.png" class="popup img-link light w-75 shadow rounded-10 shimmer"><img src="//posts/20190808/devtools-light.png" alt="light mode only" width="1212" height="668" loading="lazy"></a> <a href="//posts/20190808/devtools-dark.png" class="popup img-link dark w-75 shadow rounded-10 shimmer"><img src="//posts/20190808/devtools-dark.png" alt="dark mode only" width="1212" height="668" loading="lazy"></a></p><h2 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"><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"><ol><li id="fn:footnote" role="doc-endnote"><p>The footnote source <a href="#fnref:footnote" class="reversefootnote" role="doc-backlink">↩︎</a></p><li id="fn:fn-nth-2" role="doc-endnote"><p>The 2nd footnote source <a href="#fnref:fn-nth-2" class="reversefootnote" role="doc-backlink">↩︎</a></p></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/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"> Dieser Eintrag ist vom Autor unter <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> lizensiert.</div><div class="share-wrapper d-flex align-items-center"> <span class="share-label text-muted">Teilen</span> <span class="share-icons"> <a href="https://twitter.com/intent/tweet?text=Text%20and%20Typography%20-%20Morlana%20Industries&url=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Ftext-and-typography%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter" aria-label="Twitter"> <i class="fa-fw fa-brands fa-square-x-twitter"></i> </a> <a href="https://www.facebook.com/sharer/sharer.php?title=Text%20and%20Typography%20-%20Morlana%20Industries&u=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Ftext-and-typography%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook" aria-label="Facebook"> <i class="fa-fw fab fa-facebook-square"></i> </a> <a href="https://t.me/share/url?url=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Ftext-and-typography%2F&text=Text%20and%20Typography%20-%20Morlana%20Industries" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Telegram" aria-label="Telegram"> <i class="fa-fw fab fa-telegram"></i> </a> <button id="copy-link" aria-label="Copy link" class="btn small" data-bs-toggle="tooltip" data-bs-placement="top" title="Link kopieren" data-title-succeed="Link erfolgreich kopiert!" > <i class="fa-fw fas fa-link pe-none fs-6"></i> </button> </span></div></div></div></article></main><aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted"><div class="access"><section id="access-lastmod"><h2 class="panel-heading">Kürzlich aktualisiert</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"> <a href="/posts/customize-the-favicon/">Customize the Favicon</a><li class="text-truncate lh-lg"> <a href="/posts/getting-started/">Getting Started</a><li class="text-truncate lh-lg"> <a href="/posts/write-a-new-post/">Writing a New Post</a><li class="text-truncate lh-lg"> <a href="/posts/text-and-typography/">Text and Typography</a></ul></section><section><h2 class="panel-heading">Beliebte Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/getting-started/">getting started</a> <a class="post-tag btn btn-outline-primary" href="/tags/typography/">typography</a> <a class="post-tag btn btn-outline-primary" href="/tags/writing/">writing</a></div></section></div><section id="toc-wrapper" class="ps-0 pe-4"><h2 class="panel-heading ps-3 mb-2">Inhalt</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">Weiterlesen</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class="col"> <a href="/posts/customize-the-favicon/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565454840" data-df="DD.MM.YYYY" > 10.08.2019 </time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class="text-muted"><p>The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons...</p></div></div></a></article><article class="col"> <a href="/posts/getting-started/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565355300" data-df="DD.MM.YYYY" > 09.08.2019 </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="/posts/write-a-new-post/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565244600" data-df="DD.MM.YYYY" > 08.08.2019 </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’s worth reading even if you’ve used Jekyll before, as many features require specific variables to be set. Naming and...</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="Eintrag vorher"><p>-</p></div><a href="//posts/write-a-new-post/" class="btn btn-outline-primary" aria-label="Nächster Eintrag" ><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>2024</time> <a href="https://tree.morlana.link/@Morlana">Morlana</a>. <span data-bs-toggle="tooltip" data-bs-placement="top" title="Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0)." >Einige Rechte vorbehalten.</span></p><p>Powered by <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> with <a data-bs-toggle="tooltip" data-bs-placement="top" title="v7.1.1" href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener" >Chirpy</a> theme</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">Beliebte Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/getting-started/">getting started</a> <a class="post-tag btn btn-outline-primary" href="/tags/typography/">typography</a> <a class="post-tag btn btn-outline-primary" href="/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></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><aside id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="false" ><div class="toast-header"> <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" ></button></div><div class="toast-body text-center pt-0"><p class="px-2 mb-3">Eine neue Version ist verfügbar.</p><button type="button" class="btn btn-primary" aria-label="Update"> Neue Version </button></div></aside><script src="https://cdn.jsdelivr.net/combine/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js,npm/glightbox@3.3.0/dist/js/glightbox.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.13/dayjs.min.js,npm/dayjs@1.11.13/locale/de.js,npm/dayjs@1.11.13/plugin/relativeTime.js,npm/dayjs@1.11.13/plugin/localizedFormat.js,npm/tocbot@4.29.0/dist/tocbot.min.js,npm/mermaid@11.0.2/dist/mermaid.min.js"></script> <script src="/assets/js/dist/post.min.js"></script> <script src="/assets/js/data/mathjax.js"></script> <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js"></script> <script type="text/javascript"> function updateMermaid(event) { if (event.source === window && event.data && event.data.direction === ModeToggle.ID) { const mode = event.data.message; if (typeof mermaid === 'undefined') { return; } let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default'; let config = { theme: expectedTheme };const mermaidList = document.getElementsByClassName('mermaid'); [...mermaidList].forEach((elem) => { const svgCode = elem.previousSibling.children.item(0).innerHTML; elem.innerHTML = svgCode; elem.removeAttribute('data-processed'); }); mermaid.initialize(config); mermaid.init(undefined, '.mermaid'); } } (function () { let initTheme = 'default'; const html = document.documentElement; if ( (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') || (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches) ) { initTheme = 'dark'; } let mermaidConf = { theme: initTheme};const basicList = document.getElementsByClassName('language-mermaid'); [...basicList].forEach((elem) => { const svgCode = elem.textContent; const backup = elem.parentElement; backup.classList.add('d-none');let mermaid = document.createElement('pre'); mermaid.classList.add('mermaid'); const text = document.createTextNode(svgCode); mermaid.appendChild(text); backup.after(mermaid); }); mermaid.initialize(mermaidConf); window.addEventListener('message', updateMermaid); })(); </script> <script defer src="/app.min.js?baseurl=/®ister=true" ></script> <script>SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('search-results'), json: '/assets/js/data/search.json', searchResultTemplate: '<article class="px-1 px-sm-2 px-lg-4 px-xl-0"><header><h2><a href="{url}">{title}</a></h2><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags}</div></header><p>{snippet}</p></article>', noResultsText: '<p class="mt-5">Ups! Keine Einträge gefunden.</p>', templateMiddleware: function(prop, value, template) { if (prop === 'categories') { if (value === '') { return `${value}`; } else { return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`; } } if (prop === 'tags') { if (value === '') { return `${value}`; } else { return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`; } } } }); </script>
|