22 lines
39 KiB
HTML
22 lines
39 KiB
HTML
<!doctype html><html lang="en" ><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="cotes" /><meta property="og:locale" content="en" /><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://asandikci.com/posts/text-and-typography/" /><meta property="og:url" content="https://asandikci.com/posts/text-and-typography/" /><meta property="og:site_name" content="Aliberk Sandıkçı" /><meta property="og:image" content="https://asandikci.com//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-08T06:33:00+03:00" /><meta name="twitter:card" content="summary_large_image" /><meta property="twitter:image" content="https://asandikci.com//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":"cotes"},"dateModified":"2024-07-02T01:00:39+03:00","datePublished":"2019-08-08T06:33:00+03: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://asandikci.com//commons/devices-mockup.png","@type":"imageObject"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://asandikci.com/posts/text-and-typography/"},"url":"https://asandikci.com/posts/text-and-typography/"}</script><title>Text and Typography | Aliberk Sandıkçı</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="Aliberk Sandıkçı"><meta name="application-name" content="Aliberk Sandıkçı"><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="https://cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css" /><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/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous" /><link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css" /><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/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" /> <script type="text/javascript"> class ModeToggle { static get MODE_KEY() { return 'mode'; } static get MODE_ATTR() { return 'data-mode'; } static get DARK_MODE() { return 'dark'; } static get LIGHT_MODE() { return 'light'; } static get ID() { return 'mode-toggle'; } constructor() { let self = this;this.sysDarkPrefers.addEventListener('change', () => { if (self.hasMode) { self.clearMode(); } self.notify(); }); if (!this.hasMode) { return; } if (this.isDarkMode) { this.setDark(); } else { this.setLight(); } } get sysDarkPrefers() { return window.matchMedia('(prefers-color-scheme: dark)'); } get isPreferDark() { return this.sysDarkPrefers.matches; } get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; } get hasMode() { return this.mode != null; } get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }get modeStatus() { if (this.hasMode) { return this.mode; } else { return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE; } } setDark() { document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE); sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE); } setLight() { document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE); sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE); } clearMode() { document.documentElement.removeAttribute(ModeToggle.MODE_ATTR); sessionStorage.removeItem(ModeToggle.MODE_KEY); }notify() { window.postMessage( { direction: ModeToggle.ID, message: this.modeStatus }, '*' ); } flipMode() { if (this.hasMode) { this.clearMode(); } else { if (this.isPreferDark) { this.setLight(); } else { this.setDark(); } } this.notify(); } } const modeToggle = new ModeToggle(); </script><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://asandikci.com/assets/img/pp.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a> <a class="site-title d-block" href="/">Aliberk Sandıkçı</a><p class="site-subtitle fst-italic mb-0">Personal Website & Blog</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class="nav"><li class="nav-item"> <a href="/about/" class="nav-link"> <i class="fa-fw fas fa-info-circle"></i> <span>ABOUT</span> </a><li class="nav-item"> <a href="/now/" class="nav-link"> <i class="fa-fw fa-solid fa-clock"></i> <span>NOW</span> </a><li class="nav-item"> <a href="/categories/" class="nav-link"> <i class="fa-fw fas fa-stream"></i> <span>CATEGORIES</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>ARCHIVES</span> </a><li class="nav-item"> <a href="/donate/" class="nav-link"> <i class="fa-fw fa-solid fa-mug-hot"></i> <span>DONATE</span> </a></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://git.asandikci.com/asandikci" aria-label="forgejo" target="_blank" rel="noopener noreferrer" > <i class="fa-solid fa-code-branch"></i> </a> <a href="xmpp:asandikci@aliberksandikci.com.tr" aria-label="xmpp" target="_blank" rel="noopener noreferrer" > <i class="fa fa-xmpp"></i> </a> <a href="javascript:location.href = 'mailto:' + ['contact','aliberksandikci.com.tr'].join('@')" aria-label="email" target="_blank" rel="noopener noreferrer" > <i class="fas fa-envelope"></i> </a> <a href="https://mastodon.social/@asandikci/" aria-label="mastodon" target="_blank" rel="noopener noreferrer me" > <i class="fa fa-mastodon"></i> </a> <a href="https://linkedin.com/in/asandikci" aria-label="linkedin" target="_blank" rel="noopener noreferrer" > <i class="fab fa-linkedin"></i> </a> <a href="https://discord.com/users/987999573479944222" aria-label="discord" target="_blank" rel="noopener noreferrer" > <i class="fa fa-discord"></i> </a> <a href="https://instagram.com/aliberksandikci" aria-label="instagram" target="_blank" rel="noopener noreferrer" > <i class="fa fa-instagram"></i> </a> <a href="https://codeberg.org/asandikci" aria-label="codeberg" target="_blank" rel="noopener noreferrer" > <i class="fl-codeberg"></i> </a> <a href="https://github.com/asandikci" aria-label="github" target="_blank" rel="noopener noreferrer" > <i class="fa-github"></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="/">Home</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"> Post</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="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" > Aug 8, 2019 </time> </span> <span> Updated <time data-ts="1719871239" data-df="ll" data-bs-toggle="tooltip" data-bs-placement="bottom" > Jul 2, 2024 </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> By <em> </em> </span><div> <span class="readtime" data-bs-toggle="tooltip" data-bs-placement="bottom" title="592 words" > <em>3 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"></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="Copied!"><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="Copied!"><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="Copied!"><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"> This post is licensed under <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> by the author.</div><div class="share-wrapper d-flex align-items-center"> <span class="share-label text-muted">Share</span> <span class="share-icons"> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Linkedin" aria-label="Linkedin"> <i class="fa-fw fab fa-linkedin"></i> </a> <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script> <button class="btn text-start" data-bs-toggle="tooltip" data-bs-placement="top" title="Mastodon" aria-label="Mastodon"> <share-to-mastodon class="share-mastodon" message="Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" url="https%3A%2F%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F"customInstanceList="[{"label":"mastodon.social","link":"https://mastodon.social/"},{"label":"mastodon.online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"mastodon.com.tr","link":"https://mastodon.com.tr/"}]" > <i class="fa-fw fa fa-mastodon"></i> </share-to-mastodon> </button> <a href="https://twitter.com/intent/tweet?text=Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&url=https%3A%2F%2Fasandikci.com%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-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&u=https%3A%2F%2Fasandikci.com%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%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F&text=Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" 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> <a href="https://bsky.app/intent/compose?text=Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1%20https%3A%2F%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Bluesky" aria-label="Bluesky"> <i class="fa-fw fa-brands fa-bluesky"></i> </a> <a href="https://www.reddit.com/submit?url=https%3A%2F%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F&title=Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Reddit" aria-label="Reddit"> <i class="fa-fw fa-brands fa-square-reddit"></i> </a> <a href="https://www.threads.net/intent/post?text=Text%20and%20Typography%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1%20https%3A%2F%2Fasandikci.com%2Fposts%2Ftext-and-typography%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Threads" aria-label="Threads"> <i class="fa-fw fa-brands fa-square-threads"></i> </a> <button id="copy-link" aria-label="Copy link" class="btn small" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy link" data-title-succeed="Link copied successfully!" > <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">Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"> <a href="/posts/getting-started/">Getting Started</a><li class="text-truncate lh-lg"> <a href="/posts/tusas-gezisi/">TUSAŞ Gezisi</a><li class="text-truncate lh-lg"> <a href="/posts/pardus-ve-windows/">Pardus/Linux Yanına Windows Kurulumu</a><li class="text-truncate lh-lg"> <a href="/posts/text-and-typography/">Text and Typography</a><li class="text-truncate lh-lg"> <a href="/posts/write-a-new-post/">Writing a New Post</a></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="/tags/duzenlenecek/">duzenlenecek</a> <a class="post-tag btn btn-outline-primary" href="/tags/pardus/">pardus</a> <a class="post-tag btn btn-outline-primary" href="/tags/linux/">linux</a> <a class="post-tag btn btn-outline-primary" href="/tags/tubitak/">tubitak</a> <a class="post-tag btn btn-outline-primary" href="/tags/app-recommendations/">app-recommendations</a> <a class="post-tag btn btn-outline-primary" href="/tags/arch/">arch</a> <a class="post-tag btn btn-outline-primary" href="/tags/debian/">debian</a> <a class="post-tag btn btn-outline-primary" href="/tags/epson/">epson</a> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/foss/">foss</a></div></section></div><section id="toc-wrapper" class="ps-0 pe-4"><h2 class="panel-heading ps-3 mb-2">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="/posts/customize-the-favicon/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565454840" data-df="ll" > Aug 10, 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="ll" > Aug 9, 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="ll" > Aug 8, 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="Older"><p>-</p></div><a href="//posts/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>2024</time> <a href="https://git.asandikci.com/asandikci">Aliberk Sandıkçı</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="v7.1.1" href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener" >Chirpy</a> theme for <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</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="/tags/duzenlenecek/">duzenlenecek</a> <a class="post-tag btn btn-outline-primary" href="/tags/pardus/">pardus</a> <a class="post-tag btn btn-outline-primary" href="/tags/linux/">linux</a> <a class="post-tag btn btn-outline-primary" href="/tags/tubitak/">tubitak</a> <a class="post-tag btn btn-outline-primary" href="/tags/app-recommendations/">app-recommendations</a> <a class="post-tag btn btn-outline-primary" href="/tags/arch/">arch</a> <a class="post-tag btn btn-outline-primary" href="/tags/debian/">debian</a> <a class="post-tag btn btn-outline-primary" href="/tags/epson/">epson</a> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/foss/">foss</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">A new version of content is available.</p><button type="button" class="btn btn-primary" aria-label="Update"> Update </button></div></aside><script src="/assets/js/user/copy.js"></script> <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/en.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 defer src="analytics.yayindasin.org/script.js" data-website-id="80f4b239-3529-46be-b7a1-df82c6967a87" ></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">Oops! No results found.</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>
|